![dbfb0a8547ad5b62ffa30000ffba0bf0.gif](https://i-blog.csdnimg.cn/blog_migrate/ca0e6c9bec5f9a81a6c15f171e0fb98e.gif)
![6ec77a954a5c5a6a25e3e94fa58f55c3.png](https://i-blog.csdnimg.cn/blog_migrate/3b55af194110da2095d35b1e25eae1cb.jpeg)
一、CSS初认识
![d59a61bf390072942ca7f778c7dfe648.png](https://i-blog.csdnimg.cn/blog_migrate/a7a20ac21a177393160e77bd06d29bf0.jpeg)
1、趣调查
2、“装修小能手”
前面我们研究了HTML,回顾下它是做什么的?
当我们用HTML搭建好网页的基本骨架,下面请出我们的“装修小能手”--CSS。
3、如何学习CSS?
Python大星前去探探路...
4、学习必备
● 充分利用谷歌浏览器Chrome的审查元素功能
● CSS权威网站
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference
![928a99eb2000e3b1c4a8d91e01702f81.png](https://i-blog.csdnimg.cn/blog_migrate/50fd78ce7227b1fc3ae62c7ba62156fa.jpeg)
二、CSS的基本使用
1、基本问题
● CSS代码写在什么地方?
● CSS的语法规则?
2、CSS代码的书写位置
● 内部样式表
书写在style元素中,一般放在中。
有人可能会问,能放到其他元素里吗?
答案:可以。但如果你使用内部样式表,建议放到head元素中,利于浏览器的加载渲染。
>> 举个栗子:
![e08884ae22c74d8d47cab1f73a1fa332.png](https://i-blog.csdnimg.cn/blog_migrate/a6e5efea56bca7de9aa7b625a0269dd6.jpeg)
● 内联样式表(元素样式表)
直接书写在元素的全局属性style中
![88e0c858745c99f28eef56deed42d786.png](https://i-blog.csdnimg.cn/blog_migrate/59a6c4f27e2aa7d593b4ed2e5e5627b0.jpeg)
![2e13b37eadd3cb6fca06bab3f60f6028.png](https://i-blog.csdnimg.cn/blog_migrate/e144b8f88ea8656cdc938d5e4851daa1.jpeg)
● 外部样式表
将样式书写到独立的css文件中。
【1】理由有三:
① 解决多页面样式重复的问题;
② 有利于浏览器缓存,提高页面响应速度;
③ 有利于代码分离,易阅读和维护。
【2】如何使用外部样式表:
![6dd8d209906a9f4da0848e3cf3558322.png](https://i-blog.csdnimg.cn/blog_migrate/cc33fb008487ee61f9e1b3bf63855a20.jpeg)
3、CSS代码的语法
![ea36c9980cb101d1854e19b58087d1b4.png](https://i-blog.csdnimg.cn/blog_migrate/5ac5aad6e89350116addd2acf8fb1e45.jpeg)
CSS语法 = 选择器 + 声明块
● 选择器(Selector)
CSS 选择器是CSS规则的一部分,使你能应用样式到指定元素。
① 基础选择器
![394eb94c571724747f029a64f99cd6f3.png](https://i-blog.csdnimg.cn/blog_migrate/b11208cd1ee0677f6d1a13d0ba3ccaa6.jpeg)
- 标签选择器 elementname
![de30c722c6a04deddd87464efc2e69cf.png](https://i-blog.csdnimg.cn/blog_migrate/1da944fa2dccbbd921cae35bb0f134e5.jpeg)
- 类选择器 .classname
![83320f22f0248ea2e8b90037f1a1bccb.png](https://i-blog.csdnimg.cn/blog_migrate/e48d199f065000b3326d9ebc1dd257ee.jpeg)
- ID 选择器 #idname
![58776aa2b04b39b423d214cbf404608c.png](https://i-blog.csdnimg.cn/blog_migrate/d2f088d4176120917350d1bee119c8e5.jpeg)
![16596e39a6a92db2dee2dae668b67ff8.png](https://i-blog.csdnimg.cn/blog_migrate/90692881c91444035eb9606628b524ae.jpeg)
- 属性选择器 [attr=value]
![3e085aedc95dc4b256e468e8fa0e365d.png](https://i-blog.csdnimg.cn/blog_migrate/c6d47ca3c78fdf6ff7adf781e3c79bb1.jpeg)
![df01fc9ca62b4ee89e3246c8aa94932e.png](https://i-blog.csdnimg.cn/blog_migrate/40a27e0712ef05f17a3400484e4b3d71.jpeg)
① 关系选择器
- 邻近兄弟元素选择器 A + B
选择紧跟A元素后的B元素,用+表示,选择相邻的第一个兄弟元素。
![05b9243e20af23d8987ab96eb9e7b6cd.png](https://i-blog.csdnimg.cn/blog_migrate/17e3ed9c8886a74e249857c8836eed28.jpeg)
- 兄弟元素选择器 A ~ B
选择A元素之后的所有兄弟元素B,作用于多个元素,用~隔开
![245b99c7e4c41abfd2a728936cadfc1e.png](https://i-blog.csdnimg.cn/blog_migrate/123508a20ada463b1829e6d914000cbc.jpeg)
- 直接子元素选择器 A > B
选择所有作为A元素的直接子元素B,对更深一层的元素不起作用,用>表示
![d67d8e94c9bf6789d398b9219bf3c2e7.png](https://i-blog.csdnimg.cn/blog_migrate/9a91d5bcb73c92461f5e6ee9e5ae1cba.jpeg)
- 后代元素选择器 A B
选择所有被A元素包含的B元素,中间用空格隔开,在CSS使用频率高
![bab2c4ddcfc2c1f540c049b4ac17b7af.png](https://i-blog.csdnimg.cn/blog_migrate/af23a31d50e988b828893e8203cb6f9e.jpeg)
![e78549f4cdb249a04f69b3bfe2aaa7f8.png](https://i-blog.csdnimg.cn/blog_migrate/1222e749b82668ec5a41119fc0a32820.jpeg)
③ 伪类选择器
选中某些元素的某种状态
1)link: 超链接未访问时的状态2)visited: 超链接访问过后的状态3)hover: 鼠标悬停状态4)active:激活状态,鼠标按下状态爱恨法则:love hate
![dc03bc0e987bd7f067d29417c075419c.png](https://i-blog.csdnimg.cn/blog_migrate/bd7bc830b2521f158854597902c949f4.jpeg)
● 声明块
出现在大括号{}中
声明块中包含很多声明(属性),每一个声明(属性)表达了某一方面的样式。
![10cd85410fcb767d68e3ae742e1d53f9.png](https://i-blog.csdnimg.cn/blog_migrate/7d5cbe5a253df496e2b7cfad8a9458ae.jpeg)