Maison > interface Web > tutoriel HTML > CSS 基本知识_html/css_WEB-ITnose

CSS 基本知识_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:25:50
original
2423 Les gens l'ont consulté

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;4 }
Copier après la connexion

  选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成,属性是设置的样式属性(style attribute),每个属性都有一个值,属性和值用冒号分隔。CSS 声明总是以分号 ; 结束,声明组以大括号 {...} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。

  CSS 注释是用来解释代码,并且可以随意编辑,浏览器会忽略它。CSS注释以 "/*" 开始,以 "*/" 结束。如下:

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

3、创建 CSS

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

  (1)、内联样式

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

<div style="width:200px;height:100px;border:1px solid black;"></div>
Copier après la connexion

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

  (2)、内部样式

  内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用