我要评论简介
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新增多背景
本文地址：https://blog.csdn.net/qq_41554330/article/details/107391215
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论