乌徒帮技术范儿技术中心CSS样式表 › css层叠样式表一:从结构到表现,网页样式的开始

css层叠样式表一:从结构到表现,网页样式的开始

分类:CSS样式表

上一章中,@否子戈(新网名)简单介绍了HTML及相关知识,而本章让读者初步了解CSS层叠样式表,并可以通过自己的学习,完全放弃使用dreamweaver等可视化的网页编写工具,利用CSS快速为网页穿上漂亮的外衣。

一、初识CSS层叠样式表

什么是CSS层叠样式表?css为class的缩写,意思为样式。简单的来说,css即将网页标签的style属性与标签本身分开来,可以更为方便和统一 的规划整个网页的外在表现形式。当然,css不仅仅将网页的style属性分离开这么简单,通过css可以实现更多的效果,例如将鼠标放在一个连接文本上可以更换链接颜色,这使用style属性是无法实现的,需要用到伪类,等等诸如此类的极为丰富的功能。

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。

阅读更多

CSS层叠

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)用<style></style>包起来
  4. 内联样式(在 HTML 元素内部)即前文所述的style属性

在一个网页使用到css时,浏览器会按照上述的顺序使用css对网页进行渲染。另外,在同一层,例如都是一个外部样式表中,位于后面的样式会之后执行,从而覆盖掉考前的样式,因此,我们常常在网页样式表的末尾撰写一些hack样式规则,用来控制不同浏览器下的表现状况。

如何连接和使用css表

对应上面的四条规则,1我们无能为力,2,我们使用一个css文件撰写css样式表,在html代码的<head></head>中间加入一条:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

创建一个mystyle.css,在mystyle.css直接写本章中所讲的各种声明。

3内部样式表,我们需要在<head></head>中间加一个<style></style>标签对,在它们之间写本章所讲的各种声明。4中所讲的我们在前一章讲过,即直接赋予某个标签style属性,例如<div style="color:red;"></div>

如何学习CSS层叠样式表

其实和HTML标签的学习没有太大的不同,只需要按部就班,第一遍将所有关于css的内容浏览完整,然后有针对性的重点挑选进行学习,掌握我们最常用最主要的css规则即可。乌徒帮的学习方法仍然是选择使用w3school的讲解,简单易懂,同时又较为全面,不会纠结于一些难点。

CSS3

css3不是css的升级版,而是更为广泛的浏览器支持和方法,伴随着HTML5的发展,实现更多的效果,甚至变得有语义,可以动作。这让WEB编程变得更加富有想象力,不再追求实现,而是追求创意,例如HTML5技术,让网页更加富有人性。css3的语法更多,其中很多语法并非所有浏览器都支持,特别是老版本的浏览器。

二、CSS层叠样式表的语法

css虽然简单,只要稍加熟悉,就根本不用讲语法,但是对于初学者,这是必须要去了解的。css不是编程语言,没有严格的逻辑语法,只有结构语法,只有按照下面的这些规则进行条目撰写,css才能被正常解析,渲染到网页。一旦某个地方错误,该处之后的样式将不被渲染,直到后面某个地方恰巧让错误结束。其实这并不是说错误结束,而是结构上可以被认为错误区域可以算一个整体,只可惜,这块区域渲染出来和原来的预想完全不同。例如有前引号没有后引号,有{没有}都会得到我们不想要的结构。那么这些规则到底有哪些呢?

1、基本语法

selector {property1: value1;property2: value2.....}

例如

p{width:90px;height:30;text-align:center;}

CSS 语法

不同的定义之间,用英文分号;隔开。整个定义用{}括起来,{}前面放置要定义的元素名称选择器,例如p,#content,.current,a:hover等。

2、空格、大小写或换行

css会忽略空格、换行,因此你可以将css的规则按照自己喜欢的方式撰写,只要能形成上面的模式即可。一般情况下大小写也可以不分,一般用小写,只有在涉及到选择的id和class时会有区别,例如#home和#HOME是不同的,尽量不要出现这种情况。

一个属性由多组意义的值组成,各个值之间要用空格分开,例如#home{border:#000 solid 1px;}中border的三个值被空格分开。

3、引号

一般情况下都使用双引号,当两个单词表示一个意义元素时,用引号引起来,特别是用在font-family中p {font-family: "sans serif";}。

4、选择器分组

想对多个元素采用相同的几个属性,可以使用下面这种方式

p,h1,h2,h3,div{display:block;}

用英文逗号连接几个选择器。

5、继承

css对父元素的规定可以被子元素继承,body一般是最终的父元素,所以我们经常在css开头就对body进行声明。看下面这段css代码:

body {
font-family: Verdana, sans-serif;
}

td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}

p {
font-family: Times, "Times New Roman", serif;
}

在这段代码中,我们对body进行了声明,让它的字体为Verdana或sans-serif(当在客户端电脑里找不到Verdana时使用sans-serif),因此整个页面的其他元素都会继承这一特征,都会采用这些字体。但是有些元素却偏偏不继承,即第二行的声明,例如table相关的元素、dl相关的元素都不继承body,因此一般需一起声明。

而最后对p进行声明,则会让p内的文字使用不同于body的字体,这在前文中我们已经讲到,出现在css靠后的规定会覆盖前面的规定,因此p就有特殊性了。

