前言：从本篇开始记录css的一些基础知识，但不会涉及css3，以后会单独学习记录。

1 .CSS简介

html只关注了内容的语义，但并没有注意具体布局的美化以及样式，如果用html去设置的话，就会显得十分臃

肿，这时候就需要css来进行设置了。

CSS是层叠样式表的简称，有时候我们也会称之为css样式表或者级联样式表

css和html即超文本标记语言相同，也是一种标记语言。

css主要用来设置html页面中文字内容，图片外形，以及版面的布局，外观设置。

故css可以使我们的页面更简单

1.1css语法规范

css由选择器以及一条或者多条声明组成

选择器是用于选定具体的样式改变对象

利用一条或者多条声明对选定的对象进行更改

使用方式： 选择器 {样式}

见下列代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p {
                color: aquamarine;
                font-size: 12px;
            }
            /*用color更改颜色
            font-size为字体大小，px为像素，既把文字修改为十二像素
            */
        </style>
    </head>
    <body>
    <p>这是一个段落</p>
    </body>
</html>

其中<style>标签中的p为选择器中的标签选择器，后面花括号中的内容为样式

其中color和font-size为属性，后面的是属性值，所以属性和属性值以键值对的形式出现

1.2选择器分类

选择器分为: 基础选择器、符合选择器。两大类

其中基础选择器又分为：标签选择器、类选择器、id选择器、速配符选择器。

1.2.1 标签选择器

定义：以html的标签名作为选择器

故可以选择一种标签，改变该标签的所有元素的样式，具体的应用见上文的代码。

1.2.2 类选择器

作用：不同于标签选择器一次性修改所有该标签的元素，如果我们只想对特定的一个或几个元素进行修改，可以

使用类选择器

使用：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .tes {
                color: aquamarine;
                font-size: 12px;
            }
            /*用color更改颜色
            font-size为字体大小，px为像素，既把文字修改为十二像素
            */
        </style>
    </head>
    <body>
    <p class="tes">这是一个段落</p>
    </body>
</html>

给与标签<p>一个类名 tes

然后在<style>中使用class选择器，在类名前加 . 便可更改该类下元素的样式

在本例子中就为 .tes

利用类选择器可以一次性更改拥有该类名的所有元素，故不同的元素可以拥有相同的类名。

开发最长用的也就是类选择器

注意：

不能使用标签名作为类名

长类名可以用短横线分割

不要使用纯数字或者中文等命名。

要遵守web的开发命名规范

1.2.2 类选择器-多类名

定义：我们可以给一个标签指定多个类名。从而达到更多的选择目的。这些类名都可以选出这个标签

使用：

<div class ="a b">
</div>

此时的这个元素就有了两个类名，a和b

但需要注意。多个类名中间必须用空格分开

JZTXT