• 首先我们需要了解样式的构成,样式由属性名与属性值构成,名和值之间用:(冒号)分隔,属性和属性之间用;(分号)分隔。
eg:
p{
font-size:20px;
font-weight: bold;
color: red;
}
• 接下来就来看我们要说的文字样式。
1.font-size
2.font-weight属性
这条属性是设置的文字的粗细程度的,默认值是normal,当我们设置成bold的时候,这个p标签就和strong标签没什么区别了,这就是为什么很多标签我们都不用,因为通过修改样式就可以达到和其他标签一样的效果。
属性常用的值有lighter、normal、bold、bolder,其次我们还可以写100-900的数字,其中lighter大概是100左右,normal大概是400左右,bold应该是700左右。
3.font-family属性
这个属性的作用是设置文字的样式如黑体,Arial,默认为Arial。要注意的是我们写英文字体的时候,属性值是不需要加引号的,写中文的时候则需要加引号。
4.font-style属性
这个属性的作用是设置文字是否斜体,italic就是斜体的意思,通过设置这个属性我们就可以让p标签达到和em标签一样的效果了。
5.color属性
这个属性的作用是设置文字的颜色。文字颜色的色值有三种表达方式:
1.英文单词,比如red、black、blue等。
2.三位十六进制组成光学三原色红绿蓝,每一个的值都是00-ff,00代表空,ff代表满,例如#000000就是黑色的意思。其中,如果每连续的两位都是一样的,我们就可以两两合并只写一个数值就可以了,比如#ffffff —> #fff、 #55ffcc —> #5fc;
3.通过rgb(xx,xx,xx)属性值来设置颜色,rgb就是red、green、blue的缩写,其中的三个数值每一项的范围都是0-255,例如红色就是rgb(255, 0, 0)。
在了解完文字样式之后,我们来说一些其他的简单样式。
6.text-indent属性
这个属性的作用是设置首行文字的缩进,值有两种单位,一种是px,一种是em。
• px虽然是一个相对长度单位,但是我们可以变相地理解为它是一个差不多固定长度的单位,我们设置100px的时候,基本上每一个宽度被设置成100px的元素都是一样的宽度。
• em则是一个真正的相对长度单位,它相对的是当前元素内的文字的大小,也就是说 1em = 1 * font-size;如果我们设置font-size是20px的话那么1em也就是20px的大小,所以我们经常将text-indent设置成2em来完成首行缩进2个文字大小的问题。
7.border属性
这个属性是设置元素边框的属性。他是一个复合属性,由border-width、border-style、border-color三个属性复合而成的。分别设置的边框的边度,边框的样式,边框的颜色,其中边框的样式有很多种,基本常用的只有solid实线、dotted短虚线、dashed长条虚线三种样式。
而border-width也是一个复合属性,它可以按照上右下左的顺序来分别设置四个边框的宽度值。
8.text-align属性
这个属性是设置文字的位置的属性,它的值有三种,分别是center文字左右居中、left文字左对齐、right文字右对齐。
9.line-height属性
这个属性是设置一行文字所占的高度的属性,默认状态是和字体大小一样的值。
• 当我们想要让单行文字在容器内部上下居中的时候,我们只需要让height = line-height即可。
10.text-decoration属性
这个属性的意思是文字修饰的意思,可以来设置文字是否有下划线、上划线、中划线,分别对应的属性值是underline、overline、line-through。
11.cursor属性
这个属性则是设置我们的鼠标移入到这个元素中的时候,鼠标会变成什么样子。它的值有很多很多,我们可以到css88上去查看。不过一般常用的是cursor: pointer;这一条属性,它会让我们鼠标移入这个元素的时候,鼠标变成可以点击的小手的状态。
下面,说一下标签后面添加的伪类。
12.hover伪类
这个伪类可以让我们设置当鼠标移入元素的时候会改变元素的样式。
给a标签设置这样一个伪类之后,我们就可让鼠标移入a标签之后,文字放大改变颜色了。