css.基础-CSDN博客

本文链接：https://blog.csdn.net/YE_Ang/article/details/112694515

本文详细介绍了CSS的作用、引入方式（内联、内嵌、外链、导入）以及外部样式的优点，如结构与表现分离、提高开发效率等。还探讨了CSS的优先级规则，包括就近原则和！important关键字。此外，文章涵盖了CSS选择器的各种类型，如元素选择器、ID选择器、类选择器、伪类和伪元素，以及关系选择器和属性选择器，为网页样式设计提供了全面的理解。

摘要由CSDN通过智能技术生成

1.css是什么?

CSS 的全称是 Cascading Style Sheet（层叠样式表）
CSS 它主要用来控制网页的样式（美化网页）

2.css的引入方式有哪些

内连样式, 在元素内部和元素联合起来写的样式
内嵌式: 嵌入在HTML文件内部, head标签里面使用style标签包裹的样式, 就是内嵌式
外链式: 在html文件的外部, 有独立的.css文件, 使用link标签引入独立的css样式, 就是外链式
导入式: 在style标签里面, 使用@import导入的外部样式就是导入式 (不推荐使用该导入方式)

外链式和导入式都是导入外部样式, 区别在于, html文档遇到link, 会马上导入链接的文件, 而遇到@import则不会马上导入该文件, 只会在整个页面加载完成以后, 才导入@import需要的文件(页面会有一段时间没有样式)

3. 为什么使用外部样式, 外部样式的优点

网页是由三个部分组成的
- 结构: 网页的内容
- 表现: 网页的样式
- 行为: 网页的脚本
外部样式的优点: 结构和表现分离
外部样式的优点: 提高开发效率
外部样式的优点: 样式复用
外部样式的优点: 方便阅读和维护代码

4.css的优先级

样式优先级: 优先级高的样式会覆盖优先级低的样式
样式的几种导入方式的样式优先级, 遵循就近原则
- 就近原则: 样式离被设定样式的元素越近, 优先级越高
!important 关键字, 可以提高样式优先级, 提高到最高
浏览器的默认(缺省)样式, 优先级最低(任意样式都可以覆盖浏览器默认样式)

5. css语法

在css文件里面, 使用 ctrl + / 可以注释样式
语法:

    css选择器{ 
        <!--样式的主体-->
        <!--多个样式属性用分号;隔开-->
        样式属性1: 属性值;
        样式属性2: 属性值;
        样式属性3: 属性值;
        样式属性4: 属性值;
    }

css选择器: 作用是获取页面中的标签, 方便给该标签书写样式

5.css选择器

元素选择器
1. 通配符选择器: *{ } 匹配所有元素
2. 元素(标签)名选择器 elementName{ } 使用标签名匹配到指定的元素
3. id选择器 #id{ } 获取到指定id的元素
4. 类名选择器 .class{ } 获取到指定class的元素
5. 分组选择器多个选择器, 用逗号隔开, 多个选择器可以共用一套样式
1. 交集选择器: 求两个选择器选中元素的集合的交集
- li.item, 选中li元素, 并且这个元素需要同时具有 item的类名
- li#box, 选中li元素, 并且这个元素需要同时具有 box的id
关系选择器
1. 后代选择器(包含选择器) 祖先元素后代元素{ }
2. 子代选择器父元素>子元素{ }
3. 相邻选择器 + 选中某个元素后面的的相邻的另一个元素
4. 兄弟(同胞)选择器 ~ 选中某个元素之后的其他兄弟(同胞)元素
属性选择器
- [attr] 选中具有attr属性的元素
- [attr=“value”] 选中 attr属性完全等于 "value"的元素
- [attr~=“value”] attr属性的值是一个字词列表, 其中一个字词等于value 即可选中
- [attr^=“val”] 具有attr属性, 并且整个属性值要以val开头, 即可选中
- [attr$=“val”] 具有attr属性, 并且整个属性值要以 val结尾, 即可选中
- [attr*=“val”] 具有attr属性, 并且整个属性值中, 包含有val, 即可选中
- [attr|=“val”] 具有attr属性, 并且整个属性值中, 要以val开头以-连接(或者整个值仅为val), 即可选中
伪类选择器
- a标签的四种状态: LVHA
  - :link a标签未访问时的样式
  - :visited a标签访问过后的样式
  - :hover 鼠标悬浮时的样式
  - :active 鼠标点击未松开的样式
- :focus 可以输入的元素获取输入焦点时的样式
- :not(css选择器) 选中不包含某个选择器的其他元素
- li:first-child 选中第一个元素,并且该元素必须是li
- li:last-child 选中最后一个元素,并且该元素必须是li
- E:nth-child(n) 选中第n个元素, 并且该元素必须是E元素
  - (odd) 奇数个 li
  - (2n-1) 奇数个 li
  - (even) 偶数个 li
  - (2n) 偶数个 li
- :only-child 选中唯一的子元素 (多个子元素则获取不到)
- :empty 选中空元素
- :checked 处于选中状态的单选或复选框的样式
- :disabled 被禁用的元素的样式
- :enabled 处于可用状态的元素的样式
- ::selection 元素被选择时的样式
- 伪元素选择器
  - ::before
  - ::after
  - 伪元素: 伪装的元素,假元素
  - before 在…之前
  - after 在…之后
  - 伪元素选择器相当于span(span支持的所有的样式, 伪元素都支持)
  - 伪元素里面, content是内容, content可以为空, 但是必须要有
  - 伪元素是假的元素, 很难被脚本获取到
  - 所以伪元素一般用作装饰作用, 不做交互作用