shaosiming

CSS初始公共样式和清除默认样式的写法

大家都知道,在浏览器中通常都会含有默认的样式,User Agent Stylesheet。意识就是说当某个class元素我们没有写入css样式的时候,浏览器就会用默认的样式展示这个元素的样式。...

关键词: CSS 样式 默认
时间:2019-09-20
查看:
评论:0 条 / 我也去评论
大家都知道,在浏览器中通常都会含有默认的样式,User Agent Stylesheet。意识就是说当某个class元素我们没有写入css样式的时候,浏览器就会用默认的样式展示这个元素的样式。

所以,我们才要在最开始就在css样式表内写入* {padding:0;marging:0};意识就是要覆盖掉所有属性内外间距。按时考虑到不同的浏览器,在某些元素上面还是会有不同的差异,所以,为了达到统一公共样式,我们还是需要分别写出来。

不然的话,可能一个CSS样式只能在某一种浏览器上面展示的很完美,可能在另外一种浏览器上面就很糟糕,比较混乱,因为每个浏览器的默认样式都不是不同的,所以,如果我们不覆盖掉,那么在不同的浏览器里面就会展示不同的样式。

其实User Agent Stylesheet的优先级很低的,几乎上就是最底层,只有没有这个CSS样式的时候,才会使用默认的浏览器样式,所以,写一份共用的CSS样式表还是很有必要的,用处就是覆盖掉浏览器默认的样式,这样才能达到整个网站或者所有浏览器的统一性。

而一般常用的包括有body,div,a,img,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6等一些比较常见切常用的属性,比如说我的网站几乎就只用到这几种属性,其他的看大家需要情况而定,总之如果想达到某个属性的统一,就必须给他写入一个公用的样式。

以达到覆盖掉浏览器默认样式的作用,否则可能相同的元素在不同的浏览器里面展示就是不相同的,也就造成了比较混乱的结果。不只是我说的这些元素,还有很多很多,具体的大家可以参考一些文档之类的。

如果说,我们使用的元素不是很多,那么我这里就给大家准备了一些比较基础的元素样式,大家可以参考一下。总之就是,用到什么元素可以搜寻一下这个元素的默认样式,然后加进去覆盖浏览器默认就行了,可不只是我说的这些!

简单的说就是每次开始写一个CSS样式表的时候,只需要把这些代码复制进去了,也可以修改自己喜欢的样式,然后才能达到每个浏览器都能使用我们设置的样式,而不是每个浏览器单独的默认样式。

html{color:#000;background:#FFF;} 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
font-weight:normal; 
} 
ol,ul { 
list-style:none; 
} 
caption,th { 
text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border:0; 
} 

顶一下  
(2)
  100%
踩一下  
(0)
  0%
  • 本文标题:CSS初始公共样式和清除默认样式的写法
  • 本文链接:https://www.shaosiming.net/html/news/48.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0
      还没有评论,快来抢沙发吧!

    css中怎么写自适应,跟随分辨率改变宽度

    如今随着移动端的崛起,越来越多的网站开发了手机APP客户端,但是作为个人站长,开发APP着实有点难弄~ 所以,自适应就解...

    css   css3   自适应   
    2019-09-16
    182
    0

    CSS3鼠标焦点滑过过渡延迟展示效果的代码

    在鼠标经过或者停留的时候,由一种状态展示位另一种状态。在css3之前,hover属性是没有任何过渡或者特效动画的。...

    CSS   CSS3   焦点   hover   
    2019-09-12
    111
    0

    通过CSS3控制鼠标滑过图片缩放效果

    大家都知道,一般需要用到特效的时候,大部分都是用JS来操作,可是从CSS3流行以后,有了很多特效可以通过CSS来实现。相对...

    CSS3   CSS   图片缩放   
    2019-09-03
    162
    0

    关于CSS横着写还是竖着写?区别是什么?

    今天突发奇想,想到一个问题,就是关于CSS的写法,有人喜欢横着写,有人喜欢换行竖着写,到底有什么区别呢? 于是乎,...

    CSS   CSS3   CSS写法   
    2019-09-02
    78
    1