视频解析21——45集

m0_74114238

已于 2022-11-12 19:09:04 修改

阅读量874

点赞数

文章标签： css html 前端

于 2022-10-29 12:05:00 首次发布

本文链接：https://blog.csdn.net/m0_74114238/article/details/127466864

版权

二十一、嵌套列表

<ul> <li> 
<dl> <dt> <dd>

<!-- <!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>
    <ul>
       <li>
        江苏
        <ul>
        <li>徐州</li>
        <li>扬州</li>
        <li>南京</li>
        </ul>
    </li>
    <li>
        山东
        <ul>
        <li>青岛</li>
        <li>合肥</li>
        <li>大连</li>
        </ul>
    </li>
    </ul>
</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>
</head>
<body>
    <dl>
        <dt>江苏</dt>
        <dd>
            <dl>
                <dt>徐州</dt>
                <dd>泉山区</dd>
                <dd>云龙区</dd>
                <dd>鼓楼区</dd>
            </dl>
            <dl>
                <dt>郑集</dt>
                <dd>铜北</dd>
                <dd>郑高</dd>
                <dd>后记</dd>
            </dl>
        </dd>
    </dl>
</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>
</head>
<body>
    <dl>
        <dt>
            <strong>好美味小吃</strong>
        </dt>
    <ul>
        <li>
            小吃类
            <ul>
             <li>煮粉干</li>
             <li>拌青菜</li>
             <li>蛋炒饭</li>
             <li>煎蛋</li>
             <li>米饭</li>
            </ul>
        </li>
        <li>
            卤味类
            <ul>
                <li>鸭肠</li>
                <li>面筋</li>
                <li>牛肚</li>
                <li>猪耳朵</li>
                <li>猪头肉</li>
                <li>大肠</li>
                <li>鱿鱼</li>
            </ul>
        </li>
        <li>
            
                套餐类
            <ul>
                <li>卤面筋饭</li>
                <li>猪肉肉饭</li>
                <li>猪耳朵饭</li>
                <li>卤猪脚饭</li>
                <li>卤猪舌头饭</li>
            </ul>
        </li>
        <li>
            炖罐类
            <ul>
                <li>猪蹄黄豆</li>
                <li>猪肚链子</li>
                <li>猪心枸杞</li>
                <li>羊肉枸杞</li>
                <li>牛肉枸杞</li>
            </ul>
        </li>
    </ul>
    </dl>
</body>
</html>

课后作业

二十二、表格标签

<table> :表格最外层的容器
<tr> :定义表格行
<th> 定义表头
<td> ：定义表格单元
<caption> :定义表格标题

语义化标签：<thead> <tbody> <tfood>  对做出的网页不起任何改变，有利于搜索引擎优化，有利于团队协
作

<!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>
    <table>
        <caption>
            <strong>
            天气预报
            </strong>
        </caption>
        <thead>
         <tr>
             <th>日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
         </tr>
        </thead>
        <tbody>
         <tr>
             <th>2019.1.1</th>
             <th><img src="./新建文件夹/u=781400922,226880861&fm=253&fmt=auto&app=138&f=PNG.webp" alt=""></th>
             <th>天气晴朗，事宜出行</th>
         </tr>
        
         <tr>
             <th>2019.1.2</th>
             <th><img src="./新建文件夹/2.webp" alt=""></th>
             <th>多云，适合打球</th>
         </tr>
        </tbody>
        <tfoot>    </tfoot>
    </table>
</body>
</html>

二十三、表格属性

border : 表格边框
cellpadding :单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式
valign ：上下对齐方式

<!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>
    <table border="1" cellpadding="30" cellspacing="30">
        <caption>
            <strong>
            天气预报
            </strong>
        </caption>
        <thead>
         <tr>
             <th colspan="2">日期</th>
             <th>天气情况</th>
             <th>出行情况</th>
         </tr>
        </thead>
        <tbody>
         <tr>
             <th>2019.1.1</th>
             <th>白天</th>
             <th><img src="./新建文件夹/u=781400922,226880861&fm=253&fmt=auto&app=138&f=PNG.webp" alt=""></th>
             <th>天气晴朗，事宜出行</th>
         </tr>
         <tr>
            <th>2019.1.1</th>
            <th>夜晚</th>
            <th><img src="./新建文件夹/u=781400922,226880861&fm=253&fmt=auto&app=138&f=PNG.webp" alt=""></th>
            <th>天气晴朗，事宜出行</th>
        </tr>
        
         <tr>
             <th>2019.1.2</th>
             <th>白天</th>
             <th><img src="./新建文件夹/2.webp" alt=""></th>
             <th>多云，适合打球</th>
         </tr>
        </tbody>
        <tfoot>    </tfoot>
    </table>
