css(杂记)

CSS中的伪类有：

• :link——未访问过的链接；
• :visited——访问过的链接；
• :hover——鼠标悬停的元素；
• :focus——获取焦点的元素；
• :active——激活的元素（例如一个被单击的链接元素）；
• :first-child——作为其他元素第一个子元素的元素；
• :lang()——根据元素的lang属性确定的元素。
• :target
• :root
• :nth-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type
• :only-child
• :last-child
• :empty
• :not()
• :enabled
• :disabled
• :checked

CSS2.1中的伪元素有：

• ::first-line
• ::first-letter
• ::before
• ::after

那么区别在哪儿呢？区别就在于这些伪选择器影响文档的方式不同。伪类的表现有点儿像给文档添加类，而伪元素的效果就好像有元素被插入到了文档中。

特殊性可以来判断优先级

• 每个元素描述符贡献0,0,0,1；
• 每个类、伪类或者属性描述符贡献0,0,1,0；
• 每个ID描述符贡献0,1,0,0。

a[href*="w3.org"] {font-weight: bold;}
选择所有URL中包含w3.org的链接元素

a[href^="http"]
a[href$=".pdf"]
只查找属性值的开头或结尾部分

p~ul选择前面有<p>元素的每个<ul>元素，即选择p之后出现的所有ul

css中“>”是css3中特有的选择器，A>B表示选择A元素的所有子B元素，与A B不同的是，A B选择所有后代元素，为A>B只选择一代。

A B{}选择A所有的后代B元素

A>B{}选择A的一代B元素

A+B{}这个+是选择相邻兄弟，称作“相邻兄弟选择器”，如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器，例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

　　h1 + p {margin-top:50px;}
  
波浪号作为选择符，允许选择后续的兄弟元素，但不包含直接相邻的兄弟元素。
h1 ~ ul {list-style-type: lower-alpha;}

line-height（行高）属性既可以接受无单位的数值，也可以使用带单位的行高值。那么它们之间有什么区别呢？当你定义了一个有单位的值，例如1em或者100%时，就会将计算后的行高值传给全部的后代元素。而无单位的行高值不会传导到后代元素。

.hide {visibility: hidden;}
该规则会使元素不可见，这可能听上去像是元素没有`display`属性。然而，这里有个很关键的差异：被设置成`visibility:　hidden`的元素仍然参与页面布局

设置打印样式
将这些打印样式应用到屏幕媒介上，把其他的屏幕样式取消，如图3-11所示。因此，需要把print改为screen并且把原来存在的screen值改为其他的media值。一般会使用tty这个值，因为这是跟screen最不搭边的媒介了，并且它很短，输入很方便。

<link type="text/css" rel="stylesheet" href="basic.css" media="tty">
<link type="text/css" rel="stylesheet" href="theme.css" media="tty">
<link type="text/css" rel="stylesheet" href="print.css" media="screen">

通用样式

body {padding: 0; margin: 0;}
消除所有浏览器的装订距离

ul, ol {margin-left: 0; padding-left: 0;}

轮廓outline和div的区别
1、边框是参与布局的，而轮廓并不参与。
2、轮廓必然是环绕着元素的，并且在元素的四周永远保持一致。换种说法就是，你不能像设置边框那样只设置左轮廓或者上轮廓

清除浮动：

div#footer {clear: left;}

清除浮动最简单的办法就是在文档中插入一个元素，并设置它的clear（清除）属性。

<br class="clearfix">

.clearfix {display: block; clear: both;
font-size: 0; height: 0;}

em和rem相对于px更具有灵活性，他们是相对长度单位，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
em

• 子元素字体大小的em是相对于父元素字体大小
• 元素的width/height/padding/margin用em的话是相对于该元素的font-size

列出使用的各种媒体类型

1. aural - 用于语音和音频合成器
2. print - 用于打印机
3. projection - 用于方案展示，比如幻灯片
4. handheld - 用于小的手持的设备
5. screen - 用于电脑显示器