作者:一个字-刘斌 | 来源:互联网 | 2023-09-16 19:00
基本语法结构如何在网页中插入样式表内联样式:直接在元素中设置内部样式表:内部头部统一定义外部样式表:以css文件定义保存,之后引入!CSS没有限制空格的使用CSS通常对于字母大小写
基本语法结构
![image-20210817164735087](https://img.php1.cn/3cd4a/1eebe/cd5/dc7ef30f57b727c7.jpeg)
如何在网页中插入样式表
- 内联样式:直接在元素中设置
- 内部样式表:内部头部统一定义
- 外部样式表:以css文件定义保存,之后引入
!CSS没有限制空格的使用
CSS通常对于字母大小写不敏感(class和id选择器 例外)
插入样式表的方式存在优先级的差异:内联样式>内部样式表>外部样式表
CSS选择器
通用选择器
一个无序列表:
![image-20210820170347012](https://img.php1.cn/3cd4a/1eebe/cd5/ddcc574beb16294e.jpeg)
类选择器(class selector)
一个无序列表:
![image-20210820170621312](https://img.php1.cn/3cd4a/1eebe/cd5/433ea70d6ea577b1.jpeg)
id选择器
一个无序列表:
![image-20210820170822752](https://img.php1.cn/3cd4a/1eebe/cd5/60405fda58cd0acd.webp)
可以将选择器组合使用,比如若是当初想让指定的某一li元素中的内容变蓝
一个无序列表:
![image-20210820171145653](https://img.php1.cn/3cd4a/1eebe/cd5/5b97d3b808d031e2.webp)
兄弟选择器
得到这项之后的全部变红。
一个无序列表:
![image-20210820182946211](https://img.php1.cn/3cd4a/1eebe/cd5/7d7ef3f69d479716.webp)
伪类选择器
伪类本质上基于用户如何交互界面来设置元素样式地方法
一个无序列表:
hover悬停:鼠标在哪一部分上,那一部分就会泛红
focus:聚焦就会变蓝色
![image-20210820202859764](https://img.php1.cn/3cd4a/1eebe/cd5/72fd2c126203a875.webp)
![image-20210820202923023](https://img.php1.cn/3cd4a/1eebe/cd5/7494af3c1cda418d.webp)
![image-20210820202927954](https://img.php1.cn/3cd4a/1e618/bdf/129913486c37ddf6.jpeg)
![image-20210820203414800](https://img.php1.cn/3cd4a/1eebe/cd5/d67981797265d9c7.webp)
通过nth-child括号中的数字可以进行调整第几个出现效果
属性选择器
一个无序列表:
![image-20210820204338709](https://img.php1.cn/3cd4a/1eebe/cd5/d67981797265d9c7.webp)