CSS3的基础

CSS基础

css概述

CSS(Cascading Stlye Sheet)全称为层叠样式表,通常又称为风格样式表(Stlye Sheet),他是用来经行网页设计的

css在网页中的应用

通过设立样式表,可以统一的控制HTML中的各种标签的显示属性,比如设置字体的大小,颜色,排版,文本的居中,列表的形状

css的发展史

1993年,当超文本标记语言受到广泛的关注之后,迅速壮大,成为网页开发的热门语言。可是通过前面的章节学习可以知道,HTML开发出来的网页,并不美观,1994年,哈坤利为HTML语言提出了CSS样式表的构想,1995年,他再一次展开这个建议。W3C对CSS的发展很感兴趣,为此专门组织过讨论会

  • 1996年12月推出了CSS规范的第一版,即CSS1.0版本

  • 1998年5月W3C发布了CSS第二版,即CSS2.0版本,CSS2.0版本规范是基于CSS1.0设计的,其中包括了CSS1.0的所有功能,还融入了DIV+CSS的概念,提出了HTML结构与CSS样式表分离,以及一些其他的属性

  • 2004年W3C升级了CSS2.0版本,变成了CSS2.1版本,融入了很多高级的用法,如浮动,定位等属性

  • 2010年W3C推出了CSS3版本,包括2.1版本下的所有功能,是目前最新的版本

CSS3的使用率在持续增加,学习CSS3已然成为了一种趋势

CSS的优势

  1. 内容与表现分离,即使用前面学习的HTML语言制作网页,使用CSS设置网页样式,风格,并且CSS样式单独存放在一个文件中。然后HTML文件去引用CSS文件就可以了。网页的内容(HTML5)与表现就可以分开了,以便于后期CSS的维护

  2. 表现的统一。CSS可以使网页的表现统一,并且容易修改。把CSS写在单独的页面中,可以对多个网页应用其样式,使网站中的所有页面表现风格统一,并且需要修改页面表现形式时,只需要修改CSS样式,所有的页面样式即可同时修改

  3. 丰富的样式,使的页面布局更加灵活

  4. 减少网页代码量,提高网页的浏览速度,节省网络宽带。在网页中只写HTML代码,在CSS样式表中编写样式可以减少页面代码量,并且页面代码清晰。同时一个合理的层叠样式表,还能有效地节省

  5. 运用独立页面的css,还有利于被搜索引擎收录

CSS3的基本语法

CSS3的基本语法结构

  • CSS规则由两部分构成,`即选择器和声明```

  • 声明必须放在大括号中,并且声明可以是一条或多条

  • 每条声明由一个属性和值组成,属性和值用冒号分开,每一条语句用英文分号结尾

    如:

    h1{
        font-size:12px;
        color:#F000;
    }

认识style标签

在HTML文件中定义style标签用来引入CSS样式

style标签一般放在head标签当中,它定义了HTML文件样式如何呈现在浏览器中

<head>
    /*省略了上面部分*
    <stlye>
    /*css样式定义在这里*/
        
    </stlye>
</head>

HTML中引入CSS样式

  • 在HTML的head标签中的style标签引用CSS代码并不是唯一的一种方式,引用CSS代码的方法一共有三种,分别是行内样式,内部样式表和外部样式表

行内样式

行内样式就是在html标签中,直接引用style属性去设置CSS样式,style属性提供了一种改变所有html元素的样式的通用方法,style属性使用方法如下

<h1 style = "color:red;font-size:12px">
    CSS的style属性的用法
</h1>

这种style属性设置CSS的样式方式仅对当前的HTML标签起作用,并且是写在HTML标签中的,这种方式不能使内容与表现分离,本质上没有出现CSS的优势,因此不推荐使用

内部样式表

正如前面讲到的所有实例一样,把CSS代码写在head的style标签中,与HTML内容位于同一个HTML文件中,这就是内部样式表

这种方式便于在页面中修改样式,但是不利于在多个页面中共享重复代码,对内容与样式的分离也不够彻底,实际开发时会在页面开发结束后,将这些样式代码保存到单独的CSS文件中,将样式和内容彻底分开,即下面介绍的外部样式表

外部样式表

