html5学习日志03

css

优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

css样式优先级

行内样式>内部样式表>外部样式表
就近原则

基本选择器优先级：ID选择器>类选择器>标签选择器

层次选择器

结构伪类选择器

属性选择器

Css梅花网页元素

字体样式

字体大小：单位像素，移动端用的em（一个字符的长度），rem

字体风格：正体，斜体.  normal、italic、oblique

字体粗细：粗，细。lighter, bold,bolder,可以用数字表示，100-900，每次增加100，400=normal，700=bold

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

文本样式

文本颜色；

RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

文本段落：

首行缩进
text-indent：em或px
行高
line-height：px

文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性：middle、top、bottom

文本阴影

使用时需注意浏览器兼容性问题

超链接伪类

列表样式

网页背景

背景颜色
background-color
背景图像
background-image
背景图像
background-image属性
背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
背景定位
background-position属性

背景尺寸 background-size

线性渐变

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-