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值来选

这里的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%）