CSS 学习笔记

CSS 学习笔记

参考文档

CSS手册 - API参考文档 (apiref.com)

网页分为三部分

  1. 行为 js
  2. 表现 css
  3. 结构 htm

css:层叠样式表

层叠:网页是一个多层的结构,通过css可以分别给网页每一个层设置样式

 <!-- 
        使用css 来修改元素的样式
        第一种方式:标签里使用style属性(内联样式,行内样式)
    -->
    <p style="color: red;font-size: 20px;">我爱吃鱼香茄子</p>

在开发的时候,不推荐使用内联样式

内联样式

只能对一个标签生效,如果要影响多个元素,增加代码冗余量

 <p style="color: red;font-size: 20px;">我爱吃鱼香茄子</p>

内部样式表

  • 编写在head种的style标签中
  • 通过css的选择器来选中元素来设置样式
  • 可以同时设施多个标签的样式,且修改的时候一键修改

只能对一个网页作用,不能跨页面使用

    <style>
        p{
         color: aqua;
         font-size: 50px;
        }
    </style>

外部样式表

需要通过link标签进行引入,只要想要使用这些样式的网页都可以使用

开发推荐使用

 <!-- 第三种方式:外部样式表 -->
      <link rel="stylesheet" href="./css/01-css.css">

将样式表写到外部css文件种,可以使用浏览器的缓存机制,可以加快网站的加载速度

css语法

注释

/*  */

语法:选择器 声明块

选择器

选择页面的指定元素。

声明块

  • 通过声明块来指定给选择的元素设置的样式
  • 由一个一个的声明组成
  • 声明是一个键值对的结构
  • 一个样式名对应一个样式值,键值之间:链接,以;结尾
 p{
    color: aqua;
    font-size: 50px;
    }

vscode快捷键:shift+alt+上下箭头,快速复制

选择器

元素选择器

  • 根据标签名选中指定的元素
  • 语法:标签名{}

例子:p{} h1{} div{}

id选择器

    #yxqz{
            color: cadetblue;
        }

通过id值来选

image-20210610164638405

这里的id已经重复,但是没有报错,但是实际操作的时候是不能这样使用的

class选择器

是标签的一个属性,和id不同的是可以重复使用

统配选择器

*

页面中的所有元素

交集选择器

选中同时符合多个条件的元素

交集选择器如果有元素选择器,必须使用元素选择器开头

语法:选择器1选择器2。。。。{}

   div.red{
            font-size: 50px;
        }

并集选择器

同时选择多个选择器对应的元素

语法:选择器1,选择器2,选择器3{}

关系选择器

关系:父子,祖先,后代,兄弟

父子

  • 直接包含子元素的元素叫做父元素
  • 父子之间是一个参考物,通俗来说就是一个层级的关系

祖先

直接或间接包含了后代的元素,一个元素的父元素也是它的祖先元素

后代

直接或间接被组先元素包含的元素,子元素也是后代元素

兄弟

同个级别的元素(有相同的父元素)

子元素选择器

选中指定父元素中的子元素

语法:父元素>子元素

只选中div是父元素中的span

div>span {}

后代元素选择器

选中指定的元素内的后代元素

语法: 组先   后代

这里选中所有的span后代

div span {}

兄弟选择器

选择下一个兄弟

语法:前一个+ 后一个

加入div和p是兄弟关系

div+p{}

选择下边所有的兄弟

语法:前一个 ~ 后一个

属性选择器

  • [属性名] 选择含有指定属性的元素
  • [属性名 = 属性值] 选择含有指定属性名和属性值的元素
  • [属性名 ^= 属性值] 选择属性值以指定值开头的元素
  • [属性名 $= 属性值] 选择属性值以指定值结尾的元素
  • [属性名 *= 属性值] 选择属性值中含有指定值的元素

伪类选择器