</body>
</html>

二十四、表单标签

<form> : 表单的最外层容器
<input> : 单标签 标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框

input：输入框：text 普通的文本，密码框：password 隐藏输入的内容，复选框：checkbox 多选 +checked 表示默认提前被选中，+disabled表示不能被选中
单选框：radio + 一个相同属性可以是name，上传文件：file，提交按钮：submit ，重置按钮 reset placeholder+请输入用户名：在框中显示

<!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>
    <form action="http//www.baidu.com">
        <h2>输入框：</h2>
        <input type="text" placeholder="请输入用户名">
        <h2>密码框：</h2>
        <input type="password" placeholder="请输入密码">
        <h2>复选框：</h2>
        <input type="checkbox">1
        <input type="checkbox">2
        <input type="checkbox">3
        <h2>单选框：</h2>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <h2>上传文件：</h2>
        <input type="file">
        <h2>提交按钮和重置按钮</h2>
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

二十五、表单标签

多行文本框：textarea
下拉菜单：select option，selected表示默认先出现他
多选： multiple
辅助表单：label 可选择的范围变大

   <h2>多行文本框</h2>
        <textarea cols="30" rows="10"></textarea>
        <h2>下拉菜单</h2>
        <select>
            <option selected disabled >请选择</option>
            <option>北京</option>
            <option>上海</option>
            <option>徐州</option>
        </select>
        <input type="radio" name="gender" id="man"><label for="man">男</label>
        <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    </form>
</body>
</html>

二十六、表格表单组合实例

&nbsp；空格键 alt+鼠标左键：多光标 submit 提交 reset 重置 align 位置调整 plaseholder 用户名
password 密码 rowspan 合并行 colspan 合并列

<!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>
    <form action="">
        <table border="1" cellpadding="30">
            <tbody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text"plaseholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码:</td>
                    <td><input type="password" plaseholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                    <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

二十七、div与span

div：division 分割，分区的意思
span:用来修饰文字的
div和span都是没有默认样式的，需要配合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>
</head>
<body>
    <!-- <div>这是一个块</div>
    <span>这是一个内联</span> -->
    <div>
        <h2><a href="#">千锋-web大前端培训<span>html5</span>好口碑前端培训机构</a></h2>
    <a href="#"><img src="" alt=""></a>
    <p>学费优惠：千锋周年庆,web前端学费优惠高达3000,仅限本周内咨询学员
        前端师资：千锋web前端拥有百人教学天团，名副其实前端培训界扛把子
        班型/课程：面授班/线上班/好程序员班供学员选择,课程紧贴企业需求</p>  
    <a href="#">www.mobiletrain.org</a>
    <div>
        <h2>
        <a href="#">html页面制作软件 - <span>html5</span>在线编辑器 - Lightly</a>
       <a href="#"><img src="" alt=""></a>
       <p>
        Lightly 在线HTML编辑器,支持在线编辑运行 HTML+CSS+JS代码,实时预览前端代码效
        果.任意操作系统,打开浏览器即可编码.支持web端和桌面客户端写代码(Mac和Windows).
       </p>
       <a href="#">https://www.oschina.net/p/mui?hmsr=aladdin1e1</a>
    </h2>
    </div>
    </div>
</body>
</html>

二十八、css基础语法

格式：
选择器{属性1：值1；属性2：值2}
单位：px—>像素
基本样式：width 宽；height 高; background-color背景颜色
% 百分比
外容器:600px, 当前容器：50% 300px %换px

<!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 :25% ; height : 100px ; background-color : red }
        span{ background-color :blue}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

二十九、内联样式和内部样式

css样式的引入方式
1.内嵌样式
style属性
2.内部样式
style属性
区别：内部样式的代码可以复用，复合w3c的标准，进行让结构和样式分开处理

<!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:100px;height:100px;background-color:red}
    </style>
</head>
<body>
    <!-- <div style=" width:100px;height:100px;background-color:red">这是一个块</div> -->
</body>
</html>

三十、外部样式

引入一个单独文件：name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系
href属性：资源的地址
link也可以用@import url()代替但不建议使用

