CSS基础——初识CSS以及CSS标签（CSS2.0）

    css的全称为cascading style sheet 层叠样式表，它的主要作用是为我们的html标签添加各种各样的样式和修饰效果。

首先，我们来介绍一下html页面如何引入CSS。

        css的引入方式一共有4种：

            1.行间样式 直接写在html 标签的style属性中。eg: <div style="..."></div>

            2.页面级css 在head标签里面添加一个style标签，写入样式。eg: <style type=”text/css”> ...</style>

            3.外部css文件 创建一个.css后缀的文件书写css样式，然后在html里面引入这个外部的css文件：即在head标签里面加上一个link标签。eg: <link rel=”stylesheet” href="">（link标签里面的href属性上写我们建立的css文件的地址，最好用相对地址的形式。）

一般情况下我们都推荐使用外部css文件的方式引入css，因为link加载不会阻塞html的加载，html和css属于异步加载。

            4.import方式引入(已经弃用)  在head标签里面写一个style标签，在第一行写上@import url();（url里面写上css文件的地址，可以加引号也可以不加引号。）

            这种引入方式有几种缺点导致它现在被废弃使用：

                1.必须写在第一行，若有多个则一起写在最前面。

                2.ie6的环境下，只能使用最多31次，这个数字据说是阿里的开发人员一点一点测试出来的。

                3.程序读到import的时候，会忽略掉import，等到html里面的所有内容包括图片在内的所有资源全都加载完之后才加载import的css文件，也就是说，import引入的css文件和html的加载是同步进行的。

介绍完如何引入CSS，我们来介绍一下CSS选择器的相关内容。

        1.id选择器

            我们可以给元素添加id属性，这个id是唯一标识，一个元素只能有一个id，一个id也只能给一个元素。eg：<div id=”demo”></div>

                这样我们就可以使用id选择器来选择这个元素了。

#demo {
    background-color: red;
    width: 100px;
    height: 100px;
}

        2.class/类选择器

            像id属性一样，我们可以给元素添加class的属性，这个属性是为这个元素添加一个类名，每一个元素可以有多个类名，同一个类名也可以赋给很多个元素。eg：<div class=”demo”></div>

.demo {
    background-color: red;
    width: 100px;
    height: 100px;
}

        3.标签选择器

            div{} ->只要是div的标签就会被选择出来。

        4.通配符选择器 

            *{} 所有的标签都会被选择出来加上样式，body标签页包含在内。

        5.属性选择器

            [id] {} 这样有id属性的标签就都会被选择出来。

        6.父子选择器  （派生选择器）

            div p {}    即给div下面的p加样式

注意： 在实际开发中，我们因为要注意浏览器寻找时候的耗能，一般父子选择器不超过4层。eg：.wrapper .box .content .name  一般不超过像这样的四层。

        7.直接子元素选择器

            div>strong     div直接子元素里面的strong，不是div的直接子元素的strong都不符合要求。

        8.并列选择器

             div.select {}    选择出类名是select的div。这种方式是只有div和.select同时作用在一个标签上的时候才会被选择出来，书写的时候标签名放在前面，其他的放在后面。

        9.分组选择器

              我们要想同时给多种标签都加上同一种属性的话，就可以使用分组选择器。

              div, p, em, strong {} 中间是用逗号连接，这样我们就可以把前面写的所有的标签都选择出来加上统一样式了。

最后，我们来聊一下选择器的权重问题。

CSS选择器	权重值
!important	无穷大
行间样式	1000
id	100
class、属性、伪类	10
标签、伪元素	1
通配符	0

有一点值得大家注意，在数学中无穷大+1依然是无穷大，但是在css选择器的权重值里面，无穷大+1 > 无穷大。

以上就是这篇文章全部要告诉大家的内容，希望对大家有帮助~