随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但随着这些功能的增加，HTML变得越来越杂乱，而且HTML页面也越来越臃肿。于是CSS诞生了。css：最大的贡献就是让HTML从样式中解脱，实现了HTML专注于结构呈现，样式交给CSS。
1、CSS的初识
css（Cascading Style Sheets）类化样式，提供了丰富的功能，如字体、颜色背景的控制及整体排版等，而且可针对不同的浏览器设置不同的样式。
1.1、引入CSS样式表
书写位置：内部样式表、行内样式、外部样式表
（1）行内式（内联表式）（偶尔使用）
内联表式，又称行内样式、行间样式。是通过标签的style属性来设置元素的样式，其基本语法为：
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"> 内容 </标签名>如，将h4标签中的青春不常在改为粉红色字体大小改为25px、将input控件中的默认文字修改淡灰（color、font-size）
<h4 style="color:pink;font-size:25px">青春不常在，抓紧谈恋爱</h4>
<input type="text" value="福州" style="color:#ccc;">
（2）内部样式表
内嵌式是将CSS代码集中写在HTML文档的头部标签中，并用style标签定义，基本语法格式如下：
<head>
<style type="text/CSS">
选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的如何地方。
type="text/CSS"可以省略。例如，改变前例表单中所有td标签中文字的色彩，和行间的距离
<head>
<meta charset="UTF-8">
<title>表格测试</title>
<style>
td {
color:grey;
}
tr {
height:36px;
}
</style>
</head>
（3）外部样式表（外链式）
链入式是将所有样式放在一个或多个.CSS为扩展名的外部样式文件中，通过link标签将外部样式文件链接到HTML文档中，其基本语法格式如下：
<head>
<link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>需要注意的是link为单标签。
如将上诉中样式的修改，改为外部的css文件，则，首先创建了一个style.css文件，进行链接即可
<link rel="stylesheet" href="style.css">tr {
height: 36px;
}
td {
color:grey;
}（4）三种样式总结
1.2 CSS样式规则
使用HTML时，需要遵循一定的规范。CSS亦如此，CSS具体格式如下：
选择器：要想将CSS样式应用于特定的HTML元素，首先要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。（选择某个标签）
1.3 CSS基础选择器
（1）标签选择器（元素选择器）
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;} 或者
元素名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时也是他的缺点，不能差异化样式。（上例中所使用的均为标签选择器）
（2）类选择器
类选择器使用“,”（英文逗号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标签调用的时候用class="类名"即可。
对于长名称或词组可以使用中横线为选择器命名，不建议使用_下划线来命名CSS
类选择器最大的优点是可以为元素对象定义单独或相同的样式。例如，将以前的表单中的文字赋予粉色和蓝色
<span class="woman">温柔</span><input type="checkbox" name="love">
<span class="woman">体贴</span><input type="checkbox" name="love">
<span class="man">阳光</span><input type="checkbox" name="love" >
<span class="man">国庆</span><input type="checkbox" name="love">同时css文件中添加
.woman {
color: pink;
}
.man {
color:skyblue;
}效果如下
（3）多类名选择器
当为一个标签内容赋予多个类名时，只要在class中的类名加一个空格再加另一个类名即可，如
<body>
<div class="green font20">多类名选择器</div>
<div class="red">多类名选择器</div>
<div class="woman">多类名选择器</div>
<p class="green">good luck</p>
<p class="red">good luck</p>
<p class="woman">good luck</p>
</body>.woman {
color: pink;
}
.man {
color:skyblue;
}
.red {
color:red;
}
.green{
color:green;
}
.font20 {
font-size:20px;
}
注意：
1、样式显示效果跟HTML元素中的类名先后顺序无关，受CSS样式书写的上下关系（如为同一段落p赋予green和red两个类，且均为色彩，决定其最后色彩的是red和green在css中的顺序）
2、多个类名之间用空格隔开
（4）id选择器
id选择器与类选择器使用方法上类似，只是在style定义中用#且，在标签中引用时用id而非class。
使用上class好比人的名字可以多次重复使用，而id相似于人的身份证号，一个id只可以使用一次。
#handsome {
color:skyblue;
}<p id="handsome">guoqing is handsome</p>
（5）通配符选择器
通配符选择器用"*"号来表示，他是所有选择器中作用范围最广，能匹配页面中所有的元素，基本语法格式如下：
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}* {
color:pink;
}<body>
<div>fuzhou</div>
<p>fuzhou university</p>
<span>hard study</span>
</body>
2、CSS字体样式属性
2.1 font-size：字号大小
font-size属性用于设置字号。该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用。推介使用像素单位px，绝对长度单位使用较少。具体如下：
div {
font-size:30px;
}<div>字体大小</div>2.2 font-family：字体
font-family属性用于设置字体，网页中常用的字体有宋体、微软雅黑、黑体等
div {
font-size:30px;
font-family:"宋体";
}<div>字体大小</div>
在设置多个字体时，需用逗号隔开，系统在显示时首先判断是否有第一个字体，没有则判断第二个，若都没有则显示默认系统字体。
div {
font-size:30px;
font-family:"宋体","微软雅黑";
}在字体名称中，使用Unicode编码兼容性更好（由于存在/需要加引号）
2.3 font-weight：字体粗细
字体加粗除了使用b和strong标签之外，可以使用CSS来实现，但是CSS是没有语义的。
font-weight属性用于定义字体的粗细，其可用属性值为：normal、bold、bolder、lighter、100~900（100的倍数 没有单位）
（数字400等价于normal，700等价于bold），如想要为文中的超链接字体加粗
a {
font-weight:bold;
}<div>2017年07月16日20:11 新浪体育 评论中大奖<a href="#">收藏本文</a></div>
2.4 font-style：字体风格
字体倾斜除了i和em标签外，可以使用CSS来实现，但是CSS是没有语义的。
font-style属性用于定义字体风格，设置斜体、倾斜或正常字体，其可用属性如下：
normal：默认值，浏览器会显示标注的字体样式
italic：浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜的字体样式。
（平时很少会给文字加斜体，反而喜欢给斜体标签em、i改为普通模式）
2.5 font：综合设置字体样式
选择器 {font:font-style font-weight font-szie/line-height font-family;}顺序是可以按照以上顺序，其中font-size和font-family属性必须保留，否则会报错。
3 CSS外观属性
3.1 color：文本颜色
（1）预定义的颜色值，如：red、green、blue等；
（2）十六进制，如#FF0000，#FF6600，#29D794等，十六进制为最常用的定义颜色方式。(#rr gg bb六位红红绿绿蓝蓝)（两两相同可简写为三个）
（3）RGB代码，红色可表示为rgb(255,0,0)或rgb(100%,0%,0%)
.red {
color:#ff0000;
}<span class="red">新浪体育 评论中大奖</span>
3.2 line-height：行间距
line-height属性用于设置行间距，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，绝对值em和百分比%，实际中使用最多的是像素px。
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
