CSS重点
1.选择器
2.盒子模型
3.浮动
4.定位
5.动画、伸缩布局（C3部分）
一、CSS概念
1.1 作用：美化网页（通过css控制标签的样式）和网页布局（通过css控制标签的位置）
1.2 概念：层叠样式表 (Cascading Style Sheets)或者级联样式表
备注：CSS是以html为基础
1.3 书写方式
-
内嵌式写法
先准备一个 htm l页面，在head 标签中添加一个 style 标签，在style标签中写css代码。
内嵌式写法
-
外联式写法
首先新建一个单独的 CSS 文件（在该文件中不需要写 style 标签，直接写 CSS代码就可以），通过link标签将该 CSS 文件引入到当前 html 页面中。
外联式写法
注意：一个页面中可以同时引用多个css文件
-
行内式写法
将 CSS 代码写入到 html 标签内部。
行内式写法
二、CSS 语法
2.1 语法：选择器 { 属性: 值; ......}
2.2 选择器分类
- 基础选择器
✔标签选择器（掌握）
✔类选择器（掌握）
✔ID选择器
✔通配符选择器 - 复合选择器
✔标签指定式选择器
✔后代选择器
✔子代选择器
✔并集选择器
✔属性选择器
✔伪类选择器
三、标签选择器
3.1 语法：html 标签名 { 属性: 值; }
3.2 作用：通过html标签名选中需要设置样式的标签
注意：代码中遇到特殊符号，都必须是英文输入法下的符号。
四、类选择器（使用最多）
4.1 定义： .自定义类名 { 属性: 值; ....}
4.2 类样式的调用：
标签通过class属性去调用定义好的类样式。
类选择器
4.3 类样式的特点
-
一个标签可以同时调用多个类样式
-
一个类样式可以被多个标签同时调用
五、命名规范
- 自定义类名不能使用纯数字或以数字开头
- 不推荐使用汉字定义类名
- 不能使用特殊字符或者以特殊字符开头（$,#,@,%...）
- 建议不推荐使用标签名作为类名
-
一般我们用具有一定语义的单词或者汉语拼音去定义一个类名
六、ID选择器
6.1 定义
#自定义id名称 {属性: 值; ....}
6.2 调用
标签通过 id 属性调用 id 样式
#test {color: red; }
<p id=”test”></p>
6.3 ID选择器与类选择器的区别
- 语法定义有区别 ( . #)
-
在 id 选择器中，一个标签只能调用一个 id 样式。
- 一个类样式可以被多个标签调用，但是一个id样式最好只能被一个标签调用（否则，不符合编程规则）
七、通配符选择器
7.1 语法
* { 属性: 值; ... }
7.2 特点
将页面中所有的标签都选中
网友评论