1. 概述

层叠样式表（Cascading Style Sheets）

css能对网页中元素位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面样式和结构分离。就是对前面的html骨架进行美化。

2. 基本语法规范

选择器 + {一条/n条声明}

· 选择器决定针对谁修改

· 声明决定修改的内容

· 声明的属性是键值对，使用 “ ；”区分键值对，键值对的格式：键：值

· 冒号后面加空格，选择器和 { 之间也加空格

例如：

<style>
        p {
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 30px; 
        }
    </style>

说明：

· CSS要写到style标签中

· style标签可以放到页面的任意位置，但是一般放到head标签内

· CSS使用/* */作为注释

3. 引入的方式

3.1 内部样式

写在style标签中，嵌入html内部，如上述例子所示

优点：这样能让样式和页面结构分离

缺点：当css内容很多的时候，分离的不够彻底

3.2 行内样式

通过style属性，来指定某个标签的样式，只针对某个标签生效

缺点：只适合简单的样式，不能写太复杂的样式

这种写法优先级高，会覆盖其他的样式

例如：

<style>
        p {
           color: red;
        }
    </style>
    <P style="color: green;">一去二三里</P>

结果：字体颜色显示绿色，而不显示红色

3.3 外部样式

外部样式是实际开发中最常用的方式

1. 创建一个css文件

2. 使用link标签引入css

<link rel="stylesheet" href="blog.css">

例如：

创建html文件，并引入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="blog.css">
</head>
<body>
    <div>好好学习，天天向上</div>
</body>
</html>

创建css文件

div {
    /* 字体颜色 */
    color: blue;
    /* 字体大小 */
    font-size: 30px;
}

结果：

优点：样式和页面结构彻底分离

缺点：受浏览器缓存影响，修改之后不一定立刻生效，可以使用 ctrl+F5 强制刷新页面

4. 选择器

选择器的功能：选中页面中指定的标签元素，要先选中元素，才能设置元素的属性

选择器的种类：

1. 基础选择器：单个选择器构成

· 标签选择器

· 类选择器

· id选择器

· 通配符选择器

2. 复合选择器：把多种基础选择器综合运用起来

· 后代选择器

· 子选择器

· 并集选择器

· 伪类选择器

4.1 基础选择器

4.1.1 标签选择器

特点：能快速为同一类型的标签都选择出来，但是不能差异化选择

<style>
        p {
            color: red;
        }
        div {
            color: blue;
        }
    </style>
    <p>哈哈</p>
    <p>嘻嘻</p>
    <p>嘿嘿</p>
    <div>王昭君</div>
    <div>妲己</div>

4.1.2 类选择器

特点：差异化表示不同的标签，可以让不同的标签使用同一种样式

<style>
        .c1 {
            color: brown;
        }
    </style>
    <div class="c1">苹果</div>
    <span class="c1">香蕉</span>

注意：

· 类名用.开头

· 下方的标签使用class属性来调用

· 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割)

· 不要使用纯数字，或者中文，以及标签名来命名类名

示例：使用多个类名

<style>
        .c1 {
            color: brown;
        }
        .f1 {
            font-size: 30px;
        }
    </style>
    <div class="c1 f1">苹果</div>
    <span class="c1 f1">香蕉</span>

4.1.3 id选择器

· 使用#开头表示id选择器

· id是唯一的，不能被多个标签使用

<style>
        #i1 {
            color: red;
            font-size: 50px;
        }
    </style>
    <div id="i1">我爱学Java</div>

4.1.4 通配符选择器

使用 * 的定义，选取所有标签

* {
            color: pink;
        }

页面中所有的内容都会被修改为粉色

4.2 复合选择器

4.2.1 后代选择器

选择某个父元素中的某个子元素

元素1 元素2 { 样式声明 }

说明：

· 元素1和元素2要使用空格分割

· 元素1是父级，元素2是子级，只选元素2，不影响元素1

示例1：修改ul中的li颜色，不影响ul

