文章目录

1.引入的方式
- 1.1作为HTML的标签属性
- 1.2style标签
- 1.3link标签外部引入css文件
2.基础选择器
- 2.1标签选择器
- 2.2类选择器
- 2.3id选择器
- 2.4通配符选择器
3.复合选择器
- 3.1后代选择器
- 3.2子选择器
- 3.3并集选择器
- 3.4伪类选择器
4.设置样式
- 4.1字体
- 4.2文本
- 4.3背景
- 4.4圆角
5.显示模式
6.盒模型
7.页面布局（弹性布局）

1.引入的方式

1.1作为HTML的标签属性

针对单个元素，无法针对多个元素

<!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>
</head>
<body>
    <div style="height: 50px; background-color: coral;"></div>
</body>
</html>

1.2style标签

可以针对多个元素，但是比较耦合，因为是在HTML代码中写CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

1.3link标签外部引入css文件

推荐的写法

<!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>
    <link rel="stylesheet" href="3.css">
</head>
<body>
    <div></div>
</body>
</html>

/* 3.css */
div {
    height: 50px;
    background-color: aqua;
}

2.基础选择器

2.1标签选择器

选择某个标签的所有元素，不能差异性选择

<!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>
        h2 {
            color: red;
        }
        p {
            color: aqua;
        }
    </style>
</head>
<body>
    <h2>1</h2>
    <p>11111</p>
    <h2>2</h2>
    <p>22222</p>
    <h2>3</h2>
    <p>33333</p>
</body>
</html>

在这里插入图片描述

2.2类选择器

（1）可以为任意的HTML标签设置class，这样一个class就可以绑定多个元素，选择某个类就可以为该类的元素设置样式
（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>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <h2 class="red">1</h2>
    <p>11111</p>
    <h2 class="red">2</h2>
    <p>22222</p>
    <h2>3</h2>
    <p>33333</p>
</body>
</html>

在这里插入图片描述

2.3id选择器

（1）HTML元素，可以设置id，但是必须全局唯一
（2）通#+id的值来选择某个id的元素

<!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>
        #red {
            color: red;
        }
    </style>
</head>
<body>
    <h2 id="red">1</h2>
    <p>11111</p>
    <h2>2</h2>
    <p>22222</p>
    <h2>3</h2>
    <p>33333</p>
</body>
</html>

在这里插入图片描述

2.4通配符选择器

所有的元素都会被匹配上，特殊情况下才使用

<!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>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h2>1</h2>
    <p>11111</p>
    <h2>2</h2>
    <p>22222</p>
    <h2>3</h2>
    <p>33333</p>
</body>
</html>

在这里插入图片描述

3.复合选择器

3.1后代选择器

（1）选择的可以是儿子，也可以是孙子
（2）语法：基础选择器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>
        ul li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>
</html>

在这里插入图片描述

<!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>
        ul li a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc<br><a>会变色</a></li>
    </ul>
    
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>
</html>

在这里插入图片描述

3.2子选择器

（1）选择的只能是儿子
（2）语法：基础选择器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>
        .two>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="two">
        <a href="#">链接1</a>
        <p>
        <a href="#">链接2</a>
        </p>
    </div>
</body>
</html>

在这里插入图片描述

3.3并集选择器

（1）多个选择器的并集
（2）选择器1，选择器2{}
（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>
        div,h3,ul li {
            color: red;
        }
    </style>
</head>
<body>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul>
</body>
</html>

在这里插入图片描述

3.4伪类选择器

