css的优势

• 内容与表现分离
• 网页的内容统一，容易修改
• 丰富的样式，使得页面布局更加灵活
• 减少网页的代码量，增加网页的加载速度，节省网络带宽
• 运用独立css文件，有利于网页被搜索引擎收录

css选择器:

• css选择器：指定一个或多个标签，为其添加样式

css的一个核心就是能对多个元素应用某些相同的样式
如：img{border:none}/*将img标签的边框去掉*/ 而不再像之前 每个<img>标签处都去掉边框

css的选择器的基本结构

语法：

    选择器{
        属性名:属性值;
        属性名:属性值;
        属性名:属性值;
        ...
    }

先说一下基本选择器：

• 1、标签选择器：

标签：即html标签，比如：div、p、span、img…

语法：

    某个html标签{
        属性名:属性值;
        属性名:属性值;
        ...
    }

举例说明：

<!--需求：给span标签设置一个背景颜色-->
<span>文字</span>

<!--css代码要写在style标签中，因为如果用行内式，我们就不需要选择器了-->
<style>
    span{
        background: yellow;
        /*背景颜色*/
    }
</style>

• 2、类选择器: 最常用的

给标签设置一个class,并且给class加一个名字，比如：class="box"，将class对应的名字设置为box，box可以是任意的（但不可用中文，或者数字作为开头，一般用英文单词命名就可以啦）

语法：

    .标签的类名{
        属性名:属性值;
        属性名:属性值;
        ...
    }

举例说明:

    <!--需求：给div设置宽度100px-->
    <div class="box">文字</div>

    <style>
        .box{
            width: 100px;         
        }
    </style>

• 3、id选择器：

注意：在同一个文件中 id名不可以重复，唯一性

语法：

    #id的名字{
        属性名:属性值;
        属性名:属性值;
        ...
    }

举例说明:

    <!--需求：给div设置背景颜色为红色-->
    <div id="div1">文字</div>

    <style>
        #div1{
            background: red;         
        }
    </style>

• 4、通配符选择器

可以选择全部的标签

语法：

    *{
        属性名:属性值;
        属性名:属性值;
        ...
    }

举例说明:

    <!--将所有的标签设置为隐藏-->    

    <style>
        *{
            display: none;         
        }
    </style>