<style>
        ul li {
            color: green;
        }
    </style>
    <ul>
        <li>Java</li>
        <li>c++</li>
        <li>python</li>
    </ul>

示例2：元素2不一定是儿子，也可以是孙子

<style>
        ul li a {
            color: green;
        }
        /* 这两种都行 */
        ul a {
            color: green;
        }
    </style>
    <ul>
        <li>Java</li>
        <li>c++</li>
        <li><a href="#">空连接</a></li>
    </ul>

4.2.2 子选择器

和后代选择器类似，但是只能选择子标签，也就是亲儿子，不能是孙子

元素1>元素2 { 样式声明 }

· 使用大于号分割

· 只能是亲儿子，不能是孙子

<style>
        div>a {
            color: red;
        }
    </style>
    <div>
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

注意：只有链接1变色，链接2不变色，因为1是亲儿子，2是孙子

4.2.3 并集选择器

用于选择多组标签（集体声明）

元素1，元素2 {样式声明}

· 使用逗号分割多个元素，表示同时选中

· 最后一个选择器不能加逗号

示例：将香蕉和苹果同时染成红色

<style>
        div,span {
            color: red;
        }
    </style>
    <div>苹果</div>
    <span>香蕉</span>

4.2.4 伪类选择器

1. 链接伪类选择器

a:link ,未被访问过的链接

a:visited ,已经访问过的链接

a:hover ,鼠标悬停的链接

a:active ,鼠标按下未弹起的链接

示例：给链接添加样式

<a href="#">陕西科技大学</a>
        a:link {
            color: blue;
        }
        a:visited {
            color: grey;
        }
        a:hover {
            color: brown;
        }
        a:active {
            color: green;
        }

说明：未访问蓝色，访问过灰色，悬停棕色，按下不弹起绿色

2. force伪类选择器

选取获取焦点的input表单元素

示例：

<style>
        #i1:focus {
            color: red;
        }
        #i2:focus{
            color: green;
        }
        #i3:focus {
            color: blue;
        }
    </style>
    <input id="i1" type="text">
    <input id="i2" type="text">
    <input id="i3" type="text">

结果：鼠标悬停在哪个输入框，哪个输入框的文本就会变成设置的颜色

5. 常用元素属性

5.1 字体属性

5.1.1 设置字体

div {
            font-family: '微软雅黑';
        }
        span {
            font-family: '宋体';
        }

说明：

· 字体名称可以用中文，但是不建议

· 多个字体之间使用逗号分隔（从左到右查找字体，如果都找不到，会使用默认字体）

· 如果字体名有空格，使用引号包裹

· 建议使用常见字体，否则兼容性不好

5.1.2 设置字体大小

div {
            font-size: 50px;
        }

说明：

· 不同浏览器默认字号不一样，chrome默认是16px

· 可以给body标签使用font-size

· 注意单位px，表示像素

· 标题标签需要单独指定大小

5.1.3 设置字体粗细

div {
            font-weight: 500px;
        }
        span {
            font-weight: bold;
        }

· 可以使用数值表示粗细

· 700==bold，400是不变粗细为normal，数字取值范围：100~900

5.1.4 设置文字样式

/* 倾斜 */
        div {
            font-style: italic;
        }
        /* 取消倾斜 */
        span {
            font-style: normal;
        }

5.2 文本属性

5.2.1 文本颜色

认识RGB

我们的显示器是由很多很多像素构成的，每个像素视为一个点，这个点能反映出一个具体的颜色，R（red）G（green）B（blue）的方式表示颜色，三种颜色按照不同的比例搭配，就能混合出各种颜色。

计算机中针对R,G,B三个分量，分别用一个字节表示（8个比特位，表示的范围是0-255，十六进制表示为00-FF），数值越大，表示该分量颜色就越浓，255，255，255就表示白色；0，0，0就表示黑色

设置文本颜色

color：red；

color：#ff0000；

color：rgb(255，0，0)；

color属性值的写法：

· 预定义的颜色值（单词）

· 十六进制形式（常用）

· RGB方式

<style>
        .c1 {
            color: green;
        }
    </style>
    <div class="c1">好好学习进大厂</div>

5.2.2 文本对齐

控制文字水平方向的对齐，除了文本，也能控制图片等元素对齐的方式

text-align：[值]；

center：居中对齐

left：左对齐

right：右对齐

<style>
        .c1 {
            text-align: left;
        }
        .c2 {
            text-align: center;
        }
        .c3 {
            text-align: right;
        }
    </style>
    <div class="c1">左对齐</div>
    <div class="c2">居中对齐</div>
    <div class="c3">右对齐</div>

结果：

5.2.3 文本装饰（上划线，下划线，删除线）

text-decoration：[值]

常用值：

underline：下划线

none：啥都无，可以取掉下划线，删除线等

overline：上划线

line-through：删除线

<style>
        .c1 {
            text-decoration: overline;
        }
        .c2 {
            text-decoration: none;
        }
        .c3 {
            text-decoration: underline;
        }
        .c4 {
            text-decoration: line-through;
        }
    </style>
    <div class="c1">上划线</div>
    <div class="c2">啥都无</div>
    <div class="c3">下划线</div>
    <div class="c4">删除线</div>

结果：

5.2.4 文本的缩进与行高

缩进：控制段落的首行缩进（其他行不受影响）

text-indent：[值]；

单位可以用px或者em

em作为单位，1个em为一个文字大小

缩进可以为负数，表示往左缩进（文字就会冒出去）

<style>
        .c1 {
            text-indent: 2em;
        }
        .c2 {
            text-indent: -2em;
        }
    </style>
    <div class="c1">正常缩进</div>
    <div class="c2">反向缩进</div>

行高：行高是上下文本行之间基线距离

line-height：[值]

注意：行高 = 上边距 + 下边距 + 字体大小

HTML中涉及到这几个基准线：

· 顶线 · 中线 · 基线（相当于四线三格倒数第二条线）· 底线

内容区：底线和顶线包裹的区域，即下图深灰色背景区域

基线之间的距离 = 顶线的距离 = 底线之间的距离 = 中线间距

注意：行高与元素高度相等，就可以实现文字居中对齐

例：

<style>
        div {
            height: 100px;
            line-height: 100px;
            font-size: 30px;
        }
    </style>
    <div>文字居中对齐</div>

微信图片_20221029122633.jpg

5.3 背景属性

5.3.1 背景颜色

background-color：[指定颜色]

默认是transparent透明的，可以通过设置颜色的方式修改

<style>
        div {
            background-color: blue;
        }
    </style>
    <div>设置蓝色背景</div>

微信图片_20221029122653.jpg

5.3.2 背景图片

background-image：url()；

注意：url可以是相对路径也可以是绝对路径，url可以加引号也可以不加

url的路径必须正确，否则找不到照片

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(../10.jpg);
        }
    </style>
    <div>设置背景图片</div>

结果：

微信图片_20221029122710.jpg

5.3.3 背景平铺

background-repeat：[平铺方式]

重要值：

repeat：平铺

no-repeat：不平铺

repeat-x：水平平铺

repeat-y：垂直平铺

默认是repeat，背景颜色可以和背景图片同时存在，背景图片在背景颜色的上方

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url(../作业/5.jpg);
            background-repeat: no-repeat;
            /* no-repeat  repeat  repeat-x  repeat-y */
        }
    </style>

repeat：

微信图片_20221029122738.jpg

no-repeat：

微信图片_20221029122753.jpg

repeat-x：

微信图片_20221029122756.jpg

repeat-y：

微信图片_20221029122818.jpg

5.3.4 背景位置

background-position：x y；

注意：是修改图片内容的位置

参数：

方位名词：（top，left，right，bottom）

精确单位：坐标或者百分比（以左上角为原点）

混合单位：同时包含方位名词和精确单位