<!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">
    <link rel="stylesheet" href="./div.html">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

三十一、css中的颜色表示法

单词表示法：red blue，yellow
十六进制表示法：#00000 #fffff：0123456789abcdef
RGB三原色表示法：R:rad…rgb(255,255,255)
取值范围0——255
提取颜色下载地址
app：Photoshop

三十二、css的背景样式

background-color 背景颜色
bacdground-image 背景图片 url（背景地址）默认：水平垂直的铺满背景图
bacdground-repeat 背景图片的平铺方式 repeat-x,repeat-y,no-repeat
bacdground-position 背景图片的位置 x,y 可正可负 top center bottom right left
background-attachment 背景图随滚动条的移动方式增加高度就会出现滚动条
scroll（默认值）背景位置是按照当前元素进行偏移的
fixed是按照浏览器偏移的

三十三、背景样式实现视觉差效果

#div1 #div2 #div3 {}
div id=“div1/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{width:1400px;height:800px;background-image:url(src=http___img.daimg.com_uploads_allimg_210114_1-210114151951.jpg&refer=http___img.daimg);background-attachment:fixed}
        #div{width:1400px;height:800px;background-image:url(src=http___lmg.jj20.com_up_allimg_1114_0406210Z024_2104060Z024-11-1200.jpg&refer=http___lmg.jj20.webp)background-attachment:fixed}
        #div{width:1400px;height:800px;background-image:url(u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG.webp)background-attachment:fixed}
   </style>
</head>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

三十四、边框样式

border-style：边框样式
solid：实线
dashed：虚线
dotted：点线
border-width：边框大小
px…
borde-color：边框颜色
red #f00 …

<!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:1400px;height:800px;background-image:url(src=http___img.daimg.com_uploads_allimg_210114_1-210114151951.jpg&refer=http___img.daimg);background-attachment:fixed}
        #div{width:1400px;height:800px;background-image:url(src=http___lmg.jj20.com_up_allimg_1114_0406210Z024_2104060Z024-11-1200.jpg&refer=http___lmg.jj20.webp)background-attachment:fixed}
        #div{width:1400px;height:800px;background-image:url(u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG.webp)background-attachment:fixed}
   </style>
</head>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

三十五、边框实现三角形

边框可以针对某一边进行单独设置
颜色透明transparent

<!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:300px;height:300px;
        border-top-color:black;
        border-top-style:solid;
        border-top-width:10px;
        border-right-color:black;
        border-right-style:solid;
        border-right-width:10px;
        border-bottom-color:black;
        border-bottom-style:solid;
        border-bottom-width:10px; 
        border-left-color:black;
        border-left-style:solid;
        border-left-width:10px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三十六、family字体类型

font-family：字体类型
英文中文

<!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>
<style>
    div{font-family:arial}
    div{font-family:"宋体"}
</style>
<body>
    <div>这是一段文字</div>
    <div>this is a text</div>
</body>
</html>

三十七、css文字样式

font-size:字体大小
默认：16px
写法：number（px）
font-weight 字体粗细模式：正常（normal）加粗（bold）
font-style 字体样式斜体（italic）
color 字体颜色

<!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>
<style>
    div{font-family:arial}
    div{font-family:"宋体"}
</style>
<body>
    <div>这是一段文字</div>
    <div>this is a text</div>
</body>
</html>

三十八、文本修饰与文本大小写

text-decoration：文本装饰
上划线overline
下划线underline
删除键line-through
可添加多个文本
小写 lowercase
大写uppercase
只针对首字母大写：capitalize

<!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{ width:300px;text-decoration: line-through underline overline;} */
       P{ text-transform: uppercase} 
    </style>
</head>
<body>
    <p></p>
    <p>cbshkbahcakajca  sjkcakcbdsS SJKVSDBKVSJV</p>
    </body>
</html>

三十九、文本缩进与文本对齐

