设计师网站资源合肥seo整站优化
CSS字体和文本样式
CSS文字样式
-
字体：font-family
-
语法：font-family:[字体1][,字体2][,...]
-
p{font-family:"微软雅黑","宋体","黑体";}
-
-
含空格字体名和中文，用英文引号括起
-
属性值：具体字体名，字体集
-
字体集：Serif,Sans-serif,Monospace,Cursive,Fantasy
-
p{font-family:"微软雅黑","宋体","黑体",sans-serif;}
-
-
多个字体，用英文逗号隔开
-
引号嵌套，外使用双引号，内使用单引号
-
如行内样式<h1 style="font-family:'宋体';">
-
-
-
文字大小：font-size
-
语法：font-size:绝对单位|相对单位
-
绝对单位：
属性值 说明 in 英寸，1英寸=2.54厘米 cm 1厘米=0.394英寸 mm 毫米 pt 磅，印刷的点数，72磅=1英寸 pc Pica，1pc=12pt 属性值 CSS2缩放系数1.2 xx-small 9px x-small 11px small 13px medium 16px large 19px x-large 23px xx-large 28px -
当不设置字体大小时，默认为浏览器默认值，一般默认字体是16px
-
绝对大小，不能随浏览器分辨率或父元素大小的改变而改变
-
-
相对单位：
-
px像素
-
em/% （相对值）都是针对父元素
-
文字大小受显示器分辨率影响
-
属性值larger：相对父元素的文字大小变大
-
属性值smaller：相对父元素的文字大小变小
-
-
-
文字颜色：color
-
语法：color:颜色名|十六进制|RGB
-
十六进制:#000000
-
每一位值：0~F
-
简写，#008800可简写成#080
-
不区分大小写，大写A和小写a效果一样
-
Web安全色：www.bootcss.com/p/websafecolors/
-
-
RGB(红，绿，蓝)：rgb(250,250,250)、rgb(50%,50%,50%)
-
数字：0~255，小于0会修正成0，大于255会修正成255
-
百分比：0%~100%，小于0%会修正成0%，大于100%会修正成100%
-
-
-
-
文字粗细：font-weight
-
HTML语法：<b>标签，<strong>标签
-
语法：font-weight:normal | bold | bolder | lighter | 100~900
-
默认值：normal
-
400等同于normal，700等同于bold
-
-
文字样式：font-style
-
HTML语法设置斜体：<em>标签，<i>标签
-
语法：font-style:normal | italic(常用) | oblique
-
-
字体变形：font-variant
-
设置元素中文本为小型大写字母
-
语法：font-variant:normal | small-caps
-
-
font属性（简写）
-
语法：font:font-style font-variant font-weight font-size/line-helight(行高) font-family
-
值之间空格隔开
-
同时设置font-size和font-family，属性才会起作用
-
注意书写顺序
-
font-italic bold small-caps 50px "黑体","宋体";
-
CSS文本样式
-
水平对齐方式：text-align
-
设置元素内内联元素（如文本和图片）的水平对齐方式
-
text-align:left | right | center | justify
-
图片居中(设置图片的对齐方式，需要设置图片父元素的text-align属性)：
-
错误方法：img{text-align:center;}
-
正确方法：div{text-align:center;}
<div><img src="img/logo.png"/></div>
-
-
CSS text-align属性并不控制块级元素的对齐方式，它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align，但是块级元素中的所有内联元素都会被这个属性影响。
-
-
行高：line-height
-
设置元素中文本行高
-
语法：line-height:长度值 | 百分比
-
设置px时行高不会因字体大小改变而改变，而em和%于字体大小有关系
-
实际开发中一般使用em这个单位
-
浏览器有默认行高，不同浏览器默认行高不一样
-
行高可继承，继承的是计算后的值，而不是直接把em或%的值继承过来
-
-
垂直方式vertical-align属性
-
设置元素内容的垂直方式
-
语法：vertical-align:baselline | sub(下标) | super(上标) | top | text-top | middle | bottom | text-bottom
vertical-align：长度 | 百分比
-
基于文本基线移动
-
上移：vertical-align:15px;
vertical-align:100%;
-
下移：vertical-align:-15px;
vertical-align:-100%;
-
-
对行内元素生效，对于块级元素不生效
-
文字基线
-
也可应用于单元格元素
-
-
单行文字垂直水平居中：
-
设置行高
-
text-align：center;
-
-
多行文字垂直水平居中
-
文本样式属性：
| 字体属性 | 说明 |
|---|---|
| word-spacing | 设置元素内单词之间间距 |
| letter-spacing | 设置元素内字母之间间距 |
| text-transform | 设置元素内文本的大小写 capitalize(首字母大写) | uppercase(大写) | lowercase(小写) | none |
| text-decoration | 设置元素内文本的装饰 underline(上划线) | overline(下划线) | line-through(贯穿线) | blink(闪烁效果，有兼容性问题) | none |
间距属性值可以是正值也可以是负值，可以使用px也可以使用em
可以设置多个装饰样式属性值，中间用空格隔开