前言:
今天是学习html的第五天,让我们看看今天的学习成果。
学习内容:
1、长度单位、颜色单位、字体相关的样式、行高
2、文本样式(11个)
长度单位:
长度单位
1:像素 px
就是电脑屏幕上的一个个发光的小点,我们眼睛是看不出来,
像素是我们pc端最常用的一个单位,它是一个固定单位
2:百分比 %
是父元素的宽高的百分比,是一个相对单位,会随着父元素宽高的变化而变化
一般情况下,做流式布局比较多
3、em
也是一个相对单位,相对于当前元素的字体大小来计算最终大小,
也就是1em=1个font-size。如果当前的元素没有设置字体大小,
那么会继承祖先元素的字体大小,
最终继承到html默认的字体大小,是16px
4、rem
r root 根
也是一个相对单位,相对于根标签html的字体大小来计算最终大小
也就是1rem=1个html的font-size
5、vw、vh
颜色单位:
颜色单位:
1:在CSS可以直接使用颜色的单词来表示不同的颜色
red、green、yellow、blank等
缺点:颜色单词太多了,不好描述
2:使用RGB值来表示不同的颜色
rgb(红色,绿色,蓝色)
颜色的值 0-255之间 0最小,255最大
直接用电脑或插件可以吸取颜色的比值,ctrl+alt+a
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
用十六进制的值来表示0-255之间的数值,表示红色,绿色,蓝色的浓度
语法:#ff0000,像这样两两重复的表示,可以省略一位,简写成#f00
#f0f0f0 这样的是不可以省略
例子:#f00 #0f0 #00f #ccc #eee #333
5:HSL值(H - 色相 0-360,S - 饱和度 0-100%,L - 亮度 0-100%)
HSLA值 A - alpha 透明度 0-1之间
字体相关的样式
行高:
1、行高(line height) 文字占有的实际高度
行高=上间距+文字的大小+下间距
上间距=下间距
如果要设置行与行之间的空白距离,可以通过设置行高来实现
line-height样式名
可选值:
(1)、直接写大小,单位:px/em/rem/%
(2)、直接写倍数,1/2/3/4/5····,是当前字体大小的倍数
(3)、可以写百分比,100%,200%。300%
2、单行文本在父元素中垂直居中
只需要设置行高跟父元素高度一致
3、font中也可以指定行高
font: 字体大小/行高 字体;
文本样式(11个);
1: text-transform 可以用来设置文本的大小写
可选值:
none 文本正常显示 默认值
uppercase 字母大写
lowercase 字母小写
capitalize 单词首字母大写
2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰
可选值:
none 文本正常显示 默认值
underline 文本下划线
overline 文本上划线
line-through 文本删除线
3: letter-spacing可以指定字符间距
4: word-spacing可以设置单词之间的距离
5: text-align用于设置文本的对齐方式
可选值:
left 默认值,文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
注意:设置文本的对齐方式,必须要给文本一定的空间,
如果行内元素的话,它的宽度是被内容撑开的,也就无法设置
6: text-indent 设置首行缩进
常用的长度单位:em
7: white-space: ; 设置网页如何处理空白,可以设置换不换行
8: text-overflow 文本溢出包含元素时发生的事情
可选值:ellipsis 省略号
9: text-shadow: h-shadow v-shadow blur color;
4个参数 (参数之间以空格隔开)
1、阴影的水平位移距离 正值向右,负值向左 必填
2、阴影的垂直位移距离 正值向下,负值向上 必填
3、阴影的模糊半径 选填,默认是0px
4、阴影的颜色 一般情况用rgba 选填,默认是字体的颜色
10:box-shadow: h-shadow v-shadow blur color;
4个参数跟text-shadow是一样
唯一不同的是
阴影的颜色 默认是黑色
11: vertical-align 设置元素垂直对齐的方式