目录标题
- 什么是CSS
- CSS的发展史
- CSS的快速入门
- CSS的优势
- CSS的三种导入方式
- CSS的三种基本选择器 （重点）
- 基本选择器
- 基本选择器总结
- 高级选择器
- 层次选择器
- 结构伪类选择器
-
- body标签结构为
- 在不使用 class 和id选择器的情况下 选中 标签的第一个子元素 和 最后一个子元素
- 练习
- 例如 改变 ul中的 第一个子元素和最后一个子元素
- 练习二
- 改变p2的颜色 选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效（重点）
- 例如 如果 标签结构更改 添加一个 h标签 在p标签上 那么就不会更改 p1 的颜色 (因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色)
- 但是可以改变p1 的颜色 (因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色) （但是 当括号中的值为2 是 那么父级元素的第二个元素为p标签 当前元素 所以会改变颜色！！！）
- 练习
-
- 重点 比较 P:nth-child(2){} 的不同 p：nth-of-type(1){} 跟上面的选择器不同 因为 上面选择器括号中的值是按排序的顺序的 而 这里选择器括号中的值是按类性的顺序选择的 注意重点！！！ 所以它会自动省略 不是不是当前元素的标签 直到找到当前元素的标签后 才开始计数改变颜色
- 重点总结！！！ 伪类（会带着冒号 :） 伪类就是条件！！！ 还有一种伪类 是 重点： 鼠标悬浮变颜色 格式： 标签命名：hover{} 可以看出 a：hover{} 使得 a 标签里面的 文字 当鼠标悬浮在上面的时候 发生变色
- 还有一种伪类 鼠标按住未释放的状态 格式 标签命名：active{}
- 补充扩展
- 属性选择器（常用和重点）
-
- 可以搜索百度 来学习下面第一张图不会的标签内容 如 float display 等！！！
- body标签结构显示如下
- head标签显示
- 网页显示
- 属性选择器是重点 常用的CSS 要重点掌握！！！
- 练习
- 练习 a标签中 选择 id 和 class 的命名 例如： a标签中 id=first a标签中 只选择 id
- 在 = 和 * = 这两个符号 含义是不相同的
- = 是绝对等于 * = 是包含这个元素 （只要包含这个元素的一部分就可以选择上）
- a标签中 class含有links的命名 a标签中 class *= "links"
- 例如： 以 a标签中 href以 http 开头的元素的命名有哪些 ^= 符号的意思是 以什么什么开头的元素命名 a [href^=http] {} $= 符号的意思是 以什么什么结尾的元素命名 例如下面 以 href 中 以 jpg为结尾的命名有哪些
- 属性选择器 的强大之处： 就是 把 id+class结合了起来
- 正则表达式的通配符
- 重点：！！！ 选择器是前端里面最重要的一个东西 他会在js jQuery vue css 中都会用到
- 美化网页元素
- 为什么美化网页
- span标签
- 字体样式
- 文本样式
- 超链接伪类
- 阴影
- 列表
- 背景
- 添加背景图片
- 渐变
- 盒子模型
- 什么是盒子
- 边框
- 外边距
- 内边距
- 圆角边框
- 练习
- 阴影
- 练习
- 浮动的理解
- display（陈列）
-
- display 陈列的意思 display 是行内元素的一种 display 可以有三种情况 分别为 block 或者 inline 或者 inline-block 它们的意思分别为 block 块元素 inline 行内元素 inline-block 是块元素 但也可以内联 放一行！ 英文学习 block 块的意思
- 标签代码 重点： 在下面的两个 div 和 span 标签中 它们是不同的 div 为块级元素 span 为 行内元素 （而且还可以发现 行内元素 与选择器中的 width 和 height 是没有关系的） 但是我们 可以利用 display 将 行内元素 变成 块级元素 同样的 块级元素 也可以利用 display 变成 行内元素
- 理解 ： 块级元素 独占一整行 行内元素 只占一行中的某一块 所以可以跟其他元素 并排 排列
- 效果
- 总结！！！ display 也是一种实现行内元素排列的方式 但是我们很多情况都使用 float
- 练习
- 写一个导航栏 需要用到 display 写出导航栏 理解 先利用 inline-block 大框架 将他们 变成 内联 块级元素 但是可以写在一行里面 再将大框架中的元素 变成 块级元素 自动排版到一行中 就会出现导航栏中的现象！！！
- HTML代码
- css代码 如下
- 效果如下
- float（浮动）
- 父级边框塌陷的问题
-
- 解决 父级边框塌陷现象！！！
- 练习
- 重点： clear 属性 的解释 clear ：right; 右侧不允许有浮动元素 （如果有浮动元素 则排到元素的下面一行去） clear: Left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素
- 将上面图片完整居中的排列到一行！！！ 解决元素浮动出现的这种情况！！！
- 解决方法1 增加父级元素的高度
- 解决方法2 增加一个空的div标签 清除浮动
- 解决方法3 overflow 溢出 举例 如下
- 所以解决为 在父级元素中增加一个 overflow：hidden 即可
- 解决方法4 在父类添加一个伪类 ：after clear 属性 的解释 clear ：right; 右侧不允许有浮动元素 （如果有浮动元素 则排到元素的下面一行去） clear: Left; 左侧不允许有浮动元素 clear: both; 两侧不允许有浮动元素
- 四种解决方法的总结：
- display和float两者的对比
- 定位
- 相对定位
- 绝对定位
- 固定定位 fixed
- z-index
- 动画
- CSS总结
什么是CSS
CSS的重点如下
什么是CSS：
CSS的发展史
CSS的快速入门
建议使用这种规范
！！！
注意 下面图片中 style.css 和 index.html
是在同一个命名为css目录的文件下
所以 href=“css/style.css”
CSS的优势
CSS的三种导入方式
练习
做一个练习来比较：行内样式 和外部样式 内部样式 的优先级
所以可以得出优先级为 就近原则！！！
比较结果如下
css可以分为 内部样式表 和外部样式表 两种
还有行内样式！！
CSS的三种基本选择器 （重点）
作用是：选择页面上的某一个或者某一类 元素
基本选择器
1 标签选择器
2 类选择器 class
3 Id 选择器
重点： 标签选择器 会选择到页面上所有的这个标签的元素
通过类选择器
我们可以通过只想让 第一个 h1 标题 变色
id选择器
id选择器的重点：id必须保证全局 唯一！！！
命名的方式为 #id的名称 {}
重点！
扩展 ： 来比较 类选择器 id选择器 和标签选择器 三者的优先级
得出结果： 它们不遵行 就近原则
id选择器大于类选择器大于标签选择器
基本选择器总结
重点
类选择器 class ： 选择所有的class属性一致的标签 可以跨标签
例如 一个是p标签 一个 h1 标签 但是它们都可以用一类的class标签
来进行改变
高级选择器
层次选择器
先写一个框架
层次选择器：
分为
1 后代选择器 ： 在某个元素的后面 祖爷爷 爷爷 爸爸 你
2 子选择器 ：只有一代 儿子
3 相邻兄弟选择器 同辈
4 通用选择器 ：就是当前选中元素的向下所有兄弟元素
后代选择器
子选择器
相邻兄弟选择器
通用选择器
结构伪类选择器
body标签结构为
在不使用 class 和id选择器的情况下
选中 标签的第一个子元素 和 最后一个子元素
练习
例如 改变 ul中的 第一个子元素和最后一个子元素
练习二
改变p2的颜色
选择当前p元素的父级元素
选中父级元素的第一个
并且是当前元素才生效（重点）
例如
如果 标签结构更改
添加一个 h标签 在p标签上
那么就不会更改 p1 的颜色
(因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色)
但是可以改变p1 的颜色
(因为括号中值为1 而父级元素的第一个元素为h标签 所以不会改变颜色)
（但是 当括号中的值为2 是 那么父级元素的第二个元素为p标签 当前元素 所以会改变颜色！！！）
练习
重点
比较 P:nth-child(2){} 的不同
p：nth-of-type(1){}
跟上面的选择器不同
因为 上面选择器括号中的值是按排序的顺序的
而 这里选择器括号中的值是按类性的顺序选择的
注意重点！！！
所以它会自动省略 不是不是当前元素的标签 直到找到当前元素的标签后
才开始计数改变颜色
重点总结！！！
伪类（会带着冒号 :）
伪类就是条件！！！
还有一种伪类 是
重点： 鼠标悬浮变颜色
格式： 标签命名：hover{}
可以看出 a：hover{}
使得 a 标签里面的 文字 当鼠标悬浮在上面的时候 发生变色
还有一种伪类
鼠标按住未释放的状态
格式 标签命名：active{}
补充扩展
属性选择器（常用和重点）
可以搜索百度 来学习下面第一张图不会的标签内容
如 float display 等！！！
body标签结构显示如下
head标签显示
网页显示
属性选择器是重点 常用的CSS
要重点掌握！！！
练习
练习 a标签中 选择 id 和 class
的命名
例如：
a标签中 id=first
a标签中 只选择 id
在 = 和 * =
这两个符号 含义是不相同的
= 是绝对等于 * = 是包含这个元素 （只要包含这个元素的一部分就可以选择上）
a标签中 class含有links的命名
a标签中 class *= “links”
例如：
以 a标签中 href以 http 开头的元素的命名有哪些
^= 符号的意思是 以什么什么开头的元素命名
a [href^=http] {}
$= 符号的意思是 以什么什么结尾的元素命名
例如下面 以 href 中 以 jpg为结尾的命名有哪些
属性选择器 的强大之处： 就是 把 id+class结合了起来
正则表达式的通配符
重点：！！！
选择器是前端里面最重要的一个东西
他会在js jQuery vue css 中都会用到
美化网页元素
为什么美化网页
span标签
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
