01.长度单位
1.像素 px
像素就是电脑屏幕上一个个发光的小点，我们的眼睛是看不出来的。
像素是我们pc端最常用的一个单位，它是一个固定单位。
2.百分比 %
是父元素的宽高百分比，百分比是一个相对单位，会随着父元素的宽高变换而变化
一般情况下，做流式布局较多。
也是一个相对元素，相当于当前元素的字体大小来计算最终的大小.
也就是1em=1个font-size.如果当前的元素没有设置字体大小，
那么会继承祖先元素的字体大小，
最终继承到html默认的字体大小,是16px
r --root 根
也是一个相对单位，相对于根标签html的字体大小来计算最终大小
也就是1rem=1个html的font-size
、vh
02.颜色单位
1：在css可以直接使用颜色的单词来表示不同的颜色
red,green,yellow,blank等
缺点：颜色单词太多，不好描述。
2：使用RGB值来表示不同的颜色
rgb(红色，绿色，蓝色)
颜色的值 0-255之间 0最小 ，255最大
直接用电脑或插件可以吸取颜色的比值，截图状态下可以吸取颜色
3：RGBA
rgba（red，green，blue，alpha）；
alpha 透明度 0-1之间设置透明度 0是透明 ，1是不透明
4：使用十六进制的rgb值来表示颜色，原理和rgb一样
十六进制：0-9abcdef，
00表示最小，代替0-255的0，ff表示最大，代替0-255的255
用十六进制的值分别表示红色，绿色，蓝色的浓度（6位数，一种颜色2位）
语法：#ff0000，像这样两两重复的表示，可以省略一位，简写成#f00.#f0f0f0这种不可省略
5:HSL值（H - 色相 0-360，S - 饱和度 0-100%，L - 亮度 0-100%）
HSLA值 ，A是alpha透明度 0-1之间
03.字体的分类
在网页中将字体分成5大类：
serif ['serif]（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive ['kə:siv]（草书字体）
fantasy ['fæntəsi]（虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底.
-
<body>
-
<p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>
-
<p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
-
</body>
04.字体的样式
设置字体颜色，也可以设置其他颜色
-size 设置字体大小
-family 可以指定字体
4.@font-face 自定义字体
-
<body>
-
<p>幕光者居落了将自令。Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex deserunt harum cum repellat reprehenderit velit. Deserunt, totam consequatur, distinctio maiores impedit laudantium asperiores ipsam eum adipisci harum quasi amet pariatur?</p>
-
</body>
-
<style>
-
@font-face{
-
/* 你给字体起的名字 */
-
font-family: name;
-
/* 字体引入路径 */
-
src: "";
-
}
-
p{
-
color: red;
-
font-size: 20px;
-
/* 设置文字的字体 字体是设计师设计好的，提前规定好的，我们可以直接使用即可 */
-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-
}
-
</style>
5.设置文字斜体 font-style: ;
可选值：
normal 默认值 文字正常显示
italic 文字倾斜 （比较常用）
oblique 文字倾斜 （了解）
6.设置文字的加粗 font-weight: ;
可选值：
normal 默认值 文字正常显示
bold 文字加粗
bolder 文字加粗
100-900 之间数值 100最细 900最粗 注意没有单位
7.设置一个小型大写字母 font-variant
可选值：
normal 默认值 文字正常显示
small-caps 设置小型大写字母
font简写 (可以统一设置文字相关的一些样式)
注意：
1、必须要有字体大小和文字的字体
2、字体大小必须在倒数第二位
文字字体必须在倒数第一位
<p class="p1">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>
-
.p1 {
-
font-size: 2em;
-
font-family: "Times New Roman", Times, serif;
-
/* 设置文字斜体 */
-
font-style: oblique;
-
/* 设置文字的加粗 */
-
font-weight: 900;
-
}
05.行间距
1、行高（line height） 文字占有的实际高度
行高=上间距+文字的大小+下间距
上间距=下间距
如果要设置行与行之间的空白距离，可以通过设置行高来实现
line-height样式名
可选值：
（1）、直接写大小，单位：px/em/rem/%
（2）、直接写倍数，1/2/3/4/5····，是当前字体大小的倍数
（3）、可以写百分比，100%，200%。300%
2、单行文本在父元素中垂直居中
只需要设置行高跟父元素高度一致
3、font中也可以指定行高
font: 字体大小/行高 字体;
06.文本样式
-transform 可以用来设置文本的大小写
可选值：
none 文本正常显示 默认值
uppercase 字母大写
lowercase 字母小写
capitalized 单词首字母大写
-decoration 可以用来设置文本的修饰
可选值：
none 文本正常显示 默认值
underline 文本下划线
overline 文本上划线
line-through 文本删除线
-spacing可以指定字符间距
-spacing可以设置单词之间的间距（句与句之间，单词与单词之间）
-align用来设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
注意：设置文本的对齐方式，必须要给文本一定的空间，
如果是行内元素的话，它的宽度是被内容撑开的，也就无法设置
-indent 设置文本的首行缩进
常见的长度单位：em
-space:; 设置网页如何处理空白，可以设置换不换行
-overflow 文本溢出包含元素时发生的事情
可选值：ellipsis 省略号
-shadow:设置文本阴影 h-shadow v-shadow blur color;
4个参数 (参数之间以空格隔开)
1.阴影的水平位移距离正值向右，负值向左 必填
2.阴影的垂直位移距离正值向下，负值向上 必填
3.阴影的模糊半径 选填，默认是0px
4.阴影的颜色 一般用rgba的形式较多 选填，默认是字体颜色
-shadow: h-shadow v-shadow blur color;
4个参数跟text-shadow是一样的
唯一不同的是
阴影的颜色默认是黑色
-align 设置元素垂直对齐的方式
可选值：
baseline 基线对齐 默认值
top 文本靠上
bottom 文本靠下
middle 文本居中
作用：
1.设置图文的对齐方式
2.解决图片三像素的问题。（面试题）
引入图片后，图片与图片之间会有空白，正常情况下是需要去除的
方法一：
vertical-align: middle 非baseline
方法二：
设置其父元素的font-size为0
方法三：
设置图片为块元素
方法四：
使图片脱离文档流，设置它浮动或者绝对定位皆可
-
<style>
-
/* 11.作用一 */
-
img{
-
width: 300px;
-
vertical-align: middle;
-
}
-
h1{
-
text-align: center;
-
text-shadow: 5px 5px 10px red;
-
}
-
.box{
-
width: 100px;
-
height: 100px;
-
background-color: gray;
-
box-shadow: 0px 0px ;
-
}
-
/* 需求:当鼠标移入的时候，box四周出现阴影 */
-
.box:hover{
-
box-shadow: 0px 0px 10px orange;
-
}
-
.p1{
-
text-transform: uppercase;
-
}
-
/* span是行内元素 */
-
span{
-
display: block;
-
text-align: center;
-
}
-
/* 设置单行文本省略号的固定写法 */
-
.p3{
-
background-color: green;
-
/* 设置宽度 */
-
width: 300px;
-
/* 设置不换行 */
-
white-space: nowrap;
-
/* 设置多余的内容裁剪掉 */
-
overflow: hidden;
-
/* 设置多余的内容以省略号的形式出现 */
-
text-overflow: ellipsis;
-
}
-
/* 多行文本省略号的固定写法？ */
-
</style>
-
<body>
-
<h1>郭同派终县你才，仁。</h1>
-
<p class="p1">知意所他找，次而性找与尹的绝，如措得今。
-
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit modi odit est velit ipsam repellat vero voluptate, unde reiciendis incidunt tenetur eveniet magni perspiciatis cupiditate veniam repellendus? At, accusamus minima.</p>
-
<p class="p2">者高六夫后宫王，对。
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta expedita quia magni praesentium dignissimos obcaecati omnis in quam tenetur. Sapiente officia voluptates numquam beatae tempora suscipit dicta perferendis, ipsa similique?
-
</p>
-
<a href=""><p class="p3">千要后真山我拿护高国倒德，有极人卅若了并高亲次从无县变，姑。</p></a>
-
<div class="box"></div>
-
<span>我是span标签</span>
-
<div>
-
<img src="../1116/" alt="">
-
<img src="../1116/" alt="">
-
<img src="../1116/" alt="">
-
</div>
-
</body>
