作用: 设置或检索用于对象中文本的字体名称序列。
语法: font-family : name
示例:
p{ font-family: 微软雅黑; } p{ font-family: "arial block"; } p{ font-family: Courier, "arial block"; } p{ font-family: Courier, "arial block", 微软雅黑; } 注: 1)字体名称可以是英文也可以是中文。 2)英文字体如果出来多个单词需要用双引号包括。 3)可以写多个字体,浏览器根据用户电脑上的字体从左到右选择。多个字体用逗号(半角逗号)分隔。 标准不是某一个标准
作用: 设置或检索对象中的字体尺寸。
语法: font-size : absolute-size| relative-size| length
参数:
absolute-size : 绝对值字体。如: 50px
relative-size : 相对于父对象中字体尺寸进行调节。如:1em
length : 百分数 | 由浮点数字和标识符组成的长度值,不可为负值。其百分比取值是基于父对象中字体的尺寸。
示例:
div{ font-size: 12px; } div{ font-size: 1.5 em; } div{ font-size: 1rem; } div{ font-size: small; } div{ font-size: 80%; } /* 相对于父对象中字体的百分比,字体不能自适应 */ div{ font-size: smaller; }
补充:在CSS中关于尺寸大小的单位
注:
在PC上通常用 px , 中文字大小通常为 12px 14px 16px 18px
在手机中通常用 rem , 中文字大小通常为 0.75rem 0.8rem 1rem 1.2rem
作用: 设置或检索对象中的文本字体的粗细。
语法: font-weight :normal| bold| bolder| lighter| number
参数:
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b标签的作用
bolder : 特粗体
lighter : 细体
number : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
示例:
p { font-weight:bold; } h1{ font-weight:normal; } span{font-weight:800;}
作用: 设置或检索对象中的字体样式。
语法: font-style :normal| italic| oblique
参数:
normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique : 倾斜的字体
p { font-style: italic; }
作用: 检索或设置对象的行高。
语法: line-height :normal| length
示例:
div {line-height:30px; } /* 行高设置为固定值30px */ div {line-height:1.5; } /* 行高设置为1.5倍 */ div {line-height:150%; }
注: 值可以是固定值,也可以是相对值。
作用: 设置或检索对象中的文本特性。该属性是复合属性。
语法: font :
font-style
font-weight
font-size/line-height
font-family
示例:
/*完整写法*/ p { font:italic bold 12px/30px arial,sans-serif,宋体;} /*常用简写形式*/ p { font: 12px/24px 宋体; } p { font: bold 12px/24px 宋体; }
注:
复合属性的每一个属性值之间通常用空格隔开,特殊要求除外。
font最精简的形式也必须是font: 12px/24px 宋体; 否则不会生效。
作用: 检索或设置对象的文本颜色。无默认值。
语法: color :color
示例:
div {color: red; }
CSS中颜色的三种表现方式:
1)英文名称 红色:red 绿色:green 蓝色:blue 黄色:yellow ... 2)16进制颜色值(#RRGGBB) 0-9 10-15(A-F) 红色:#ff0000 绿色:#00ff00 蓝色:#0000ff 黄色:#ffff00 ... 这种模式可以简写,简写原则为: RGB三段分别相同时可以简写成3位。 正确的: #ff0000 => #f00 #00ff00 => #0f0 #228833 => #283 错误的: #f10000 => #f100 #00ab11 => #0ab1 #228e36 => #28e36 3)rgb或 rgba 红色: Rgb(255,0,0) 绿色:Rgb(0,255,0) 蓝色:Rgb(0,0,255) 黄色:Rgb(255,255,0) Rgba(255,0,0,1) 最后一位是alpha透明通道。
作用: 这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。
语法: text-transform:none| capitalize| uppercase| lowercase
参数:
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
p { text-transform : uppercase; } p { text-transform :capitalize; }
作用: 检索或设置对象中的文本的装饰。
语法: text-decoration :none| underline| blink| overline| line-through
参数:
none : 无划线
underline : 下划线
blink : 闪烁
line-through : 贯穿线(删除线)
overline : 上划线
div { text-decoration : underline; } div { text-decoration : line-through; }
注:
1)通常用于清除A标签的默认下划线
2)除A标签以外,一般不给其它标签加下划线效果,以免让用户产生误解