CSS | CSS权威指南CSS2定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后原色的样式。显然，每

选择器

元素选择器：选择例如h1等的元素

    h2 { color : silver; }

分组：

    h2,h3,h4 { color : purple; }

通配选择器：

    * { color : grey; }

类选择器和ID选择器

类选择器

    <p class="warning"> example </p>

    .warning { font-weight:bold }

多类选择器

   <p class="warning urgent"> example </p>

    .warning { font-weight:bold }
    .urgent { font-style:italic; }

id选择器

    <p id="lead-para"> example </p>

    #lead-para { font-weight:bold }

类选择器还是id选择器？

id选择器会使用一次，而且仅一次，ID选择器不能结合使用

属性选择器

    <h1 class="hoopla">Hello<h1>
    <h1 class="severse">Hello<h1>
    <h1 class="fancy">Hello<h1>

    h1[class] { color:silver; }
  
    <!--同时将href和title属性的HTML超链接的文本设置为粗体-->
    a[href][title]{ font-weight:bold; }
  
    plant[moons='1']{ font-weight:bold; }

    <p class="urgent warning">Hello</p>

   p[class~="warning"] { font-weight:bold }

字串匹配属性选择器

类型	描述
[foo^="bar"]	匹配以bar开头的所有元素
[foo$="bar"]	匹配以bar结尾的所有元素
[foo*="bar"]	匹配包含字串bar开头的所有元素

使用文档结构

后代选择器

    <!--选择h1的后代em-->
   h1 em { color:gray; }
   
   ul ol ul em { color:gray }

选择子元素

   <h1>This is  <strong> very </strong> important </h1>
   <h1>This is <em> <strong> very </strong> important </em> </h1>

  <!-- 作用与第一个的stronog，第二个不受影响 -->
  h1 > strong { color:red; }

选择相邻兄弟元素

    <!--选择紧接在一个h1元素后出现的所有段落，它们具有相同的父元素-->
    h1 + p { margin-top:0; }

伪类和伪元素

伪类选择器

链接伪类

    <!--改变所有的a链接点击后的颜色-->
    a:visited { color:yellow; }
    
    <!--改变所有的a链接的颜色以及加下划线-->
    a:visited { color:blue; text-decoration:line-though}

动态伪类

伪类名	描述
:hover	指示鼠标指针停留在哪个元素上
:active	指示被用户输入激活的元素

   input:focus { background:silver;font-weight:bold;}

选择第一个子元素

   p:first-child { font-weight:bold; }
   li:first-child { text-transform:uppercase; }

伪元素选择器

CSS2定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后原色的样式。

    h2:first-letter { font-size:200%; }
    p:first-line { font-weight:bold; }
    
    <!--每个h2元素前加一对银色中括号-->
    h2:before { content:"}}";color:silver;}
    
    body:after { content:" The End";}

2019-10-27

结构和层叠

特殊性

    h1 { color: red; }
    body h1 { color:green;}

显然，每对规则中只有一个胜出。
选择器的特殊性由选择器本身的额组件确定。特殊性值表述为4个部分，如：0,0,0,0.

对于选择器中给定的各个类属性值，加 0,1,0,0
对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0。
对于选择器中给定的各个元素的伪元素，加0,0,0,1。

声明和特殊性

    h1,h2.section { color:silver;background:black; }

用户代理将把它处理为：

h1 { color:silver; } /*0,0,0,1*/
h1 { background:black; } /*0,0,0,1*/
h2.section { color:silver; } /* 0,0,1,1 */
h2.section{ background:black; } /* 0,0,1,0 */

通配选择器特殊性

通配选择器对一个选择器的特殊性没有贡献。

ID和属性选择器的特殊性

第二个0,ID选择器和指定id属性的属性选择器再特殊性上有所不同

内联样式特殊性

第一个0是为内联样式声明保留的，它比所有其他声明的特殊性都高。

重要性

再声明的结束分号之前插入！important来标志。

