web_0207_1
1、CSS三种方式
- 行内样式属性
<div style="color:red;font-size: 18px;">秋风扫落叶</div>- 内部仰视表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1
{
color:dimgray;
}
p.p1
{
color:red;
font-size: 19px;
}
#p2
{
color:green;
font-size: 25px;
}
</style>
</head>
<body>
<h1>I am Gray!</h1>
<p class="p1">I am red;</p>
<p id="p2">I AM GREEN</p>
</body>
</html>
- 外部样式表（外链式）
两大特征：
1、将CSS和HTML相分离。
2、可以共享CSS样式。
建立外部CSS和HTML之后通过Link链接
<link rel="stylesheet" type="text/css" href="styles/sty1.css">2、选择器
选择器的作用：找到特定的html中的元素。
2.1 标签选择器
概念：也称为元素选择器，是指利用html中的元素名称作为选择器。
h1,p
{
color:red;
text-align:center;
}2.2 类选择器(用得最多的)
.red
{
color:red;
text-align:center;
}<h1 class="red">this is a heading1</h1>类选择器的特殊用法
<style>
.red
{
color:red;
}
.font100
{
font-size: 100px;
}
</style><p class="red font100">I am a red </p>一个元素可以使用多个CSS，不过类中要有空格！
2.3 ID选择器
概念：id选择器相当于身份证号码，一个元素用了之后其它的元素再用就不得行了！
ID选择器和类选择器的区别：类选择器就是公交车，谁都可以上。ID选择器就是chunv并不是谁都可以上的，上了一次就没了。hhh
2.4 通配符选择器
通配符选择器就是选择所有标签
优缺点：会匹配页面所有元素，但是会降低页面的响应速度，不建议随便使用。
*
{
margin:0;
padding:0;
}总结：尽量少用*通配符选择器，尽量少用ID选择器；不使用无定义的div、span标签选择器
3、字体font
3.1 字号 font-size
可以用绝对长度单位，也可以用相对长度单位，推荐使用像素px;
| 相对长度单位 | 说明 |
| em | 相对于当前文本字体的字体尺寸（看不懂啊谁解释一下） |
| px | 像素，最常用，推荐使用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意：不同浏览器的页面文字大小不同，通常在开始之前，大多数浏览器默认字体大小为16px;
可以在开始之前写个
body
{
font-size:16px;
}3.2 font-family字体
p
{
font-family: arial,"microsoft yahei","微软雅黑","宋体";
}1、可以写多个字体，目的是，通过多个字体然后，如果第一个字体在电脑中未找到或者浏览器不支持，那就用第二个字体，第二个未找到，找第三个，所有的没找到就用默认的字体。
2、中文字体需要加引号，通常英文字体不需要加引号，但是如果字体中存在空格，￥，$等特殊字符则需要加引号。
3、尽量使用系统字体，这样能保证正常显示，比如什么毛泽西字体，类似这种的尽量避免使用，防止非正常显示。
3.2.2 Unicode字体
目的：采用unicode字体的目的是一些较为老的系统不支持中文，则可以选用unicode字体；
例如
|
字体名称 |
英文名称 | unicode编码 |
| 宋体 | SimSun | \5B8B\4F53 |
| 华文宋体 | STSong | \534E\6587\5B8B\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 隶书 | LiSu | \96B6\4E66 |
| 楷体 | KaiTi | \6977\4F53 |
3.3 font-weight字体粗细
字体加粗的方式
- 可以使用标签，例如<strong></strong>或者<b></b>的方式
- 可以使用font-weight;
| 属性值 | 描述 |
| normal | 默认值不加粗 |
| bold | 定义粗体 |
| 100-900 | 400为normal，700等于bold，必须是整数 |
3.4 font-style字体风格
| 属性 | 作用 |
| normal | 正常显示 |
| italic | 斜体 |
| oblique | 倾斜，在浏览器中italic和oblique几乎一致 |
平时我们很少让字体变得倾斜，往往是把倾斜字体变成正常。
例如：
em
{
font-style: normal;
} <p><em>这是一个倾斜字体变成了正常字体</em></p>
3.5字体的综合写法（重点）
p
{
/*font:font-style font-weight font-size/line-height font-family; */
font:italic 600 19px "microsoft yahei";
color:#BEBEBE;
}字体综合写法必须严格按照上面的顺序，不得更换顺序，各个属性按照空格隔开。
小结
| 属性 | 表示 | 注重点 |
| color | 颜色 | 三种方式rgb（）,十六进制，#fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 设置文字的对其方式 | left，right，center三种。 |
| text-indent | 首行缩进 | 通常用2字符缩进，即text-indent:2em； |
| text-decoration | 文本修饰 | 添加下划线，删除下划线， |
3.6 emment语法
推荐阅读