前言：“ 永远不要沉溺在安逸里得过且过，能给你遮风挡雨的，同样能让你不见天日，只有让自己更加强大，才能真正撑起一片天。”
你好，我是梦阳辰！快和我一起走进CSS的世界吧！
01.CSS概述
1.什么是CSS?
CSS（Cascading Style sheet):层叠样式表语言。
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
2.CSS的作用：
修饰HTML页面，设置HTML页面中的某些元素的的样式，让HTML页面更好看。
HTML还是主体，CSS依赖HTML。CSS存在就是修饰HTML,所以新建的文件还是xx.html文件。
如果不做前端，别人写的CSS样式要能看懂。
02.MTML中使用CSS的三种方式
1.在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style="样式名：样式值；样式名：样式值；..."></标签>
关于css样式名：可以下载相关的帮助文档。
例如：
<body>
<div style="width: 200px;height:300px; background-color: #ffff2c;display: block;border:2px solid red;" ></div>
</body>
2.在head标签中使用style块，这种方式被称为样式块方式。
语法格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*第一种id选择器*/
#usernameErrorMsg{
color: #d91414;
font-size: 18px;
}
/*第二种标签选择器*/
div{
background-color: #ff0000;
border :2px solid black;
width :100px;
height :100px;
}
/*类选择器,只要是这个类名都起作用*/
.myclass{
border :2px solid black;
width: 500px;
height: 33px;
}
</style>
</head>
<body>
<!--设置字体大小为12px,颜色为红色-->
<span id="usernameErrorMsg">用户名不能为空</span>
<div></div>
<div></div>
<div></div>
<input type="text" class="myclass"/>
<br><br><br>
<select class="myclass">
<option>专科</option>
<option>本科</option>
<option>博士</option>
</select>
</body>
</html>
3.链入外部样式表文件（将样式写到一个独立的xxx.css文件中）
这种方式最常用
语法格式：
<link type="text/css" rel="stylesheet" href="css文件的路径"/>
这种方式容易维护，维护成本较低。
xxx.css文件
在html文件中引入。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入css-->
<link rel ="stylesheet" type ="text/css" href="fada.css">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">快点击我</span>
</body>
</html>
03.列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul{
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
04.绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
#div1{
background-color: red;
border: 2px black solid;
width :300px;
height:300px;
position :absolute;/*绝对定位*/
left:122px;
top:122px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
结语： “路漫漫其修远兮，吾将上下而求索”。继续加油吧！别忘了素质三连！
欢迎关注公众号【轻松玩编程】回复就“计算机资源”获取更多精彩。
