一、本课目标
- 掌握字体属性的使用
- 掌握文本排版样式的使用
为什么使用CSS？
- 有效的传递页面信息
- 使用CSS美化过的页面文本，漂亮，美观，吸引用户
- 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
- 具有良好的用户体验
二、span标签
2.1、综述
<span>标签的作用：能让某几个文字或者某个词语凸显出来
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>测试</title>
<style>
p .show, .bird span {
font-size: 36px;
font-weight: bold;
color: blue;
}
.yellow {
color: yellow;
}
p #dream {
font-size: 24px;;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>享受<span class="show">"北大式"</span>教 <span>育</span>服务</p>
<p>在北大青鸟，有一群人默默支持你成就 <span id="dream">IT梦想</span></p>
<p class="yellow">选择 <span class="show">北大青鸟</span>,成就你的梦想</p>
<p class="bird">醉后不 <span>知天</span>在水<span>满船清梦压星河</span></p>
</body>
</html>
最终效果：
分析1、当使用span标签时，需要在style里面定义相应的样式，定义样式时需要前面加上p表示这个样式是span用的.
2、对于一个段落，如果只是需要某几个字需要用到样式，则在这几个字上加上span标签，同时早span标签里面定义class或者id属性，就如body里面的第一行，第二行。
3、当class标签与span标签共用时，则span标签有更高的优先级。如第三行。
4、当在p标签里面使用span标签里面的样式时，在只需在相应的需要用到的该样式的字体前后加上span标签即可，此时span标签里面不需要设置标签样式，如第四行。
2.2、font-family属性：设置字体类型
设置字体的时候，不要去设置你电脑上没有安装的字体，这样会显示不出来的。
2.3、font-size属性：设置字体大小
单位：px（像素）、em、rem、cm、mm、pt、pc
2.4、font-style属性
字体的风格：normal、italic和oblique。第一个是正常的，后两个是倾斜的。
2.5font-weight属性
2.6font属性
在这个生命中可以设置所有的字体属性：
但是是有顺序的：
字体属性的顺序：字体风格-字体粗细-字体大小-字体类型
三、文本属性
文本属性有一下这些：
文本装饰其实就是有没有下划线。
3.1color属性
如果有模板的话，可以用PhotoShop拾取你想要的颜色，然后把相应的颜色的值设置在样式中。
3.2水平对齐方式
3.3首行缩进
text-indent：48px（text-indent：2em）第一种方式是缩进48个像素，当文本的尺寸设置为12px时，48px就是两个空格。但是当文本尺寸为别的尺寸的时候，这时就不一定是两个空格的缩进了。第二种方式是2em，此时是相对于文本尺寸来定义的。不管文本尺寸怎么改变，就是缩进两个字符。
3.4行高：设置行与行之间的空隙
line-height：30px，这样设置之后行与行之间就会有30个像素的空隙。行高会平均分配到行的上下。
3.5文本装饰和垂直对齐
-
文本装饰
text-decoration属性
image.png - 垂直对齐方式
vertical-align属性：middle、top、bottom
3.6文本阴影
text-shadow：color x-offset y-offset biur-radius;
3.7总结
3.8补充
示例代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>样式复习文字</title>
<!--<link rel="stylesheet" href="css.css"/>-->
<style>
/*<!-- 下面这个样式代表包含bird这个属性的p标签的里面的span标签的样式-->*/
p.bird span {
font-size: 36px;
font-weight: bold;
color: blue;
}
p.yellow span {
color: yellow;
}
/*下面这个标签标示包含属性为green的span标签*/
span.green {
font-size: 40px;
color: green;
}
/*这个表示所有的包含属性为silver的标签*/
.silver {
color: silver;
}
/*id选择器*/
#dream {
font-size: 24px;;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>享受<span class="green">"北大式"</span>教 <span class="silver">育</span>服务</p>
<p>在北大青鸟，有一群人默默支持你成就 <span id="dream">IT梦想</span></p>
<p class="yellow">选择 <span>北大青鸟</span>,成就 <span>你的梦想</span></p>
<p class="bird silver">醉后不<span>知天</span>在水满船 <span>清梦</span>压星河</p>
</body>
</html>
结果如下：
注：解决这个问题给我最重要的启示是速到不会的随时去查3cschool。
