CSS-美化网页元素-字体和文本属性
使用CSS样式美化网页文本具有如下意义。
1. 有效的传递页面信息
2. 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
3. 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
4. 具有良好的用户体验
一、字体属性
1. 字体设置
CSS使用font-family属性定义文本的字体系列,字体可以使用英文字体,也可以使用多个字体,各种字体之间必须使用英文状态下的逗号隔开;
注意事项:
一般情况下,如果有空格隔开的多个单词组成的字体,加引号;
尽量使用系统默认自带的字体,保证在任何用户的浏览器中都能正确显示;
最常见的几个字体:body{font-family: 'MicrosoftYaHei',tahoma,arial,'Hiragino Sans GB';}
使用多个字体的好处是:系统按顺序检测浏览器是否有这个字体,如果不存在,就会转向下一个字体,如果存在,就优先使用;
实际开发中,字体设置常用于<body>标签,按照团队约定来设置字体。
<style>
h2 {
font-family: '微软雅黑';
}
.songti {
font-family: '宋体';
}
#kaiti {
font-family: '楷体'
}
* {
font-family: '黑体';
}
</style>
</head>
<body>
<!-- CSS使用font-family属性定义文本的字体系列 -->
<h2>泰戈尔经典语录</h2>
<p class="songti">世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
<p id="kaiti">纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
<p>寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。</p>
<p>生如夏花之灿烂,死如秋叶之静美。</p>
<p>不要着急,最好的总会在最不经意的时候出现。</p>
</body>
2. 字体大小和粗细
CSS使用font-size属性定义字体大小
如:p {
font-size: 20px;
}
注意:
px(像素)大小是网页最常用的单位;
谷歌浏览器默认文字大小是16px;
不同浏览器可能默认的文字大小不一致,我们尽量给一个明确值大小,不要默认大小, 可以给body指定字体大小;
标题标签比较特殊,,需要单独指定文字大小;
CSS使用font-width设置文字粗细
参数:normal 正常的字体 相当于number为400,声明此值将取消之前的任何设置
bold:粗体相当于number为700,也相当于b对象的作用
bolder:特粗体 lighter 细体
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,,需要单独指定文字大小 */
h2 {
font-size: 16px;
}
.bold {
font-weight: bold ;
/* fong-werght: 700; */
/* 这个700的后面不跟单位,等价于bold,都是加粗的效果
实际开发中,我们提倡使用数字,来表示粗体或细体*/
}
/* 也可以用不让字体变粗,如标题: */
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
<p class="songti">世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
<p id="kaiti">纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
<p class="bold">寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。</p>
<p>生如夏花之灿烂,死如秋叶之静美。</p>
<p>不要着急,最好的总会在最不经意的时候出现。</p>
</body>
3.字体文字样式
CSS使用font-style属性设置文本样式
参数:normal:默认值,浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
<style>
h2 {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
<em>泰戈尔</em>
4. 字体属性-复合属性
所谓
复合属性:就是前几种属性的简写的方式
一般情况下,想要设置div文字变倾斜 加粗 字号设置为16像素,并且是微软雅黑 ,写法如下
div {
font-size: 16px;
font-family: "Microsoft Yahei";
font-weight: 700;
font-style: italic;
}
但这样写比较麻烦,代码行过多,所以我们可以使用复合属性
格式:
font: font-style font-weight font-size/line-height font-family;
注意: 不能更改顺序,且各个属性之间以空格隔开;
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性不起作用。
<style>
font: italic 700 16px 'Micorsoft Yahei';
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意百行代码</div>
</body>
可以产生同样的效果。
二、文本属性
1.文本颜色
CSS文本属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
color属性用于定义文本颜色:
方式:1.预定义的颜色值:red green blue 等;
2.十六进制: #FF0000,#FF6600,#29D794等;
3.RGB代码:rgb(255,0)或rgb(100%,0%,0%) r-red g-green b-blue;
<style>
h2 {
color: deeppink;
}
p {
color: #41c526;
}
#a {
color: rgb(228, 37, 37);
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
<p id="a">世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
<p>纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
</body>
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
左对齐 left(默认) 居中对齐 center 右对齐right
<style>
h2 {
/* 本质是让h2盒子里的文字水平居中对齐 */
text-align: center;
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
</body>
3.文本缩进
text-indent 属性用来制定文本的第一行的缩进,通常是将段落的首行缩进;
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以为负值;
特别地:em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小
<style>
p {
text-indent: 20px;
}
.two {
/* 此时写了2em,则是缩进当前元素两个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
<p>纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。生如夏花之灿烂,死如秋叶之静美。</p>
<p>不要着急,最好的总会在最不经意的时候出现。</p>
<p class="two">纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。生如夏花之灿烂,死如秋叶之静美。</p>
</body>
4.装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线
参数:
none(默认)没有装饰线 最常用
underline 下划线 链接a自带下划线 常用
overline 上划线 几乎不用
line-through 删除线 不常用
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-throug {
text-decoration: line-through;
}
/* 可以取消链接a默认的下划线 */
a {
text-decoration: none;
}
</style>
</head>
<body>
<h2>泰戈尔经典语录</h2>
<p class="underline">世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》</p>
<p class="overline">纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
<p class="line-through">寂静在喧嚣里低头不语,沉默在黑夜里与目光结交,于是,我们看错了世界,却说世界欺骗了我们。</p>
<a href="#">泰戈尔经典语录</a>
</body>
5.行间距
line-height属性用来设置行间距,可以控制文字行与行之间的距离
行间距=上间距+文本高度+下间距
测量行高工具推荐:FastStone Capture
测量方法:一行文字的最下端到下一行文字的最下端的距离等同于行间距
<style>
div {
line-height: 26px;
}
</style>
</head>
<body>
<div>泰戈尔经典语录</div>
<p>纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。世界上最遥远的距离,不是生与死,而是我就站在你面前,你却不知道我爱你。——泰戈尔《鱼和飞鸟的故事》。。</p>
</body>