CSS笔记

 

一、css的编写位置

        1. 内联样式、行内样式

                - 在标签内部通过使用style属性来设置元素样式

                - 问题

        使用内联样式，样式只能对一个标签生效 ，如果希望影响多个元素，必须在每个元素中复制一遍

                ※开发时一定不要使用内联样式

<p style="color: blue;">艾欧尼亚，昂扬不灭</p>

        2. 内部样式表

                - 将样式编写到head中的style标签里

                        然后通过css选择器来选中元素并为其设置各种样式

                        可以同时为多个标签设置样式，并且只需修改一处即可全部应用

                - 内部样式表更加方便对样式进行复用

                - 问题：        

                        内部样式表只能对一个网页起作用，它里面的样式不能跨页面进行复用

<style>
    p{
        color: cyan;
        font-size: 30px;
    }
</style>

        

        3. 外部样式表

                - 可以将css样式编写到一个外部的css文件中，然后通过link标签来引入外部css文件

                - 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用

                - 将样式表白编写到css文件中，可以使用到浏览器的缓存机制，

从而加快网页的加载速度，提高用户的体验

<link rel="stylesheet" href="./style.css">

p{
    color: darkorchid;
    font-size: 30px;
}

二、css基本语法

        选择器 声名块

                选择器：通过选择器可以选中页面中的指定元素

                声明块：通过声名块来指定要为元素设置的样式

                        声明块由一个个声明组成

                        声明是一个名值对结构

                        一个样式名对应一个样式值，名和值之间以" : "连接，以" ; "结尾

三、常用选择器

        1. 元素选择器

                作用：根据标签来选中指定的元素

                语法：标签名{}

p{
    color: blueviolet;
}

h1{
    color: red;
}

        2. id选择器

                作用：根据元素的id属性值来选中一个元素

                语法：#id属性值{}

                ※ id不能重复使用

#sign{
    color: blueviolet;
}

        3. 类选择器

                作用：根据元素的class属性选中一组元素

                语法：.class属性值{}

.red{
    color: red;
}

.another{
    font-size: 15px;
}

        4. 通配选择器

                作用：选中页面中的所有元素

                语法：*{}

*{
    color: seagreen;
}

四、复合选择器

        1.交集选择器

                作用：选中同时复合多个条件的元素

                语法：选择器1.选择器2.~~~选择器n{}

                ※如果交集选择器中有元素选择器，必须以元素选择器开头

div.sign{
    font-size:30px;
}

.a.b.c{
    color: rgba(43, 164, 201, 0.418);
}

        2. 并集选择器

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

                语法：选择器1,选择器2,~~~选择器n{}

h1,span{
    color: red;
}

五、关系选择器

        1. 子元素选择器

                作用：选中指定父元素中的指定子元素

                语法：父元素 > 子元素

div.sign > span{
    color: cornflowerblue;
}

div > p > span{
    color: rgb(23, 226, 23);
}

        2. 后代元素选择器

                作用：选中指定元素内的指定后代元素

                语法：祖先 后代

div span{
    color: darkorchid;
}

六、属性选择器

        [属性名] 选择含有指定属性的元素

        [属性名=属性值] 选择含有指定属性和属性值的元素

        [属性名^=属性值] 选择属性值以指定值开头的元素

        [属性名$=属性值] 选择属性值以指定值结尾的元素

        [属性名*=属性值] 选择属性值中含有指定值的元素

七、伪类选择器

        伪类（特殊的类，不存在的类）

                - 伪类用来描述一个元素的特殊状态

                            例：第一个子元素，被点击的元素，鼠标移入的元素

                - 伪类一般情况都是使用" : "开头

                    :first-child 第一个子元素

                    :last-child 最后一个子元素

                    :nth-child() 选中第n给子元素

                        特殊值：

                            n 第n个 n的范围0~+∞

                            2n  或 even 偶数个

                            2n+1 或 odd 奇数个

                以上的伪类都是根据所有的子元素进行排序

                    :first-of-type

                    :last-of-type

                    :nth-of-type()

                        - 这几个伪类的功能类似

                        - 不同点：他们是在同类型元素中进行排序

                - :not() 否定伪类

                    - 将符合条件的元素从选择器中去除

