CSS基础——初识CSS以及CSS标签(CSS2.0)

原创 2018年04月17日 16:51:01

    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

CSS是一套高雅的WEB设计语言,它让网页设计这件事充满的艺术范。就像做图里面突然加了配色一样,看起来酷炫高大上。 然而事实上CSS真是很美,它让同样的一篇网页内容千变万化,让单调的文字绚丽多姿。它就像佳丽手中的画眉笔,美与不美只在于它是否用心勾勒。 本套教程带大家了解CSS,并慢慢的应用和喜欢它!
  • 2017年01月24日 17:07

CSS2.0帮助文档手册下载

  • 2017年10月25日 11:09
  • 536KB
  • 下载

CSS2.0盒模型层次平面示意图和3D示意图

CSS2.0盒模型层次平面示意图和3D示意图3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左...
  • e_wsq
  • e_wsq
  • 2011-10-27 19:25:57
  • 722

CSS:CSS选择器之【基本选择器】

概述CSS选择器的作用是找出某类元素,以便我们使用style元素或者外部样式表对这类元素设置样式。CSS的基础选择器主要有三个:标签选择器、类选择器、id选择器和属性选择器。通用选择器通用选择器匹配文...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016-09-21 11:01:49
  • 743

苏昱CSS2.0中文手册

  • 2008年06月01日 12:16
  • 475KB
  • 下载

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

  • 2011年04月10日 11:21
  • 550KB
  • 下载

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

  • 2010年06月09日 17:19
  • 1MB
  • 下载

css常用标签大全

字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: obli...
  • cuifugang124428
  • cuifugang124428
  • 2014-03-14 11:03:14
  • 3586

[CSS点滴]标签嵌套规则

基本嵌套规则 1.body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素 2. ins和del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2017-01-16 22:18:22
  • 581

Html+Css基础之认识标签

:     文档的头部描述了文档的各种属性和信息,包括文档的标题等 :     文档的标题 :     元素可提供有关页面的元信息详细介绍 :     页面的正文。 :     段落标签 :     ...
  • q269399361
  • q269399361
  • 2016-12-13 18:28:00
  • 515
收藏助手
不良信息举报
您举报文章:CSS基础——初识CSS以及CSS标签(CSS2.0)
举报原因:
原因补充:

(最多只允许输入30个字)