p.dark{color:#333 !important; background:white;}

重要规则总会胜出。

继承

如果向一个h1元素应用一个颜色，那么这个颜色将应用到h1中的所有文本，甚至应用到该h1中所有文本，甚至应用到该h1的子元素中的文本。

重要的几点

有些属性不能继承，这往往对因与一个简单的常识。例如，属性border就不继承。
一般地，大多数框模型属性（包括内边距，外边距，背景和边框）都不能继承。
继承的值根本没有特殊性，甚至连0特殊性都没有。

层叠

考虑以下规则

    h1 {color:red;}
    h1 {color:blue;}

这两个规则的特殊性都是0,0,0,1，所以它们的权重相等。

按权重和来源排序

如果两个样式规则应用到同一个元素，其中有一个规则有！important标志，这个重要规则将胜出。

    p {color:gray !important;}
    <p style = "color: black;>Well,<em>Hello</em> there !</p>

按特殊性排序

如果向一个元素应用多个彼此冲突的声明，而且它们的权重先通过通，则要按特殊性排序，最特殊的声明最优先。

    p#bright{ color:silver; }
    p {color:black;}
    <p id="bright">Well,hello there!</p>

给定以上所示的规则，段落的文本将是银色，因为p#bright的特殊性（0,1,0,1）大于p的特殊性（0,0,0,1）大于p的特殊性（0,0,0,1），尽管后一条规则再样式表中交后出现。

按顺序排序

如果两个规则的权重、来源和特殊性完全相同，那么再样式表中后出现的一个会和胜出。

    h1{color:red;}
    h1{color:blue;}

因为指定blue的规则在样式表中较后出现，所以文档中所有h1元素的color值将是blue，而不是red。
在CSS2中内联样式声明的特殊性要高于所有样式表选择器。
正式由于这种按顺序排序，所以才有了通常推荐的链样式顺序。一般建议按link-visited-hover-active(LVHA)的顺序声明链接样式。\

非CSS表现提示

文档中可能包含非CSS的表现提示，例如font元素。非CSS提示被处理为特殊性为0,并出现在创作人员的前面。

值和单位

在利用css能做的几乎所有工作中，其基础都是单位（units），这是影响所有属性的颜色、距离和大小的一种元素。

数字

以下都是合法的数字值：15.5,-270.00004和5.

百分数

百分数值时一个计算得出的实数。

颜色

采用red这种颜色，或者十六进制代码。

命名颜色

有17个：aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

用RGB指定颜色

函数式RGB颜色

rgb（color）

16进制RGB颜色

    h1 { color:#FF0000 }

如果组成十六进制的三组数是各自成对的，CSS可以采用简写记法。如#000;

Web安全颜色

所谓 "Web" 安全颜色是指，在256色计算机系统上总能避免抖动的颜色。Web安全颜色可以表示为RGB值20%和51（相应的十六进制值为33）的倍数。例如rgb（40%,100%,80%），rgb（0,204,153）。

长度单位

绝对长度单位

英寸（in）
厘米（cm）
毫米（mm）
点（pt）
派卡（pc）

相对长度单位

共有三种相对长度单位：em、ex和px。

em和ex单位

1个“em”定义为一种给定字体的font-size值。如果一个元素的font-size为14像素，那么对于该元素，1em就是14像素。

    h1{font-size:24px;}
    h2{font-size:18px;}
    p {font-size:12px;}
    h1,h2,p {margin-left:1em;}

假设一个h1的字体大小为24像素，一个h2元素的字体大小为18像素，还有一个段落的字体大小为12像素。如果将所有这三个元素的左边距都设置为1em,那么它们的左边距就分别为24像素、18像素和12像素。
与此同时，ex是指所有字体中小写x的高度。

URL

如果需要引用一个URL(如@important语句中，导入外部样式表时就会使用这条语句)

    url(protocol://server/pathname)

这个例子定义了一个所谓的绝对URL。在css文件中，使用@import语句指向另一个样式表：

    @import url(special/toppings.css);

url和开始括号之间不能有空格

关键字

关键字none。
如果两个属性都使用同一个字作为关键字，一个属性的关键字与另一个属性的同一个关键字可能就有不同的行为。

inherit

inherit使一个属性的值与其父元素的值相同。大多数情况下，不必指定继承。

CSS2单位

角度值：分为度（deg）、梯度（grad）和弧度（rad），范围为0～360。
时间值：毫秒（ms）和秒（s）。1s=1000ms。

字体

字体系列

CSS定义了5种字体

Serif 字体
San-serif字体
Monospace字体
Cursive字体
Fantasy字体

使用通用字体系列

font-family:[[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit

如果你希望文档使用一种sans-serif字体，但是你并不关心是哪一中具体字体，以下就是一个合适的声明：

body{ font-family:sans-serif; }

使用指定字体

body{ font-family:Georgia,serif; }

字体加粗

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

font-weight:bold;

让字体更粗

如果将一个元素的加粗设置为bolder，用户代理首先必须确认从父元素继承的font—weight值。

p { font-weight:normal; }
p em { font-weight:bolder; }

风格和变形

有风格的字体

font-style: italic | oblique | normal | inherit

字体变形

font-variant: small-caps | normal | inherit

small-caps要求使用小型大写字母文本。

拉伸和调整字体

font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

font属性

font:[[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | capion | icon | menu | message-box | small-caption | status-bar | inherit

使用系统字体

caption 用于有标题的控件，如按钮。
icon 用于对图标加标签
menu 用于菜单，即下拉菜单和菜单列表
message-box 用于对话框
small-caption 用于对小控件加标签
status-bar 用于窗口状态条

例如你想把一个按钮的字体设置为操作系统中的按钮字体完全相同。

button{ font:caption; }

文本属性

缩进和水平对齐

缩进文本

应用场景：将Web页面上一个段落的第一行缩进

text-indent:<length> | <percentage> | inherit
应用于块级元素

<!--使所有段落的首行缩进3em -->
p { text-indent:3em; }

水平对齐

text-align: left | center | right | justify | inherit
应用与块级元素

justify为两端对齐

垂直对齐

行高

line-height: <length> | <percentage> | <number> | normal | inherit
应用与所有元素

line-height属性是指文本行基线之间的距离，而不是字体的大小，它驱定了将各个元素框的高度增加或减少多少。

构造文本行

文本行中的每个元素都会生成一个内容区，这由字体的大小确定。这个内容则会生成一个行内框（inline box），如果不存在其他因素，这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是增加和减少各行内框高度的因素之一。

举个例子：假设font-size为14像素高（相应地，内容区的高度也是14像素），而且line-height计算为18像素。其差（4像素）除以2,将其一般分别应用到内容区的顶部和底部。这会得到一个18像素高的行内框，再内容区的上面和下面分别有2个额外的像素。

垂直对齐文本

如果用曾用过元素sub和sup，或者曾用过 <img src="foo.gif" align="middle"> 之类标记的图像，说明你已经做过一些基本的垂直对齐。在CSS中，vertical-align属性只应用于行内元素和替换元素。

基线对齐

vertical-align:baseline

该属性要求一个元素的基线与其父元素的基线对齐。也就是一行中所有的文本元素的底端都对齐。

上标和下标

vertical-align:sub | super;

该属性会使一个元素变成下标

底端/顶端对齐

vertical-align:bottom | top

bottom属性将元素行内框的底端与行框的底端对齐。
top与其相反。

居中对齐

middle会把行内元素框的中点与复原苏基线上方0.5ex处的一个点对其，这里1ex相对于复元素的font-size定义。

字间隔和字母间隔

字间隔

word-spacing : <length> | normal | inherit 应用与所有元素

字母间隔

letter-spacing : <length> | normal | inherit

文本转换

text-transform: uppercase | lowercase | capitalize | none | inherit

文本装饰

text-decoration: none | [underline || overline || line-throught || blink ]| inherit

overline 会在文本顶端画一个上划线
blink会让文本闪烁
none会关闭原本应用到一个元素上的所有装饰

文本阴影

text-shadow: none | [<color> || <length><lenght><length>?,]* [<color> || <length><length><length>?] | inherit

text-shadow:green 5px 0.5em;

相对于文本向右偏移5像素向下偏移0.5em的绿色阴影
模糊半径定义为从阴影轮廓到模糊效果边界的距离。如果半径为2像素，模糊效果就会作用与阴影轮廓到模糊边界之间的空间。

    p.cl1{color:black;text-shadow:silver 2px 2px 2px}
    p.cl2{color:white;text-shadow:0 0 4px black;}
    p.cl3{color:black;text-shadow:1em 1em 5px gray, -1em -1em silver;}

处理空白符

浏览器会把所有空白符合并为一个空格。

文本方向

CSS | CSS权威指南

选择器