css -002版
css 层叠样式表
作用：美化和渲染页面
语法：
选择器{属性：属性值；属性2：属性值； }
例：h 1{ color：red；font-size：20px；}
分类：
- 外部样式表：链接一个外部css文件
< link type=“text/css”rel=“styleSheet”href=“css文件链接地址”>
- 内部样式表：写在单个网页中的
嵌入样式 写在head头部的style标签中
< style>
h 1{ color：red；font-size：20px；}
< /style>
- 行内样式： 写在标签中作为标签属性出现
< h1 style=“color：red；”>< /h1>
选择器：
- 标签选择器
-
影响范围是文档中所有此类标签
-
h 1{} ；body{}
- 类选择器
-
影响的是文档中的一部分标签
-
. 类选择器【用class命名后用 . +名字来使用】
- id选择器
-
影响的是唯一一个的标签
-
id名{}【用id命名后用#+名字来使用】
- 泛选择器
- *代表文档中的所有标签
- *{}
- 交集选择器
![image]()
6.并集选择器
![image]()
7.后代选择器
![image]()
8.子代选择器
![image]()
选择器的优先级：
id选择器 > 类选择器（class） > 标签选择器 > 泛选择器
集体声明
body ， h1 ， p ， ul ， ol ， li ， span ，. c1 ，# c1 { }
如果多个选择器的样式一样可以写到一起一次性都声明
嵌套声明
ul li a { }
通过标签自身的且套规则找到具体需要修饰的元素。
元素的关系
高级特性
css 伪类选择器
主要用于渲染超链接效果
动态伪类
a : link 【普通超链接样式，未访问时的样式， 类似于a{ }】
a : hover 【鼠标移动到超链接上的样式】
a : active 【鼠标点击时的样式】
a : visited 【鼠标点击超链接后显示的样式】
颜色
color
1.颜色名
2. rgb 和 rgba
3. HEX 和 HEXA【十六进制】
4. HSL 和 HSLA
字体属性
1.字体大小 font-size
2.字体族 font-family
3.字体风格 font-style
4.字体粗细 font-weight
5.字体复合属性 font：
6. 字体变体
font-variant：设置是否使用小型大写字母，常用值为 normal 【默认值，文本正常显示】和 small-caps【将文本中的小写字母转换为小型大写字母，大写字母大小不变】。
文本属性
1.文本颜色 color
2.文本间距
字母间距 letter-spacing
单词间距 word-spacing
3.文本修饰 text-decoration
4.文本缩进 text-indent
5.文本水平方向对齐 text-align
6.行高 line-height
7.文本对齐 垂直
vertical-aling
8. 大小写转换 text-transform
none：默认值，文本保持原有大小写不变。uppercase：将文本中所有字母转换为大写。lowercase：将文本中所有字母转换为小写。capitalize：把每个单词的首字母转换为大写，其余字母保持原有大小写。
列表的属性
表格的属性
表格边框的属性
表格独有的属性
背景属性
鼠标相关的属性
元素的显示模式
元素分类
修改元素的模式
盒子模型
盒子内边距
盒子外边距
处理盒子内容的溢出
隐藏元素的方法
样式的继承
盒子布局技巧
元素间的空白
浮动
浮动属性：
元素的浮动是指设置了浮动（float）属性的元素会脱离标准流的控制，移动到指定位置。在CSS中通过float属性来设置左浮动或右浮动，
其格式如下:选择器 {float: left | right | none;}
- left【元素左浮动，表示元素向左移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止】
- right【元素右浮动，表示元素向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止】
- none【元素不浮动。若不设置float属性，则float属性值默认为none】
清除浮动：
使用clear属性清除浮动，
其格式如下：
选择器 {clear: left | right | both;}
- left【清除左侧浮动的影响】
- reight【清除右侧浮动的影响】
- both【同时清除左右侧浮动的影响，最常用】
overflow属性：清除浮动影响，使父元素适应子元素的高度
浮动后的影响
解决浮动的影响
定位
相对定位
绝对定位
固定单位
粘性定位
定位的层级
定位的特殊应用
浙公网安备 33010602011771号