<!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>
        /* 未被访问时候的样式 */
        a:link {
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        }
        /* 已经被访问后的样式 */
        a:visited {
            color: green;
        }
        /* 鼠标放上去的时候的样式 */
        a:hover {
            color: red;
        }
        /* 鼠标按下去未弹起来时候的样式 */
        a:active {
            color: blue;
        }
        /* 鼠标聚焦的时候的样式 */
        .three>input:focus {
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">小猫</a>
    <div class="three">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

4.设置样式

4.1字体

（1）字体系列：font-family，引号包裹，多个字体之间“，”间隔
（2）字体大小：font-size，值可以使用px（像素），也可以使用rem（字体的正常大小是1rem，如果设置成2rem就是把原来的字体放大2倍）
（3）字体粗细：font-weight，值的范围是100-900,400就是正常粗细，700就是粗体
（4）字体样式：font-style，值为italic就是设置倾斜字体，值为normal就是取消倾斜

<!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>
        .font-family .one {
            /* 字体显示为隶书 */
            font-family: '隶书','Microsoft YaHei';
            /* 字体大小设置为30px */
            font-size: 30px;
        }
    
        .font-family .two {
            /* 字体显示为宋体 */
            font-family: '宋体';
            /* 字体大小设置为2rem（原来字体的2倍） */
            font-size: 2rem;
            /* 字体的粗细为400（正常粗细） */
            font-weight: 400;
            /* 字体样式为倾斜 */
            font-style: italic;
        }

        .three {
            /* 取消字体倾斜 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="font-family">
        <div class="one">
            这是隶书
        </div>
        <div class="two">
            这是宋体
        </div>
        <em class="three">
            这是倾斜字体
        </em>
    </div>
</body>
</html>

在这里插入图片描述

4.2文本

（1）文本对齐：text-algin，值为center就是居中对齐，值为left就是靠左，值为right就是靠右
（2）文本颜色：color，值可以是英文单词、16进制的数字、rgb(三个整数)（三原色写法）
（3）文本装饰：text-decoration，值为none表示什么都没有，一般用于a链接标签去除默认的下划线
（4）文本缩进：text-index，一般缩进为2个文字，值设置为2em
（5）行高：line-height，使用的最多的是将文本垂直居中（注意：文本所在的元素行高设置为该行元素高度）

<!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>
        p {
            /* 通过rbg设置文本颜色 */
            color: rgb(230, 17, 17);
        }
        .one {
            /* 让文本左对齐 */
            text-align: left;
            /* 去除链接的下划线 */
            text-decoration: none;
        }
        .two {
            /* 让文本右对齐 */
            text-align: right;
            text-decoration: underline;
        }
        .three {
            /* 让文本居中对齐 */
            text-align: center;
            /* 上划线 */
            text-decoration: overline;
        }
        .four {
            /* 下划线 */
            text-decoration: line-through;
        }
        #indent {
            /* 文本缩进2个文字 */
            text-indent: 2em;
        }
        #line-height {
            /* 整体高度 */
            height: 50px;
            /* 背景颜色 */
            background-color:red;
            /* 行高 */
            line-height: 50px;
        }
    </style>
</head>
<body>
    <p>要开心</p>

    <h2>div对齐</h2>
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>

    <h2>span不会对齐</h2>
    <span class="one">左对齐</span>
    <br>
    <span class="two">右对齐</span>
    <br>
    <span class="three">居中对齐</span>
    
    <h2>文本装饰</h2>
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>

    <h2>文本缩进</h2>
    <p id="indent">要快乐</p>

    <h2>行高</h2>
    <div id="line-height">每天</div>
</body>
</html>

4.3背景

（1）背景色：background-color，值为颜色值
（2）背景图片：background-image，值为url（图片路径）
（3）背景平铺：background-repeat，值为no-repeat表示不平铺，默认的是repeat表示x轴和y轴都会平铺
（4）背景位置：background-position：x值，y值（x值：top（顶）、bottom（底）、px（像素）、百分比）（y值：left（左）、right（右）、center（居中）、px、百分比）
（5）背景尺寸：background-size，值可以是px、百分比、cover（x轴占满）、contain（包含整个背景）

<!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>
        #d1 {
            width: 220px;
            height: 220px;
            /* 背景图片 */
            background-image: url(花花.jpg);
        }
        #d2 {
            width: 500px;
            height: 500px;
            /* 背景图片 */
            background-image: url(花花.jpg);
            /* 背景平铺：repeat表示x轴和y轴都会平铺 */
            background-repeat: repeat;
        }
        #d3 {
            width: 500px;
            height: 500px;
            /* 背景图片 */
            background-image: url(花花.jpg);
            /* 背景平铺：no-repeat表示不平铺 */
            background-repeat: no-repeat;
            /* 背景的位置 */
            /* background-position: center bottom; */
            background-position: 50% 50%;
        }
        #d4 {
            width: 800px;
            height: 500px;
            /* 背景图片 */
            background-image: url(花花.jpg);
            /* 背景平铺：no-repeat表示不平铺 */
            background-repeat: no-repeat;
            /* 背景尺寸:contain表示包含整个背景,cover表示x轴占满，但是可能不会包含全部图片 */
            background-size: contain;
            /* background-size: cover; */
        }
    </style>
