6.前端入门之CSS字体和文本

CSS字体与文本样式
文字：颜色，字体大小，字体，加粗等等
文本：行高，对齐方式和文本装饰等

文字样式属性：
font-family
font-size
color
font-weight
font-style

在html4.0之前，可以用font，但4之后就不用了
<font face="宋体" color="red" size="12px">hiii</font>
<style>
	h1{font-family:"宋体"，"Times New Roman";}
</style>

现在用css样式来代替font标签

font-size文字大小

相对单位：
px像素      受显示器分辨率影响
em/%      em和%都是针对父元素设置大小
绝对大小，不能随浏览器分辨率或父元素大小的改变而改变

color定义元素内文字颜色
颜色|RGB|#ffffff
color:red;
color:rgb(33,43,34); 数字0~255    百分比为0%-100%
color:#fff; #开头，6位：0~f 可以简写3位，不区分大小写

字体加粗
font-weight:
normal | bold | bolder | lighter | 100~900
其实bold和bolder显示效果基本一样，100~600也一样，700-900也一样
默认为normal 相当于400 而700等同于bold

斜体：
font-style
normal italic oblique

font-variant字体变形
设置元素中文本为小型大写字母normal | small-caps

text-align用于块级元素
设置元素内文本的水平对齐方式：
属性值：
left,right,center,justify两端对齐

如果想要图片居中对齐，要在外面嵌套一个块级元素比如div

如果想在不同浏览器下都居中显示，div下p标签内的文字居中，则要

<style>
	.first{text-align:center;}
	.first p{width:50%;margin:0 auto;}
</style>
<div class="first">
	<p> fsadfasdfasdfsa</p>
</div>

vertical-align属性 只对行内元素生效
设置元素内容的垂直方式
baseline,sub,super,top,text-top,middle,bottom,text-bottom,长度，百分比 有正负值区分

垂直居中应用
单行文字垂直居中：
line-height和height一样大
text-align:center;
多行文字垂直居中：
行内元素不能放块级元素
在父元素加display:table;
居中元素中加：
vertical-align:middle;
display:table-cell;

line-height属性来设置元素中文本行高
长度值，百分比
当行高16px小于字体大小20px时会出现字体重叠
推荐使用em作为行高单位，这样就不会重叠
em和%于字体大小有关系

text-index:2em;顶格

当设置行高和字体大小一样，或1em或100%时，行之间距离变小，浏览器都有默认行高，Chrome为16px
行高可以继承

继承的是计算后的值，不是直接把em或%的值继承过来，可能出现字体大小>行高时，则出现重叠

文本样式属性：
word-spacing 设置元素内单词之间间距 以空格为标准
letter-spacing 设置元素内字母之间的间距
数值可以设置正负，单位可以为em，%，px等等
text-transform 设置元素内文本的大小写：capitalize，uppercase，lowercase，none

text-decoration 设置元素内文本的装饰
underline，overline，line-through，blink，none
blink有兼容性问题
不能继承

应用

<style>
	p{background-color:#ececec;height:150px;text-align:center;line-height:150px;}
	.one{font-size:80px;color:#c9394a;font-weight:bold;}
	.two{font-size:40px;color:gray;text-decoration:underline;letter-spacing:5px;vertical-align:15px;}
	.three{font-size:80px;color:gray;font-style:oblique;}
</style>
<p><span class="one">郑乾</span><span class="two">小白啊</span><span class="three">!</span></p>

总结：

网页制作从整体到局部
借助手册和网络

文字样式
font-family
font-size
color
font-weight
font-style
text-align
line-height
vertical-align
word-spacing
letter-spacing
text-transform
text-decoration

NEXT:
CSS背景和列表