最新消息:

CSS简介

CSS 晴朗 437浏览

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>

 

转载请注明:晴朗网络 » CSS简介