|
1、CSS简介
1.1、CSS是什么？
CSS指的是层叠样式表（Cascading Style Sheets）
CSS描述了怎样在屏幕、纸张或其他媒介上表示HTML元素
CSS节省了海量工作。它能够同期掌控多张网页布局。
1.2、CSS引入方式
引入方式 书写位置 功效范围 运用场景
内嵌式 CSS写在style标签中。style标签一般放在head中 当前页面 小案例
外联式 CSS写在单独的CSS文件中，经过link标签引入 多个页面 项目中
行内式 CSS写在标签的style属性中 当前标签 协同js运用
2、CSS选取器
2.1、CSS基本选取器
2.1.1 ID选取器
结构：#id属性值 { css属性名: 属性值; }
功效：经过id属性值，找到页面中带有这个id属性值的标签，设置样式
重视点：
所有标签上都有id属性
id属性值类似于身份证号码，在一个页面中是独一的，不可重复的
一个标签上只能有一个id属性值
一个id选取器只能选中一个标签
2.1.2 类选取器
结构：.class { css属性名: 属性值; }
功效：经过类名，找到页面中所有带有这个类名的标签，设置样式
重视点：
所有标签上都有class属性，class属性的属性值作为类名
类名能够由数字、字母、下划线、中划线构成，但不可以数字或中划线开头
一个标签能够同期有多个类名，类名之前以空格隔开
类名能够重复，一个类选取器能够同期选中多个标签
2.1.3 通配符选取器
结构：* { css属性名: 属性值; }
功效：找到页面中所有的标签，设置样式
重视点：默认去除浏览器自带属性margin和padding
2.1.4 标签选取器
结构：标签名 { css属性名: 属性值; }
功效：经过标签名，找到页面中所有这类标签，设置样式
重视点：
标签选取器选取的是一类标签，而不是单独某一个
标签选取器没论嵌套关系有多深，都能找到对应的标签
2.1.5 属性选取器
属性 说明
[attribute] 选取多有带 attribute 属性的元素
[attribute=value] 选取 attribute=value的所有元素
[attribute~=value] 选取 attribute属性包括单词 value的所有元素
[attribute^=value] 选取其attribute属性值以value开头的所有元素
[attribute$=value] 选取其attribute属性值以 value结束的所有元素
[attribute*=value] 选取其attribute属性中包括value子串的每一个元素
结构：标签名 { css属性名: 属性值; }
功效：经过标签名，找到页面中所有这类标签，设置样式
重视点：
标签选取器选取的是一类标签，而不是单独某一个
标签选取器没论嵌套关系有多深，都能找到对应的标签
2.2、组合选取器
选取器 功效 格式 示例
后代选取器 找后代 选取器之间经过空格分隔 .father .son { css }
子代选取器 找儿子 选取器之间经过 >分隔 .father > .son { css }
并集选取器 找到多类元素 选取器之间经过,分隔 div,p,span { css }
交集选取器 找同期满足多个选取器的元素 选取器之间紧挨着 p.red { css }
兄弟选取器 匹配p标签后的所有span元素 选取器之间经过 ~ 分隔 p ~ span
相邻选取器 匹配p标签的第1个span元素 选取器之间经过 + 分隔 p + span
2.3、伪类选取器
伪类：将特殊的效果添加到特定的选取器上，不会产生新元素
选取器 功能描述
E:first-child 做为父元素的第一个子元素的元素E
E:last-child 做为父元素的最后一个子元素的元素E
E:nth-child(n) 做为父元素的第n个子元素E
E:nth-last-child(n) 选取父元素的倒数第n个子元素
E:first-of-type 选取父元素内拥有指定类型的第1个E元素
E:last-of
| 
发表于 2024-6-29 19:11:16
