CSS样式

ゞ浴缸里的玫瑰 2024-03-23 13:29 48阅读 0赞

#### 一、概念 ####

CSS(Cascading Style Sheets) 层叠样式表，叫级联样式表，简称样式表。

文件后缀.css。

语法：CSS规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)

选择器通常是需要改变样式的HTML元素。

每条声明由一个属性和一个值组成

属性(property)是设置样式的属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

## 二、CSS引入方式 ##

#### 1、内联样式(行内样式) ####

要使用内联样式，需要在相关的标签内使用样式(style)属性。style属性可以包含任何CSS属性

<a style="color: aliceblue;" href="https://www.baidu.com/">aaaaa</a>

#### 2、内部样式 ####

当单个文档需要特殊的样式时，就应该使用内部样式表。可以在文档头部<head>标签内定义<style>。

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            h1{
                color: blue;
                font-size: 66px;
            }
        </style>
    </head>

#### 3、外部样式 ####

当样式需要应用于很多页面时，外部样式表是理想的选择。每个页面使用<link>标签链接到样式表。<link>标签在头部。

## 三、选择器 ##

#### 1、概念 ####

CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明

#### 2、全局选择器 ####

可以与任何元素匹配，优先级最低，一般做样式初始化

*{
        margin：0;
        padding: 0;
    }

#### 3、元素选择器 ####

HTML文档中的元素，p、b、div、a等。

标签选择器，选择的是页面上所有这类的标签，所以经常描述”共性“，无法描述某一个元素的”个性“。

h1{
            color: blue;
            font-size: 66px;
        }

![1ce357e10ba4473aaba84b2850722fa4.png][]

#### 4、类选择器 ####

规则用圆点来定义，针对想要的标签使用。

如果需要使用多个，则只需在class后面写多个，使用空格隔开

<ol class="h221">
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
        </ol>
    
    <style>
        .h221{
            color: blue;
            font-size: 66px;
        }
    </style>

#### 5、ID选择器 ####

针对某一个特定的标签使用，只能使用一次。CSS中的ID选择器以\#定义。

<ol id="h221">
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
     </ol>
    <style>
        #h221{
            color: blue;
            font-size: 66px;
        }
    </style>

#### 6、合并选择器 ####

语法：name1，name2\{\}

作用：提取共同的样式，减少重复代码

.header,.footer{
        height: 300px;
    }

#### 7、选择器的优先级 ####

CSS中，权重用数字衡量

元素选择器：1

class选择器：10

id选择器：100

内嵌样式：1000

## 四、属性 ##

#### 1、字体 ####

颜色(color)：英文、rgb等

文本大小(font-size)：数字+px

文本粗细(font-weight)：bold、bolder、lighter、100-900

字体样式(font-style)：normal(默认普通)、italic(斜体)

指定一个元素的字体(font-family)：每个值用逗号隔开并加上双引号。

#### 2、背景属性 ![f1dbaa57c6dc4028b1defbdff308a27f.png][] ####

![cf11dd089b9145d59dd817fb4ceb8edc.png][]

![cf74b7e36ed2491085b04f480a16570d.png][]

![a28345618d3e4e6c9bbcd7a50aae7ea2.png][]

#### 3、文本属性 ####

![76d9ddfecb81441a8284a8a5aab0012e.png][]

![3d11206c26714c639affc3537aa45887.png][]

![114559e7f27a45c9a007cff3cb425a7b.png][]

![6a02087919a14baca2204d7ebdc00bf4.png][]

#### 4、表格属性 ####

表格边框：指定CSS表格边框，使用border属性

table,td{
        
        border:1px solid black;
    }

折叠边框：border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
        border-collapse:collapse;
    }

表格宽度和高度：width和height指定宽度和高度

table{
        width:200px;
        height:50px;
    }

表格文字对齐：表格中文字对齐和垂直对齐属性

td{
        
        text-align:center;
    
        
        vertical-align:bottom;
    }

表格填充：控制表格中内容和表格边框之间的距离。

td{
        padding: 15px;
    }

## 五、关系选择器 ##

#### 1、后代选择器 ####

选择所有被E元素包含的F元素，中间用空格隔开

语法：E F\{\}

