css.基础

1.css是什么?

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

---

2.css的引入方式有哪些

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

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

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

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

---

4.css的优先级

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

---

5. css语法

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

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

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

5.css选择器

1. 元素选择器
   1. 通配符选择器: *{ } 匹配所有元素
   2. 元素(标签)名选择器 elementName{ } 使用标签名匹配到指定的元素
   3. id选择器 #id{ } 获取到指定id的元素
   4. 类名选择器 .class{ } 获取到指定class的元素
   5. 分组选择器 多个选择器, 用逗号隔开, 多个选择器可以共用一套样式

   6. 交集选择器: 求两个选择器选中元素的集合 的交集

   • li.item, 选中li元素, 并且这个元素需要同时具有 item的类名
   • li#box, 选中li元素, 并且这个元素需要同时具有 box的id

2. 关系选择器
   1. 后代选择器(包含选择器) 祖先元素 后代元素{ }
   2. 子代选择器 父元素>子元素{ }
   3. 相邻选择器 + 选中某个元素后面的 的相邻的另一个元素
   4. 兄弟(同胞)选择器 ~ 选中某个元素之后 的其他兄弟(同胞)元素
3. 属性选择器
   • [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), 即可选中
4. 伪类选择器
   • 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可以为空, 但是必须要有
     • 伪元素是假的元素, 很难被脚本获取到
     • 所以伪元素 一般用作装饰作用, 不做交互作用