细胞de理想

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

1、CSS 简介

  CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一。

  HTML 标签被设计为用于定义文档内容,也就是文档结构,为了增强代码的可读性,实现网页结构与表现相分离的原则,万维网联盟(W3C),肩负起了 HTML 标准化的使命,并在 HTML4 之外创造出样式(Style)。CSS 目前最新版本是 CSS3,相对于传统 HTML 的表现而言,CSS 能够对网页中对象的位置排版进行像素级的精确控制,拥有对网页对象编辑的能力,易于维护和改版,提高页面浏览速度,使用 CSS 布局页面更符合 W3C 标准,他是目前基于文本展示最优秀的表现设计语言。

  CSS 样式表极大地提高了工作效率:样式通常保存在外部的 .css 文件中,通过仅仅编辑一个简单的 CSS 文档,外部样式表有能力同时改变站点中所有页面的布局和外观。

2、CSS 语法

  CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。如下:

1 p{
2      color:red;
3      text-indent:2em; /* 段落缩进2个字,即段落开头空2个汉字的位置。 */
4  }
View Code

3、创建 CSS

  当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。

  (1)、内联样式

  内联样式也叫行内样式或者行间样式,即在相关标签内使用样式(style)属性定义。如下:

1 <div style="width:200px;height:100px;border:1px solid black;"></div>
View Code

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。

  (2)、内部样式

  内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用 <style> 标签在文档头部定义内部样式表,如下:

 1 <head>
 2 <style>
 3 div{
 4     width:200px;
 5     height:100px;
 6     border:1px solid black;
 7 }
 8 p{
 9     color:blue;
10     font-size:14px;
11 }
12 span{
13     color:black;
14     font-weight:bold;
15 }
16 </style>
17 </head>
View Code

 

posted on 2016-07-08 16:02  细胞的理想  阅读(229)  评论(0编辑  收藏  举报