2020.02.12css学习
字体,行间距,字间距(部分)
字体的颜色:
使用color来设置文字的颜色。
字体的大小:
使用font-size来设置,浏览器中默认的文字大小都是16px
font-size设置的并不是文字本身的大小,在页面中,文字都处在一个看不见的框中,我们设置的是框的高度。
一般情况下,文字都比框要小一些。
字体:
font-family:可以设置字体。当浏览器不支持某种字体时,就是用默认的字体
该样式可以指定多种字体,使用逗号分开,浏览器会默认使用前面的字体,前面没有才会使用后面的字体。
颜色单位:
用颜色单词来表示不同颜色。
也可以使用RGB值来表示不同的颜色,RGB值时通过红绿蓝三原色,通过不同的浓度来调配不同的颜色。
例子:rgb(红的浓度,绿的浓度,蓝的浓度),颜色的浓度在0~255之间,255表示最大,0最小。
浓度可以用百分数,0%100%。会转换成0255.
也可以使用十六进制的RGB值来表示颜色,原理上和RGb值一样,使用3组两位16进制来表示一个颜色
只不过使用16进制数来表示
语法:#红色绿色蓝色
两位重复的颜色可以简写
比如:#ff0000=#f00
字体的分类:
在网页中将字体分成5大类:
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
一般会将字体的大分类,指定为font-family的最后一个。
font-style:
可以设置文字的样式
normal,italic(斜体),oblique(倾斜)(浏览器一般不会对斜体和倾斜做区分)
font-weight:
可以设置文字的加粗效果
blod(加粗) 该样式也可以指定100~900的9个值
行间距:
在css中比没有为我们设置一个直接设置行间距的方式
只能通过行高简介来设置行间距
有line-height来设置行高
文本会在行高的中间显示
行间距=行高-字体大小
<style type="text/css">
.p1{
font-size:20px;
line-height:30px
}
</ style>
可以接收的值:1,可以直接传一个数值,行高会对应的倍数。2,可以指定一个百分值
对于单行文本,可以将行高设置和父元素高度一致,这样单行文本在父元素中居中。
在font中也可以指定行高,不指定会使用默认值
font:30px/50px "微软雅黑";
text-align:
用于设置文本对齐的样式
而可选值:
left:默认的左对齐
right:右对齐
center:文本中间对齐
justify:两端对齐(通过调整文本之间的空格大小来实现对齐)
text-indent:
用来设置首行缩进
当给他制定一个正值时,会自动向右缩进指定的像素
给他一个负值,会向左移指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
通常使用使用em作为单位