一、CSS简介

美化网页、布局页面

CSS（层叠样式表Cascading Style Sheets）（CSS样式表或级联样式表）

主要用于设置HTML中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

总结

HTML主要做结构，显示元素内容
CSS美化HTML，布局网页
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

CSS语法规范

选择器和声明块

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现

CSS代码风格

样式格式书写

紧凑格式
展开格式

样式大小写风格

小写、特殊情况除外

样式空格风格

属性值前面，冒号后面，保留一个空格
选择器和大括号之间保留空格

二、CSS基础选择器

作用

选择器的作用就是根据不同需求把不同的标签选出来

基础选择器

标签选择器

结构：标签名 { CSS属性：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式
注意点

标签选择器选择的是一类标签，而不是单独某一个。
标签选择器无论嵌套关系有多深，都能找到对应的标签。

优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。

    /* 标签选择器：写上标签名 */
        p {
            color: green;
        }
        div {
            color: pink;
        }

类选择器

结构：.类名 { CSS属性名：属性值；}
作用：通过类名，找到页面中所有带这个类名的标签，设置样式

注意点
1. 所有标签上都有class属性，class属性的属性值称为类名
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

id选择器

结构：#id 属性值 { CSS属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点

所有标签上都有id属性
id属性值类似于身份证号，在一个页面中是唯一的，不可重复的
一个标签上只能有一个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>id选择器</title>
    <style>
        #blue {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="blue">id选择器</div>
</body>
</html>

通配符选择器

结构：* { CSS属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点
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>id选择器</title>
    <style>
        #blue {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div id="blue">id选择器</div>
</body>
</html>

复合选择器

三、CSS字体和文本样式

能够使用字体和文本相关样式修改元素外观样式

字体样式

字体大小：font-size（谷歌浏览器默认文字大小是16px）

字体粗细：font-weight（normal/bold，100-900纯整数）

字体样式：font-style（是否倾斜，正常默认值：normal，倾斜：italic）

字体类型：font-family

    <style>
        /* 字体大小 */
        p {
            font-size: 30px;
        }
        /* 字体粗细 */
        div {
            font-weight: 700;
        }
        h1 {
            font-weight: 400;
        }
        /* 字体样式（是否倾斜） */
        div {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>

常见取值：具体字体1，具体字体2，具体字体3，...，字体系列

具体字体：Microsoft YaHei、微软雅黑、黑体、宋体、楷体等
字体系列：无衬线字体（sans-serif）、衬线字体（serif）、等宽字体（monospace）等

    <style>
        /* Windows默认字体为微软雅黑，字号16 */
        /* 如果用户电脑里没有安装微软雅黑，就按照黑体显示文字 */
        /* 如果电脑没有安装黑体，就按任意一种非衬线字体系列显示 */
        div {
            font-family: 微软雅黑,宋体,sans-serif;
        }
    </style>

渲染规则

从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
拓展-样式的层叠性：如果给一个标签设置了相同的属性，此时样式会重叠（覆盖），写在最下面的会生效

字体类型：font相关属性连写

取值：font：style weight size family；
只能省略前两个，如果省略了相当于设置了默认值
注意点：如果需要同时设置单独和连写形式
- 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面

    <style>
        p {
            /* font-size: ;
            font-family: ;
            font-weight: ;
            font-style: ; */
            /* font: style weight size 字体 */
            /* 只能省略前两个属性，使用默认值 */
            font: 66px 宋体;
            /* font: italic 700 66px 宋体; */
            font-style: normal;
        }
    </style>

文本样式

文本缩进：text-indent

取值：数字+px或数字+em（推荐：1em = 当前标签的font-size的大小）

    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进2字符 */
            /* 默认字号：16px;32 */
            /* text-indent: 32px; */
            /* em：一个字的大小 */
            text-indent: 2em;
            font-size: 20px;
        }
    </style>

文本水平对齐方式：text-align

左对齐：left
居中对齐：center
右对齐：right
注意点：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

        h1 {
            text-align: center;
        }
        body {
            text-align: center;
        }

文本修饰：text-decoration

下划线（常用）：underline
删除线（不常用）：line-through
上划线（几乎不用）：overline
无装饰线（常用）：none
注意点：开发中会使用text-decoration：none；清除a标签默认的下划线

        /* 下划线（常用）：underline */
        /* 删除线（不常用）：line-through */
        /* 上划线（几乎不用）：overline */
        /* 无装饰线（常用）：none */
        /* 注意点：开发中会使用text-decoration：none；清除a标签默认的下划线 */
        div {
            text-decoration: underline;
        }
        p {
            text-decoration: line-through;
        }
        h2 {
            text-decoration: overline;
        }
        a {
            text-decoration: none;
        }

line-height行高

作用：控制一行的上下行间距

属性名：line-height

取值：数字+px或倍数（当前标签font-size的倍数）

应用

让单行文本垂直居中可以设置line-height：文本父元素高度
网页精准布局时，会设置line-height：1可以取消上下间距

行高与font连写的注意点

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；

        p {
            /* line-height: 50px; */
            /* 当前字号的1.5倍 */
            line-height: 1.5;

            /* 66px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 66px/2 宋体;
        }

四、CSS的引入方式

内嵌式 CSS写在style标签中

style标签虽然可以写在页面任意位置，但是通常约定写在head标签中
作用范围：当前页面
使用场景：小案例

外联式 CSS写在一个单独的.css文件中

需要通过link标签在网页中引入
作用范围：多个页面
使用场景：项目中

行内式 CSS写在标签的style属性中

作用范围：当前标签
使用场景：配合js使用

五、Chrome调试工具

F12/右键“检查”

六、综合案例

综合案例一：

<!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>综合案例1</title>
    <style>
        div {
            width: 800px;
            height: 600px;
            /* background-color: pink; */
            margin: 0 auto;
        }
        /* p {
            text-align: center;
        } 后面还有其他的段落不居中*/
        /* 用类选择器设置段落居中 */
        .center {
            text-align: center;
        }
        .cplor1 {
            color: #808080;
        }
        .color2 {
            color: #87ceeb;
            font-weight: 700;
        }
        a {
            text-decoration: none;
        }
        .suojin {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div>
        <h1 class="center">多地出台政策破解毕业生大城市就业租房难租房贵问题</h1>
        <p class="center">
            <span class="color1">2022-06-21 07:26</span>
            <span class="color2">新华网官方帐号</span>
            <a href="#">关注</a>
        </p>
        <hr>
        <p class="suojin">6月8日，湖北省武汉市政府网发布了《关于进一步做好高校毕业生留汉就业创业工作的通知》，取得普通高校全日制大专以上学历、毕业6年以内、本通知公布之日起在汉就业创业并正常缴纳社会保险、家庭在汉无自有住房的高校毕业生，在资格有效期内，租住人才租赁房的，按照不高于市场租金的70%缴纳租金，累计减免期限不超过3年。</p>
        <p class="suojin">规范住房租赁市场，保护承租人合法权益，需进一步彰显立法的作用。近日审议通过、将于今年9月1日起实施的《北京市住房租赁条例》规定，北京市住房和城乡建设部门应当加强住房租赁价格监测，住房租金明显上涨或者有可能明显上涨时，北京市人民政府可以采取涨价申报、限定租金或者租金涨幅等价格干预措施，稳定租金水平。如果出租人拒不执行，由市场监督管理部门依法处理。</p>
        <p class="suojin">中国劳动关系学院法学院教师李静建议各地政府加强廉租房建设，确保城市有持续的、可循环的廉租房供应；有关部门规范租赁市场，定期进行检查，确保出租屋无隐患、租房信息真实；学校等开展租房方面的防骗科普及法律宣传。</p>
        <p class="suojin">除了解决租房问题，在李海明看来，大城市要留住、留好高校毕业生，还应做好多方面的配套工作，如加强劳动与社会保障法律制度的落实，确保刚进入就业市场劳动者的合法权益；完善劳动人事档案管理制度，确保高校毕业生的档案不成为负累；加强人力资源服务市场的管理，加强行业规范中的职业发展规范，使高校毕业生能够在就业后获得良好的职业培训和职业发展等。</p>
    </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>综合案例2</title>
    <style>
        body {
            background-color: #f5f5f5;
        }
        .goods {
            width: 234px;
            height: 300px;
            background-color: #fff;
            /* 标签div居中 */
            margin: 0 auto;
            /* 内容居中  */
            text-align: center;
        }
        img {
            width: 160px;
        }
        .title {
            font-size: 14px;
            line-height: 25px;
        }
        .info {
            font-size: 12px;
            color: #ccc;
            line-height: 30px;
        }
        .money {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- div用来网页布局，一个页面可能用无数次，原则：如果使用div，尽量使用类名控制样式 -->
    <div class="goods">
        <img src="../HTML标签（上）/images/OK.jpg" alt="">
        <div class="title">OK表情包</div>
        <div class="info">成年人的快乐</div>
        <div class="money">$888元</div>
    </div>
</body>
</html>

原文链接：https://blog.csdn.net/hs_2017112123/article/details/125404298