1、为文本添加样式
使用CSS可以修改文本的字体、大小、粗细、倾斜、行高、前 和背 颜色、间距和对齐方式,可以决定是否为文本添加下划线或删除线,可以将文本转化为全部使用大写字母、全部使用小写字母或使用小型大写字母。
<1>选择字体系列
body{
font-family: Geneva;
}
h1, h2 {
font-family: "Gill Sans";
}
由于font-family是继承属性,而我们对body元素设置了Geneva字体,该样式会应用到其他元素。通过对h1和h2元素设置Gill Sans字体,覆盖了继承属性
尽管你可以指定自己想要的任何字体,但这些字体不一定在每个系统上都能显示出来。为此,可以在font-family属性中列举一种以上的字体。浏览器会使用列表中第一个已安装在访问者系统内的字体或Web字体。 <解决方案很简单,就是使用font-family: sans-serif;。这种方法会让所有的操作系统使用无衬线字体——Windows的浏览器显示Arial,而OS X的浏览器则显示Helvetica。>
body{
font-family: Geneva, Tahoma,sans-serif;
}
h1,h2 {
font-family: "Gill Sans", "Gill SansMT",Calibri,sans-serif;
}
<2>创建斜体 使用CSS的font-style属性可以让任何元素中的文本以斜体显示。(输入italic(创建斜体文本)或oblique(创建倾斜文本)) 取消斜体输入font-style: normal。
body{
font-family: Geneva, Tahoma, Verdana,sans-serif;
}
p{
font-style: italic; //取消斜体输入font-style: normal。
}
<3>应用粗体格式 font-weight:bold blod可以是100~900之间的100的倍数,其中400代表正常粗细,700代表粗体。 取消粗体格式 font-weight: normal
em,
a:link,
.intro .subhead{
font-weight: bold; //font-weight: 700;
}
<4>设置字体大小
为网页里的文本设置字体大小有两种方式:（1）直接使用像素指定要使用的特定字号，（2）使用百分数、em或者rem指定相对于父元素文本的大小。
h1{
font-size: 35px;
}
<1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。不过首先要说明,使用这种方法时,最好在body元素上建立一个基准,即声明body{font-size:100%; }
em = 要指定的字体大小/父元素的字体大小
<5>设置行高 行高指的是段落的行距,即段落内每行之间的距离
.project p{
font-size: .9375em; /*15px/16px */
line-height: 1.65; /*15px*1.65= 24.75px */
}
同时设置所有字体值
可以使用font简写属性同时设置字体样式、粗细、变体、大小、行高和字体系列，使用font简写属性不要求指定所有字体属性,但至少应该包含字体大小和字体系列属性（空格隔开）。
body{
font: 100% Geneva, Tahoma, Verdana,sans-serif;
}
<6>设置颜色
可以修改网页中文本的颜色。我们的样式表可以包含颜色名称、十六进制值、RGB、HSL、RGBA和HSLA值的任意组合来定义颜色
body{
color: blue;
font:100%Geneva, Tahoma, Verdana,sans-serif;
}
<7>设置背景
我们在设置背 样式时有很多选择。可以为单个元素设置背 ,可以为整个页面设置背 ,还可以为上述二者的任意组合设置背 。如此,便可以对几个段落、几个单词、不同状态的链接、内容区域等修改背 。总之,几乎可以对所有元素应用背 样式,甚至是表单和图像。(是的,你没看错,图像也可以有背 图像!)
设置背 有很多属性可以利用,包括background-color、background-image、background-repeat、background-attachment及background-position等。还可以使用background简记法,该属性将上述属性合并了,可以节省大量的输入。
1.修改文本的背景颜色
body{
background-color: #88b2d2;
font:100% Geneva, Tahoma, Verdana,sans-serif;
}
2.使用背景图像作为背景
body{
background-color: #ccc;
background-image: url(bg-pattern.png); //背图像默认是重复的
}
3.重复背景图像
background-repeat: direction,这里 的direction可 以 取 四 个 值:repeat、repeat-x、repeat-y和no-repeat,它们分别代表同时横向和纵向重复图像、只横向重复图像、只纵向重复图像、不重复图像。
body{
background-image:url(sky.png);
background-repeat: repeat-x;
background-position: left bottom;
}
4.控制背景图像是否随页面滚动、指定元素背景图像的位置
body{
background-color: #000;
background-image:url(sky.png);
background-repeat: repeat-x;
background-attachment: fixed; //fixed 背图像会附着在浏览器窗口上(也就是说即使访问者滚动页面,图像仍会继续显示,scroll,访问者滚动页面时背 图像会移动,local,只有访问者滚动背 图像所在的元 素(而不是整个页面)时,背图像才移动。忽略此项,浏览器通常会使用默认值scroll)
background-position: left bottom;
}
6.在一条声明中设置所有背景属性
body{
background: #004 url(../img/ufo.png) no-repeat 170px 20px;
color: greenyellow;
}
<8>控制间距
可以增加或减少单词之间或字母之间的距离,前者称为字间距(tracking),后者称为字偶距(kerning)
word-spacing:length,这里的length是一个带单位的数字,如0.4em或5px。
letter-spacing:length,这里的length是一个带单位的数字,如0.4em或5px。
<9>添加缩进
text-indent属性,可以指定段落第一行前面应该空出多大的空间。
.project p{
font-size: .9375em; /*15px/16px */
line-height:1.65;
text-indent: 2em; /* 30px */
}
<10>对齐文本
根据需要,可以让文本左对齐、右对齐、居中对齐或两端对齐。
p{
text-align: justify; //left让文本左对齐、right让文本右对齐、center让文本居于屏幕的中间、justify让文本两端对齐
}
<11>修改文本的大小写
使用text-transform属性,可以为样式定义文本的大小写
h1{
font-size: 2.1875em;
text-transform: uppercase; //capitalize让每个单词的首字母大写、uppercase让所有字母大写;lowercase让所有字母小写、none让文本保持本来的样子(可以用来取消继承的值)。
}
<12>使用小型大写字母
很多字体都有对应的小型大写字母变体,其中一些字母是大写的,但缩小到了小写字母的大小,可以使用font-variant调用小型大写字母变体
1.使用小型大写字母的方法
font-variant: small-caps。
2.取消小型大写字母的方法
font-variant: none。
<13>装饰文本
text-decoration: underline; //underline以添加下划线、overline添加上划线、 line-through以添加删除线
取消文本装饰的方法 text-decoration: none;
<14>设置空白属性
默认情况下,HTML文档里的多个空格和回车会显示为一个空格,或者被忽略。如果要让浏览器显示这些额外的空格,可以使用white-space属性
white-space:pre //pre,以让浏览器显示原文本中所有的空格和回车、nowrap,确保所有空格不断行,也就是文本全部显示在一行;normal,按正常方式处理空格