初识css

• 我们用html主要用来填充页面中的内容，那css有什么作用呢？css主要用来美化页面，调整页面结构的。
• 在html中，文本的样式可以使用一写特定的标签，比如粗体用<b></b>,也可以直接在标签内部调整标签的大小，但是样式散落在html标签中，使得内容和样式的代码混杂在一起，难以区分。解决的方法就是改用—CSS
• 我们将html和css分离，有利于对内容进行统一的样式设置和修改。

什么是css

• CSS(Cascading Style Sheet)即层叠样式表，简称样式表。
• 样式就是对网页中的内容（比如：文字、段落、图片、列表等）属性的整体概括，即描述所有网页对象的显示形式（例如：文字的大小、字体、背景、文字颜色都是样式）。

css的优点

• 内容和样式分离，使得网页设计趋于明了、简洁。
• 弥补html对内容控制的不足，如文字的大小；在html中可控的标题只有6种，即h1~h6，而利用css可以任意设置标题大小。
• 准确控制网页布局，如行间距、字间距、段落缩进和图片定位等属性。
• 提高网页效率，因为多个网页同时应用一个css样式，减少了代码的加载量，提高页面加载速度。内容已定，如果css样式不满意，可以随便修改，丝毫不会对内容有影响。
• css还有很多特殊功能，如鼠标指针属性控制鼠标的形状（cursor: pointer; 将鼠标设置为小手状态）等。

将css代码，引入到html文件中的方式：

• 1、行内式：

直接在html标签内，插入style属性，在定义要显示的样式，这是最简单的方式。
局限：这样定义的样式只能局限当前标签使用
结构：

    <div style="样式属性:属性值;样式属性:属性值;..."

大家可以练一下 下面这个例子：实现一个宽度200px，高度300px，背景颜色为红色的一个盒子

    <div style="width: 200px;height: 300px;background: red;">我是一个div标签</div>

• 2、内嵌式

如果我们想让定义的样式在整个页面中起作用怎么办
内嵌式就是这样的作用
内嵌式的形式如下

    <style>
        选择符{
            css属性: 属性值;       
            css属性: 属性值;       
            ...
        }
    </style>

选择符可以用html标签的名称，比如div，所有的html标签都可以作为样式表的选择符

将div中的文字颜色设置为蓝色，字号设置为26px，可以用以下代码实现：

    <style>
        div{
            color: blue;
            /*文字的颜色： 蓝色*/
            font-size: 26px;
            /*字号 26px   */
            /*px：像素 css中表示大小的单位*/
        }
    </style>

注：代码中的 /*内容*/ 里面的内容是css的注释，不会显示在页面中

• 3、外链式:

一个外部的css文件可以应用于多个html文件。
当改变这个样式表文件时，所有的网页样式都随之改变，因此可以用在多个相同样式的网页中
使用这个方法不仅可以减少重复工作量，而且方便以后的修改和编辑，有利于网站的维护
这个方法也是项目中最常用的方式，这样加载网页时，浏览器一次性将样式全部加载出来，减少代码的重复加载。

     <!-- 外链式：引入css文件-->
     <link rel="stylesheet" href="css文件的路径"/>

rel=”stylesheet” 指在html文件中使用的是外链式的css文件
href=”” 引入css文件的路径，可以是相对路径也可以是绝对路径