CSS字体和文本样式设置
1.字体类型(风格) font-style
用于设置字体类型,可设置以下值:
① normal:普通字体
② italic:斜体
③ oblique:倾斜字体
2.字体粗细 font-weight
用于设置字体粗细,可设置以下值:
① normal:正常粗细
② bold:粗体
③ bolder:更粗的字体
④ lighter:更细的字体
⑤ 100~900:步长为100,
400 等同于 normal,而 700 等同于 bold
3.字体大小 font-size
用于设置字体大小的,可设置任意正整数和浮点数,默认情况下,几乎所有的浏览器的默认字体大小都为16px。
扩展
常用单位有三种:px ,em , rem
① px(像素,相对于显示器屏幕分辨率而言)
② em(相对当前元素内文本的字体尺寸,会继承父元素大小)
③ rem (相对HTML根元素,最常 用的单位)
如果以em为单位时,当前设置的元素继承的大小小于12px时,浏览器(谷歌、360等)接收的最小值为12px,会被强行变为为12px,大于12px,一切正常。如果直接设置px,就可以设置小于12px的值。
4.字体系列 font-family
1.使用中文字体,或带空格的英文字体名,需要用“引号”将该字体名扩起来;
2.单个单词的字体名称则无需加上引号。
3.“font-family”可以有多个值,多个值设置的作用是,当浏览用户本地计算机没有找到设置的第一个值所表示的字体时,会去找第二个,以此类推,若找到最后一个值都没有找到匹配的字体,浏览器则会用自己的默认字体。
4.考虑到网页最终显示效果在不同设备上的一致性,我们通常使用的中文字体只有:“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等,而目前以“微软雅黑”为最常用设计字体。
5.常用的英文字体有:“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。
html代码:
<body>
<div>字体样式设置</div>
<p>今天天气真好</p>
</body>
CSS代码:
<style>
div{
font-size: 32px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
}
p{
font-weight: bold;
font-size: 2rem;
}
</style>
组合值写法
代码:
#e{
font:normal bold 48px "微软雅黑";
}
省略字体类型或字体风格之一
1.由于字体类型(风格)和字体粗细,具有一定的相似性,如他们都有一个“normal”值,
2.所以在写“font”属性组合值的时候可以省略二者之一,以辨识到的值进行设置,另外一个自动为“normal”,
3.甚至还能省略掉第前两个值,只保留“font-size”和“font-family”
4.在font内设置文本行高:“font”属性组合值的写法,除了以上所提到的,它还有一种比较不常见,却还比较实用的写法,即可直接在“font”属性内设置文本的行高“line-height”。
代码:
.e{
font:normal bold 48px/100px "微软雅黑";
}
line-height可设置```<span>和<button>等行内标签的行高
注意:
在“font”组合值的写法中,只有“font-size”和“font-family”这两个的值是不能省略的,而且是缺一不可,否则浏览器会不认识该值,对该组合值进行报错。
font-style和font-weight可以省略,font-size和font-family不可以省略和位置替换。
CSS文本样式设置
1. 文本的颜色 “color”
文本的居中方式“text-align”
该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值:
块级元素元素文本居中:1、转化为行块级设置text-align,前提是设置宽度,且要大于自身的宽度,不然就占满空间了(块级元素占正行)。
2、设置margin:auto。
left(默认)文本左对齐
center文本居中对齐
right文本右对齐