2015年10月22日CSS学习笔记

XHTML1.0对HTML4.0的改进

1. 借鉴了XML的写法，语法更加严格。
2. 把页面的内容和样式分离了，废弃了html4中的表示样式的标签和属性。推荐使用css来描述页面的样式。

CSS样式的优先级

!important>内联样式>内部/外部样式>浏览器预定义样式

内部外部样式：#id>类选择器>元素选择器

内联样式要尽量少用；内部样式可以适量的使用，例如如果只有一个页面使用样式的情况下就没必要专门做一个外部样式；推荐使用外部样式，但是也不要太多，否则头重脚轻，显示页面的时候可能出现先出现样式而内容半天不出现的情况。同时外部文件不要太多，否则发送请求过多，可以放在一个大文件里但不要有太多小文件。

使用CSS3要考虑兼容性的问题，尤其是IE。

内部/外部CSS：

选择器{/*该样式的作用*/

属性名：属性值；

…

属性名：属性值；

}

这个会经常用到：

<style>

*{/*所有元素间距和填充都为0*/

margin:0;

padding:0;

}

</style>

1. 通用选择器：*{…}选择页面中的所有元素
2. 元素选择器：元素名{…}选择指定的元素 如div{…}
3. ID选择器：#ID值{…}仅选择具有指定id的元素 如#p{…}
4. 类别选择器：.类名{…}选择具有指定class的所有元素 如.mark{…}
5. 并列/过滤选择器：选择器1选择器2{…}选择可被两个选择器同时选定的元素 如p.mark{…}或 .product.mark{…}
6. 父子选择器:选择器1 选择器2{…}选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素 如div span{…}      .product .mark{…}
7. 直接子元素选择器 选择器 1>选择器 2{…} 选中选择器1中的直接子元素中可被选择器2选中的 如div>span{…} IE6不支持
8. 多选选择器：选择器1，选择器2，…选择器n{…} 选择可被任何一个选择器选中的元素 h2,#main，.mark{…}
9. 伪类选择器： ：伪类名{…}

a:link{…}   选择所有未访问过的超链接

a:visited{…}   选择所有访问过的超链接

元素:hover{…}   当鼠标悬停于元素上方时   ie6只支持a:hover

元素:active{…}   当元素被激活时

input:foucs{…}   当元素获得输入焦点   ie7前都不支持

#p2{/*#代表id值，如果想把body中某个段落设样式，那么就赋予id值，然后用选择器来指定样式*/

}

div span{/*意思是div下的所有span子元素*/}

div .mark{/*意思是div下的class里的.mark*/}父子选择器

CSS中的尺寸

相对尺寸：

%：所占父元素的百分比 如div（50%;）

px：像素，指屏幕上的一个点 如div(500px;)

em:倍率，表示标准字体大小的倍率 如div(height:3em;)

绝对尺寸：在屏幕上使用的web页面尺寸几乎不用绝对尺寸

cm：厘米

mm：毫米

in：英寸

pt：磅（72磅=1英寸）

CSS中的颜色

（1）       英文字符表示 如red green silver

RGB表示法

（2）       三位整数 rgb(xxx,xxx,xxx)   如span{color;rgb(255,0,0);}

（3）       三位百分比 rgb(xx%,xx%,xx%)  如span{color:rgb(30%,50%,0%);}

（4）       六位十六进制数 #XXXXXX  如span{color;#FF0000;}

（5）       三位十六进制数 #XXX   如span{color:#FF0;}

色系：原色是以以一定比例调配出其他颜色的颜色。加色系是本身不发光，但是越加颜色越亮，最终会变为白色。减色系则是本身发光，越加颜色越暗，最终变为黑色。

255,0,0 红色

0,255,0 绿色

0,0,255 蓝色

0,0,0 黑色

255,255,255 白色

10,10,10 深灰色

200,200,200 浅灰色

0,255,255 青色，红色的互补色

255,0,255 品红色，绿色的互补色

255,255,0 黄色，蓝色的互补色

230,180,10 土黄色

200,,230,190

和谐色：

180 240 50

240 180 50

180 50 240

240 50 180

50 240 180

50 180 240

CSS常用属性（重点）

