|
网页分成三个部分:
结构(HTML)
表现(CSS)
行径(JavaScript)
CSS
层叠样式表
网页实质上是一个多层的结构，经过css能够分别为网页的每一个层来设置样式
而最后 咱们能看到只是网页的最上边一层
总之一句话，CSS用来设置网页中元素的样式
第1种方式
(内联样式，行内样式):
在标签内部经过style属性来设置元素的样式问题
运用内联样式，样式只能对一个标签生效，倘若期盼影响到多个元素必要在每一个元素中都复制一遍，并且当样式出现变化时，咱们必要要一个一个的修改，非常的不方便
第二种方式：内嵌式
将样式编写到head中的style标签里
而后经过css的选取器来选中元素并为其设置各样样式
能够同期为多个标签设置样式，并且修改时只必须修改一处就可所有应用
内部样式表更加方便对样式进行复用
问题：
咱们的内部样式表只能对一个网页起功效，
它里边的样式不可跨页面进行复用
第三种方式 外边文件链入式
1. 能够将CSS样式编写到一个外边的CSS文件中，而后经过link标签来引入外边的CSS文件
2. 外边样式表必须经过1ink标签进行引入，寓意着只想要运用这些样式的网页都能够对其进行复用
3. <link rel=”stylesheet” href=”CSS文件路径”/>
4. 将样式编写到外边的css文件中，能够运用到浏览器的缓存机制，从而加快网页的加载速度，加强用户的体验。
CSS语法
CSS中的注释，注释中的内容会自动被浏览器所忽略
CSS的基本语法:
选取器 声明块
选取器，经过选取器能够选中页面中的指定元素
例如p的功效便是选中页面中所有的p元素
声明块，经过声明块来指定要为元素设置的样式
声明块由一个一个的声明构成
声明是一个名值对结构
一个样式名 对应一个样式值， 名和值之间以:连接，以;结尾
将所有的段落设置为红色(字体)
通配选取器
功效：选中页面中的所有元素
语法:*{}
元素（标签）选取器
功效:按照标签名来选中指定的元素
语法:标签名(}
id选取器
功效，按照元素的id属性值选中一个元素
语法: #id属性值{}
类选取器
功效:按照元素的c lass属性值选中一组元素
语法: .class属性值{}
class是一个标签的属性，它和id类似， 区别的是class能够重复运用
能够经过class属性来为元素分组，能够同期为一个元素指定多个class属性
id不可重复而class能够重复
交集选取器
功效:选中同期复合多个要求的元素
语法:选取器1选取器2选选器3选取器n{}
重视点:
交集选取器中倘若有元素选取器，必要运用元素选取器开头
选取器分组(并集选取器)
功效:同期选取多个选取器对应的元素
语法:选取器1，选取器2，选取器3,选取器n{}
父元素
直接包括子元素的元素叫做父元素
子元素
直接被父元素 包括的元素是子元素
祖先元素
直接或间接包括后代元素的元素叫做祖先元素
一个元素的父元素亦是它的祖先元素
后代元素
直接或间接被祖先元素包括的元素叫做后代元素
子元素亦是后代元素
兄弟元素
持有相同父元素的元素是兄弟元素
子元素选取器
功效：选中指定父元素的指定子元素
语法:父元素>子元素
后代元素选取器
功效:选中指定元素内的指定后代元素
语法:祖先后代
选取下一个兄弟
语法:前一个+下一个
紧挨着的下一个元素标签
选取下边所有的兄弟
语法:兄~弟
[属性名]选取含有指定属性的元素
[属性名=属性值]选取含有指定属性和属性值的元素
[属性名^=属性值]选取属性值以指定值开头的元素
[属性名￥=属性值]选取属性值以指定值结尾的元素
[属性名*=属性值]选取属性值中含有某值的元素的元素
伪类
伪类(不存在的类，特殊的类)
伪类用来描述一个元素的特殊状态
伪类通常状况下都是运用:开头
:first-child 第1个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n第n个n的范围到正没穷
2n暗示选中偶数位的元素
2n+1暗示选中奇数位的元素
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的
| 
发表于 2024-6-30 11:00:37
