五 CSS-美化文档
5.1 HTML内部添加样式
1 标签中添加声明
声明的关键字是style
<input type="text" placeholder="手机号码" style="">
style可以在<input>里面的任何位置
2 在引号之间添加样式
<p style="font-size:14px;color:white"></p>
这段代码的意思是设置p标签中的字体大小为 14px，颜色为白色
5.2 字体大小/字体粗细
在CSS中属性和值书写方式
1 字体大小
设置格式： font-size ：36px
<!-- 设置字体的大小为12px --> <p style="font-size: 12px;"> 一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。 </p> <!-- 设置字体的大小为24px --> <p style="font-size: 24px;"> 一个轻量级和模块化的前端框架，用于开发快速和强大的web接口。 </p>
2 字体加粗
设置格式：font-weight：100；用数字或者用英文
<p style="font-weight: 200;">优课达--学的比别人好一点～</p> <p style="font-weight: lighter;">优课达--学的比别人好一点～</p> <p style="font-weight: 400;">优课达--学的比别人好一点～</p> <p style="font-weight: normal;">优课达--学的比别人好一点～</p> <p style="font-weight: 700;">优课达--学的比别人好一点～</p> <p style="font-weight: bold;">优课达--学的比别人好一点～</p>
5.3 字体颜色/文字对齐方式
1 颜色
颜色的设置方式有四种：
①英文字母形式：color: black;
②十六进制颜色 ： #DAE8FC; //#字开头，后边跟三个数字，每个数字的范围为00~FF
③rgb形式： color：rgb（253，217，106）
④rgba模式 color：rgba（253，217，106，1.0）//比rgb多一个值这个值代表透明度
<h3 style="color:#ff9a9e;font-weight:700;font-size: 24px;">UIzards</h3> <h4 style="font-size: 16px;color: #474d5d;font-weight: 400;"> Senior UX Designer </h4> <p style="font-size: 14px;color:#84868d;"> Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quom placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui faorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. </p>
2 文字居中/居左/居右
设置文字对齐的格式如下：
text-align: center；文字居中对齐
text-align: left;文字左对齐
text-align: right；文字右对齐
5.4 文字行高/字间距/字体
1 行高
就是每一行与每一行文字之间的举例
设置行高格式：line-height: 30px；
行高作用：①改变段落中行与行之间的距离
段落中默认是有行高的，但是这个默认行高未必能满足我们的需求，因此我们就需要改变行高来实现我们需要的效果；
<p> We understand every aspect of project and we put a great amount of time in understanding the project. </p> <p style="line-height:32px;"> We understand every aspect of project and we put a great amount of time in understanding the project. </p>
②使文字上下居中从上下居中，随着行高的变化，文字的位置也在不断变化，当行高和矩形高度一样的时候，文字在矩形中上下居中。
<button style="width: 120px;height:50px;text-align: center;line-height:50px;color:white;font-size: 18px;" > 提交 </button>
2 字间距
每个字之间的距离
letter-spacing: 30px;
3 字体
设置字体格式：font-family: sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';
六 CSS-引入方式
6.1 CSS的三种引入方式
1. 行内样式
就是我们之前学的样式每个部位都要用style那种
2. 内部样式
p {
font-size: 16px;
color: #ffffff;
}
3. 外部样式
①新键一个index.css文件
②将HTML代码块头部中的style标签内的样式全部拷贝过来；
③将复制的CSS样式粘贴进index.css文件中
④建立HTML和CSS文件的联系，即用link标签引入CSS文件
4. CSS注释方式：
①/* CSS注释内容 */
<style>
/* 写CSS的基础样式 */
.base{
/* 基础字体大小 */
font-size: 14px;
/* 基础字体颜色 */
color:#000000;
}
</style>
②外部样式注释
/* 写CSS的基础样式 */
.base {
/* 基础字体大小 */
font-size: 14px;
/* 基础字体颜色 */
color: #000000;
}
5 link
<link rel="stylesheet" type="text/css" href="index.css" />
①rel属性rel属性规定了当前文档与被链接文档之间的关系，但是rel属性的stylesheet值被所有浏览器支持，也就是你只要记住一个值即可
②type属性固定了被链接的MIME类型（多用途互联网邮件扩展类型），type属性对应的最常见的值就是text/css
③href属性后跟的事要引入的链接地址
6.2 相对路径/绝对路径
1. 路径
路径是为了在文件中引入外部资源
2. 绝对路径
绝对路径指的是文件在硬盘上真正存在的路径.
<img src="E:\book\网页布局\bg.jpg" />
但因为某种情况会打不开这种路径所以尽量用相对路径
3. 相对路径
相对路径就是文件自身位置，去寻找要引入的资源文件
在index.html中引入index.css就需要用到./
<link rel="stylesheet" href="./index.css"> <!-- 或者./去掉也可以，效果是一样的 --> <link rel="stylesheet" href="index.css">
在index.html中引入上一个文件夹中的index.css就需要用到./
<link rel="stylesheet" href="../index.css">
6.3 常用选择器
类选择器
如果我们想给
<p class="article"> class是定义类的关键字，article是类名，类名可以任意，但是要符合规范 </p>
.article {/*注意有一个点*/
color: red;
font-size: 14px;
}/* 这里写在style中 */
<p class="common color font-size"> common设置通用样式，color设置特殊颜色，font-size设置特殊字体大小 </p>
6.4 高级选择器
常用的高级选择器有四种：
①后代选择器
②交集选择器
③子选择器
④并集选择器
1. 后代选择器（空格）
举例
/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */
#password .box p{}
/* 选择所有p标签内部的所有span标签 */
p span{}
/* 选择所有p标签内部的所有类名为spanItem的标签 */
p .spanItem{}
实战
<ul class="first-ul"> <li>苍苍竹林寺，杳杳钟声晚。</li> <li>荷笠带斜阳，青山独归远。</li> </ul> <ul class="second-ul"> <li>白日依山尽，黄河入海流。</li> <li>欲穷千里目，更上一层楼。</li> </ul>
ul li {
/* 去除li标签前面的小圆点 */
list-style: none;
font-size: 22px;
}
.first-ul li {
color: rgb(212, 166, 28);
}
.second-ul li {
color: rgb(230, 127, 122);
}
2. 交集选择器
书写规则：a.special{
}
<a href="#" class="special">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a> <a href="#">超链接</a>
在所有a标签中，类目为special的标签
<ul>
<li><a href="" class="special">电子产品</a></li>
<li><a href="">家居服饰</a></li>
<li><a href="">电竞手办</a></li>
<li><a href="" class="special">家装服务</a></li>
<li><a href="">房屋出租</a></li>
</ul>
ul li {
list-style: none;
font-size: 22px;
}
ul li a {
/* 去除a标签的下划线 */
text-decoration: none;
/* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */
color: black;
}
ul li a.special {
color: orangered;
}
3. 子选择器
子选择器与后代选择器类似
<p> <span>Span 1. 在p标签内 <span>Span 2. 在p标签的span标签内</span> </span> </p> <span>Span 3. 与p标签相邻</span>
span {
color: black;
}
p>span {
color: orangered;
}
后代选择器：
span {
color: black;
}
p span {
color: orangered;
}
4. 并集选择器
如果要给不同的标签，或者不同类名的标签添加相同的样式，此时就要用到并集选择器，并集选择器的规则是在标签名或者类名后面用逗号隔开
.box,p,h3,.phone{}
上面的意思是给类名box，phone，p，h3的标签添加相同的属性
