Html5中的font

转载

bingfeng 2024-09-03 12:20:07

1.颜色属性

font-family字体种类
用法：font-family：'宋体',serif;
可以用","隔开，以确保当字体不存在的时候自己使用下一个
可以用字体的英文来代替中文，如Microsoft YaHei代替'微软雅黑'

font-weight字体加粗
用法：font-weight:300; 或 font-weight:bold;
normal(默认值 400=normal)
bold(加粗 700=bold)
bolder(更粗)
lighter(更细)

font-variant小型大写字母显示文本
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
用法：font-variant:small-caps; 设置小型大写字母显示文本
正常(标准) normal
小型大写字母显示文本 small-caps
继承 inherit

背景颜色background-color
用法与color属性类似：background-color:rgb(12,34,56);

背景重复background-repeat
用法：background-repeat:repeat-x; 向X轴重复
重复平铺满(默认) repeat
向X轴重复 repeat-x
向Y轴重复 repeat-y
不重复 no-repeat

背景位置background-position
用法：background-position:left,center; 背景横向居左，上下居中。 background-position:(x),(y);
横向（left,center,right）
纵向（top,center,bottom）
用数值来表示位置：background-position:20px,20px;

简写方式 background
用法：background:背景颜色 url(图像) 重复位置
background:red url(image/bg.jpg) no-repeat top center;

横向排列: text-align:left(center/right);
文本行高: line-height: 20px(100%);(1.%基于字体大小的百分比行高 2.数值为设置固定值)
首行缩进: text-indent:20px;(1.%基于父元素的百分比缩进 2.数值为设置固定值 3.inherit继承)
字符间距: letter-spacing: 10px;(normal、inherit、可设置为负值)
单词间距: word-spacing:20px;(normal、固定值、inherit)
文本方向: direction:ltr;(默认从左到右，left to right --> ltr)，可更改为rtl或者继承父元素,（与其他文本属性冲突）
文本大小写: text-transform:none;（默认）
每个单词以大写字母开头: text-transform:capitalize;
定义仅有大写字母: text-transform:uppercase;
定义无大写字母，仅有小写字母: text-transform:lowercase;
从父元素继承: text-transform:inherit;

边框风格 border-style
定义虚线边框示例：border-style:dashed;
单独定义某一方向的边框样式
border-top-style 上边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-right-style 右边框样式
边框风格样式的属性值
1.none 无边框
2.solid 直线边框
3.dashed 虚线边框
4.dotted 点状边框
5.double 双线边框
6.groove 凸槽边框（依托border-color的属性值）
7.ridge 垄状边框（依托border-color的属性值）
8.inset inset边框（依托border-color的属性值）
9.outset outset边框（依托border-color的属性值）
10.inherit 继承

无序列表:<ul><li></li></ul>
有序列表:<ol><li></li></ol>

标记的类型 list-style-type
none 无标记
disc 默认，标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记(01,02,03等)
lower-roman 小写罗马数字（i,ii,iii,iv,v等）
upper-roman 大写罗马数字（I,II,III,IV,V等）
lower-alpha 小写英文字母
upper-alpha 大小英文字母
lower-greek 小写希腊字母(alpha,beta,gamma等)
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
...
标记的位置 list-style-position
inside
outside
inherit
设置图像列表标记 list-style-image
url 图像的路径
none 默认，无图形显示
inherit 继承父元素
简写方式 list-style
用法：list-style: 标记风格标记的位置标记图片的url; (当图片路径无效时，标记风格的样式)
示例：list-style: circle inside url(图片路径);