CSS中的字体样式:
在手机端设置大小的时候,一般不使用px
CSS字体颜色三种表达方式:
1.具体颜色名称 例:color:red;
2.数字 0~255,百分比:0%~100% 例:color:rgb(0%,100%,0%)
3.十六进制:#开头,六位,0~F 例:color:#00880a
font-weight文字粗细:
font-weight:normal |bold | bolder |lighter | 100~900
400相当于normal,700相当于bold,一般用的就是normal和bold,默认也是normal
font-style文字样式:
font-style:normal |italic |oblique
italic斜体,oblique倾斜
font属性(简写)
font: font-style font-variant font-weight font-size/line-height font-family
说明:值之间空格隔开,注意书写顺序,font-size和line-height同时存在要用/隔开
CSS中的文本样式:
text-align,设置元素内文本的水平对齐方式
text-align:left |right |center |justify justify为两端对齐
注:该属性对块级元素设置有效,像span这种的无效
line-height,行高
vertical-align,设置元素内容的垂直方式,用于行内元素和表格中,不能用于块级元素中
vertical-align:baseline |sub |super |top |text-top |middle |bottom |text-bottom |长度 |百分比
垂直居中应用
1.单行文字垂直居中
代码如下:
html
<div class="wrap">
<p>welcome</p>
</div>
css
* {
margin: 0;
}
.wrap {
border: 1px solid greenyellow;
height: 100px;
100px;
line-height: 100px;
text-align: center;
}
效果如下:
2.多行文字垂直居中(因为vertical-align不能用于块级元素,所以改成表格布局,父元素也要设置成表格布局)
html
<div class="wrap">
<div class="content">
<p>welcome</p>
<p>css</p>
</div>
</div>
css
* {
margin: 0;
}
.wrap {
border: 1px solid paleturquoise;
height: 100px;
100px;
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
效果如下:
文本样式的其他属性