**text—indent ：文本缩进（首行缩进）
em单位：相对单位，1em永远都跟字体大小相同
text-align :文本对齐方式 ( left right center justify(两端点对齐）） **

<!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{ width:300px;text-decoration: line-through underline overline;} */
       /* P{ text-transform: uppercase}  */
        /* p{text-indent:2em} */
         p{text-align:left}
   </style>
</head>
<body>
    <p></p>
    <!-- <p>cbshkbahcakajca  sjkcakcbdsS SJKVSDBKVSJV</p> -->
    </body>
</html>

四十、文本的行高

** line-height
什么是行高？是一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的，根据当前字体会不断发生变化
取值：（number）：px； scale (比例值：跟文体大小成比例）**

<!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{ width:300px;text-decoration: line-through underline overline;} */
       /* P{ text-transform: uppercase}  */
        /* p{text-indent:2em} */
         /* p{text-align:left} */
         p{line-height:200px}
   </style>
</head>
<body>
    <p></p>
    <!-- <p>cbshkbahcakajca  sjkcakcbdsS SJKVSDBKVSJV</p> -->
    </body>
</html>

四十一、文本间距与英文折行

letter-spacing :定义字间距
word-spacing：定义词间距(针对英文）
强制折行（针对英文）：英文和汉字不自动折行的问题
word-break：break-all（非常强烈的折行）
word-wrap:break-word(不强烈的折行，会产生一些空白区域)

<!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{ width:300px;text-decoration: line-through underline overline;} */
       /* P{ text-transform: uppercase}  */
        /* p{text-indent:2em} */
         /* p{text-align:left} */
         /* p{line-height:200px} */
         /* p{letter-spacing:20px} */
         div{width:300px;height:300px;border:1px solid red}
   </style>
</head>
<body>
    <!-- <p></div>
    <!-- <p>cbshkbahcakajca  sjkcakcbdsS SJKVSDBKVSJV</p> -->
    </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>
        div{width:800px;}
        h1{text-align:center;color:#ff6600}
        h2{color:#00a0ff;text-indent:2em;}
        #p1{font-style:italic;font-weight:bold;text-indent:2em;}
        #p2{color#66ff00;line_height:30px;text-indent:2em;text-decoration:
        underline;font-style:italic;}
    </style>
</head>
<body>
    <div>
        <h1>库里简介</h1>
        <p>斯蒂芬·库里(Stephen Curry),全名沃德尔·斯蒂芬·库里二世(Wardell Stephen Curry II)
            1988年3月14日出生于美国俄亥俄州阿克伦,美国职业篮球运动员,司职控球后卫,效力于NBA金州勇士队</p>
        <h2>早年经历</h2>
        <p>斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于金州勇士队,新秀赛季入选最佳新秀第一阵容;2014-15、2016-17、2017-18赛季、
            2021-22赛季四次夺得NBA总冠军,并于2021-22赛季当选总决赛MVP(FMVP) 两次荣膺常规赛MVP;2015-16、2020-21赛季两次荣膺常规赛得分王;
            2021-22赛季荣膺西部决赛MVP,  8次入选最佳阵容(4次一阵、3次二阵、1次三阵);  8次入选全明星首发阵容,
            2021年10月入选NBA75大巨星,12月成为NBA历史三分王,2022年荣膺全明星正赛MVP</p>
        <h2>荣获荣誉</h2>
        <p>斯蒂芬·库里于2010年随美国队获土耳其世锦赛冠军,2014年随美国队获西班牙篮球世界杯冠军。2019福布斯100名人榜,斯蒂芬·库里排名第23位。
            《体育画报》公布了2022-23赛季百大球员前十名榜单.斯蒂芬·库里排名第三</p>

    </div>
</body>
</html>

四十三、css复合样式

background ：red url () repeat x y
border :1px 边框 dashed虚线
font 需要关系顺序：font{ 30px 宋体}

<!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 :25% ; height : 100px ; background-color : red }
        span{ background-color :blue}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <div>这又是一个块</div>
    <span>这是一个内联</span>
</body>
</html>

四十四、css选择器

ID选择器：
css:#elem{}
html:id=“elem”
规范：id是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
驼峰写法：searchButton(小驼峰)
短线写法：search-small-button
下划线写法：search_small_button

<!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>
        #div1{background:red}
        #div2{background:blue}
    </style>
</head>
<body>
    <div id="div1">这是一段文字</div>
    <div id="div2">这也是一段文字</div>
</body>
</html>

45、CLASS选择器及注意事项

.elem{} class=“elem” 作用与id选择器差不多
细节：
可复用
可添加多个class样式
多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序
标签+类的写法

<!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>
        /* #div1{background:red}
        #div2{background:blue} */
        .box{ background:red;}
    </style>
</head>
<body>
    <!-- <div id="div1">这是一段文字</div>
    <div id="div2">这也是一段文字</div> -->
    <div class="box">这是一个块</div>
    <div class="box">这也是一个块</div>
    <p class="box">这是一个段落</p>
</body>
</html>