外部样式表是把CSS代码单独的保存在一个CSS文件当中,文件扩展名为.css,在页面中引用外部样式表即可。html文件引用外部样式表有两种方式,分别是连接式和导入式

  1. 链接外部样式表

    链接外部样式表就是在HTML5页面中使用link标签链接外部样式表,link标签要在head标签当中语法如下所示

    <head>
        <link herf="style.css" rel="stylesheet" type="text/css">
    </head>

    其中,rel = "stylesheets"是指在页面中使用这个外部样式表;type = "text/css"是指文件的类型是样式表文本;href = "style/css"是文件的所在位置

    外部样式表实现了样式和结构的彻底分离,一个外部样式表文件可以应用于多个页面。当改变这个样式表文件时,所有页面的样式都会随之改变。这在制作大量相同样式页面的网站时,非常有用,不仅减少重复的工作量,利于保持网站的统一样式和网站维护,同时减少了用户在浏览网页是重复下载代码,提高了网站的运行速度

    1. 把页面中的CSS代码单独保存在文件名为common.css的样式表文件中,文件代码如下

      h1{
          color:#ffff
          font-size:14px
      }
    2. 在HTML文件中使用link标签连接css文件

      <head>
          <link herf="css/common.css" rel="stylesheet" type="text/css">
      </head>
  2. 导入式外部样式表

    导入外部样式表就是在HTML网页中使用@import导入外部样式表。导入外部样式表,导入样式表的语句必须放在style标签中,而style标签必须放到head标签当中语法如下

    @import ulr("css/common.css")

    其中@import表示导入文件,前面必须要有一个@符号,ulr("common.css")表示样式表文件位置

  3. 链接式与导入式的区别

    1. link标签属于XHTML的范畴,而@import式css2.1中的特性

    2. 使用link链接的css是客户端浏览网页时先将外部CSS文件加载到网页中,再进行网页编译显示,所以这种情况下显示出来的网页与用户预期的效果一样,即使网速再慢也是一样的效果

    3. 使用@import导入的CSS文件,客户端在浏览网页时先将HTML结构呈现出来,再把外部CSS文件加载到网络当中去,当然最终效果与link标签呈现的内容相同,只是网速较慢的时候会先呈现一部分HTML的效果,再显示CSS,没有达到CSS效果的统一,这就是为什么大家都喜欢链接外部样式表

样式优先级

样式优先级为:“就近原则”

CSS选择器

选择器式CSS中的重要概念,所有HTML的标签样式,都是通过不同的CSS选择器经行控制的,用户只需要通过选择器,就可以对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种样式效果,上面我们学过的选择器,如P,h2等,有时并不能完全准确的选择我们需要改变的元素,接下来我们会学习其他更加准确的选择器

CSS3的基本选择器

在CSS3中,有三种最基本的选择器,分别是标签选择器,类选择器,ID选择器

  1. 标签选择器

    一个HTML网页由很多的标签组成,CSS标签选择器就是用来声明这些标签的,每种HTML标签的名称都可以作为相应的标签选择器名称。当在CSS使用标签选择器,当前HTML网页该标签都会受到影响

  2. 类选择器

    类选择器是在HTML网页中的标签属性里添加一个class属性,一个网页中可以出现相同的class属性值,可以通过类名来更改HTML样式,相同的class属性都会收到影响

    html示例

    <h1 class="a">
        类选择器测试
    </h1>
    <p class="a">
        类选择器测试
    </p>

    CSS示例

    a{
        color:#123
    }

    类a都会受到影响

  3. ID选择器

    ID选择器与类选择器的使用方法基本相同,但是ID在网页中有唯一性

CSS3的高级选择器

选择器是CSS中一个重要的内容,使用太可以大量地提高开发人员书写或修改样式表时的开发效率

高级选择器分为层次选择器,结构伪类选择器,属性选择器

  1. 层次选择器

    层次选择器是通过HTML文档对象模型,元素间的层次来选择元素的,其层次关系包括,后代,父子,相邻兄弟和通用兄弟几种关系

    选择器类型功能描述
    E F后代选择器选择匹配的F元素,且匹配的F元素包含在匹配的E元素内
    E>F子选择器选择匹配的F元素,且匹配的F元素是E元素的子元素
    E+F相邻兄弟选择器选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
    E-F通用兄弟选择器选择匹配的F元素,且位于匹配的E元素后的所有匹配的F元素
  2. 伪类结构选择器

    伪类可以将一段并不存在的HTML当作独立元素来处理定位,或者是找到无法使用其他简单选择器就能定位到切实存在的元素上,这种选择器可以根据元素在文档树中的某些特性(如相对位置)来定位到他们

    选择器功能描述
    E:first-child作为父元素的第一个子元素的元素E
    E:last-child作为父元素的最后一个子元素的元素E
    E F:nth-child(n)选择父级元素E的第n个子元素F,n可以是,1,2,3,关键字even,old
    E:first-of-type选择父元素内具有指定类型的第一个E元素
    E:last-of-type选择父元素内具有指定类型的最后一个E元素
    E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素
  3. 属性选择器

    在HTML中,可以给元素设置各种各样的属性,如id,,class等,通过各种各样的属性可以选择到元素并为其设置样式

    属性选择器功能描述
    E[attr]选择匹配具有属性attr的E元素
    E[attr=val]选择匹配具有属性attr的E元素,并且他的属性值为val(区分大小写)
    E[attr^=val]选择匹配元素E,且E元素定义了属性attr,其属性值是以val开头的任意字符串
    E[attr$=val]选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
    E[attr*=val]选择匹配元素E,且E元素定义了属性attr,其属性值包含了val
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值