HTMLCSS

一．CSS基本介绍

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS是英语CascadingStyle Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

二．CSS的使用方法

有三种方法可以在站点网页上使用样式表：

内联样式- 在HTML元素中使用"style" 属性

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS

外部引用 - 使用外部 CSS 文件

每一种方法均有其优缺点：

当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部引用样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来，如：

<link href="/css/Common.css" rel="stylesheet" type="text/css"/>

当人们只是要定义当前网页的样式，可使用内部样式表。内部样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。如：

<style type="text/css">

body {background:grey;}

</style>

使用内联样式以应用级联样式表属性到网页元素上。如：

<pstyle="@importurl('style3.css');">CSS document</p>



如果网页链接到外部样式表，为网页所创建的内联的或内部样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。

该“样式” 框列出标准 HTML 标记符，例如标题 1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。

在 Microsoft FrontPage 2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <pstyle="border-style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式”按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。

实例1

背景色属性（background-color）定义一个元素的背景颜色：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body style="background-color: green;">
<h2 style="background-color: red;">标题</h2>
<p style="background-color: blue;">内容</p>
</body>
</html>

实例2

使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1 style="font-family:verdana;">文字的标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p>
</body>
</html>

实例3

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>
</html>

继续学习

新建文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2 style="background-color: yellow;">标题</h2> <p style="text-align:center;">居中对齐的内容</p> <p style="font-family:arial;color:red;font-size:20px;">下面是一句话。</p> </body> </html>

提交重置代码

自动运行