一.长度单位
1)像素px
作用:像素是我们网页中使用最多的一个单位。一个像素就相当于我们屏幕中的一个小点,我们屏幕实际上就是由这些像素点构成的。
2)百分比%
作用:也可以将单位设置为一个百分比的形式,这样浏览器会根据其父元素的样式来计算该值。使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变。在我们创建一个自适应的页面时,经常使用百分比作为单位。
3)em
em和百分比类似,它是相当于当前元素的字体大小来计算的
1em=1font-size
使用em时,当字体大小发生变化时,em也会随之改变,当设置字体相关的样式时,经常会使用em。
二.十六进制RGB值
颜色单位:在CSS可以直接使用个颜色的单词来表示不同的颜色
红色:red
蓝色:blue
绿色:green
也可以使用RGB值来表示不同的颜色
所谓的RGB值是指通过Red Green Blue三原色,通过这三种颜色的不同的弄高度,来表示出不同的颜色。
例如,RGB(红色的浓度,绿色的浓度,蓝色的浓度),颜色的浓度需要一个个0-255之间的值。255表示最大,0表示没有。
浓度也可以采用百分数来设置,需要一个0%-100%之间的数字,使用百分数最终也会转换为0-255之间的数。0%表示0,100%表示255
也可以使用十六进制的RGB值来表示颜色,原理和上边RGB原理一样,只不过是用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色,每组表示个颜色,第一组表示红色浓度,第二组表示绿色,第三组表示蓝色。
语法: #红色绿色蓝色
十六进制:0 1 2 3 4 5 6 7 8 9 a b c d e f
范围:00 - ff ,
00表示没有,相当于RGB中的0
ff 表示最大,相当于RGB中的55
例如,红色:#ff0000
像这种两两重复的颜色,可以简写,比如#ff0000可以写成#f00
#aabbcc可以写成#abc
三.字体样式
1)字体颜色
使用color来设置字体的颜色
2)字体大小
font-size ;浏览器一般默认文字大小为16px
3)文字字体
font-family :微软雅黑;
注意,开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户的电脑里没有,就不能达到想要的效果了。
字体分类:
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式,一般会将字体的大分类,指定为font-family中的最后一个字体。
为了满足不同浏览器使用,一般会设置多个字体,serif为保底字体。
4)字体风格
font-style 属于自定义字体的风格
但是如果这样设置,需要些很多样式,会很麻烦。
在CSS中还为我们提供了一个样式叫font,使用该样式可以同时设置字体相关所有样式,可以将字体的样式的值,统一写在font样式中,不同的值之间使用空格隔开。
使用font设置字体样式时,斜体 加粗 大小字母,没有顺序要求,甚至可写可不写,如果不写则使用默认值,但是要求文字的大写和字体必须写,而且字体必须是最后一个样式,大写必须是倒数第二个样式。
除此之外,font 也可以指定行高,在字体后面添加 / 行高,来指定行高,该值是可选的,如果不指定则会使用默认值。
四.行高
在CSS并没有为我们提供一个直接设置行间距的方式,我们只能通过设置行高来间接的设置行间距,行高越大行间距越大。
使用line-height来设置行高,行高类似于我们上学单线簿,单线簿是一行一行的,线与线之间的距离就是行高。网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中垂直居中显示。
行间距=行高-字体大小 。例如 行间距=50px-16px
通过设置line-height可以间接的设置行高,可以接收的值:
1.直接就收一个的大小
2.指定一个百分数,则会相对字体去计算行高
line-height:200%;
3.可以直接传一个数值,则行高会设置字体大小相应的倍数(最常用的)
line-height:2;
除此之外,对于单行文本来说,可以将行高设置为和父元素高度一致,这样可以是单行文本在父元素中垂直居中。
五.其他常用文本样式
具体使用去W3Shool查看
补充:text-indent用来设置首行缩进,指定值可以设置像素px,也可以设置em(最好设置em,这样可以跟随字体大小变化缩进。)当给它指定一个正值时,它会自动向右缩进指定的像素;如果给它 指定一个负值,则会向左移动指定 的像素,通过这种方式可以将一些不想显示的文字隐藏起来。