什么是CSS 及使用CSS的好处

  CSS 是“cascading Style Sheet”的简称,中文翻译“串接样式表”,也被翻译为“层叠样式表”,是用于(增强)控制网页样式并能够将样式信息与网页内容分离的一种标记性语言。CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。在制作网页的时候使用 CSS 可以有效地对页面的布局字体颜色背景和其它效果实现更加精确的控制。CSS 是由 W3C(W3C 就是 World Wide Web Consortium,全球万维网联盟的简称。W3C的主要职责就是确定未来万维网的发展方向,并且制定相关的推荐)的CSS 工作组产生和维护的。

  CSS 最早被提议是在1994年,最早被浏览器支持是1996年。1996年 W3C 正式推出了CSS1. 1998年 W3C 正式推出了CSS2. CSS2.1 是 W3C 现在正在推荐使用的. CSS3 现在还处于开发中. CSS 3 在包含了所有 CSS 2 所支持的基础上更有所改进.

   CSS 支持多种设备,例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。

和传统的 Html 相比 CSS 有以下优点:

CSS 基本语法


CSS 基本语法结构:

  Selector { property: value } Selector—选择符 property:value—样式表定义.属性和属性值之间用冒号(:)隔开.定义之间用分号(;)隔开,如果属性值为多个的时候则用双引号引起来。如果是指多个属性必须每个属性用分号隔开。也可以选择符组合,用逗号分割每个选择符,这样可以减少样式重复定义。

注释符:

  你可以在CSS中插入注释来说明你代码的意思,注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中,注释是不显示的。CSS注释以"/*" 开头,以"*/" 结尾,比如:
/* 定义段落样式表 */
p { text-align: center; /* 文本居中排列 */ color: black; /* 文字为黑色 */ font-family: arial /* 字体为arial */ }

类选择符:

  用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:
p.right {text-align: right} p.center {text-align: center}

然后用不在不同的段落里,只要在HTML标记里加入你定义的class参数:
这个段落向右对齐的
这个段落是居中排列的


   类选择符还有一种用法,在选择符中省略 HTML 标记名,这样可以把几个不同的元素定义成相同的样式: .center {text-align: center} (定义.center的类选择符为文字居中排列) 这样的类可以被应用到任何元素上。下面我们使 h1 元素(标题1)和 p 元素(段落)都归为“center”类,这使两个元素的样式都跟随“.center”这个类选择符:

这个标题是居中排列的
这个段落也是居中排列的

ID 选择符:

  在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。 ID选择符的应用和类选择符类似,只要把CLASS换成ID即可。将上例中类用ID 替代:
这个段落向右对齐的
  定义 ID 选择符要在 ID 名称前加上一个“#”号。和类选择符相同,定义 ID 选择符的属性也有两种方法。下面这个例子,ID属性将匹配所有id="intro"的元素:
#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent } (字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明) 下面这个例子,ID 属性只匹配id="intro"的段落元素: p#intro { font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent }

注意:ID 选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。
注意:这种省略 HTML 标记的类选择符是我们今后最常用的 CSS 方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。

其他资源 (Other Resources)