注意：无论F元素在E元素内的第几层都会被识别到

<ul>
        <li>会识别</li>
        <li>会识别</li>
        <li>会识别</li>
        <span>不会识别</span>
        <ul>
            <li>会识别</li>
        </ul>
    </ul>
    
    ul li{
        color: red;
    }

#### 2、子代选择器 ####

选择所有作为E元素的直接子元素F，对更深层的元素不起作用

语法：E>F\{\}

<div>
        <a>识别</a>
        <p>不识别</p>
        <span>
            <a>不识别</a>
        </span>
    </div>
    
    div>a{
        color:red;
    }

#### 3、相邻兄弟选择器 ####

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法：E+F\{\}

<a></a>
    <p>识别</p>
    <p>不识别</p>
    
    a+p{
        color:red;
    }

#### 4、通用兄弟选择器 ####

选择E元素后的所有兄弟元素F，作用于多个元素，用~隔开

语法：E~F\{\}

<a></a>
    <p>识别</p>
    <p>识别</p>
    
    a~p{
        color:red;
    }

## 六、CSS盒子模型 ##

#### 1、概念 ####

所有HTML元素可以看作盒子，在CSS中，“box model” 是用来设计和布局时使用的。

CSS盒模型本质上是一个盒子，封装周围的HTML元素 包括：外边距(margin)，边框(border)，内边距(padding)，实际内容(content)。

![3b2712e5990f48d69d0d72127f080274.png][]

margin(外边距)：清除边框外的区域，外边距是透明的。(属性有上下左右)

Border(边框)：围绕在内边距和内容的边框。两个值：第一个线宽；第一个线类型。

Padding(内边距)：清除内容周围的区域。两个值：第一个上下；第二个左右。(属性有上下左右)

Content(内容)：盒子的内容，显示文本和图像。

#### 2、弹性盒子模型 ####

弹性盒子由弹性容器(flex container)和弹性子元素(fiex item)组成

弹性容器通过设置display属性的值为flex将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性元素如何在弹性容器内布局。

<div class="boxf">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
    <style>
        .boxf{
            display:flex;
            width:500px;
            height:500px;
        }
    </style>

#### 3、弹性盒子属性 ####

#### flex-direction ####

指定子元素在父容器中的位置，在父容器中设置。

语法：flex-directoin:row

row：横向从左到右排列(左对齐)，默认。

row-reverse：反转横向排列(右对齐，从最后往前排)。

column：纵向排列

Colum-reverse：反转纵向排列，从后往前排，最后一项在上边。

#### justify-content ####

内容对其属性应用在弹性容器上，把子元素按照主轴线对齐，在父容器中设置。

语法：justify-content：flex-start

flex-start：弹性项目向行头挨着填充(上对齐)。默认。

flex-end：弹性项目向行尾挨着填充(下对齐)。

center：居中对齐。

#### align-items ####

设置或检索弹性盒子元素在纵轴上对其方式。父容器中设置。

语法：align-items:flex-start

flex-start：左对齐。默认。

flex-end：右对齐。

center：居中对齐。

#### flex ####

根据元素设置的扩展因子作为比率分配剩余空间。子元素中设置

默认0，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按照扩展因子转化的百分比对其分配剩余空间。0.1=10%，1=100%，超出按100%。

语法：flex:2。

计算方式：所有盒子flex的值来除以所有盒子flex总值。

## 七、文档流 ##

#### 1、概念 ####

文档流是文档中可显示对象在排列时所占用的位置/空间

#### 2、问题 ####

高低不齐、底边对齐

空白折叠现象：无论多少空格、换行、tab都会折叠成一个。

img标签之间有间隙。

#### 3、解决方式 ####

使一个元素脱离标准文档流；

方法：浮动、绝对定位、固定定位。

#### 4、浮动 ####

float属性定义元素在那个方向浮动，任何元素都可以浮动。

![9ad9e18584974fe590e1712b8c88812f.png][]