</head>
<body>
    <h2>背景图片</h2>
    <div id="d1">开心</div>
    <br>
    <h2>图片平铺</h2>
    <div id="d2">开心</div>
    <h2>图片位置</h2>
    <div id="d3">开心</div>
    <h2>图片尺寸</h2>
    <div id="d4">开心</div>
</body>
</html>

4.4圆角

border-radius，值设置为50%就是圆形

<!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>
        div {
            background-color: red;
            height: 200px;
            width: 200px;
        }
        #r10px {
            /* 圆角10px */
            border-radius: 10px;
        }
        #r50px {
            /* 圆形 */
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <h2>没有设置圆角</h2>
    <div></div>
    <h2>圆角10px</h2>
    <div id="r10px"></div>
    <h2>圆形</h2>
    <div id="r50px"></div>
</body>
</html>

5.显示模式

display，值可以为block（块级）、inline（内联）、none（隐藏不显示）

<!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>
        .div {
            /* div默认是block（块级） */
            display: inline;
        }
        .span {
            /* span默认是inline（内联） */
            display: block;
        }
        .none {
            /* 隐藏不显示 */
            display: none;
        }
    </style>
</head>
<body>
    <h2>div</h2>
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <h2>span</h2>
    <span class="span">1</span>
    <span class="span">2</span>
    <span class="span">3</span>
    <h2>display: none</h2>
    <div class="none">1</div>
</body>
</html>

6.盒模型

（1）边框：border：粗细样式颜色
（2）内边距：padding：上右下左（表示内容和边框距离，值可以是px）（padding-top：顶的内边距；padding-bottom：底的内边距；padding-left：左边的内边距；padding-right：右边的内边距）
（3）外边距：margin：上右下左（表示外边元素和自己的距离，值是0 auto表示块级元素水平居中）
（4）记得去除浏览器的边距的默认值

<!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>
        div {
            background-color:red;
            width: 200px;
            height: 100px;
        }
        #d1 {
            /* 设置边框：粗细 样式 颜色 */
            border: 2px solid red;
        }
        #d2 {
            /* 内边距 */
            padding: 5px
        }
        .m {
            /* 设置边框：粗细 样式 颜色 */
            border: 2px solid red;
            /* 外边距 */
            margin: 50px;
        }
        .auto {
            /* 设置边框：粗细 样式 颜色 */
            border: 2px solid red;
            /* 块级元素居中对齐 */
            margin: 0 auto;
        }
        /* 去除浏览器的默认值 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h2>边框</h2>
    <div id="d1"></div>
    <h2>内边距</h2>
    <div id="d2">111111111111111111111111111111111111111</div>
    <h2>外边距</h2>
    <div class="m"></div>
    <div class="m"></div>
    <div class="auto"></div>
</body>
</html>

7.页面布局（弹性布局）

（1）display：flex（设置为弹性布局）
（2）写在父盒子上，作用在子元素上，控制子元素的位置和排列方式，不含孙子元素
（3）内联元素设置高，宽不会生效，使用弹性布局，宽就有效了
（4）使用了弹性布局，子元素是内联还是块级元素，效果是一样的
（5）主轴假设是x轴（默认)，子元素如果没有设置高度，默认就是父元素整个高度
（6）把父盒子称为flex容器，子元素称为flex item子元素排列的方向主轴
（7）设置主轴排列方式：justify-content：前，后，居中，间隔
（8）设置侧轴排列方式：align-items：前，后，居中，间隔
创建一个 div, 内部包含三个span

<!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>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述
加上display: flex;

<!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>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
            /* 设置为弹性布局 */
            display: flex;
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述
再给 div 加上 justify-content: space-around

<!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>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
            /* 设置为弹性布局 */
            display: flex;
            /* 设置主轴排列方式：flex-end（向后排列）；space-around（间隔排列，行前行后都有距离）；flex-start（向前排列）；center（居中排列）；space-between（行与行之间有间距） */
            justify-content: space-around;
            
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

在这里插入图片描述
主轴和侧轴一起设置

<!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>
        #container {
            width: 100%;
            height: 150px;
            background-color: red;
            /* 设置为弹性布局 */
            display: flex;
            /* 设置主轴的排列方式（默认是x轴） */
            justify-content: space-around;
            /* 设置侧轴的排列方式 */
            align-items: center;
        }
    
        #container>div {
            background-color: green;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>