css.基础

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

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: 属性值;
    }
  1. css选择器: 作用是获取页面中的标签, 方便给该标签书写样式

5.css选择器

  1. 元素选择器
    1. 通配符选择器: *{ } 匹配所有元素
    2. 元素(标签)名选择器 elementName{ } 使用标签名匹配到指定的元素
    3. id选择器 #id{ } 获取到指定id的元素
    4. 类名选择器 .class{ } 获取到指定class的元素
    5. 分组选择器 多个选择器, 用逗号隔开, 多个选择器可以共用一套样式
    1. 交集选择器: 求两个选择器选中元素的集合 的交集
    • 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可以为空, 但是必须要有
      • 伪元素是假的元素, 很难被脚本获取到
      • 所以伪元素 一般用作装饰作用, 不做交互作用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值