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
id100
class、属性、伪类10
标签、伪元素1
通配符0

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


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

阅读更多
文章标签: css
个人分类: HTML/CSS
上一篇HTML基础——标签
下一篇前端ui框架layui——layer弹出层-基础参数
想对作者说点什么? 我来说一句

苏昱CSS2.0中文手册

2008年06月01日 475KB 下载

Css标签大全

2008年06月23日 25KB 下载

CSS2.0中文手册CSS学习好帮手

2011年04月10日 550KB 下载

css2.0 css的文档,2.0标准的

2010年06月09日 1MB 下载

css中常见各种标签

2017年04月10日 14KB 下载

css2.0帮助文档

2011年05月31日 536KB 下载

CSS中文教程集合(CSS精髓)

2011年04月02日 1.44MB 下载

没有更多推荐了,返回首页

关闭
关闭