HTML学习*3

Ling_Ye_

已于 2022-10-28 17:07:13 修改

阅读量466

点赞数 1

文章标签： html 学习前端

于 2022-10-26 23:12:44 首次发布

本文链接：https://blog.csdn.net/Ling_Ye_/article/details/127542043

版权

第一部分

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>
</head>
<body>
    <ul>
        <li>
            海南省
            <ul>
                <li>三亚市</li>
                <li>海口市</li>
                <li>三沙市</li>
            </ul>
        </li>
    </ul>
    <dl>
        <dt>中国
            <dd>
                <dl>
                    <dt>海南省
                        <dd>三亚市</dd>
                        <dd>海口市</dd>
                        <dd>三沙市</dd>
                    </dt>
                </dl>
            </dd>
        </dt>
    </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>
    <h1>好美味的小吃</h1>
    <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>
        <dt><em>亲，20元以上可送餐哦!</em></dt>
    </dl>
</body>
</html>

在这里插入图片描述

2.表格标签

<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>天气预报</caption>
        <tHead>
            <tr>
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td>2022年10月23日</td>
                <td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>2022年10月24日</td>
                <td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
                <td>有小雨，记得带伞</td>
            </tr>
        </tBody>
        <tFood></tFood>
    </table>
</body>

</html>

效果演示
在这里插入图片描述

注意：在一个table中，tBody是可以多次出现的，但是tHead，tFood只能出现一次。

3.表格属性

border：表格边框
cellpadding：单元格内的空间
cellspacing：单元格之间的空间
rowspan：合并行
colspan：合并列
align：左右对齐方式（left，center，right）
valign：上下对齐方式（top，middle，bottom）
代码演示：

<!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>天气预报</caption>
        <tHead>
            <tr align="right">
                <th colspan="2">日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </tHead>
        <tBody>
            <tr valign="top">
                <td rowspan="2">2022年10月23日</td>
                <td>白天</td>
                <td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/c407f8d96a1243cc.png" alt=""></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr valign="bottom">
                <td rowspan="2">2022年10月24日</td>
                <td>白天</td>
                <td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
                <td>有小雨，记得带伞</td>
            </tr>
            <tr>
                <td>夜晚</td>
                <td><img src="./img/dae4a8054fc29ba9a6523b0a91a77335.jpeg" alt=""></td>
                <td>有小雨，记得带伞</td>
            </tr>
        </tBody>
        <tFood></tFood>
    </table>
</body>

</html>

效果演示
在这里插入图片描述

4.表单input标签

<form>:表单的最外层容器
    <input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框，密码框，复选框等。
    type属性：
    1.text  普通的文本输入框
    2.password  密码输入框
    3.checkbox  复选框
    4.radio  单选框
    5.file  上传文件
    6.submit 提交按钮
    7.reset  重置按钮

注意：input为单标签
代码演示

<!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=""><!--表格收集地址-->
    <h2>输入框：</h2>
    <input type="text" placeholder="请输入用户名">
    <h2>密码框：</h2>
    <input type="password" placeholder="请输入密码">
    <h2>复选框</h2>
    <input type="checkbox" disabled>苹果<!--disabled表示不选-->
    <input type="checkbox" checked>香蕉<!--checked表示必须选-->
    <input type="checkbox">葡萄
    <h2>单选框</h2>
    <input type="radio" name="oo">男<!--name为了表示一组可以单选-->
    <input type="radio" name="oo">女
    <h2>上传文件</h2>
    <input type="file">
    <h2>提交按钮和重置按钮</h2>
    <input type="submit">
    <input type="reset">
    </form>
</body>
</html>

效果演示
在这里插入图片描述

5.表单相关标签

<textarea>:多行文本框
<select>,<option>:下拉菜单
<label>:辅助表单提升体验

代码演示

