文档章节

IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

字数 1437
阅读 6
收藏 0

2bd6b553ac3a4421b28e27fd7c0a03d2.jpg

 

CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的)。W3C也有新的版本更新,称为CSS3。虽然浏览器已经准备开始实现CSS3某些方面的内容,但当前浏览器仍然无法支持某些特性。一张样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档。如图6.2所示给出了关于CSS规则的一个示例。

cda7eaa1ab6c44cf90988a21df5ef2e5.png

图6.2  CSS规则组成

 

CSS的规则主要由“选择器”和“声明”两部分组成,选择器指定声明应用于哪个或哪些元素(后面有详细讲解)。例如,任何HTML元素都可以是一个CSS的选择器,选择器仅仅是指向特别样式的元素。

p { text-indent: 3em }                        /*   当中的选择器是p   */

声明则是用于定义样式的元素,它用于设置HTML元素的样式。如果声明和选择器一起使用,就需要将声明的部分使用“{}”组织在一起。声明中可以用多个样式属性,为通过该选择器找到的HTML元素叠加样式,每个样式元素都是由以冒号隔开的两部分组成的(属性:值)。属性是希望影响的所选元素的特性,每个属性带一个值,共同地描述选择器应该如何呈现。样式规则组成如下:

选择器 {属性1:值1;属性2:值2;属性n:值n;}             /* 声明和选择器一起使用 */

属性和值之间使用冒号(:)连接,多个属性的复合样式声明之间应该用分号(;)隔开,最后一个属性的值后面可以不用分号。如果同一个样式属性出现两次以上,则使用后者。以下代码定义了h1和h2元素的颜色及字体大小属性。

0761fc8d25e846f4a580fb8395914226.jpg

如果直接在HTML元素中使用style属性声明样式,则不需要使用“{}”,而是直接将多个层叠样式元素声明在style属性的双引号中即可。例如,直接将一个一级标题h1设置为加大、红色字体:

<h1 style="font-size:x-large;color:red"> 一级标题 </h1>      <!-- 在HTML标签中直接加样式  -->

 

1  CSS注释

样式表里面的注释使用C语言编程中一样的约定方法去指定,注释的内容会被浏览器忽略,可用于为样式表加注解及调试使用。CSS注解的例子如下:

/* 这里的内容被注释,不能嵌套使用  */

 

2  长度单位

有很多样式属性的值都有长度单位,例如fontsize、width、height、border-width等。一个长度的值由可选的正号“+”或负号“-”、接着的一个数字、表示单位的两个字母组成。在一个长度的值之中是没有空格的,例如,1.3 em就不是一个有效的长度的值,但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。无论是相对值还是绝对值长度,CSS都支持。相对值单位确定一个相对于另一长度属性的长度,因为它能更好地适应不同的媒体,所以是首选的。CSS中有很多专有的属性单位,也有很多能够用于大量属性的常规单位。

Ø em(font-size:2em)是一个大致与一个字符高度相同的单位。

Ø px(font-size:12px)是一个像素的单位。

Ø pt(font-size:12pt)是一个磅的单位。

Ø %(font-size:80%)是一个百分比。

Ø 其他单位还包括pc(活字)、cm(厘米)、mm(毫米)、in(英寸)、dpi(输出分辨率)和rem(CSS3新增的一个相对单位)。

另外,有的属性值还可以使用一个百分比,由可选的正号“+”或负号“-”、接着的一个数字、百分号“%”组成。在一个百分比值之中是没有空格的,百分比值是相对于其他数值的,同样用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。

 

3  颜色单位和URL值

有很多样式属性的值都有颜色单位,例如color、background-color、border-color等。颜色值是一个关键字或一个RGB格式的数字。关键字通常有16个:aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。RGB颜色可以有以下4种形式,例子中指定同一颜色:

Ø #rrggbb(如#00cc00)。

Ø #rgb(如#0c0)。

Ø rgb(x,x,x),x是一个0~255的整数(如rgb(0,204,0))。

Ø rgb(y%,y%,y%),y是一个0.0~100.0的整数(如rgb(0%,80%,0%))。

另外,指定背景图片还需要使用一个URL值。URL的格式为:url(addr),其中addr是一个URL。URL可以选择用单引号(')或者双引号("),也可以不加引号,并且在URL之前或之后可以包含空格。在URL中的括号、逗号、空格、单引号或双引号必须避开反斜杠。不完整的URL被理解为样式表的源代码,而不是HTML源代码。例如:

body { background: url(xsphp.gif) }                         /* 不用引号   */

body { background: url(http://www.lampbrother.net/xsphp.gif) }       /* 绝对URL   */

body { background: url(' xsphp.gif ') }                    /* 使用单引号 */

body { background: url(" xsphp.gif ") }                     /* 使用双引号 */

© 著作权归作者所有

粉丝 1
博文 234
码字总数 224962
作品 0
东城
私信 提问
开始使用HTML5和CSS3验证表单

本文转载于:猿2048网站➯开始使用HTML5和CSS3验证表单 使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已...

前端老手
09/10
12
0
25 个精彩的 HTML 5 教程

web开发者必须尽快熟悉并使用起HTML5,因为它在web端开发的发展趋势已经明朗,可以用来创建丰富多彩的效果。使用HTML5还是有一些复杂的,所以本文介绍了25个优秀的HTML教程及小手册,欢迎大家...

小卒过河
2011/11/16
4.2K
4
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
661
1
15 个最棒的 HTML5 和 CSS3 的表单教程

HTML5 和 CSS3 为网页开发带来了更好的体验,更佳的效果,本文主要是利用 HTML5 和 CSS3 制作一些效果非常好的表单的教程,以供参考。 Create a Stylish Contact Form with HTML5 & CSS3 Bu...

红薯
2011/07/20
2.2K
3
20 个卓越的 CSS3 Web表单教程

Clean and Stylish CSS3 Form More Information on Clean and Stylish CSS3 Form Create a Stylish Contact Form with HTML5 & CSS3 More Information on Create a Stylish Contact Form wit......

红薯
2011/08/06
3.6K
6

没有更多内容

加载失败,请刷新页面

加载更多

javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法

下面的元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用: <script> /* ****** 元素视图属性 * offs...

Bing309
9分钟前
3
0
Apache Kafka快速入门指南

简介 Kafka是基于发布订阅的消息系统。最初起源于LinkedIn,于2011年成为开源Apache项目,然后于2012年成为Apache顶级项目。Kafka用Scala和Java编写,因其分布式可扩展架构及可持久化、高吞吐...

AiChinaTech
11分钟前
2
0
Discrete Cosine Transform [DCT] (离散余弦变换)

Discrete Cosine Transform [DCT] (离散余弦变换)

divenwu
12分钟前
2
0
如何玩转 TiDB 性能挑战赛?本文教你 30 分钟快速上手拿积分!

作者:wish 上周我们正式宣布了 TiDB 性能挑战赛。在赛季内,通过向 TiDB、TiKV、PD 贡献代码完成指定类别任务的方式,你可以获得相应的积分,最终你可以使用积分兑换礼品或奖金。在性能挑战...

TiDB
13分钟前
2
0
12、SpringMVC数据回显

数据回显方法 1.springmvc默认对pojo数据进行回显。 pojo数据传入controller方法后,springmvc自动将pojo数据放到request域,key等于pojo类型(首字母小写) 使用@ModelAttribute指定pojo回显...

快乐的瓶子
14分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部