CSS总结2

浮动与清除
在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。
浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后，
原来紧跟其后的元素就会在空间允许的情况下，向上提升到浮动元素平起平坐。
如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。
浮动(float)的三个属性值：left(左浮动),right(右浮动),none.
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both

字体相关属性
color:该属性用于控制字体颜色，该属性值包括字符类型的颜色名、十六进制的颜色值、rgb(255,255,255)值。还有CSS3提供的HSL颜色值。
font-famliy:设置文字的字体。因为浏览器内嵌字体的支持，该属性可以设置多个显示字体，
浏览器按该属性指定的多个字体依次搜索，以优先找到的字体来显示文字，
多个属性值之间用逗号(,)隔开。
font-size:设置字体的大小。此处的字体大小分为相对字体大小和绝对字体大小。
还可以使用关键字。例如：medium,saml,large,samller,larger等
绝对字体大小：使用像素(px),点(pt),皮卡(pc),英寸(in)来设置字体的大小，
它们是绝对单位，设置多大就是多少，不会受到祖先元素的字体大小影响。
相对字体大小：使用百分比(%),em或者rem,这些单位的值是相对的，该字体
的大小要相对该元素最近的“被设定过字体大小”的祖先元素来确定，
比绝对字体大小的设定要复杂点。
font-style:设置字体的风格。属性值有：normal(正常),italic(斜体),oblique(倾斜)。
font-weight:设置字体是否加粗。属性值：lighter,normal,bold,bolder.
font-variant:设置文字的大写字符的格式。属性值：normal,small-caps(小型的大写字母字体)
font: 简写。简写规则：规则一：必须声明font-size和font-famliy的值
规则二：声明顺序
①font-weight,font-style,font-variant不分先后
②然后是font-size
③最后是font-famliy

选择器
CSS样式的语法格式：
p{color:red;} 元素选择器(元素选择器是最简单的选择器)
选择器 属性值
根据这个结构我们可以扩展：
例如：p{color:red;font-size:14pt;font-weight:bold;}
h1,p,a{color:blue;font-size:14pt;}//组合选择器

所有用于选择特定元素的选择器分三种：
上下文选择器：基于祖先或同胞元素选择一个元素
ID和类选择器：基于id和class的属性值进行选择元素。
属性选择器：基于属性的有无和特征进行选择。
下文选择器：
上下文选择器的语法格式：标签1 标签2{属性:值;}
//注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，上下文选择器以空格隔开

特殊的上下文选择器
子选择器> :
语法格式:标签1>标签2 解释说明：标签1和标签2是父子关系。
紧邻同胞选择器+ :
语法格式:标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
一般同胞选择器~ :
语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。
通用选择符* : * 解释说明:通用选择器*是一个通配符，匹配任何元素。

id选择器和class选择器
id选择器：语法格式: #idValue
class选择器：语法格式: .classValue

性选择器
属性名选择器：
语法格式：标签名[属性名]
属性值选择器：
语法格式：标签名[属性名=“属性值”]

实例
/上下文选择器/
/div h1 {
color: #F0F;
}/
/*特殊上下文选择器–子选择器> /
/div>h1 {
font-style: italic;
}/
/特殊上下文选择器–紧邻同胞选择器+ /
/h1+p {
font-style: italic;
color: #F00;
}/
/特殊上下文选择器–一般同胞选择器~ /
/h1~p {
font-style: italic;
color: #FC0;
font-size: 14pt;
}/
/特殊上下文选择器–通用选择符 /
/ * {
color: #900;
}/
/id选择器/
/#myh1 {
color: #F3C;
font-size: 20pt;
background: #06F;
}/
/class选择器/
/.myp {
color: #90C;
font-size: 15pt;
}/
/属性名选择器/
/h1[id] {
color: #C03;
font-style: italic;
}/
/属性值选择器/
/h1[id=“myh”] {
color: #C03;
font-style: italic;
}/