简介
CSS(cascading style sheet)级联样式、层叠样式
显示数据与显示分离:
- 网页的数据由html5提供
- 网页的显示由css3控制
- 网页的行为由JavaScript实现
CSS样式
1、行内样式
写在标签之内写style属性,style属性中写CSS代码
例:<div style="color:xx; ... "> xxx </div>
2、内嵌样式
在head标签中增加style标签,集中写CSS代码
3、链接样式
单独写一个CSS文件,head中用link标记使用CSS文件
链接:<link type...
4、导入样式
导入CSS代码 @import
CSS选择器
1、标签选择器
标签名{...}
2、类选择器
从·号开始自定义名称来定义CSS样式,html标签用class属性选择
3、ID选择器
从#号开始自定义名称来定义CSS样式,id属性的值唯一
4、包含选择器
selector 1 selector 2 {...}
5、子选择器
selector 1 > selector 2 {...}
6、合并声明
selector 1,selector 2 {...}
7、兄弟选择器
selector 1 ~ selector 3{...} 匹配selector后能与2匹配的节点
8、属性选择器
- E[attribute] 选取带有指定属性的元素
- E[attribute=value] 选取带有指定属性和值的元素
- E[attribute~=value] 选取属性值中包含指定词(以空格隔开)的元素
- E[attribute|=value] 选取带有以指定值开头(连字符分隔)的属性值
9、伪元素选择器
只针对CSS中的·伪元素起作用
- :first-leffer:指定对象的第一个字符
- :first-line:第一行
- :before:与内容相关的属性结合使用,在指定对象内部的前端插入内容
- :after:与内容相关的属相结合使用,在指定兑现内部的尾端插入内容
10、浏览器专属属性
- -ms- Microsoft
- -moz- Mozilla(Firefox)
- -o- Opera
- -webkit- Webkit(Chorme、Safari)
字体与文本属性
- Font:复合属性,形式如font-style、font-weight等
- font-size:字体大小 font-style:字体风格 font-family:字体
- font-weight:加粗(100~900)
- font-size-adjust:对不同字体尺寸进行微调
- Color:文本颜色
- word-spacing:单词间距
- text-shadow:字体阴影
- line-hight:行高
- letter-spacing:字间距
- text-shadow:cradius:阴影的模糊半径,越大越模糊
- 属性值:color xoffset yoffset length或xoffset yofset radius color
- text-indent:文本缩进
- text-overflow:控制溢出文本的处理方法
- Clip:hidden属性值,溢出时,clip裁切溢出的文本
- Ellipsis:溢出时显示(...)
- vertical-align:垂直对齐方式
- 属性值:auto、baseline、sub、top、middle、bottom
- text-align:水平对齐方式
- 属性值:left、center、right
- Direction:文本流入方向
- 属性值:ltr(从左到右)、rtl(从右到左)
- word-break:文本内容的换行方式
- 属性值:normal:浏览器换行规则
- keep-all:在半角空格或连字符处换行
- break-all:允许在单词中间换行
服务器字体
@font-face{
font-family:自定义字体名
Src:local(“优先本地字体”),url(“服务器字体”)字体格式(TrueType|OpenType);
其他字体规则
}
背景属性
- backgroud:复合属性
- backgroud-color:背景颜色 backgroud-image:背景图片
- backgroud-position:背景相对位置
- backgroud-repeat:repeat-x repeat-y repeat no-repeat
- backgroud-attachment:背景图随对象滚动固定不变 scroll fixed
CSS3新增多背景