属性名	含义	可取值	版本/兼容
width	指定元素的宽 block元素才能指定/IMG/TABLE	% px em	1
height	元素的高 block元素才能指定/IMG/TABLE	% px em	1
min-width	定义元素的最小宽		2
max-width	定义元素的最大宽		2
min-height	定义元素的最小高		2
max-height	定义元素的最大高		2
overflow	如何处理溢出的内容	hidden隐藏 visible可见 scroll 滚动 auto 自动	2
border-width	宽度 可用“上右下左”顺序指定4个值
border-style	样式 可用“上右下左”顺序指定4个值	none solid double dotted dashed groove ridge inset outset
border-color	颜色 可用“上右下左”顺序指定4个值	可以用transparent表示透明色
border	样式的集合： 占用页面空间	宽度 样式 颜色	CSS2
outline	外轮廓 不占元素空间	颜色 样式 宽度
border-radius	边框半径，绘制圆角边框	可取四/三/二/一个值、百分比	CSS3/IE9+
box-shadow	边框投影，不占页面空间	h必需 v必需 值：可选，模糊半径 值：可选，扩展半径 color必需 inset:可选，内投影	CSS3/IE9+
border-image-source
border-image-width
border-image-repeat
border-image	使用图片做边框	source:url(xx.png) 边框宽/九宫格格宽 repeat: stretch/repeat/round	CSS3/注意Safari的兼容性问题
padding-left
padding-right
padding-top
padding-bottom
padding	上右下左	10px; 10px 30px; 10px 30px 50px; 10px 30px 50px 70px;
margin-left/right/top/bottom
margin	上右下左
background-color	设置元素背景颜色：内容+填充+边框，但是没有间距
background-image	背景图片	url(xx.png)
background-repeat		repeat平铺 no-repeat不平铺 repeat-x水平方向平铺 repeat-y竖直方向平铺
background-position	背景图的位置（如果所有需要用的图标都在一张图上，就需要使用背景坐标的截取方式来使需要的部位显示）	right bottom右下显示 center center居中显示 80px 70px
background-attachment	背景滚动方式	scroll:背景随内容滚动 fixed:背景固定不动（显示背景图一直停留不随滚动条而动）
background		color背景颜色 url()背景图位置 repeat 是否重复attachment滚动方式position位置（都有前后顺序）	CSS1
background-image	凡是能使用背景图片的地方都可以使用渐变做背景	linear-gradient线性渐变 radial-gradient径向渐变 repeating-linear-gradient重复线性渐变 repeating-radial-gradient重复径向渐变

CSS里用“-”减号风格，JS里用“BorderWidth”驼峰风格

重点：CSS盒子模型---重点

一个区块元素所占的空间总大小：

X轴：margin-left(左边两个区块之间的空白区域也叫间距)+border-left(左边框，橙色的区域)+padding-left(左填充，灰色的区域)+width(元素的宽)+padding-right(右填充)+border-left(右边框)+margin-right(右间距)

Y轴：margin-top(上间距)+border-top(上边框)+padding-top(上填充)+height(元素的高)+padding-bottom(下填充)+border-bottom(下边框)+margin-bottom(下间距)

两个相邻元素若都指定了间距，那么间距会进行合并，合并后的值并不是两个间距之和，而是二者指定的间距中最大的那个值。但是float浮动会对间距的合并产生影响。

outline、box-shadow不会占用页面空间，故也不计入盒子模型的计算。

区块若想在父元素中水平居中，需要设置外间距，margin:0px auto;   由浏览器自动计算左右间距，浏览器会平均分配。

为了屏蔽浏览器默认值造成的兼容性问题，页面布局时可以添加*{margin:0; padding:0}

 

linear-gradient(angle,color-point1,color-point2,….)

angle:为第一个参数，指定渐变的方向，可以是角度值，也可以是关键词，如to top(对应0deg)，to right(对应90deg)，to bottom(对应180deg)，to left(对应270deg)

color-point：表示颜色的起始点、中间点或者结束点，取值为颜色和位置的组合，如red 0%、green 50%

 

区块元素：

无浮动：竖直方向上排布，相邻元素的margin会合并，padding各自独立。

浮动之后：padding各自独立：竖直/水平方向margin上都各自独立。

内联元素：水平方向上排布，一行不够自动排布到下一行。

margin:水平方向的各自独立，不合并，竖直方向上无效。（span不能指定margin属性，也就是间距。）