<style>
        div {
            height: 1000px;
            width: 1000px;
            background-image: url("../10.jpg");
            background-position: center;
        }
    </style>
    <div>背景位置</div>

微信图片_20221029122903.jpg 说明：没有把图片的位置放到屏幕中间，而是把图片内容的中间部分按要求大小展示在屏幕上

注意：

如果参数的两个值都是方位名词，则前后顺序无关（top left与left top效果一样）

如果只指定了一个方位名词，则第二个默认居中（left就是水平居中，top就是垂直居中）

如果参数为精确值，则第一个为x，第二个为y

如果参数为精确值且只给了一个数值，则该数值为x坐标，另一个默认垂直居中

5.3.5 背景尺寸

background-size：length|percentage|cover|contain；

· 可以填具体数值，40px 60px表示宽为40px，高为60px

· 也可以填百分比，按照父元素的尺寸设置

· cover，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，这样背景图片的某些位置就无法显示

· contain，把图像扩展至最大尺寸，以使宽度，高度完全适应内容区域

contain：

微信图片_20221029122935.jpg

cover：

微信图片_20221029122958.jpg

5.4 圆角矩形

使用border-radius使边框带圆角效果

border-radius：length；

length：内切圆半径，数值越大，弧线越强烈

<style>
        /* 普通圆角矩阵 */
        #d1 {
            width: 300px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 20px;
        }
        /* 圆形 */
        #d2 {
            width: 200px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 50%;
            /* 50%也可以替换为数值100px */
        }
        /* 圆角矩阵 */
        #d3 {
            width: 300px;
            height: 200px;
            border: 2px solid blueviolet;
            border-radius: 100px;
        }
    </style>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>

展开写法：可以针对四个角分别设置

border-radius：2em；相当于四个角全都是2em

border-radius：10px 20px 30px 40px

等价于（按顺时针旋转）

border-top-left-radius：10px；

border-top-right-radius：20px；

border-bottopm-right-radius：30px；

border-bottom-left-radius：40px；

6. 元素的显示模式

这里重点介绍两个：块级元素行内元素

6.1 块级元素

常见的元素：

h1-h6

div

ul ol li

...

特点：

独占一行

高度，宽度，内外边距，行高都可以控制

宽度默认是父级元素宽度的100%

是一个容器盒子，里面可以放行内元素和块级元素

注意：

· 文字类元素内不能使用块级元素

· p标签主要用于存放文字，内部不能放块级元素，特别是div

6.2 行内元素/内联元素

常见元素：

strong

del

span

...

特点：

· 设置行高，宽度，高度无效

· 左右外边距有效（上下无效），内边距有效

· 默认高度就是内容本身的高度

· 行内元素只能容纳文本和其他行内元素，不能放块级元素

注意：

a标签内不能在放a标签

a标签可以放块级元素，但是先把a转换为块级元素

行内元素与块级元素的区别

· 块级元素独占一行，行内元素不独占一行

· 块级元素可以设置宽高，行内元素不能设置宽高

· 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置

6.3 改变显示模式

使用display属性可以修改元素的显示模式

display：block，改成块级元素

display：inline，改成行内元素

display：inline-block ，改成行内块元素

7. 盒模型（重点）

每一个HTML元素相当于是一个矩形盒子，这个盒子由以下几部分构成：

边框：border

内容：content

内边距：padding

外边距：margin

7.1 边框

基础属性

粗细：border-width

样式：border-style，默认没有边框，solid实线边框，dashed虚线边框，dotted点线边框

颜色：border-color

例：

<style>
        div {
            width: 300px;
            height: 50px;
            border-style: dashed;
            border-color: blue;
            border-width: 5px;
        }
    </style>

可以简写（建议），减少代码量

border：5px solid red；

可以改变四个方向的任意边框

border-top/bottom/left/right

例：给边框的四个方向设置不同的颜色和属性

<style>
        div {
            width: 400px;
            height: 100px;
            border-top: 3px solid red;
            border-right: 3px dashed blue;
            border-bottom: 3px dotted green;
            border-left: 3px dashed yellow;
        }
    </style>

