CSS介绍
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
css页面引入方法：
1.内联式 通过标签的style属性，在标签上直接写样式。最开始的写法，不规范
<div style="color: red;font-size: 20px;font-family: '微软雅黑';line-height: 10">
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
</div>2、内嵌式：通过style标签，在网页上创建嵌入的样式表。一般用于首页，显示更好
<style type="text/css">
div{
color: red;
font-size: 20px;
font-family: '微软雅黑';
line-height: default
}
</style>
</head>
<body>
<div >
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
</div>3.外联式：通过link标签，链接到外部样式表到页面中。一般用于其他页面
单独的css文件
div{
color: red;
font-size: 30px;
font-family: '微软雅黑';
line-height: default
}
作为链接插入html文件中
<title>样式引入外链式</title>
<link rel="stylesheet" type="text/css" href="css/main.css" >
</head>css文本设置和颜色设置
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';
-
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
-
line-height 设置文字的行高，如：line-height:24px;
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
-
1、颜色名表示，比如：red 红色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示红色
3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
<head>
<meta charset="UTF-8">
<title>样式嵌入式</title>
<style type="text/css">
div{
/*font-size文字大小 font-family文字字体 font-style字体倾斜*/
/*font-weight文字加粗 text-indent文字首行缩进*/
color: black;
font-size: 20px;
font-family: '微软雅黑';
line-height: default;
text-indent:40px;
}
em{
font-style: normal;
}
span{
font-weight: bolder;
}
h2{
/*font-family: '微软雅黑';
font-weight: normal;*/
font:normal 30px/40px 'Microsoft Yahei';
/*文本居中*/
text-align: center;
/*color: gold;*/
/*color:rgb(255,0,0);*/
/*color: #ff0000;*/
color: #f00;
}
a{
/*一般都让链接的下划线去掉*/
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度网</a>
<h2>样式应用之文本样式</h2>
<div >
为了让网页元素的样式更加丰富，也为了让网页的<em>内容和样式</em>能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
</div>
<div>
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 <span>Cascading Style Sheets</span> 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
</div>
</body>
css选择器
1、标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中，一般不用。
*{margin:0;padding:0}2.id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
3.类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
<head>
<meta charset="UTF-8">
<title>css 选择器</title>
<style type="text/css">
<!-- div{}标签选择器 #div2{} id选择器 -->
div{
color: red;
}
#div2{
color: green;
}
<!-- 类选择器.red{} 用的话class="" -->
.red{
color:red;
}
.bold{
font-weight:bold;
}
.yehei{
font-family:'Microsoft Yahei';
}
</style>
</head>
<body>
<!-- 类选择器 -->
<div class="red bold yehei">这是一个div</div>
<!-- id选择器 -->
<div id="div2">这是第二个div</div>
<div class="red yehei">这是第三个div</div>
</body>前端 未完待续 个人简历制作，下一个学习视频为html高级→009元素类型