<!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>
    <h2>多行文本框</h2>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option><!--默认选择-->
        <option>北京</option>
        <option>上海</option>
        <option>三亚</option>
    </select>
    <select size="3"><!--size表示显示多少-->
        <option>北京</option>
        <option>上海</option>
        <option>三亚</option>
    </select>
    <select multiple><!--多选-->
        <option>北京</option>
        <option>上海</option>
        <option>三亚</option>
    </select>
    <input type="file" multiple>
    <input type="radio" name="oo" id="man"><label for="man">男</label>
    <input type="radio" name="oo" id="woman"><label for="woman">女</label>
    <!--扩大范围-->
</body>
</html>

效果演示
在这里插入图片描述

6.表格表单组合实例

代码演示

<!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" callpadding="30">
            <tBody>
                <tr align="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户信息</td>
                </tr>
                <tr align="right">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="right">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center">
                    <td colspan="2">
                        <input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="reset">
                    </td>
                </tr>
            </tBody>
        </table>
    </form>
</body>
</html>

在这里插入图片描述

7.div与span

DIV元素，是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。span本身没有任何属性，也没有固定的格式表现，当对它应用样式时，它会产生视觉上的变化。

div : 做一个区域划分的块
span : 对文字进行修饰的内联
代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="border:1px gray solid;">
        <h2><a href="#">【千锋教育】<span style="color:red">html5</span>-中国数万程序员的选择-官方首页</a></h2>
        <a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2492331056,4193866086&fm=202&mola=new&crop=v1" alt=""></a>
        <p>优势: 三师护航就业薪资: 10K-20K培训方式: 全程面授培训类型: IT培训
                千锋-致力于互联网应用研发培训,中国程序员认可的培训机构;千锋开设web大前端,java,UI设计,PHP,VR,linux,大数据,pyhton,物联..</p>
        <a href="#">www.mobiletrain.org 2019-04- 评价 广告</a>
    </div>

    <div>
        <h2><a href="#"><span>html5</span>_零基础如何学<span>Html5</span>_从小白到大神进阶</a></h2>
        <a href="#"><img src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=2922130382,676357541&fm=202&mola=new&crop=v1" alt=""></a>
        <p>培训类型: Web前端特色: 包吃包住价格: 12期免息城市: 319个分校
                html5,中公优就业上市企业,免费试学5天,不合适全额退款,先就业后付款,过万家合作名企,学员与保险公司签订就业保障协议,毕业..</p>
        <a href="#">www.ujiuye.cn 2019-04- 评价 广告</a>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

第二部分

1.CSS语法格式

选择器 { 属性1 : 值1 ; 属性2 : 值2 }

width : 宽
height : 高
background-color : 背景色

长度单位 :
1. px -> 像素
2. % -> 百分比
外容器1 -> 600px 当前容器 50% -> 300px
外容器2 -> 400px 当前容器 50% -> 200px
注释 /注释/

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>

效果演示在这里插入图片描述

2.CSS的引入方式

内联样式
style属性
2. 内部样式
style标签
区别：
内部样式的代码可以复用、复合W3C的规范标准，进行让结构和样式分开处理。
3. 外部样式
引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。
通过@import方式引入外部样式 ( 这种方式有很多问题，不建议使用 )

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
    <div style="width:100px;height:100px;background-color:red">另外一个块</div> -->
    <div>这是一个块</div>
    <div>另外一个块</div>
</body>
</html>

效果演示
在这里插入图片描述
代码演示

