2021-03-24

最新推荐文章于 2024-11-16 00:27:13 发布

又菜又爱学giser

最新推荐文章于 2024-11-16 00:27:13 发布

阅读量95

点赞数

分类专栏：基础学习文章标签： html css

本文链接：https://blog.csdn.net/qq_25479767/article/details/115185659

版权

基础学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的四种引用方式，选择器的分类，包括标签选择器、类选择器、ID选择器等，并详细阐述了样式权重的计算规则。此外，还深入讲解了字体属性、文本属性和背景属性的使用，以及伪类和伪元素的概念和应用。重点提及了如`:link`、`:hover`等a标签伪类，以及属性选择器和关系选择器的用法，为理解CSS样式规则提供了全面的指导。

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

第三课学习笔记
2021年3月24日
（？为疑问，**为易忘知识点，《**...**》为易忘知识点集合）
CSS引用方式：4种
CSS选择器分类：*，标签选择器，类选择器，ID选择器，派生选择器？，伪类选择器，伪元素选择器。
CSS样式权重：!important(10000)>内联样式（1000）>ID选择器（100）>类、伪类、伪元素选择器（10）>标签选择器（1）。
CSS字体：
    font
     1     font-size:字号  px/%
       2   font-family:字体  eg.微软雅黑
     3     font-style:字体样式  normal/italic**/oblique**
      4    font-weight:文字加粗 normal/bold/bolder/lighter**/100-900(200lighter 400normal 700bold 900bolder)
    text
       1   text-decoration:文字修饰 none/underline/overline/line-through
      2    text-align:对齐方式 left/center/right
       3   text-transform:字母大小写 capitalize**/uppercase**/lowercase**/none
       4   text-indent:文本缩进  px/em/%/pt等
    line-height:行高 px/数字/em等
    color: 文字的颜色  单词/rgb/16进制
    font复合属性:
          font:font-style font-variant font-weight font-size/line-height font-family;
CSS背景:
    background
      1    background-color:背景色  transparent**/color
       2   background-image: 背景图  none/src
      3    background-repeat: 背景图像铺排方式  repeat**/no-repeat/repeat-x/repeat-y
       4   background-position: 设置对象的背景图像位置 {x-number|top/center？middle/bottom}{y-number|left/center/right}
       5   background-attachment:背景图像滚动位置 scroll/fixed**
    background复合属性写法：
          background:color image repeat attachment position
CSS伪类选择器
    伪类：专门用来表示元素的一种特殊状态。
    常见的伪类选择器：
        1  a标签的伪类：
           :link/:visited**/:hover**/:active**
                eg. a :link{color:#fff}
        2   :focus获取焦点 用于表单元素
        3   :first-child/:last-child/:nth-child(number)
属性选择器
        [属性名]:包含有指定属性名的元素（常用）
        [属性名=值]
        [属性名~=值]属性名的值包含指定值的元素
        [属性名^=值]属性名的值以指定值开头的元素
        [属性名$=值]属性名的值以指定值结尾的元素
关系选择器
        1  空格:后代选择器
        2  >：只选择儿子元素
        3  +：兄弟选择器
CSS伪元素
        《**
        1）CSS伪元素与伪类的定义及区别：
              css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。
              伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
              伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。例如，我们可以通过:before来在一个元素之前添加一些文本，
                      并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM文档中。
        2）伪元素&伪类的特点：
                伪元素和伪类都不会出现在源文档或者文档树中
                伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面
                伪元素名和伪类名都是大小写不敏感的
                有些伪类是互斥的，而其它的可以同时用在一个元素上。（在规则冲突的情况下，常规层叠顺序决定结果）
        **》
        3）:before/:after/:first-letter/:first-line   前面可以是单冒号也可以是双冒号
            ::selection/::placeholder/:backdrop:       前面只能是双冒号