伪类:不存在的类,特殊的类,用来描述元素的一个状态,比如第一个元素,最后一个元素,被选中的元素等元素的操作状态

  • 一般情况下都是使用的冒号开头
  • 如果不是子元素,那么就是参照当前的元素
  • :first-child 第一个子元素 (不区分类型)
  • :last-child 最后一个子元素(不区分类型)
  • :nth-child(n) 最后第N个元素 (不区分类型)

特殊值:

  1. 当括号里直接写n的时候 n的范围0-正无穷,从0开始
  2. 2n 偶数位置
  3. 2n+1 奇数位置

更多查看文档

     li:first-child{
            color: red;
        }

:first-of-type 同类型 第一个子元素

:not() 否定伪类,将符合条件的元素从选择器中去除(除了谁)

:houver 鼠标移入的状态

:active 鼠标点击

a:link 没有访问过的链接

a:visited 访问过的链接

link和visited这个两个伪类是a标签独有的伪类

visited 由于隐私,只能修改颜色

伪元素选择器

lorem快速生成一段文字

伪元素:表示页面中特殊的,且不存在的元素(特殊的位置

使用::开头,两个冒号

::Frist-leter表示第一个字母

        p::first-letter{
            font-size: 50px;
        }

::first-line 表示第一行

   p::first-line{
            background-color: rosybrown;
        }

::selection 表示选中的内容

   p::selection{
            background-color: salmon;
        }

::before 元素的开始位置

::after 元素的最后位置

before和after必须结合content属性来使用

        p::before{
            content: yx;
        }
        p::after{
            content: qz;
        }

简单的理解就是通过css来添加前缀或者后缀,且鼠标无法选

比如q标签,就是使用了before和after

继承

样式的继承

给一个元素设置继承,同时应用到了后代元素上

    <p>我爱吃<span>鱼香茄子</span></p>
   p{
            color: red;
        }

再p中和span中的字体都是红色

继承是发生在祖先和后代中的

继承是为了方便开发的,可以将通用的样式设置到共同的组先元素上,让所有的元素都共享样式

不是所有的样式 都会被继承,比如背景、布局这些硬样式

选择器的权重

样式冲突:不同的选择器,选中相同的元素怒,且相同的样式设置了不同的值

发生了冲突的时候,由选择器的优先级(权重)决定

  1. 内联样式
  2. id选择器
  3. 类和伪类选择器
  4. 元素选择器

内联>id>class>元素

交集选择器 :比较优先级,需要将选择器优先级进行相加,最后的优先级越高,则优先

分组选择器:分开独立计算

选择器的累加,不会超过最大的数量级,例如类选择器也不会超过id选择器

如果优先级计算后相同,按照从上到下执行的顺序,执行最下面的样式

统配选择器:优先级大于继承的样式

! important 提高该样式的优先级,超过内联样式

长度单位

像素:不同屏幕的像素大小的百分比是不同的。单位是px

百分比:相对于父元素的百分比

em:相对于元素的字体大小来计算 1em= 1 font-size 根据字体大小来改变

rem:相对于字体,em是相对于自己的字体,rem是相对于根元素(html)的字体大小来改变

颜色单位

RGB

  1. red
  2. green
  3. blue

每一种颜色范围i是0-255之间(0%-100%)

 background-color: rgb(255, 0, 0);
  • 如果rgb都是0 则是全黑
  • 如果都是255 则都是白色

RGBA

多了一个不透明度,四个参数,前三个就是RGB ,最后一个是不透明度

  1. 1表示完全不透明
  2. 0表示完全透明
  3. .5或则和0.5表示半透明
background-color: rgba(0, 255, 255, .5);

十六进制的是RGB值: #RGB

值是(00-ff)

如果颜色两位两位重复,比如#aabbcc可以简写#abc

background-color: #dddd;

HSL和HSLA

  1. H(hue):色相 (0-360)
  2. S(saturation):饱和度 (0%-100%)
  3. L(lightness):亮度 (0%-100%)

原文链接:https://www.cnblogs.com/yxqz/archive/2021/06/10/14872936.html