CSS简介

CSS简介

CSS（Cascading Style Sheets，层叠样式表、样式表），我们可以根据需要来修改某一个HTML元素的样式。

XHTML是结构标记：哪些地方是段落，哪些地方是项目符号，哪些地方是图片等

CSS是表现、格式：这个段落文本颜色、大小、对齐方式、边框、背景颜色等。

以前是用以下方式来作网站：

<p><font color=“#ff0000” size=“7” face=“黑体”>北京传智播客教育培训中心</font></p>

现在我们要将结构和表现分离：

<style type=“text/css”>

p{

Color:#FF0000;

Font-size:24px;

Font-family: 黑体;

Background-color：#f0f0f0;

Border:1px dashed #000000;

Letter-spacing：10px;

}

</style>

<p>北京传智播客教育培训中心</p>

CSS语法格式

一个样式表<style></style>由多个样式规则构成；

一个样式规则由“选择器”和“格式声明语句”构成，如：h1就是选择器，{}中的语句就是格式定义；

选择器就是要定义样式的HTML元素(标记)；

格式声明语句放在{}中，{}中由多个格式声明语句构成；比如：color:red;

格式语句由“属性名称”和“属性值”构成，属性名称和属性值间用冒号隔开，每个格式语句必须以分号结束；

CSS选择器：给哪一个HTML标记加样式

• 基本选择器

（1）通用选择器(*)

格式：*{font-size:24px;}

说明：通用选择器(*)，将匹配所有的HTML标记。

注意：通用选择器(*)，IE6不支持，建议尽量少用。

（2）标签选择器，对应于所学的HTML标记

格式：h1{color:#FF0000;}

举例：    h2{color:#FF0000;}

p{font-size:14px;line-height:150%;color:#9900CC;}

li{color:#0000ff;text-decoration:underline;cursor:pointer;}

（3）类样式：就是给一类HTML元素添加样式，类样式以“.”开头。(使用最多的样式)

可以同时给多个HTML元素增加class属性，class属性的值可以一样。

<div class=“news”>Welcome to Guangzhou</div>

<p class=“news”>这是一个段落</p>

<style type=“text/css”>

.news{ color:#FF0000; font-size:24px; }

</style>

（4）id选择器：给标记特定id属性的HTML元素添加样式，id选择器必须以“#”开头。（使用最少的样式）

HTML元素的id属性的值，必须唯一。

Id属性就相当于身份证号一样，不能重复；

HTML元素的id属性，一般是给JS使用；

<div id=“box”></div>

<style type=“text/css”>

#box{color:#FF0000;}

</style>