padding:水平方向上各自独立；竖直方向上有效，但不占用页面空间（即上下两行的padding可能会重叠）

 

	Margin X	Margin Y	Padding X	Padding Y
BLOCK不浮动	占用空间	占用空间、会合并	占用空间	占用空间
BLOCK浮动	占用空间、不合并	占用空间、不合并	占空间	占空间
INLINE	占用空间、不合并	无效	占空间	有效、不占空间（重叠）

 

加上display:inline-block，那么内联元素中的margin，其上下大小就可更改有效。

元素的定位

1. 流/静态定位：默认 position:static;   不能指定位置
2. 浮动定位：float:left/right;     不能严格的指定位置
3. 相对定位：position:relative;     使用left/top/right/bottom进行定位，仍占用页面空间；以“其自己的静态定位点”为定位原点
4. 绝对定位：position:absolute;     使用left/top/right/bottom进行定位，不占用页面空间；以“最近的已定位的祖先元素的padding起点”为定位原点，且随着页面内容的滚动而滚动。
5. 固定定位：position:fixed;     使用left/top/right/bottom进行定位，不占用页面空间；以“body”为定位原点，且不随着页面内容的滚动而滚动。

 

CSS复杂选择器

复杂选择器的使用可以减少页面中的id和class的出现频率；使用jQuery可以兼容所有下属复杂选择器。

复杂选择器	示例	含义	版本/兼容性
选1 选2	div li{…}	子代选择器	1
选1>选2	div>ul{…}	直接子代选择器	2
选1+选2	input+span(…)	相邻兄弟选择器；选择紧挨的下一个兄弟元素(选中0/1个)	2/ie6-不支持
选1~选2	div~span{…}	通用兄弟选择器；匹配选择器1的兄弟元素中匹配选择器2的元素。（并非紧邻，而是同个父元素之后紧挨或不紧挨的所有选择器2）	3 注意：div后的span兄弟会选定，之前的不会。
[属性名]	[href]	选择具有指定HTML属性的元素	2
[属性名=属性值]	[type=”text”]	匹配具有指定属性且属性值为指定值	2
[属性名~=属性值]	[class~=strong]	匹配具有指定的属性且属性值中包含指定的完整的单词（不是单词不行）	3
[属性名*=属性值]	[class*=str]	匹配具有指定的属性且属性值中包含指定的字母组合（不必是完整的单词）	3
[属性名^=属性值]	[class^=str]	匹配具有指定的属性且属性值以指定的字母开头	3
[属性名$=属性值]	[class^=str]	匹配具有指定的属性且属性值以指定的字母结尾	3
[属性名|=属性值]		匹配具有指定的属性且属性值以指定的完整的单词开头（要么只有它，要么其后有-小减号）	3
:target	:target{} div:target{}	目标伪类选择器；选定当前锚点的目标元素	IE8-不支持
:first-child	span:first-child{} div  :first-child{}	匹配父元素中的第一个子元素（必须是标签，纯文本不算）
:last-child	p:last-child{} div  :last-child{}	匹配作为父元素中最后一个子元素出现的元素
:onlt-child	p:only-child{}	匹配作为父元素中唯一子元素出现的元素
:empty	div:empty{display:none;}	匹配没有子元素且没有任何文本内容的元素
:not(选1)	div:not(.strong){} span:not([class=content])	否定选择器；匹配不被选贼器1选定的元素
::selection	::selection{}	匹配一段文字中被选择部分

说明:       :xxx  伪类选择器       ::xxx伪元素选择器

 

 

 

内容生成选择器

XHTML规定：页面内容交给标签来处理；页面表现交给CSS来处理。

但CSS3有些“内容生产”选择器不单单可以呈现样式，还可以向页面中添加内容。

选择器1:before{

…

content:纯文本/图像/计数器;

}

选择器2:after{

…

content: 纯文本/图像/计数器;

}

content属性必须配合：:before/:after选择器使用。

 

与内容多列显示相关的CSS样式

column-count:竖直方向上列的数量

column-gap:内容列与列间距

column-style:集合属性   width style color

注意浏览器的兼容性：

IE11直接使用上述属性

FF添加-moz-前缀

Chrome/Safari/Opera 添加-webkit-前缀