注意：边框会撑大盒子

可以看到weight，height为400，100，但是整个盒子为406*106，多出来的那部分为边框像素的大小。

可以通过box-sizing属性可以修改浏览器的行为，使边框不在撑大盒子

* {
            box-sizing: border-box;
        }

可以看到盒子的大小又恢复400*100了

7.2 内边距

padding设置内容和边框之间的距离

默认内容是顶着边框来放置的，用padding来控制这个距离

给四个方向都加边框

· padding-top

· padding-bottom

· padding-left

· padding-right

不加内边距：

<style>
        div {
            width: 200px;
            height: 100px;
        }
    </style>
    <div>内边距</div>

加上内边距padding后：

<style>
        div {
            width: 200px;
            height: 100px;
            padding: 5px;
        }
    </style>

注意：内边距也会影响到盒子的大小，使用box-sizing：border-box；不在撑大盒子

复合写法：

padding：5px；表示四个方向都是5px

padding：5px 10px 20px 30px；上，右，下，左（顺时针方向，与设置边框的复合写法类似）

7.3 外边距

控制盒子与盒子之间的距离

· margin-top

· margin-bottom

· margin-left

· margin-right

不加外边距：

<style>
        #i1 {
            width: 200px;
            height: 100px;
        }
        #i2 {
            width: 200px;
            height: 100px;
        }
    </style>
    <div id="i1">哈哈</div>
    <div id="i2">嘿嘿</div>

加了外边距margin后：

<style>
        #i1 {
            width: 200px;
            height: 100px;
            margin: 5px;
        }
        #i2 {
            width: 200px;
            height: 100px;
            margin: 5px;
        }
    </style>

复合写法：与padding相同

7.4 块级元素水平居中

三种写法：

margin-left：auto；margin-right：auto；

margin：auto；

margin：0 auto；

示例：

<style>
        #i1 {
            width: 200px;
            height: 100px;
            margin: auto;
        }
    </style>
    <div id="i1">哈哈</div>

注意：这种居中方式和text-align不一样，margin：auto是给块级元素用的，text-align：center是让行内元素或者行内块元素居中的

7.5 去除浏览器默认样式

浏览器会给元素加上一些默认的样式，尤其是内外边距，不同浏览器的默认样式存在差别，为了保证在不同的浏览器上运行的效果相同，往往去掉浏览器默认样式，使用通配符去掉浏览器默认样式：

* {
            margin: 0;
            padding: 0;
        }

7.6 弹性布局

display：flex；

示例：创建一个div包含3个span

<style>
        div {
            width: 100%;
            height: 100px;
            background-color: red;
        }
        div>span {
            background-color: green;
            width: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

给div加上display：flex；后：

div {
            width: 100%;
            height: 100px;
            background-color: red;
            display: flex;
        }

此时看到，span不在是行内元素了，再给div加上justify-content：space-around；此时效果：

此时可以看到，span已经能够水平隔开了

把justify-content：space-around；改为justify-content：flex-end，此时效果：

flex布局的基本概念

flex是flexible box的缩写，意思为弹性盒子

任何一个html元素，都可以指定为display：flex完成弹性布局

flex布局的本质是给父盒子添加display：flex属性，来控制盒子的位置和排列方式

概念：

· 被设置为display：flex属性的元素，称为flex container

· 它的所有子元素立刻称为了该容器的成员，称为flex item

· flex item 可以纵向排列，也可以横向排列，称为flex direction（主轴）

常用属性

justify-content：设置主轴上的子元素排列方式

flex-start	默认值，位于容器开头
flex-end	位于容器结尾
center	位于容器中央
space-between	行与行之间有间隔
space-around	行之前，行之间，行之后又间隔

center效果展示：

space-between效果展示：

align-items：设置侧轴上元素排列方式

stretch	默认值，行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器中
space-around	行分布在弹性容器中，两端各占一半

stretch效果展示：