前言：“ 永远不要沉溺在安逸里得过且过，能给你遮风挡雨的，同样能让你不见天日，只有让自己更加强大，才能真正撑起一片天。”
你好，我是梦阳辰！快和我一起走进CSS的世界吧！

01.CSS概述

1.什么是CSS?
CSS（Cascading Style sheet):层叠样式表语言。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

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>

结语：“路漫漫其修远兮，吾将上下而求索”。继续加油吧！别忘了素质三连哦！

欢迎关注公众号【轻松玩编程】获取更多精彩内容。