八、超链接的伪类

        :link 用来表示没访问过的链接（正常的链接）

a:link{
    color: red;
}

        :visited 表示访问过的链接

        ※由于隐私的原因，visited 只能修改链接的颜色

a:visited{
    color: seagreen;
}

        :hover 用来表示鼠标移入的状态

a:hover{
    color: slateblue;
    font-size: 30px;
}

        :active 用来表示鼠标点击的状态

a:active{
    color: blue;
    font-size: 40px;
}

九、伪元素选择器

        伪元素，表示页面中一些并不真实存在的元素

                伪元素使用 :: 开头

                        ::first-letter 表示第一个字母

                        ::first-line 表示第一行

                        ::selection 表示选中的内容

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

p::first-line{
    background-color: rgb(243, 229, 31);
}

p::selection{
    background-color: chartreuse;  
    color: rgb(68, 18, 247);
}

                        ::before 表示元素开始的位置

                        ::after 表示元素结束的位置

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

div::before{
    content: '⌈';
    color: red;
}

div::after{
    content: '⌋';
    color: red ;
}

十、元素的继承

        样式的继承，我们为一个元素设置样式的同时也会应用到它的后代元素中

        继承是发生在祖先元素和后代元素之间的

        继承的设计是为了方便我们开发，利用继承我们可以将一些通用的样式设置到共同的祖先元素上，这样只需设置一次即可让所有元素均具有该样式

        ※并不是所有样式都会被继承比如与背景，布局相关的样式均不会被继承。

十一、选择器的权重

        样式的冲突

                - 当我们通过不同的选择器，选择相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突

                发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

                选择器的权重：

                        内联样式                1,0,0,0        

                        id选择器                 0,1,0,0

                        类和伪类选择器      0,0,1,0

                        元素选择器              0,0,0,1

                        通配选择器              0,0,0,0

                        继承的样式              没有优先级

         比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）

        选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器

         如果优先级计算后相同，优先使用靠下的样式

           

            可以在某一个样式的后面添加 !important ,则此时该样式会获得最高的权重,甚至超过内联样式

               ※在开发中 !important 切记要慎用

十二、长度单位

        像素

                 - 屏幕（显示器）实际上是由一个个像素点构成的

                - 不同屏幕像素大小不同，像素越小的屏幕显示的效果越清晰

                - 所以同样的200px在不同的设备下显示的效果不一

.box1{
    width: 200px;
    height: 200px;
    background-color: orange;
}

        百分比

                - 也可以将属性值设置为相对于其父元素属性的百分比

                - 设置百分比可以使子元素跟随父元素改变而改变

.box2{
    width: 50%;
    height: 50%;
    background-color: paleturquoise;
}

        em

                - em 是相对于元素的字体大小来计算的

                 - 1em = 1font-size

                 - em 会根据字体大小改变而改变

.box3{
    font-size: 10px;
    width: 10em;
    height: 10em;
    background-color: palevioletred;
}

        rem

                 - rem 是相对于根元素的字体大小来计算的

.box4{
    font-size: 10px;
    width: 10rem;
    height: 10rem;
    background-color: red;
}

十三、颜色单位

        在css中可以直接使用颜色名来设置各种颜色

background-color: red;

        RGB值：

                    - R red

                    - G green

                    - B blue

                    - RGB通过三种颜色的不同浓度来调配出不同的颜色

                    - 每一种颜色的范围都在0 ~ 255（0% ~ 100%）之间

                    - 语法：RGB（红色，绿色，蓝色）

background-color: rgb(255,100,200);

                RGBA值

                    - 就是在RGB的基础上增加了一个 A 表示不透明度（1表示完全不透明 0表示完全透明）

background-color: rgba(188,156,204,0.5);

                十六进制RGB值：

                    - 语法：#红色绿色蓝色

                    - 颜色浓度通过 00-ff表示

                    - 如果颜色两位数重复可以进行简写

                        #aabbcc --> #abc

background-color: #ff0000;

                HSL值 HSLA值

                    - H 色相（0 ~ 360）

                    - S 饱和度(颜色的浓度（0% ~ 100%))

                    - L 亮度(颜色的亮度(0% ~ 100%))