div {color: blue;width: 100px;height: 100px;background-color: brown;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./222.css">
    <title>Document</title>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

效果演示
在这里插入图片描述

3.CSS颜色表示法

单词表示法 : red blue green yellow …
十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
rgb三原色表示法：rgb(255,255,255);
取值范围 0 ~ 255

获取颜色的工具：
提取颜色的下载地址：https://www.baidufe.com/fehelper
photoshop工具

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{ background-color:rgb(0,0,0); }
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

效果演示
在这里插入图片描述

4.背景样式

background-color 背景色
background-image 背景图
url(背景地址)
默认：会水平垂直都铺满背景图
background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat ( x , y 都进行平铺，默认值 )
no-repeat 都不平铺
background-position : 背景位置
x y : number(px、%) | 单词
x : left、center、right
y : top、center、bottom
background-attachment : 背景图随滚动条移动的方式
scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
fixed ( 背景位置是按照浏览器进行偏移的 )

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ height : 2000px;}
    div{ width:1440px; height:800px; background-color :red; 
         background-image:url(./img/c407f8d96a1243cc.png);
         background-repeat : no-repeat;
         background-position: 50% 50%;
         background-attachment: fixed;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果演示
在这里插入图片描述

5.背景实现视觉差效果

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #div1{ width:1400px; height: 800px; background-image:url(./img/1.jpg); background-attachment: fixed;}
    #div2{ width:1400px; height: 800px; background-image:url(./img/2.jpg); background-attachment: fixed;}
    #div3{ width:1400px; height: 800px; background-image:url(./img/3.jpg); background-attachment: fixed;}
    table{ background-color:white;}
    </style>
</head>
<body>
    <div id="div1">
            <table border="1" cellpadding="30" cellspacing="30">
                    <caption>天气预报</caption>
                    <tHead>
                        <tr align="right">
                            <th colspan="2">日期</th>
                            <th>天气情况</th>
                            <th>出行情况</th>
                        </tr>
                    </tHead>
                    <tBody>
                        <tr valign="top">
                            <td rowspan="2">2019年1月1日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr valign="bottom">
                            <td rowspan="2">2019年1月2日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                    </tBody>
                    <tFood>
            
                    </tFood>
                </table>

    </div>
    <div id="div2">
            form action="http://www.baidu.com">
            <h2>多行文本框</h2>
            <textarea cols="30" rows="10"></textarea>
            <h2>下拉菜单</h2>
            <select>
                <option selected disabled>请选择</option>
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <select size="3">
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <select multiple>
                <option>北京</option>
                <option>上海</option>
                <option>杭州</option>
            </select>
            <input type="file" multiple>
    
            <input type="radio" name="gender" id="man"><label for="man">男</label>
            <input type="radio" name="gender" id="woman"><label for="woman">女</label>
    
        </form>
    </div>
    <div id="div3">

            <table border="1" cellpadding="30" cellspacing="30">
                    <caption>天气预报</caption>
                    <tHead>
                        <tr align="right">
                            <th colspan="2">日期</th>
                            <th>天气情况</th>
                            <th>出行情况</th>
                        </tr>
                    </tHead>
                    <tBody>
                        <tr valign="top">
                            <td rowspan="2">2019年1月1日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>天气晴朗，适合出行</td>
                        </tr>
                        <tr valign="bottom">
                            <td rowspan="2">2019年1月2日</td>
                            <td>白天</td>
                            <td><img src="./img/tianqi_1.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                        <tr>
                            <td>夜晚</td>
                            <td><img src="./img/tianqi_2.png" alt=""></td>
                            <td>有小雨，出门请带伞</td>
                        </tr>
                    </tBody>
                    <tFood>
            
                    </tFood>
                </table>
    </div>
</body>
</html>

效果演示
在这里插入图片描述

6.边框样式

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

边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{ width:300px; height:300px; border-right-style: dotted; border-right-width: 10px; border-right-color:green; border-top-style: solid; border-top-width: 10px; border-top-color:red;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果演示
在这里插入图片描述

7.边框实现三角形

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{ background-color:blueviolet;}
    div{ width:0px; height:0px;
        border-top-color: transparent;
        border-top-style:solid;
        border-top-width:30px;;
        border-right-color: red;
        border-right-style:solid;
        border-right-width:30px;;
        border-bottom-color: transparent;
        border-bottom-style:solid;
        border-bottom-width:30px;;
        border-left-color: transparent;
        border-left-style:solid;
        border-left-width:30px;;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果演示
在这里插入图片描述

8.CSS文字样式

font-family : 字体类型
英文、中文
衬线体、非衬线体
注意点：
1.多个字体类型的设置目的
2.引号的添加的目的（有的字体中间有空格必须用）
在这里插入图片描述

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* div{ font-family: 'Times New Roman';} */
    /* div{ font-family: SimSun;} */
    div{ font-family: 华文彩云 , 'Times New Roman' , SimSun , 微软雅黑; }
    div{ font-style:oblique; color:red;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

效果演示
在这里插入图片描述

9.字体大小粗细样式

font-size : 字体大小
默认 : 16px
写法 : number(px) | 单词 ( small large … 不推荐使用)

font-weight : 字体粗细
模式：正常( normal ) 加粗 ( bold )
写法：单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的，600都900都是加粗的 )

font-style : 字体样式
模式：正常 ( normal ) 斜体 ( italic )
写法：单词 ( normal 、 italic )
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* div{ font-family: 'Times New Roman';} */
    /* div{ font-family: SimSun;} */
    /* div{ font-family: 华文彩云 , 'Times New Roman' , SimSun , 微软雅黑; } */
    /* div{ font-size : 30px;} */
    /* div{ font-weight: 600; } */
    div{ font-style:oblique; color:red;}
    </style>
</head>
<body>
    <div>这是一段文字</div>
    <p>这是一段文字</p>
    <div>this is a text</div>
    <p>this is a text</p>
</body>
</html>

效果演示
在这里插入图片描述

10.文本修饰和文本大小写

text-decoration：文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注：添加多个文本修饰：line-through underline overline

text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   p{ width:300px; text-decoration: line-through underline overline;}
   P{ text-transform:capitalize;}
    </style>
</head>
<body>
    <p>这是一个段落文字</p>
    <p>
       kshkfhsdhkf nklwhdl lkelk fkSS
    </p>
</body>
</html>

效果演示
在这里插入图片描述

11.文本缩进和文本对齐

text-indent : 文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

text-align : 文本对齐方式
对齐方式 : left 、right、center、justify（两端点对齐）

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   /*  p{ width:300px; text-decoration: line-through underline overline;} */
   /*  P{ text-transform:capitalize;} */
  /*  p{ text-indent : 2em; font-size:18px;} */
    p{ text-align:justify;}
    </style>
</head>
<body>
    <p>的分解开来打开的健身卡觉得无聊的哦附件说的话开发环境回复的绝对符合凯撒而可怜的JFK冷静思考了几个空间可是的骄傲i啊我就哦发票金额构配件讲哦对解放军虽然构配件送皮肤就奥斯</p>
    <p>
        dhjfauhfjkdsklfnasjdjl KKJKJ klsKJ
    </p>
</body>
</html>

效果演示
在这里插入图片描述

12.文本的行高

line-height : 定义行高

什么是行高，一行文字的高度，上边距和下边距的等价关系。
默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
取值：1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   /*  p{ width:300px; text-decoration: line-through underline overline;} */
   /*  P{ text-transform:capitalize;} */
  /*  p{ text-indent : 2em; font-size:18px;} */
    /* p{ text-align:justify;} */
    p{ line-height: 2;}
    </style>
</head>
<body>
    <p>的分解开来打开的健身卡觉得无聊的哦附件说的话开发环境回复的绝对符合凯撒而可怜的JFK冷静思考了几个空间可是的骄傲i啊我就哦发票金额构配件讲哦对解放军虽然构配件送皮肤就奥斯</p>
    <p>
        dhjfauhfjkdsklfnasjdjl KKJKJ klsKJ
    </p>
</body>
</html>

效果演示
在这里插入图片描述

13.文本间距与英语折行

letter-spacing : 字之间的间距
word-spacing : 词之间的间距 ( 针对英文段落的 )

英文和数字不自动折行的问题：
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域)

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   /*  p{ width:300px; text-decoration: line-through underline overline;} */
   /*  P{ text-transform:capitalize;} */
  /*  p{ text-indent : 2em; font-size:18px;} */
    /* p{ text-align:justify;} */
    /* p{ line-height: 2;} */
     /*  p{ word-spacing: 10px;} */
     div{ width:300px; height:300px; border:1px solid red; word-break : break-all;}
    </style>
</head>
<body>
    <p>的分解开来打开的健身卡觉得无聊的哦附件说的话开发环境回复的绝对符合凯撒而可怜的JFK冷静思考了几个空间可是的骄傲i啊我就哦发票金额构配件讲哦对解放军虽然构配件送皮肤就奥斯</p>
    <p>
        dhjf 111111111111111111111111 auhfjkdsklfnasjdjl KKJKJ klsKJ
    </p>
    <div> dhjf 111111111111111111111111 auhfjkdsklfnasjdjl KKJKJ klsKJ</div>
</body>
</html>

效果演示
在这里插入图片描述

14.文本与段落实现个人案例

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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;}
    #p3{ color:#00ffff; line-height: 30px; text-indent: 2em; text-decoration: underline; font-style:italic;}
    #p4{ font-weight: bold; letter-spacing: 10px; line-height: 30px; text-indent: 2em;}
    #p5{ color:#cc00cc; line-height: 30px; text-indent: 2em;}
    </style>
</head>
<body>
    <div>
        <h1>Angelababy简介</h1>
        <h2>基本信息</h2>
        <p id="p1">杨颖（Angelababy），1989年2月28日出生于上海，13岁时移居香港，中国影视女演员。</p>
        <p id="p2"> 2009年主演电影《全城热恋》。2012年，凭借爱情片《第一次》获得第十三届华语电影传媒大奖“最受瞩目女演员奖”。2013年1月，《南都娱乐周刊》举办新生代四小花旦的评选活动，杨颖以总分70分的综合得分与刘诗诗、杨幂、倪妮共同当选为新一代“四小花旦”；同年在徐克导演的影片《狄仁杰之神都龙王》中担任女主角，并且获得第21届北京大学生电影节最受欢迎女演员奖；4月，Angelababy主演电视剧《大汉情缘之云中歌》。2014年加盟综艺节目《奔跑吧兄弟》并主演电影版；同年主演顾长卫导演的电影《微爱之渐入佳境》，票房突破2.8亿。2015年5月参演好莱坞电影《独立日2》；7月，主演电影《摆渡人》。</p>
        <h2>早年经历</h2>
        <p id="p3"> 1989年2月28日，Angelababy出生在上海，中文名杨颖。杨颖自小随家人到上海定居，在上海的演艺学校学演戏及跳舞。13岁时，杨颖回香港加入了Talent Bang，还担任Viva Club Disney主持。</p>
        <h2>个人生活</h2>
        <p id="p4"> 2015年5月27日，黄晓明和Angelababy（杨颖）在青岛民政局领证完婚。</p>
        <p id="p5"> 2015年10月8日，黄晓明和Angelababy在上海展览中心正式举办婚礼。上午8点，Angelababy工作室曝光了一两人的婚纱照，照片中，两人以巴黎地标建筑为背景，浪漫亲吻。</p>
    </div>
    
</body>
</html>

效果演示
在这里插入图片描述

15.CSS复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。
1. background : red url() repeat 0 0;
2. border : 1px red solid;
3. font :
注：最少要有两个值 size family
weight style size family √
style weight size family √
weight style size/line-height family √
注：如果非要混合去写的话，那么要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{ width:300px; height:300px; 
        background : url(../img/dae4a8054fc29ba9a6523b0a91a77335.jpeg) no-repeat center center;
        background-color : red; 
        /* border : 2px black solid; */
        border-right : dashed 2px blue;
        font : bold italic 30px/100px 宋体;
    }
    </style>
</head>
<body>
    <div>这是一段文字</div>
</body>
</html>

效果演示
在这里插入图片描述

15.id选择器以及注意事项

ID选择器
#elem{} id=“elem”
注：
1. ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3. 驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton
短线写法：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>
        #iu{background: blue;}
        #iuu{background: red;}
    </style>
</head>
<body>
    <div id="iu">芜湖芜湖</div>
    <div id="iuu">阿宅正传</div>
</body>
</html>

效果演示
在这里插入图片描述

16.class选择器以及注意事项

.elem{} class=“elem”
注：
1. class选择器是可以复用的。
2. 可以添加多个class样式。
3. 多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
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>
        .op{ background: red;}
        .ok{background-color: blue;}
        
    </style>
</head>
<body>
    <div id="iu">芜湖芜湖</div>
    <div id="iuu">阿宅正传</div>
    <div class="op ok">后划时代的</div>
    <div class="op">pppppppp</div>
</body>
</html>