原理：浮动以后使元素脱离文档流、浮动只有左右浮动。可以理解为只要设置了float属性就是在另外一层作用。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            .parent{
                width: 500px;
                height: 500px;
                background-color: black;
            }
            .b1{
                background-color: white;
                float: left;
                width: 100px;
                height: 100px;
            }
            .b2{
                background-color: burlywood;
                width: 200px;
                height: 200px;
            }
            ul li{
                float: left;
                margin-left: 30px;
            }
            img{
                width: 100px;
                height: 100px;
                float: left;
            }
        </style>
    </head>
    <body>
        >
        <div class="parent">
            <div class="b1"></div>
            <div class="b2"></div>
        </div>
    
        
        <ul>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    
        
        <div>
            <img src="D:/媒体文件/壁纸/wallhaven-9dzzow_2560x1440.png">
            <img src="D:/媒体文件/壁纸/wallhaven-9dzzow_2560x1440.png">
        </div>
    </body>
    </html>

#### 5、清除浮动 ####

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用。

方式：父元素设置高度、受影响的元素设置clear属性、overflow清除、伪对象方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .parent{
                width: 500px;
                /* 1、增加高度 */
                /* height: 300px; */
                background-color: black;
                /* 3、设置overflow */
                /* overflow: hidden; */
            }
            /* 4、伪对象 */
            .parent::after{
                content: "";
                display: block;
                clear: both;
            }
            .b2,.b1{
                background-color: blue;
                float: left;
                width: 100px;
                height: 100px;
                margin: 10px;
            }
            .b3{
                background-color: red;
                width: 100px;
                height: 100px;
                /* 2、受影响的元素设置clear属性 */
                /* 属性值：left、right、both */
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="b1"></div>
            <div class="b2"></div>
            <div class="b3"></div>
        </div>
    </body>
    </html>

#### 6、定位 ####

position属性指定了元素的定位类型

![1aeebf0079f64b63994b7b57c6501f17.png][]

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向进行调整位置：left、top、right、bottom。

注意：1、固定定位：在页面滚动时不会随之滚动，固定显示在浏览器中的某个位置。

2、设置定位后，相对定位和绝对定位是相对与具有定位的父级元素进行位置调整，如  
果父级元素不存在定位，则继续向上逐级寻找，直至顶层文档

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .b1,.b2{
                width: 100px;
                height: 100px;           
                /* position: relative; */
                /* position: fixed; */
                position: absolute;
                
            }
            .b1{
                top: 100px;
                left: 100px;
                background-color: red;
                /* 设置图层位置，数值越大图层优先级越高 */
                z-index: 1;
            }
            .b2{
                top: 150px;
                left: 150px;
                background-color: blue;
                z-index: 2;
            }
        </style>
    
    </head>
    <body>
        <div class="b1"></div>
        <div class="b2"></div>
    </body>
    </html>

## 八、CSS3新特性 ##

#### 1、圆角 ####

border-radius属性，可以使用以下规则：

一个值：四个圆角值相同。

两个值：第一个值左上角和右下角，第二个值左下角和右上角。

三个值：第一个值左上角，第二个值右上角和左下角，第三个值右下角。

四个值：第一个值左上角，第二个值右上角，第三个值右下角，第四个值左下角。

注意：值设置成100%变成圆形。

#### 2、阴影 ####

box-shadow向框添加一个或多个阴影。

例子：box-show:h-shadow v-shadow blur color ![b6d8463ad5c44db9ac80949c07606fa2.png][]

#### 3、圆角和阴影例子代码 ####

#### 4、动画 ####

动画是使元素从一种样式逐渐变为另一种样式的效果。

用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

0%是动画开始，100%是动画完成。

@keyframes创建动画。

语法：

执行：animation执行：

animation：name duration timing-function delay iteration-count direction； ![44124bce6fb84787a2122af7a8357be4.png][]

![67c84ed2c5c24b958bb6c3c0107181de.png][]

代码示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                width: 100%;
                background-color: black;
            }
            .text{
                width: auto;
                height: auto;
                color: #000;    
                font-size: 100px;      
                /* 呼吸灯效果 */
                animation: txt 5s linear 0s infinite normal running;
            }
            .parent{
                margin-top: 50%;
                margin-left: 50%;
            }
    
            @keyframes txt{
                0%  { 
                    /* box-shadow: 0px 0px 5px black; */
                    text-shadow: 0px 0px 10px black;
                }
                50%  { 
                    /* box-shadow: 0px 0px 5px white; */
                    text-shadow: 0px 0px 10px white;
                }
                100%  {
                    /* box-shadow: 0px 0px 5px black; */
                    text-shadow: 0px 0px 10px black;
                }
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <span class="text">
                SUMSUNG
            </span>
        </div>
    </body>
    </html>

#### 5、媒体查询 ####

上述代码作用：调整页面大小的时候，区域显示的大小不变

width=device-width：宽度等于当前设备的宽度。

initial-scale：初始的缩放比例(默认设置为1.0)。

maximun-scale：允许用户缩放到的最大比例(默认设置为1.0)。

user-scalable：用户是否可以手动缩放(默认设置为no)。

媒体查询语法：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style>
            .box{
                width: 100px;
                height: 100px;
            }
            /* 手机 */
            @media screen and (max-width: 768px) {
                .box{
                    background-color: red;
                }
                .pid,.phone{
                    display: none;
                }
            }
    
            /* 平板 */
            @media screen and (min-width: 768px) and (max-width:996px){
                .box{
                    background-color: greenyellow;
                }
                .pid{
                    display: none;
                }
                .phone{
                    display: block;
                }
            }
    
            /* 电脑 */
            @media screen and (min-width: 996px) {
                .box{
                    background-color: skyblue;
                }
                .pid,.phone{
                    display: block;
                }
            }
            
        </style>
    
    </head>
    <body>
        <div class="box">
        </div>
        <div class="phone">
            手机不显示
        </div>
        <div class="pid">
            平板不显示
        </div>
    </body>
    </html>

#### 6、雪碧图 ####

CSS sprite也叫CSS 精灵图、CSS雪碧图，是一种网页图片处理方式。它允许你将一个页面涉及到的所有零星图片包含到一张大图中。

优点：减少图片的字节；减少网页的HTTP请求，从而大大的提高页面的性能。

原理：通过background-image引入背景图片

通过background-position把背景图片移动到自己需要的位置。

#### 7、字体图标 ####

使用图标时可能会失帧，图片数量多的话，页面加载就越慢。为了解决以上问题，可以使用字体图标的方式来显示图标，既解决了失真问题，也解决了图片占用资源的问题。

优点：加载速度快，减少http请求；可以利用CSS设置大小颜色；网页字体支持所有现代浏览器。

[1ce357e10ba4473aaba84b2850722fa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0cdd3acdeb0549b48a54538e4000f2b0.png
[f1dbaa57c6dc4028b1defbdff308a27f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/a62a1a68155c4b57aea2bbee1632551f.png
[cf11dd089b9145d59dd817fb4ceb8edc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2487986faa434110901ce5645cd75edf.png
[cf74b7e36ed2491085b04f480a16570d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2a3e8f7f48b4415fa245b5107f748917.png
[a28345618d3e4e6c9bbcd7a50aae7ea2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/4ffaade04b644fc8952e306d56d2d7c9.png
[76d9ddfecb81441a8284a8a5aab0012e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/2d0073dcd709417bacec0cb7d556025c.png
[3d11206c26714c639affc3537aa45887.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ea6fdd6a55094971adf0c40bfd831273.png
[114559e7f27a45c9a007cff3cb425a7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/47c7e04ea9274b1eb1469b5fcf1954cc.png
[6a02087919a14baca2204d7ebdc00bf4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/ec72d00c3b01441187a6b0c46340009f.png
[3b2712e5990f48d69d0d72127f080274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/1960315dec4c4e0e8440d79635d68e12.png
[9ad9e18584974fe590e1712b8c88812f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/0184c7fe60a545b1bb609919ac05a081.png
[1aeebf0079f64b63994b7b57c6501f17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/33beb8a8c3d14145b5f6f1bc50a066a9.png
[b6d8463ad5c44db9ac80949c07606fa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/22b84e0d23ef4e8db3bced325bc01af7.png
[44124bce6fb84787a2122af7a8357be4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/6a839c08a38c44df9f0f8f6328891d36.png
[67c84ed2c5c24b958bb6c3c0107181de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/cd67e876a35f4f5a9d198b404f32af79.png