【CSS】重点记录

以下内容均为个人学习笔记。

CSS 样式

多页面应用同一个样式
通常保存在外部的独立的.css文件（该文件不属于任何页面文件）可以在多个页面中使用同一个CSS样式表。通过在任何的页面文件中引用.css文件，你可以设置具有一致风格的多个页面。

样式层叠
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

样式层叠次序
当同一个 HTML 元素定义了多个样式时，应该使用哪个样式？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:


CSS

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS 颜色值的写法

注意：当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以id属性来设置 id 选择器,CSS 中 id 选择器以 "#" 来定义。

#para1 {
  text-align:center;
  color:red;
}

注意：id 属性不要以数字开头，数字开头的 id 在 Mozilla/Firefox 浏览器中不起作用。
注意：id 属性只能在每个 HTML 文档中出现一次。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 "." 号显示。

.center {text-align:center;}

你也可以指定特定的 HTML 元素使用class。

p.center {text-align:center;}

注意： 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

注意：不要在属性值与单位之间留有空格。假如你使用 margin-left: 20 px 而不是 margin-left: 20px ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 head 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

注意：如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。

多重样式优先级深入理解

优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

多重样式优先级顺序

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

  1. 通用选择器（*）
  2. 元素(类型)选择器
  3. 类选择器
  4. 属性选择器
  5. 伪类
  6. ID 选择器
  7. 内联样式

!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !important

权重计算

权重计算

以下是对于上图的解释：

  • 内联样式表的权值最高 1000
  • ID 选择器的权值为 100
  • Class 类选择器的权值为 10
  • HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，em 显示蓝色，我们提供了详细的代码参考：

<html>    
<head>    
<style type="text/css">    
#redP p {    
/* 权值 = 100+1=101 */    
color:#F00;  /* 红色 */    
}    

#redP .red em {    
/* 权值 = 100+10+1=111 */    
color:#00F; /* 蓝色 */    
}    

#redP p span em {    
/* 权值 = 100+1+1+1=103 */    
color:#FF0;/*黄色*/    
}    

</style>    
</head>    
<body>    
<div id="redP">   
<p class="red">red   
<span><em>em red</em></span>    
</p>    
<p>red</p>    
</div>    
</body>   
</html>

CSS 优先级法则：

  • A 选择器都有一个权值，权值越大越优先；
  • B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
  • C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
  • D 继承的CSS 样式不如后来指定的CSS 样式；
  • E 在同一组属性设置中标有"!important"规则的优先级最大；

CSS Background

注意：你可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。
注意：background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
注意：让背景图像不影响文本的排版
注意：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

CSS Text

注意：对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
注意：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
注意：我们不建议强调指出不是链接的文本，因为这常常混淆用户。

CSS Fonts

注意：在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
注意：除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

注意：如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
注意：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

CSS Link

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited后面
  • a:active 必须跟在 a:hover后面

CSS 盒子模型

盒子模型

不同部分的说明：

  • Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
  • Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
  • Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
  • Content（内容） - 盒子的内容，显示文本和图像

注意：在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

CSS Border

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

border-style属性可以有1-4个值：
border-style:dotted solid double dashed;

  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed


border-style:dotted solid double;

  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double


border-style:dotted solid;

  • 上、底边框是 dotted
  • 左、右边框是 solid


border-style:dotted;

  • 四面边框是 dotted

CSS Padding

注意：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。

CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。

注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

CSS 分组和嵌套

提示：您可以对任意多个选择器进行分组，CSS 对此没有任何限制。

CSS Display 与 Visibility

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS 组合选择符

在 CSS3 中包含了四种组合方式:

  • 后代选取器(以空格分隔)
    后代选取器匹配所有指定元素的后代元素。

  • 子元素选择器(以大于号分隔）
    与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

  • 相邻兄弟选择器（以加号分隔）
    相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
    如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

  • 普通兄弟选择器（以波浪号分隔）
    普通兄弟选择器选取所有指定元素的相邻兄弟元素。

CSS 伪类

CSS伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

语法
伪类的语法：
selector:pseudo-class {property:value;}

CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}

anchor伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

CSS 属性选择器

CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。

<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>

<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="w3cschool" href="http://w3cschool.cn">w3cschool</a>
<hr>
<h2>Will not apply to:</h2>
<p>Hello!</p>
</body>
</html>

属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

[title~=hello] { color:blue; }

下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

[lang|=en] { color:blue; }

表单样式
属性选择器样式无需使用class或id的形式:

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

CSS 选择器

CSS选择器效率从高到低的排序如下：

  1. id选择器（#myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div,h1,p）
  4. 相邻选择器（h1+p）
  5. 子选择器（ul > li）
  6. 后代选择器（li a）
  7. 通配符选择器（*）
  8. 属性选择器（a[rel="external"]）
  9. 伪类选择器（a:hover, li:nth-child）

对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高：
注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后：

.class1 {  
    color: black;  
}  
 
.class2 {  
    color: red;  
}

而某个元素指定class时采用 class="class2 class1"这种方式指定，此时虽然class1在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高，color的属性为red，而非black。

如果要让某个样式的优先级变高，可以使用!important来指定：

.class1 {  
    color: black !important;  
}  
  
.class2 {  
    color: red;  
}

此时class将使用black，而非red。

首先需要明确的是，很多情况都会导致一个元素被运用上多种样式，样式覆盖的规则也需要根据不同的情况来定，具体规则如下。
规则一：由于继承而发生样式冲突时，最近祖先获胜。
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
规则三：直接指定的样式发生冲突时，样式权值高者获胜。

权值定义表

可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。
由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。
规则五：!important的样式属性不被覆盖。
!important可以看做是万不得已的时候，打破上述四个规则的”金手指”。如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important，以规则四的例子为例，”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖，不能滥用!important。

当我们写CSS的时候需要注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

第一个数字(a)通常就是0，除非在标签上使用style属性；
第二个数字(b)是该选择器上的id的数量的总和；
第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
通用选择器(*)是0优先级；
如果两个选择器有同样的优先级，在样式表中后面的那个起作用。
让我们看几个例子，这样或许比较容易理解些：

#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS要点记录
    CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,193评论 0赞 0
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0赞 1
  • CSS1
    第一章 F12: element.style 内联样式（可以直接在上面写代码进行简单调试） user agent...
    fastwe阅读 1,560评论 0赞 0
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,342评论 0赞 11
  • 十·CSS常用样式
    1.块级元素和行内元素 块级(block-level)元素；行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,055评论 1赞 4