CSS样式

两年半.倸枸

已于 2023-05-09 11:18:20 修改

阅读量185

点赞数

分类专栏：前端文章标签： css 前端 html

于 2023-04-20 16:28:39 首次发布

本文链接：https://blog.csdn.net/qq_43457781/article/details/130201550

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、概念

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

文件后缀.css。

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

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

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

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

<style>
    h1{
        color: blue;
        font-size: 66px;
    }
</style>

二、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>标签在头部。

<link rel="stylesheet" type="text/css" href="xx.css">

三、选择器

1、概念

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

2、全局选择器

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

*{
    margin：0;
    padding: 0;
}

3、元素选择器

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

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

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

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、背景属性

3、文本属性

4、表格属性

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

table,td{
    <!-- 1px：线宽  solid：实线  black：颜色 -->
    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)。

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属性定义元素在那个方向浮动，任何元素都可以浮动。

原理：浮动以后使元素脱离文档流、浮动只有左右浮动。可以理解为只要设置了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>

    <!--除去img标签之间的空隙-->
    <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属性指定了元素的定位类型

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

设置定位之后：可以使用四个方向进行调整位置：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

3、圆角和阴影例子代码

<!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{
            width: 100px;
            height: 100px;
            /* 代表对象居中显示 */
            margin: 0 auto;
            background-color: greenyellow;
            box-shadow: 10px 10px 10px black;
            border-radius: 10%;
        }
    </style>
</head>
<body>
    <div class="b1"></div>
</body>
</html>

4、动画

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

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

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

@keyframes创建动画。

语法：

 <style>
        @keyframes name{
            0% | from{ css样式}
            percent {css样式}
            100% | to {css样式}
        }
    </style>

执行：animation执行：

animation：name duration timing-function delay iteration-count direction；

代码示例：

<!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、媒体查询

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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设置大小颜色；网页字体支持所有现代浏览器。

两年半.倸枸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

CSS(Cascading Style Sheets) 层叠样式表，叫级联样式表，简称样式表。文件后缀.css。语法：CSS规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成属性(property)是设置样式的属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
复制链接

扫一扫