产生背景:
html 只关注结构样式从中分离迫切需要更为良好的网页样式表现样式规则
选择器{ 属性名:属性名; }
常用样式简洁
font字体
font-family和font-size
font-size: 常用px 或者 em1em和当前字体大小相等。在浏览器中默认的文字大小是16px。em = px/16浏览器默认字体大小 16px14px以上建议尽量使用偶数字体大小,ie6会有技术bugfont-family 多个字体使用,隔开为了增强兼容性字体名为中文或有特殊符号必须加引号英文字体必须放在中文字体前安全字体font-family: Arial, Helvetica, sans-serif;
unicode字体font-family:"\u5fae\u8f6f\u96c5\u9ed1" unicode比中文兼容性更高
在线unciode转换字体大全
windows常见内置中文字体字体中文名 字体英文名宋体 SimSun(浏览器默认)黑体 SimHei微软雅黑Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 KaiTi新宋体 NSimSun仿宋 FangSongOS X常见内置中文字体字体中文名 字体英文名苹方 PingFang SC华文黑体STHeiti华文楷体STKaiti华文宋体STSong华文仿宋STFangsong华文中宋STZhongsongoffice安装后新增字体字体中文名 字体英文名幼圆 YouYuan 好看隶书 LiSu华文细黑STXihei华文楷体STKaiti华文宋体STSong华文仿宋STFangsong华文中宋STZhongsong英文字体:PmingLiuABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ImpactABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789GeorgiaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789TahomaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ArialABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Book AntiquaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Century GothicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Courier NewABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789Times New RomanABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789VerdanaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
font-weight
范围: 100-900normal:400 bold:700font-style
p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}//类似style:italic 为斜体
font连写
style weight size family
SWSF
例: font:italic bold 12px/30px Georgia,serif;
a链接
a:link {text-decoration:none;} /* unvisited link/
a:visited {text-decoration:none;} /visited link/
a:hover {text-decoration:underline;} /mouse over link/
a:active {text-decoration:underline;} /selected link */
连写 顺序:link visited hover activeLoVeHAte
列表【ul、ol、dl】
就列表项索引设置:
标记图像
list-style-image:url(‘/upload/article/000/000/015/5c67daf64b661194.gif’);list-style-type
list-style-type属性值decimal 数字lower-roman 小写罗马数字i、ii、iii……upper-roman 大写罗马数字I、II、III……lower-alphaupper-alphalower-greek 希腊Decimal-leading-zero01cjk-ideographic一二三disc 默认值,实心圆"●"circle 空心圆"○"square 实心正方形"■"
list-style-position 标记位置
list-style-position: inside;//content内
list-style-position: outside;//padding内
文本
属性 描述
color 设置文本颜色
direction 设置文本方向。例: 阿拉伯文 direction:rtl;unicode-bidi:bidi-override;
letter-spacing 设置字符间距
word-spacing 设置字间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母 lowercase uppercase capitalize /单词大写开头/
unicode-bidi 设置或返回文本是否被重写
white-space 设置元素中空白的处理方式
vertical-align 设置元素的垂直对齐 默认baseline