牛骨文教育服务平台(让学习变的简单)

CSS基础学习一:CSS概述

CSS 概述

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等

文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表

现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对

象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不

同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

关于CSS概述总结了7点:

     1,CSS 指层叠样式表 (Cascading Style Sheets)

     2,样式定义如何显示 HTML 元素

     3,样式通常存储在样式表中

     4,把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

     5,外部样式表可以极大提高工作效率

     6,外部样式表通常存储在 CSS 文件中

     7,多个样式定义可层叠为一

CSS的出现解决了很多HTML的问题:

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

HTML 标签原本被设计为用于定义文档内容。通过使用 < h1>、< p>、< table> 这样的标签,HTML 的初衷是表

达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。

由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属

性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在

HTML 4.0 之外创造出样式(Style)。所有的主流浏览器均支持层叠样式表。

二,样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部

的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上Web设计领域的一个突破。作为网站开发者,你能够

为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,

然后网站中的所有元素均会自动地更新。

三,多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一

个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

     1,浏览器缺省设置

     2,外部样式表

     3,内部样式表(位于

标签内部)

     4,内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:

标签

中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

说了这么多我们可以简单的见识一下CSS的背景色的效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS背景色演示</title>
<style type="text/css">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</html>

运行结果为: