css字体样式+文本样式
font-family属性值:具体字体名或者字体集
如果是中文或者有单词之间有空格,需要加双引号
字体集:
Serif (有装饰线)
Sans-serif (无装饰线)
Monospace
Cursive
Fantasy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ font-family: "Times New Roman"; } p{ font-family: "微软雅黑","宋体","黑体",sans-serif; } </style> </head> <body> <h1>css层叠样式表</h1> <p>什么是css层叠样式表呢?</p> </body> </html>
font-size 相对单位
px (受显示器分辨率影响,在手机端一般不使用)
em (针对父元素)
% (针对父元素)
字体颜色
可查询web安全色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*rgb数字:0~255*/ h1{ color:rgb(0,255,0); } /*rgb百分比:0%~100%*/ p{ color:rgb(0%,100%,0%); } p.spe{ color:#008800;/*#开头,六位,0~F*/ color:#080;/*简写*/ } </style> </head> <body> <h1>css层叠样式表</h1> <p>什么是css层叠样式表呢?</p> <p class="spe">颜色十六进制</p> </body> </html>
font-variant:small-caps 小型大写字母
css文本样式
text-align 只对块级元素有效:可以在元素外嵌套块级元素,给外元素添加text-align属性
margin:0 auto; 也可以设置元素居中显示
line-height
实际开发中,行高一般使用em单位,与字体大小相关
浏览器默认行高一般是1.2em
行高可以继承自父元素,继承的是计算后的值,而不是直接继承百分比
首行缩进 text-indent
vertical-align 对行内元素或者单元格元素生效
可以用在图片上 vertical-align:middle;
或者可以用具体的数值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ height:400px; width:500px; border:1px solid; display: table;/*转为表格元素*/ } .content{ vertical-align: middle; text-align:center; display: table-cell;/*转为单元格元素*/ } </style> </head> <body> <div class="wrap"> <div class="content"> <p>什么是<span class="sub">css</span>层叠样式表呢?</p> <p>什么是<span class="super">css</span>层叠样式表呢?</p> </div> </div> </body> </html>
word-spacing 单词间距
letter-spacing 字母间距
单词的判断以空格为准
text-transform:capitalize | uppercase | lowercase | none 设置文字大小写
text-decoration:underline | line-through | overline | none 设置文字装饰线
也可以设置多个样式 text-decoration:underline overline;