本文详细介绍了HTML5和CSS3的相关知识，包括HTML元素的lang属性、head元素的嵌套、文本格式化、样式设置、表格、浮动元素、定位、CSS属性如display、visibility、overflow、盒子模型、背景属性等，以及伪类和伪元素的使用。内容涵盖了HTML5的img元素、form标签、音频和视频播放、语义标签，以及CSS的选择器、优先级、内联样式、内部样式表和外部样式表的引入。
HTML5-CSS3
HTML元素的lang属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素
w3C标准建议为html元素增加一个lang属性，作用是
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
lang="en"告诉浏览器︰这个HTML文档的语言是英文。
lang="zh"表示这个HTML文档的语言是中文。
head元素嵌套的元素
1.head元素里面的内容是一些“元数据”（元数据︰描述数据的数据)
一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
2.title元素
网页的标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东(JD)</title>
<link rel="icon" href="https: / /www.jd.com/favicon.ico">
<style>
h1{
color：red;
font-size: 50px;
}
</style>
</head>
<body>
<h1>彭于晏哈哈哈哈哈</h1>
</body>
</html>
3.meta元素
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
—般都使用UTF-8编码，涵盖了世界上几乎所有的文字
在HTML5之前，meta标签的写法也是比较复杂的
<meta http-equiv="Conten-Type" content="text/html"; charset="UTF-8">
4.body元素
里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
5.h元素
表示网页的标题
h1~h6共规定了6个等级的标题
6.p元素
表示文章中的一个段落（ paragraph )
| 标签 | 功能相同点 | 功能不同点 |
|---|---|---|
| p标签 | 有行间距，默认前后换行 | 不保留空格和换行，字体不变 |
| pre标签 | 有行间距，默认前后换行 | 保留空格和换行，变为等宽字体 |
7.strong元素
用于强调某些文本，粗体的显示效果
8.code元素
用于显示程序代码
9.br元素
在不产生一个新段落的情况下进行换行，使用< br/>标签。
8.hr元素
分割线
9.
<b> 加粗效果
<i> 斜体效果
<u> 下划线效果
HTML文本格式化
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| < sub> | 定义下标字 |
| < sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML样式
style 属性用于改变HTML元素的样式。 *background-color属性为元素定义了背景颜色； font-family定义了文本的字体系列； color 定义了字体颜色； font-size定义了字体尺寸; text-align规定了元素中文本的水平对齐方式。*
要想在网页中正确地显示这些预留子符，必须便用子符实体，书写格式一般有2种
&entity_name;
&#entity_number;
比较常用的有
| 描述 | 实体名称 | 实体编号 | |
|---|---|---|---|
| 空格 |   ; |   ; | |
| < | 小于号 | < ； | O ; |
| > | 大于号 | > ; | > ; |
| & | 和号 | & ; | & ; |
| " | 双引号 | " ; | " ; |
| ‘ | 单引号 | &apos ; | ' ; |
| 分(cent) | ¢ ; | ¢ ; | |
| 镑[pound) | £ ; | £ ; | |
| ￥ | 元(yen) | ¥ ; | ¥ ; |
| 欧元(euro) | &euro ; | € ; | |
| 小节 | § ; | § ; | |
| 版权(copyright) | © ; | © ； | |
| 注册商标 | ® ; | ® ; | |
| 商标 | &trade ; | ™ ; | |
| × | 乘号 | × ; | × ; |
| ÷ | 除号 | ÷ ; | ÷ ; |
字符实体练习
<body> <div title="我是一段‘特殊’的文本"> 我是彭于晏 </div> </body>
常用快捷键:
| shift + alt + ↑ | 块移动或行移动 |
|---|---|
| Ctrl+D | 复制上一行到下一行 |
| Ctrl+/ | 可以把选中的代码全部注释掉 |
| shift+F6 | 重命名 |
| shift+F | 搜索 |
| Alt+F2 | 打开浏览器 |
| ctrl+alt+L | 格式化代码 |
| shift+tab | 退格 |
| Ctrl+X | 删除行 |
| ctrl+k | 代码快速格式化 美观 |
span元素的使用
p标签指一个段落，是块级元素，span是行内元素，一般单独修饰文字；
span 标签可以放在p标签里,p标签不应该放在span标签里；
<head>
<meta charset="UTF-8">
<title>彭于晏</title>
<style>
.text {
color: blue;
font-size: 30px;
}
.new-price{
color: red;
font-size: 30px;
}
.oid-price {
color: aquamarine;
text-decoration: line-through;
}
</style>
</head>
<body>
我是一段文本
<span class="text"> 我也是一段文本 </span>
<!-- 价格的显示-->
<P>
<span class="new-price">￥69</span>
<span class="oid-price">￥99</span>
</P>
</body>
div元素的使用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
float: left;
}
.box2 {
float: right;
}
</style>
</head>
<body>
<div class="box1">
<h2>哈哈哈哈哈</h2>
<P>hahahahaha</P>
</div>
<div class="box2">
<h2>呵呵呵呵呵呵呵</h2>
<P>hehhehehehhehe</P>
</div>
</html>
结论1
| 标签 | 功能 |
|---|---|
| div | 定义文档中的分区或节（division/section)。一般用于用于对大的内容块设置样式属性 |
| span | 没有特定的含义,一般用于用于为部分文本设置样式属性 |
ing元素相对路径
img元素如果只设置了width (或height )，浏览器会自动根据图片宽高比计算出height (或width )
在HTML5规范中，alt是img元素的必要属性
width、height的默认单位是px，像素
<body> <p>本地图片地址(相对路径）</p> <img src="..\img\03.jpg" alt="" width="300" > <!-- alt属性：当图片（加载失败）时 显示文本 --> <img src="https://safa" alt="gif图片"> </body>
常用图片格式
png: 静态图片，支持透明
jpg : 静态图片，不支持透明
gif : 动态图片、静态图片，支持透明
<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="400" frameborder="no" border="0" width="20%"> </iframe> 原文链接：https://idealclover.top/archives/617/ 2021新冠实时疫情图
网站推荐
iconfont 网址查找你想要的小图标
favicon制作图标大小
https://html5.tool.webfrontend.dev/ 学习标签信息
https://www.w3school.com.cn/html/html_css.asp学习HTML
flatuicolors 颜色选择
<l -- body标签的bgco1or团性指定背景颜色。--> <!-- <body bgcolor="blue"> --> <l -- body标签的background属性指定背景图片。 --> <body background="images/01.png">
无序列表
| 标签 | 英文含义 | 功能 |
|---|---|---|
| ul | unordered lists 的缩写 | 无序列表的外边界 |
| li | list item的缩写 | 列表项 |
<h2>我的笔记</h2>
<h3>前端技术的作用?</h3>
<<ul>
<li>
<h4>HTML</h4>
结构，决定网页的结构和内容。(是什么)
</li>
<li>
<h4>cSS</h4>
表现，设定网页的表现样式。(什么样子)
</li>
<li>
<h4>Javascript</h4>
行为，控制网页的行为。（做什么)
</li>
<hr>
<!-- 无序列表 -->
<!-- h3+ul>li*3 -->
</ul>
<h3>网站上线流程</h3>
<ul>
<li>购买域名</li>
<li>购买服列器</li>
<li>网站备案</li>
<ul>
<li>需要在规定的背景布前拍照</li>
<li>需要提交规定的表格及资料</li>
<li>通过时长略有不同</li>
</ul>
</ul>
<hr>
属性 属性值
disc（实心圆）
type circle（空心圆）
square（方块）
- 看书
- 玩游戏
- 游泳
有序列表
| 标签 | 英文含义 | 功能 |
|---|---|---|
| ol | ordered lists的缩写 | 有序列表的外边界 |
| li | list item的缩写 | 列表项 |
<!-- 有序列表 -->
<!-- h3+ol>li*3 -->
<h3>网站开发流程</h3>
<ol>
<li>网站策划</li>
<li>网页设计</li>
<li>前端开发</li>
<li>后端开发</li>
<li>测试上线</li>
</ol>
<hr >
自定义列表
| 标签 | 英文含义 | 功能 |
|---|---|---|
| dl | definition lists的缩写 | 自定义列表的外边界 |
| dt | definition term的缩写 | 列表项中的标题 |
| dd | definition description的缩写 | 列表项中的内容 |
<!-- 自定义列表 -->
<h3>常见问题</h3>
<dl>
<dt><b>域名选择有什么建议吗?</b></dt>
<dd>答:尽量选主流域名。比如cn.com. net等;</dd>
<dd>域名长度建议控制在8个字符左右，可以使用英文单词、全拼、简拼来注册</dd>
<dt><b>服务器购买需要注意什么呢?</b></dt>
<dd>答:建议根据功能需要来选择配置;</dd>
<dt><b>网站域名都需要备案吗?</b></dt>
<dd>答:使用国内的服务器空间，必须备案。</dd>
</dl>
表格
| 标签 | 英文含义 | 功能 |
|---|---|---|
| table | 表格 | 表格的外边界 |
| tr | table row的缩写 | 定义行 |
| td | table data cell的缩写 | 定义单元格 |
<table border="" cellspacing="" cellpadding="">
<tr><th>课程表</th></tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<!-- (tr>td*4)*5 -->
<tr><!-- 总共几行 这里是5行 -->
<td>1</td><!-- 一行有几个单元格 这里是4个 -->
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
.....
</table>
table的属性
| 属性名 | 功能 | 常用属性值 |
|---|---|---|
| border | 设置边框 默认为0 没有边框 | 单位为px像素值 |
| cellspacing | 外边距，设置单元格与单元格之间的距离 | 单位为px像素值 |
| cellpadding | 内边距。设置文字与单元格之间的距离 | 默认1px |
| width | 设置表格的宽度 | 单位px，或者百分比 |
| height | 设置表格高度 | 单位px，或者百分比 |
| align | 设置表格在网页中的对齐方式 | left左 right右 center居中 |
| bgcolor | 设置背景颜色 | white red green |
表格的合并
| 标签 | 功能 | 属性值 |
|---|---|---|
| colspan | 单元格贯穿多少列(横向合并单元格) | 数值 |
| rowspan | 单元格贯穿多少行（纵向合并单元格) | 数值 |
<table border="" cellspacing="" cellpadding="">
<tr><th>课程表</th></tr>
<tr>
<td colspan="2">1</td>
<td rowspan="3">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
......
</table>
表格的标题及加粗
| 标签 | 功能 |
|---|---|
| th | 表头，表格第一行默认加粗 |
| caption | 表格的标题 |
<caption>
<h3>课程表</h3>
</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
form标签
| 标签 | 功能 |
|---|---|
| form | 定义表单，收集内部控件的信息发送给指定页面 |
| input | 定义了文本框及提交按钮 |
| 标签 | 功能 |
|---|---|
| action | 定义表单发送的目标地址 |
| method | 定义表单发送方式 |
<h3>我的搜索引擎</h3>
<!-- action:动作 method:方法 =-->
<!-- 将数据提交给哪里? 怎么提交? -->
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd"/>
<input type="submit" value="搜索一下"/>
</form>
<!-- form表单内的信息才还被提交到服务器 -->
| 表单提交方式 | 注意事项 | 场合 |
|---|---|---|
| get | 表单信息以“明文”方式发送网址长度不能超过2048个字符 | 发送非安全数据 |
| post | 表单信息包含在HTTP请求正文中,不在网址上显示。没有大小限制,可发送大量数据 | 发送敏感信息、个人信息:文件上传等 |
get方式提交时，多个数据形成的网址格式为：
目标网址﹖键1=值1&键2=值2
https : / /www. baidu.com/s?username=abc&password=123#
| 属性 | 功能 |
|---|---|
| type | 控制input控件的交互形式 |
| neme | 控件向服务器提交信息时的“键”名 |
| value | 控件默认填充的数值 |
| placeholder | 占位文字，光标聚焦输入文字时消失 |
<h3>调查小问卷</h3>
<!-- #号显示当前网页 -->
<form action="#" method="get">
<p>
姓名：<input type="text" name="username" placeholder="请输入用户名"/>
</p>
<p>
密码：<input type="text" name="password" />
</p>
<input type="submit" value="登录"/>
</form>
| 属性 | 功能 |
|---|---|
| type="radio" | 单选按钮，每个选项name相同才有互斥功能 |
| type="checkbox” | 复选框，每个选项name相同表达多选概念 |
| checked="checked" | 选项默认选中的状态 |
<h3>调查小问卷</h3>
<!-- #号显示当前网页 -->
<form action="#" method="get">
<p>
姓名：<input type="text" name="username" placeholder="请输入用户名"/>
</p>
<p>
密码：<input type="password" name="password" placeholder="请输入密码"/>
</p>
<p>
性别：<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="0" />女
</p>
<p>爱好：
<input type="checkbox" name="hobby" value="read" checked="checked"/>看书
<input type="checkbox" name="hobby" value="game"/>游戏
<input type="checkbox" name="hobby" value="rum"/>跑步
</p>
<input type="submit" value="提交 "/>
</form>
input属性值
| input属性值 | 功能 |
|---|---|
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符. |
| password | 定义密码字段。该字段中的字符被掩码。 |
| checkbox | 定义复选框。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数捆。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本> |
| image | 定义图像形式的提交按钮。 |
| file | 定义输入字段和“浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| date | 定义日期输入框,以及日期选择控件。 |
<p>
头像: <input type="file" />
</p>
<p>
生日: <input type="date" />
</p>
<p>
<input type="hidden" name="token" value="浪海之帆" />
</p>
<input type="button" value="普通按钮" />
<input type="reset" value="重置" />
<input type="submit" value="提交 "/>
select标签
| 标签 | 功能 |
|---|---|
| select | 下拉列表框 |
| option | 选项 |
| 属性 | 功能 |
|---|---|
| multiple="multiple" | 可以选中多个选项 |
| size="n" | 窗口可以同时显示n个选项 |
| selected="selected" | option标签中，被选中的状态 |
<p>所在地:
<select name="provice" size="3">
<option value="bj">北京市</option>
<option value="fj" selected="selected"> 福建省</option>
<option value="sc">四川省</option>
<option value="zj">浙江省</option>
<option value="gd">广东省</option>
</select>
</p>
textarea标签
| 标签 | 功能 |
|---|---|
| textarea | 文本区 |
| 属性 | 功能 |
|---|---|
| cols=30 | 列，横向显示的字符数 |
| rows=10 | 行，纵向显示的行数 |
<p>
<textarea name="profile" rows="10" cols="30"
placeholder="我的爱好还有:">
默认的文字
</textarea>
</p>
| 标签 | 功能 |
|---|---|
| fieldset | 为表单分组 |
| legend | 为fieldset标签定义标题 |
<fieldeset> <legend>调查小问卷</legend> <form action="#" method="get"> 这里是表单 </form> </fieldeset>
块级、行内级元素概念
块级元素(blook level element):
独占父元素一行·
标签默认带换行效果的元素，例如:div、p、 pre、h1~h6、ul、ol、li、 dl、 dt、dd、 table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、 hr等
行级元素(inline oloment，内联元素）:
多个行内级元素可以在父元素的同一行中显示
标签默认不带换行效果的元素，例如:a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video,audio等
替换、非替换元素
替换元素(replaced elements )
元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容比如img、input、 iframe.video、embed、 canvas、audio、object等
非替换元素( non-replaced elements )
和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
CSS属性-display-修改元素的显示类型
CSS中有个display属性，能修改元素的显示类型，有4个常用值
block :让元素显示为块级元素
inline :让元素显示为行内级元素
none:隐藏元素
inline-block :让元素同时具备行内级、块级元素的特征
display:
1.block-(浏览器默认给div/p/h1..元素设置了display :block)
2.inline·(将block元素转回到行内元素)
3.none -(隐藏元素，不占据空间)
4.inline-block
...可以和其他元素在同一行显示
display:
1.block-(浏览器默认给div/p/h1..元素设置了display :block)
2.inline·(将block元素转回到行内元素)3.none -(隐藏元素，不占据空间)
4.inline-block
... 可以和其他元素在同一行显示
可以设置宽度和高度
div,p,h1{
background-color: red;
width: 200px;
height: 50px;
display: inline-block;
}
display的以下取值，等同于某些HTML元素
table : <table> ，—个block-level表格
inline-table : <table> ，一个inline-level表格table-row : <tr>
table-row-group : <tbody>
table-header-group : <thead>
table-footer-group : <tfoot>
table-cell : <td>、 <th> ，一个单元格
table-caption : <caption> ，表格的标题
list-item : <li>
CSS属性-visibility-控制元素的可见性
visibility，能控制元素的可见性，有2个常用值
visible :显示元素
hidden:隐藏元素
visibility: hidden;和display: none;的区别
visibility: hidden;
虽然元素看不见了，但元素的框依l旧还留着，还会占着原来的位置
display: none;
不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
CSS属性-overflow-控制内容溢出时的行为
overflow用于控制内容溢出时的行为
visible :溢出的内容照样可见
hidden :溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
会—直显示滚动条区域，滚动条区域占用的空间属于width、height
auto :自动根据内容是否溢出来决定是否提供滚动机制
还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向
(建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持)
CSS属性-盒子模型
HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性
内容( content )
盒子里面装的东西
内边距( padding )
盒子边缘和里面装的东西之间的间距
边框( border )
就是盒子的边框，边缘部分
外边距( margin )
盒子和其他盒子之间的间距
内容相关属性
width :宽度 min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width height:高度 min-height :最小高度，无论内容多少，高度都大于或等于min-height
max-height :最大高度，无论内容多少，高度都小于或等于max-height
内边距相关属性
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* 上右下左 这个规律 没有的值按相反的方向的值默认代替*/
pading: 10px 20px 30px 40px
外边距相关属性
margin-left :左外边距
margin-right:右外边距
margin-top :上外边距
margin-bottom :下外边距
margin : 是margin-top、margin-right、margin-bottom、margin-left的简写属性
上下margin传递
margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题?
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC:设置overflow为auto/hidden
BEC: block format context 结界
如何触发BFC：
浮动可以触发
设置一个元素的overflow为非visible
hidden、auto、scroll
建议：
margin：一般是用来设置兄弟元素之间的间距
padding：一般是用来设置父子元素之间的间距
上下margin折叠
垂直方向上相邻的2个margin ( margin-top、margin-bottom )有可能会合并为1个margin，这种现象叫做collapse（折叠）
水平方向上的margin ( margin-left、margin-right )永远不会折叠 只能上下
折叠后最终值的计算规则
两个值进行比较，取较大的值
如何防止margin collapse ?
只设置其中一个元素的margin
border边框相关的属性
边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-widthborder-width是上面4个属性的简写属性
边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-colorborder-color是上面4个属性的简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-styleborder-style是上面4个属性的简写属性
border边框样式的取值
none :没有边框，边框颜色、边框宽度会被忽略
dotted :边框是一系列的点
dashed :边框是一条虚线
solid :边框是一条实线（常用）
double :边框有两条实线。两条线宽和其中的空白的宽度之和等于border-width的值
groove :边框看上去好象是雕刻在画布之内
ridge : 和grove相反，边框看上去好像是从画布中凸出来
inset: 该边框使整个框看上去好像是嵌在画布中
outset : 和inset相反，该边框使整个框看上去好象是从画布中凸出来
border实现形状
border-left-color：transpacent；//透明
transform：rotate(-45deg); // 三角形旋转
行内非替换元素的注意点
以下属性对行内非替换元素不起作用
width、height、margin-top、margin-bottom
以下属性对行内非替换元素的效果比较特殊
padding-top.padding-bottom、上下方向的border
boorder圆角形状
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* body{
margin: 0;
} */
/* 圆角 */
.box{
width: 200px;
height: 200px;
background-color: #5eff42;
border-top-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
border-bottom-left-radius: 50px 50px;
border-bottom-right-radius: 50px 50px;
}
/* 圆形 */
.box1{
margin-top: 20px;
width: 200px;
height: 200px;
background-color: #7751A5;
border-radius: 100px;
}
</style>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html>
CSS属性-outline-元素的外轮廓
outline表示元素的外轮廓不占用空间 默认显示在border的外面 outline相关属性有 outline-width outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color outline : outline-width、outline-style、outline-color的简写属性，跟border用法类似 应用实例 去除a元素、input元素的focus轮廓效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a, input, textarea{
outline: none;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<input type="text" />
</body>
</html>
CSS属性-box-shadow-阴影
<shadow> = insei? && <length>{2,4}&& <color>?
第1个<length> :水平方向的偏移，正数往右偏移
第2个<length> :垂直方向的偏移，正数往下偏移
第3个<length>:模糊半径( blur radius )
第4个<length> :延伸距离
<color> :阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: #ffffff;
border: 2px solid orange;
margin: 30px auto;
box-shadow: 0px 10px 10px 10px rgba(0,0,0,.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS属性-text-shadow-文字添加阴影
text-shadow用法类似于box-shadow，用于给文字添加阴影效果
text-shadow同样适用于::first-line(第一行文字）、:first-letter（第一个字）
盒子尺寸-box-sizing
box-sizing用来设置盒子模型中宽高的行为
content-box：
padding、 border都布置在width、height外边
border-box：
padding、border都布置在width、height里边
内容盒子
content-box:·含义是设置宽度和高度时只是指定内容的宽高
border-box:含义是设置宽度和高度时是内容+内边距+边框的宽度
box-sizing：border-box 盒子的内减
元素的水平居中显示
在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block )
行内级元素、inline-block元素
水平居中:在父元素中设置text-align: center
块级元素
水平居中 :margin: 0 auto
CSS属性-背景
background-image用于设置元素的背景图片
会盖在(不是覆盖)background-color的上面
如果设置了多张图片
background-image: ur1( "bg001.png")，ur1("bg002.png" )，ur1("bg003.png");
设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
CSS属性-平铺
background-repeat用于设置背景图片是否要平铺
常见的设值有
repeat:平铺 no-repeat :不平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直平方向平铺
平铺效果
background-repeat：repaat-x
background-repeat：repaat-y
CSS属性-背景图片大小
background-size用于设置背景图片的大小
auto:以背景图本身大小显示
cover :缩放背景图，以完全覆盖铺满元素
contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage> :百分比，相对于背景区
length :具体的大小，比如100px
CSS属性-背景图片方向
background-position
水平方向还可以设值:left、 center、right 垂直方向还可以设值: top、center、bottom 如果只设置了1个方向，另一个方向默认是center 比如background-position: 80px;等价于background-position: 80px center;
CSS-sprite-图片合并
什么是CSS Sprite
是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分有人翻译为:CSS雪碧、CSS精灵
使用CSS Sprite的好处
减少网页的http请求数量，加快网页响应速度，减轻服务器压力减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名
background-positiom： 0 -192px
背景图居中
background-positiom： center -30px
CSS属性-背景滚动模式
background-attachment可以设置以下3个值
scroll:背景图片跟随元素一起滚动(默认值) 随着.box的滚动(浏览器),·背景一起滚动
local:背景图片跟随元素以及元素内容一起滚动 会随着.box内容时滚动,背景一起滚动
fixed:背景图片相对于浏览器窗口固定 背景是固定的,不会随着.box的滚动而滚动
CSS属性-背景相关属性的简写属性
background是一系列背景相关属性的简写属性，常用格式是
image position/size repeat attachment color
background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面其他属性也都可以省略，而且顺序任意
background-image和img的选择
总结：
img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
CSS属性-cursor-光标
cursor可以设置鼠标指针(光标)在元素上面时的显`示样式
cursor常见的设值有 auto:浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式 default :由操作系统决定，一般就是一个小箭头 pointer :一只小手，鼠标指针挪动到链接上面默认就是这个样式 text :—条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式 none :没有任何指针显示在元素上面
标准流（Normal Flow)
默认情况下，元素都是按照normal flow(标准流、常规流、正常流、文档流【document flow】)进行排布
从左到右、从上到下按顺序摆放好
默认情况下，互相之间不存在层叠现象
CSS属性-position-元素定位
利用position可以对元素进行定位，常用取值有4个
static:静态定位
1.position属性的默认值 2.元素按照normal flow布局 3.left 、 right、top、bottom没有任何作用
relative :相对定位
1.元素按照normal flow布局 2.可以通过left、 right、top. bottom进行定位定位 3.参照对象是元素自己原来的位置
absolute :绝对定位
1.元素脱离normal flow（脱离标准流、脱标) 2.可以通过left、 right、top、 bottom进行定位 3.定位参照对象是最邻近的定位祖先元素
定位元素( positioned element )position值不为static的元素
fixed :固定定位
脱标元素的特点
可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
不再给父元素汇报宽高数据
子绝父相
在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是:
父元素设置position: relative (让交元素成为定位元素，而且父元素不脱离标准流)
子元素设置position: absolute
绝对定位技巧
绝对定位元素( absolutely positioned element )
position值为absolute或者fixed的元素
对于绝对定位元素来说
定位参照对象的宽度= left + right + margin-left + margin-right ＋ 绝对定位元素的实际占用宽度
定位参照对象的高度= top + bottom + margin-top + margin-bottom +绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性left: 0、right: 0、top: 0、 bottom: 0、margin:0
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性left: 0、 right: 0、top: 0、 bottom: 0、margin: auto
另外，还得设置息体的宽高值（宽高小于定位参照对象的宽高）
/* 1.让完全占据父元素 */ */ */
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
/* 2.让内容居中 */
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
background-color: yellow;
| 脱离批准流 | 定位元素 | 绝对定位元素 | 定位参照对象 | |
|---|---|---|---|---|
| static-静态定位 | × | × | × | × |
| relative-相对定位 | × | √ | × | 元素自己原来的位置 |
| absolute-绝对定位 | √ | √ | √ | 最邻近的定位祖先元素(如果找不到这样的祖先元素，参照对象是视口) |
| fixed-固定定位 | √ | √ | √ | 视口 |
元素的层叠
CSS属性-z-index-定位元素的层叠顺序
z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效)
取值可以是正整数、负整数、o
比较原则
如果是兄弟关系
z-index越大，层叠在越上面
z-index相等，写在后面的那个元素层叠在上面
如果不是兄弟关系
各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
层叠关系
标准元素:标准流中的元素是不存在层叠
定位元素:定位元素会层叠到标准流元素的上面
定位元素之间可以z-lIndex 前提:必须是定位元素–非static
浮动元素: float: left / right
标准元素>浮动元素>定位元素
定位方案
在CSS中，有3种常用的方法对元素进行定位、布局
normal flow:标准流、常规流、文档流
absolute positioning :绝对定位
float:浮动
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
CSS属性-float-浮动
可以通过float属性让元素产生浮动效果，float的常用取值
none :不浮动，默认值
left:向左浮动
right:向右浮动
1.浮动的规则一
元素一旦浮动后脱离标准流
朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素）或者其他浮动元素的边界为止
定位元素会层叠在浮动元素上面
2.浮动的规则二
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
比如行内级元素、 inline-block元素、块级元素的文字内容
利用此特性，可以轻松实现文字环绕功能
3.浮动的规则三
行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.box{
height: 300px;
background-color: #f00;
}
.inner1{
float: left;
width: 100px;
height: 100px;
background-color: orange;
}
.inner2{
float: left;
/* display: inline-block; */
width: 150px;
height: 150px;
background-color: purple;
}
</style>
<body>
<!--
三者之间的关系：
position :absolute/fixed和float:left/right
和display之间的关系
现象解释：
1.inner2进行左浮动/右浮动的时候，只会在当前自己行中浮动
2.inner1进行左浮动时，inner2在没有浮动时，inner1会如何排布
3.inner1进行左浮动时，inner2在没有浮动时,但是里面有文本，
文本会如何排布
4 .inner1进行左浮动时， inner2也进行左浮动，那么innner1
和inner2以此在第一行排布
5.inner1和inner2都进行浮动,但是父元素没有设置高度,那么
父元素的高度会消失(高度的坍塌)
-->
<div class="box">
<div class="inner1"></div>
<div class="inner2">
我是inner2的文本
</div>
</div>
</body>
</html>
4.浮动的规则四
如果元素是向左(右）浮动，浮动元素的左(右）边界不能超出包含块的左(右)边界
5.浮动的规则五
浮动元素之间不能层叠
如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮)
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
6.浮动的规则六
浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端
布局问题
问题:在进行布局时,同一行多个元素摆放后,设置margin-rlight让他们之间产生间距,那么最有一个元素设置的margin-right总是多余:
解决办法一:每一行的最后一个元素,总是加一个class,通过类选择器去除这个margin-right
解决办法二:通过伪类选择器 兼容性问题
解决办法三:container固定的宽度>.wrap+负margin>很多的item
URl的格式
协议://主机[∶端口]/路径
例如:
https : // www. bilibili .cot/v/knowledge/
ftp://127.0.0.1:8080/course/lesson1.mp4
超链接标签
| 标签 | 功能 |
|---|---|
| a | 定义超链接 |
| 属性 | 功能 |
|---|---|
| href | 定义超链接目标 |
外部链接:链接到其他网站的页面的超链接
内部链接:链接自己网站的其他页面的超链接
target元素-是否在当前标签页打开页面
| 属性值 | 功能 |
|---|---|
| target_self | 在当前标签页打开页面 |
| target_blank | 在新标签页中打开页面 |
| target_parent | 在父窗口打开URL |
| target_top | 在顶层窗口打开URL |
| 某个frame的name值 | 在某个frame中打开URL |
<a href="https://www.bilibili.com/"
target="_blank"
target="_parent"
target="_search"
target="_self"
target="_top"
name="b"
>百度一下</a>
锚与锚点概念:
锚:就是在文档中设置位置标记，并给该位置一个名称，以便引用。
锚点:可以使链接指向当前文档或不同文档中的指定位置。
实现方式:
通过id定义位置的名称，通过href=“#id名称”定位到指定位置。
常见HTTP状态码及含义
| 编码 | 英文 | 含义 |
|---|---|---|
| 400 | Bad Request | 错误请求 |
| 401 | Unauthor ized | 访问被拒绝 |
| 403 | Forbidden | 禁止访问 |
| 404 | Not Found | 没有找到文件或目录 |
| 500 | lnternal Server Error | 服务器内部错误 |
| 502 | Bad Gateway | 错误网关 |
| 503 | Service Unavailable | 服务不可用 |
| 504 | Gateway Timeout | 网关超时 |
meta标签-针对搜索引擎的关键字
| 标签 | 功能 |
|---|---|
| meta | 可提供有关页面的元信息（meta-information)，比如针对搜索引擎的关键字、描述信息等 |
| 属性 | 值 | 功能 |
|---|---|---|
| hame | keywords | content属性中定义关键字 |
| name | description | content属性中定义描述信息 |
注意:
meta标签位于head标签内。
元数据通常以名称/值对出现。
如果没有提供name属性,那么名称/值对中的名称会采用http-equiv属性的值。
<head>
<meta charset="utf-8">
<title>元标签</title>
<!-- 提供有关页面的元信息 -->
<!-- 设定当前网页的关键字 -->
<meta name="keywords" content="meta标签，元标签，浪海之帆" />
<!-- 设定当前网页的描述信息 -->
<meta name="description" content="meta元素可提供有关页面的元信息，浪海之帆是来自福建的团队 "/>
</head>
| meta的属性 | 值 | 功能 |
|---|---|---|
| charset | 字符集名称 | 声明网页使用的字符集 |
<meta charset="utf-8"/>
audio标签-播放音频
| 属性 | 功能 |
|---|---|
| audio | 播放音频 |
| source | 播放音频源文件位置 |
| 属性 | 功能 |
|---|---|
| autoplay | 自动播放 |
| controls | 显示控制栏 |
| loop | 循环播放 |
<h3>音乐：firefly</h3>
<audio controls="controls" autoplay="autoplay" >
<source src="firefly.mp3">
<source src="firefly.ogg">
当前浏览器不支持audio
</audio>
video标签-播放视频
| 标签 | 功能 |
|---|---|
| video | 播放视频 |
| source | 指定视频源文件位置和类型 |
| 属性 | 功能 |
|---|---|
| autoplay | 自动播放 |
| controls | 显示控制栏 |
| loop | 循环播放 |
<h3>影片：Space</h3>
<video width="800" height="" controls="controls" autoplay="autoplay">
<source src="video/blue.mp4" type="video/mp4"></source>
<!-- <source src="myvideo.ogv" type="video/ogg"></source> -->
<!-- <source src="myvideo.webm" type="video/webm"></source> -->
<!-- Adobe 在2020.12.31日之后不再支持Flash Player -->
<!-- <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object> -->
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
</video>
iframe标签-创建包含另外一个文档的内联框架
| 标签 | 功能 |
|---|---|
| iframe | 创建包含另外一个文档的内联框架（即行内框架） |
| 属性名 | 值 | 功能 |
|---|---|---|
| src | 文档的路径 | 规定在iframe中显示文档的URL |
| frameborder | 1 0 | 规定是否显示框架周围的的边框 |
| width | 像素值 百分比 | 定义iframe的宽度 |
| height | 像素值 百分比 | 定义iframe的高度 |
| scrolling | yes no auto | 规定是否显示iframe中显示滚动条 |
| marginheight | 像素值 | 定义iframe的顶部和底部的边距 |
| marginwidth | 像素值 | 定义iframe的左侧和右侧的边距 |
<body>
引入bilibili页面
<!-- 引入bilibili页面 -->
<iframe src="https://www.bilibili.com/" width="100%"
height="800px" frameborder="no"></iframe>
</body>
语义标签
语义标签:就是根据网页内容的语义,定义不同的标签，让内容的结构更清晰，
有助于开发人员和搜索引擎理解内容间的关系。
| 标签 | 功能 |
|---|---|
| header | 规定文档或节的页眉 |
| nav | 定义导航链接 |
| hgroup | 定义标签组 |
| article | 定义文章 |
| section | 定义文档中的节 |
| aside | 定义页面内容以外的内容 |
| footer | 定义文档或节的页脚 |
<body>
<!-- header：定义文档的页眉、头部 -->
<header>这里是网页头部</header>
<!-- nav：定义导航链接的部分 -->
<nav>这里是导航栏</nav>
<!-- article:定义文章 新闻、博客等 -->
<article>
<hgroup>
<h3>标题：这里是HTML部分讲义</h3>
<h4>副标题：关于语义标签</h4>
</hgroup>
<p>
主体内容：<br>
接下来是关于语义标签的简介....<br>
<!-- 乱数讲文 -->
Lorem ipsum dolor sit amet,<br>
consectetur adipisicing elit.<br>
Beatae quasi repellendus earum <br>
eum officiis numquam ab hic possimus<br>
nam ipsam vero dignissimos enim <br>
nihil non voluptates quos<br>
ex voluptatem consectetur!<br>
</p>
</article>
<!-- aside:定义主体内容之外的内容，侧边 -->
<div>附加信息：这甲是名词解释:什么是"CSS"?</div>
<!-- 定义文档或书的页脚 底部 -->
<footer>底部信息：这里是版权说明</footer>
</body>
CSS
什么是CSS ?
CSS的作用是∶可以给网页中的每一个元素设置样式(“化妆”、排版布局），让网页更加精美
完全没有使用CSS的网页:基本就是一堆从上到下、从左到右挨在一起的文字和图片
CSS的全称是Cascading Style Sheets，层叠样式表
常用CSS属性
文本: color、direction、letter-spacing.word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体: font、font-family、font-style、font-size、font-variant、font-weight
背景: background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型: width、height、border、margin、padding
列表:list-style
表格: border-collapse
显示: display、 visibility、overflow、opacity、filter
定位: vertical-align、position、left、top、right、bottom、float、clear
CSS引入内联(行内)样式
<body>
<!---1.内联(行内)样式:-inline--->
<!---<h1 ·style=属性名:属性值;属性名:属性值;">网页的标题</h1>1-->
<h1 style="font-size:50px; color: red;">网页的标题</h1>
<p>网页的段落</p>
<a href="#">百度一下</a>
<div style="font-size: 30px; background-color: aqua;">哈哈哈哈哈</div>
</body>
CSS引入内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 选择器{
属性名：属性值
} */
/* 单个选中h1元素 */
h1{
font-size: 50px;
color: red;
}
div{
font-size: 30px;
}
/* 并集选择器 */
h1,p,a {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
</style>
</head>
<body>
<!--·文档样式表:document style sheet·-->
<!--·开发网页特性:结构和样式分离·-->
<h1>网页的标题</h1>
<p>网页的段落</p>
<a href="#">百度一下</a>
<div class="red">哈哈哈哈哈哈</div>
</body>
</html>
CSS引入外部样式表
CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。 语法： 1、链接式 <link type="text/css" rel="styleSheet" href="CSS文件路径" /> 2、导入式
<style type="text/css"> @import url("css文件路径"); </style>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- link引入样式：rel="stylesheet" -->
<link rel="stylesheet" href="./css/style.css"/>
<!-- import引入 -->
<style>
@import url("./css/style.css");
</style>
</head>
<body>
<!-- 外部样式表 -->
<h1>网页的标题</h1>
<p>网页的段落</p>
<a herf="#">百度一下</a>
<div>哈哈哈哈哈哈</div>
</body>
</html>
链接式和导入式的区别
<link> 1、属于XHTML 2、优先加载CSS文件到页面 @import 1、属于CSS2.1 2、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式>内部样式>外部样式(后两者是就近原则)
样式应用方式对比
| 样式表 | 优点 | 缺点 | 控制范围 | 使用情况 |
|---|---|---|---|---|
| 行内样式表 | 书写方便 | 没有实现样式和结构分离 | 控制一个元素（少） | 较少 |
| 内部样式表 | 部分结构和样式相分离 | 需要引入 | 控制一个页面（中） | 较多 |
| 外部样式表 | 完全实现结构和样式相分离 | 没有彻底分离 | 控制整个站点 | 最多 |
CSS选择器（selector）
什么是CSS选择器？ 按照一定的规则选出符合条件的元素，为之添加CSS样式 选择器的种类繁多，大概可以这么归类： 通用选择器( universal selector )
元素选择器（ type selectors )
类选择器( class selectors )
id选择器( id selectors ) 属性选择器( attribute selectors )
组合( combinators ) 伪类( pseudo-classes )
伪元素( pseudo-elements )
统配选择器
一般用来给所有元素作一些通用性的设置
比如内边距、外边距
效率比较低，尽量不要使用
<head>
<meta charset="utf-8">
<title></title>
<!-- <style>
统配选择器
*{
color: red;
}
</style> -->
</head>
常用选择器种类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 选择器{
属性名：属性值
} */
/* 单个选中h1元素 */
h1{
font-size: 50px;
color: red;
}
div{
font-size: 30px;
}
/* 并集选择器 */
h1,p,a {
color: red;
}
/* 类选择器 */
.red {
color: red;
}
</style>
</head>
<body>
<!--·文档样式表:document style sheet·-->
<!--·开发网页特性:结构和样式分离·-->
<h1>网页的标题</h1>
<p>网页的段落</p>
<a href="#">百度一下</a>
<div class="red">哈哈哈哈哈哈</div>
</body>
</html>
类别选择器
类别选择器:使用“.类名”，选中指定类别的元素。
注意:同一个元素可以属于多个类别,可以用空格隔开，样式同时生效。
效果:相同类别的元素样式相同，同一个元素可以属于多个类别，应用多个样式效果。
/* 类选择器 */
.red {
color: red;
}
.abc{
font-size: 30px;
background-color: orange;
width: 60%
}
<div class="red abc">哈哈哈哈哈哈</div>
RGB颜色
十六进制表示形式
#rrggbb，每一种颜色取值范围00~FF，大小写都可以
#ff0000:红色，#OOff00∶绿色，#0000ff :蓝色，#000000:黑色，#fffff:白色，#fff00∶黄色
例如：#CC6600
CC------->12+12*16=12+192=204
RGB颜色规律
RGB颜色值越大，越靠近白色，越浅色
RGB颜色值越小，越靠近黑色，越深色
RGB颜色值一样的，一般是灰色
RGBA颜色
RGBA颜色在RGB颜色的基础上加了个alpha，实现带有透明度的颜色
rgba(red, green, blue, alpha)
alpha取值范围是0.0~1.0
0代表完全透明，1代表完全不透明
<body>
<style >
div{
width:200px;
height: 200px;
/* background-color:rgb(255,200,100); */
/* background-color: rgba(130,150,54,1); */
background-color: #FF0000;
}
</style>
<div></div>
</body>
文本属性
1.text-decoration-设置文字的装饰线
用于设置文字的装饰线
none :无任何装饰线
√可以去除a元素默认的下划线
underline :下划线
overline : 上划线
line-through :中划线（删除线)
<head>
<meta charset="utf-8">
<title></title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
2.letter-word-spacing-间隔
letter-spacing：每个字母间隔
word-spacing: 单词间隔
3.text-transform-设置文字的大小写转换
用于设置文字的大小写转换
可以设置以下值
capitalize :将每个单词的首字符变为大写
uppercase :将每个单词的所有字符变为大写
lowercase :将每个单词的所有字符变为小写
none:没有任何影响
4.text-indent-内容的缩进
text-indent用于设置第一行内容的缩进
text-indent: 2em;刚好是缩进2个文字
em---> 1em*20px=20px
text-indent:1em;
font-size: 20px;
5.text-align-在元素中的水平对齐
text-align可用于设置元素内容在元素中的水平对齐方式常用的值
left : 左对齐
right :右对齐
center : 正中间显示
justify :两端对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: #aaffff;
text-align: center;
}
.box2{
background-color: #f0f;
text-align: center;
}
.a03{
background-color: aqua;
text-align: center;
}
.a04{
background-color:purple;
width: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">哈哈哈哈哈</div>
<div class="box2"> <img src="./images/按钮.png" alt="我的世界">
</div>
<div class="a03">
<div class="a04">我是div元素</div>
</div>
</body>
</html>
文字属性
1.font-size-决定文字的大小
font-size决定文字的大小
常用的设置
具体数值+单位
比如100px
也可以使用em单位:lem代表100%，2em代表200%，0.5em代表50%
百分比
基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
2.font-family-设置文字的字体名称
font-family用于设置文字的字体名称
可以设置1个或者多个字体名称(从左到右按顺序选择字体，直到找到可用的字体为止)
font-family: consolas;
font-family:“微软雅黑""，consolas,Symbol，“Microsoft Sans Serif" ;
一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文
所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面
3.font-weight-设置文字的粗细(重量)
font-weight用于设置文字的粗细(重量)
100 | 200 [ 300 | 400 | 500 | 600 | 700 | 800 | 900:每一个数字表示一个重量
normal :等于400
bold:等于700
4.font-stlye-设置文字的常规、斜体显示
font-style用于设置文字的常规、斜体显示
normal:常规显示
italic :用字体的斜体显示 （前提是font-family这种字体本身是支持斜体）
oblique :文本倾斜显示（让文字倾斜）
em、i、 cite、address、var、dfn等元素的font-style默认就是italic
5.font-variant-影响小写字母的显示形式
font-variant可以影响小写字母的显示形式
可以设置的值如下
normal:常规显示
small-caps :将小写字母替换为缩小过的大写字母
6.line-height-设置文本的最小行高
line-height用于设置文本的最小行高
行高可以先简单理解为一行文字所占据的高度
行高的严格定义是︰两行文字基线( baseline )之间的间距
基线( baseline ) :与小写字母x最底部对齐的线
顶线( top ) 中线( middle ) 底线( bottom）
注意区分height和line-height的区别
height :元素的整体高度
line-height :元素中每一行文字所占据的高度 （文字的高度＋行距）
height=line-height 文字就居中了
font
font是一个缩写属性
font-style font-variant font-weight font-size/line-height font-family
font-style、 font-variant、font-weight可以随意调换顺序，也可以省略
font-size、font-family不可以调换顺序，不可以省略
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/* font-size: 30px;
font-family: "宋体";
font-weight: 700;
font-style: italic;
line-height: 50px;
font-variant: small-caps; */
font: 700 italic small-caps 30px/50px "宋体";
}
</style>
</head>
<body>
<div >
这是div元素
</div>
</body>
</html>
更多选择器
属性选择器
| 类型 | 描述 |
|---|---|
| [title^="one"] | 选择 title 属性值以 "one" 开头的所有元素 |
| [title$="one"] | 选择 title 属性值以 "one" 结尾的所有元素 |
| [title*="one"] | 选择 title 属性值中包含子串 "one" 的所有元素 |
后代选择器(最 重要)
div p span{
color: red;
}
要div元素下有span元素就符合
子选择器(重要)
div元素里面的直接span子元素（不包括间接子元素）
div > span {
color: red;
}
相邻兄弟选择器
div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)
div+p {
color: red;
}
<P>文字内容1</P>
<div>
<P>文字内容2</P
</div>
<P>文字内容3</P> //只有文字内容3符合
<P>文字内容4</P>
全体兄弟选择器
div元素后面的p元素(且div、p元素必须是兄弟关系)
div~p {
color: red;
}
<P>文字内容1</P>
<div>
<P>文字内容2</P
</div>
<P>文字内容3</P> //文字内容3符合
<P>文字内容4</P> //文字内容4符合
交集选择器(重要)
div.one {
color: red;
}
<div class="one">文字内容1</div>//只有文字内容1符合
<div class="twp">文字内容2</div>
<p class="one">文字内容3</p>
所有同时符合3个条件的元素:div元素、class值有one、title属性值等于test
div.one[title="test"] {
color: red;
}
<div class="one">文字内容1</div>
<div class="one" title="test">文字内容2</div>//只有文字内容2符合
<div class="one" title="other">文字内容3</div>
并集选择器(重要)
所有的div元素＋所有class值有one的元素＋所有title属性值等于test的元素
div,.one,[title="test"]{
color: red;
}
<div>文字内容1</div>//文字内容1符合
<span title="test">文字内容2</span>//文字内容2符合
<p class="one">文字内容3</P>//文字内容3符合
h1{ color: red;}
h2{ color: red;}
h3{ color: red;}----------------->h1,h2,h3,h4,h5{
h4{ color: red;} color: red;
h5{ color: red;} }
伪类和伪元素
1.目标和元素状态伪类
2.动态伪类
1.:link
a:link未访问的链接
a:visited已访问的链接
a:hover鼠标挪动到链接上
a:active 激活的链接（鼠标在链接上长按住未松开)
使用注意：
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是:link、:visited、:hover、:active
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 未访问状态 */
a:link{
color: red;
}
/* 已经访问过 */
a:visited {
color: green;
}
/* 手指（鼠标）放上去 */
a:hover {
color: blue;
}
/* 手指点下去，未松手 */
a:active{
color: orange;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
2.:focus-输入焦点的元素（能接收键盘输入)
:focus指当前拥有输入焦点的元素（能接收键盘输入)
文本输入框一聚焦后，背景就会变红色
imput:focus{
backgroind: red;
}
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
input:focus{
color: red;
}
a:focus{
color: yellow;
}
动态伪类编写顺序建议是:link、:visited、:focus、:hover、:active
a:focus{
outline: none;//可以让a元素不被选中 把a元素的焦点去掉
}
<!--tabindex可以调整tab选中元紊的顺序·-->
<a tabindex="-1" href="#">百度一下</a>
3.结构伪类
1.nth-child(数字)
数字n为全部；偶数：even; 奇数：odd
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
·/*·交集选挥器:1必须是子元素中第三个元素·*/
:nth-child(3){
color: red;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</div>
</body>
</html>
=====================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 交集选择器：
是一个p元素
同时作为子元素的第一个元素 */
p:nth-child(1){
color: red;
}
/* 后代选择器：
选择p元素，但是后面是一个空格，选p的后代
选择后代的第一个元素 */
p :nth-child(1){
color: blue;
}
</style>
</head>
<body>
<div>
<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
</div>
<p>
<strong>文字内容1</strong>
</p>
</body>
</html>
2.:nth-last-child(数字)
:nth-last-child()的语法跟:nth-child()类似，
不同点是:nth-last-child()从最后一个子元素开始往前计数
: nth-last-child(1)，代表倒数第一个子元素
:nth-last-child( -n + 2)，代表最后2个子元素
3.:nth-of-type(数字)
:nth-of-type()用法跟:nth-child()类似，
不同点是:nth-of-type()计数时只计算同种类型的元素
4.相关性
:first-child，等同于:nth-child(1)
: last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type( 1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯─的这种类型的子元素
:root，根元素，就是HTML元素
5.:empty
: empty代表里面完全空白的元素
:empty {
width: 100px;
height: 20px;
background: red;
}
4.否定伪类
: not()的格式是:not(×)是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类)
:not(×)表示除x以为的元素
:not()支持简单选择器，不支持组合。比如下面的写法是不支持的
:not(div.one){
color: red;
}
5.伪元素
常用的伪元素有
:first-line、: :first-line
:first-letter、: :first-letter
: before、 : :before
:after. : : after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
1.: : first-line-首行文本设置属性
: : first-line可以针对首行文本设置属性
只有下列属性可以应用在::first-line伪元素
字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
2.: :first-letter-针对首字母设置属性
: :first-letter可以针对首字母设置属性
只有下列属性可以应用在::first-letter伪元素
字体属性、margin属性、 padding属性、 border属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing (适当的时候)、line-height、float、vertical-align(只有当float是none时)
3.: : before和: :after-内容之前或之后插入其他内容
: : before和: :after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
在CSS属性值中，使用ur1(图片的URL)来引用图片ur1(dot.png); ur1( ' dot.png ' );
<head>
<style>
div {
color: red;
}
/* 在元素前面插入内容 */
div::before{
content: "before";
font-size: 40px;
}
/* 在元素后面插入图片 */
div::after{
content: url(./images/按钮.png);
}
</style>
</head>
<body>
<div>原来的一段文字</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