6、派生选择器

我们可以通过选择器的上下文来选择元素,例如我们可以做这样的一条规定:li.current a{color:#900;}即规定了class="current"的li下的a将会显示暗红色的文字。其中a并非li.current的孩子节点,还有可能是孙子、曾孙节点,因此在使用这种选择器时,需要考虑更多,特别是在进行下拉菜单的布置时。

阅读更多

三、CSS选择器

上文已经多次提到选择器了,什么是选择器呢?简单的说就是通过简单的标识来确定我要对哪个元素进行声明,例如对所有的p进行声明,就用p{},对class="content"的p进行声明,就用p.content{}。选择器随着css的发展,也越来越强大。

1、id选择器

例如我们有一个元素<div id="header"></div>那么我们用#header{}对其进行声明,因为在页面中,我们只能有一个id="header",无论它是div还是a还是p,因此使用#header不会发生歧义,除非你刻意的写两个不同的容器却id="header",这是个极差的写法。当然,我们还可以写成这样div#header,这样写的意思是id="header"的div,因为我们可能在不同的页面使用同一个css文件,所以,在另一个页面中存在<span id="header">时,使用div#header就对它无效,但如果只是#header就对它有效。

明白了这一点之后,我们就可以单纯的认为#header就是代替那个id="header"的元素了。因此,我们可以放心的对它进行规定,甚至使用#header p{}对它的下文元素进行规定。

2、类选择器

和id选择器一样的用法,只不过把#换成.,例如p.content,.header{}等。不同的是,class="center"可以出现多次,例如<div class="center">同时又有<p class="center">等,这时你需要提醒自己,.center不再代表一个唯一的元素,而是很多个元素,你可以使用.center{}来让这些元素拥有同样的样式。

3、属性选择器

使用一个[]选择拥有某属性或某属性等于某值的元素,例如[title]{}代表选择了所有有title属性的元素,[title="my post name"]{}选择了所有title值为my post name的元素,我们经常使用input[name=username]{}来修饰name值为username的文本框。

属性选择器还有[title~=hello]和[lang|=en]等用法,用来进行更为挑剔的选择,更多请看这里。需要注意的是,在一些老版本的浏览器中,并不支持属性选择器,例如IE6就不支持。

4、后代选择器

即上文提到的使用上下文关系来选择元素,例如p a{},li.current a{}等。

5、直接子元素选择器

把子元素理解为孩子节点,我们使用>来连接两个有父子关系的元素,对子元素进行样式规定,例如p>a{},规定了所有p元素下的a元素,这里的a元素是p下的第一层a,例如<p><a><span><a></a></span></a></p>第一个a被选,第二对a不被选。

直接子元素选择器选择的是直接的子节点,>连接的必须有父子关系,当然是用li.current>a{}是没有问题的,只要他们是父子关系即可。注意,在老版本的浏览器中,该选择器仍然不可用。

6、相邻的兄弟选择器

兄弟节点的概念,他们有相同的父元素,我们用+来连接这两个兄弟元素,对第二个元素进行规定,例如有<div><p></p><ul><lli></li></ul></div>其中p和ul是兄弟关系,而且相邻,我们用p+ul{}来规定这里的ul。相邻兄弟选择器使用的时候要注意的是,a+b是一个整体,有点匹配的感觉,即a和b必须是兄弟节点元素,而且还相邻,这时对b进行规定,我们一般使用a#id+b来确定要找的b。遗憾的是,老版本浏览器总仍然不可用。

7、伪类选择器

实际上没有的类,我们用伪类来选择,例如a标签实际上我们不会写一个class="hover"来表示当鼠标放上去的时候,我们直接可以用a:hover来表示鼠标放上去的时候(当然我们可以写class="hover",不过我们使用时用的是.hover)。伪类大概就是这样一个意思,表示一种存在,但不能用实际的类来表示的状态。伪类比较多,而且相对复杂,浏览器支持各不相同,详细请看这里

8、伪元素

和伪类差不多,区别在于伪类表示一种状态,为元素表示某一个或一些元素。例如p:first-child选择的是第一个p,而p:first-line表示选择了p的第一行文本。这个概念无需去纠结,只需了解各个为元素标签如何使用即可。详细的,你需要看这里

上一章:HTML-Web语言

下一章:css层叠样式表二

已有3条评论 快速评论
  1. CSS层叠样式表2 | 陈旭鸿的博客 #1140楼 2012/05/29 00:06:12 回复

    […] color:设置文本的颜色,指字的颜色,值有多种形式,如red,#f00,rbg(255,0,0,0)。如果是&lt;p&gt;好&lt;a href=”#”&gt;高矮胖&lt;/a&gt;的人&lt;/p&gt;这样的嵌套,你需要单独设置&lt;a&gt;的color值,这涉及到上一讲中讲到的继承问题。 […]

  2. frustigor #405楼 回复给@404楼 2011/09/18 21:13:50 回复

    喔哈哈,欢迎欢迎,牛叉了

  3. 乌帮图 #404楼 2011/09/18 20:59:35 回复

    来自乌帮图博客的问候。

填写个人信息,赶快回复吧!