1、选择字体系列font-family
body {
font-family: Geneva;
}
- 对于包含多个单词的字体名称,应该用引号(单引号或双引号)包围起来。
- 可以使用小写字母指定字体名称。
- 除
select、textarea、input
元素除外,font-family
可继承。可强制继承父元素的字体设置
input,select,textarea {
font-family: inherit;
}
2、指定替代字体
body {
font-family: Geneva,Tahoma,sans-serif;
}
字体栈
:字体列表,通常至少包含三个字体:希望使用的字体,一个或几个替代的字体,以及一个表示类属性的字体serif、sans-serif、cursive、fantasy、monospace
(系统通常具有的字体)。
3、创建斜体font-style
body {
font-style: italic;
}
- 取消斜体
font-style: normal
- 继承
4、应用粗体格式font-weight
- font-weight: bold;
bold
、‘bolder’、lighter
、normal
- 继承
5、设置字体大小font-size
- 1、指定特定字体大小,使用像素、关键字(xx-small、x-small、small、medium、large、x-large、xx-large)
h1 {
font-size: 35px;
}
- 2、根据父元素设置字体大小,使用百分数、em、相对关键字(larger、smaller)
- 3、根据根元设置字体大小,rem
- 4、
(1)、可继承
(2)、设置了相对字体大小的元素的子元素会继承这个大小,而不是继承相对值
6、设置行高line-height
- 1、使用数字(与元素的字体大小相乘,得出需要的行高),没有单位
- 2、使用以像素、em、磅(仅在打印样式)为单位的值
- 3、字体大小的百分数
- 4、
(1)、使用数字设定行高,所有的子元素都会继承这个因子
(2)、使用百分数、em只会继承产生的行高
7、同时设置所有的字体值font
(至少包含字体大小、字体系列属性)
font: 字型(normal、italic、oblique可选) 粗细(normal、bold、bolder、lighter、100的倍数,可选) 字体大小(必选) /行高 字体系类(必选);
(1)、先字体大小,后字体系列
(2)、若有行高,必须紧跟在字体大小和斜杠后面
(3)、可继承
8、设置颜色color
- colorname、颜色的十六进制(#rrggbb,当十六进制由三对重复数字组成的时候,可使用#rgb)、rgb(r,g,b)、rgb(r%,g%,b%)、hsl(h,s,l)、rgba(r,g,b,a)、hsla(h,s,l,a)
- 除了link元素,其他元素都会继承body元素中的color属性、
9、设置背景
(1)、修改文本的背景颜色backgroung-color
- transparent(允许透过父本元素的背景颜色)、color
(2)、使用背景图像作为背景background-image
- 图像相对样式表所在位置的路径和文件名、none(不使用图像)
(3)、重复背景图像background-repeat
- repeat(同时横向和纵向重复图像)、repeat-x(横向)、repeat-y(纵向)
(4)、控制背景图像是否随页面滚动background-attachment
- fixed(图像附着在浏览器窗口上)、scroll(访问者滚动页面时背景图像会移动)、local(只有滚动背景图像所在的元素,而不是整个页面,背景图像才移动)
(5)、制定元素背景图像的位置background-position
- x、y:距离左上角的绝对距离、百分数,left(左对齐)、center(居中)、right(右对齐)、top(顶端对齐)、bottom(底端对齐)
(6)、在一条声明中设置所有的背景属性background
10、控制间距
(1)、指定字间距word-spacing
(2)、指定字偶间距letter-spacing
11、添加缩进text-indent
- 带单位的数字 eg·0.4em、5px·,继承
- 默认情况下对em、strong、cite等内联元素没有影响,将他们设置为
diaplay: block、display: inline-block
,可强制为其应用text-indent属性
12、对齐文本text-align
- left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)
- 只对盒模型元素(h1、p等,显示为单独的行)起作用,对短语内容元素(显示在行内)不起作用,可将其设置为
display:block/inline-block
13、修改文本的大小写text-transform
- capitalize(每隔单词的首字母大写)、uppercase(所有字母大写)、lowercase(所有字母小写)、none(文本保持本来的样子)
14、使用小型大写字母font-variant
15、装饰文本text-decoration
- unline(下划线)、overline(上划线)、line-through(删除线)、none
- 除a元素,都有
text-decoration
属性
16、设置空白属性white-space
- pre(让浏览器显示原文本中所有的空格和回车)、nowrap(确保所有空格不断行,即文本全部显示在一行),normal(按正常方式处理空格)