CSS层叠样式表的使用：
cSS层叠样式表
(1) css样式简介
CSS的英文全称是“cascading style sheets”中文译为“层叠样式表”也可译为“串联式样式表”，利用他们可以对网页中的文本进行精确的格式化控制。Css 样式可以控制多个范围内的文本格式，而且还可以控制多个文档中的文本格式。网页制作时采用css技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精准的控制。
(2)定义css样式表：
(a)用HTML的标签定义
使用HTML的style组件,并将这个元素放置于head部分，包含网页的样式规则，每个规则包含一个选择符(通常是一个HTML元素)，如body、p等。
样式规则如下:
选择符{属性:值}
单一的选择符使用多个样式时应用( ;)隔开。如
选择符{属性1:值1;属性2:值2;属性3:值3}
综合实例（定义H1/H2的颜色和字体大小)：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>这是标题</title>
<style type="text/css">
h1{color:#ff6600;font-size:26px;}
h2{color:#3333ff;font-size:24px}
</style>
</head>
<body>
<h1>这是H1</h1>
<h2>这是H2</h2>
</body>
</html>
(b) Class类别选择符
Class属性用于指定元素属于何种样式的类，类表示方法( .类名称 )例如样式表可以加入title类:
.title{color : red ; font-size : 24px ;}
在这个例子中 titie类可以用于任何body元素，因为它在样式表中没有与任何HTML元素与之关联。
综合实例:
<html>
<head>
<title>类别选择符的使用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.title{color:#ff6600;font-size:35px;}
.neirong{color:#3333ff;font-size:24px;background:#ccc;}
</style>
</head>
<body >
<h1 class="title">这是一个标题,他现在运用了.title类的样式</h1>
<h2 class="neirong">这是一个内容，他现在运用了.neirong类的样式</h2>
</body>
</html>
(c)Id选择符
和class一样用于指定元素属于何种样式的类，类表示方法（#类名称)例如样式表可以加入 weiyi类:
#weiyi{(color : red ; font-size : 24px ; }
在这个例子中weiyi类可以用于body元素中的一个元素。
在同一个层中可以同时运用class和id，但是id 的级别要高于class，也就是说他们同时包含了一个样式时，将会优先选择id中的样式进行显示。
综合实例:
<html>
<head>
<title>定义型列表标记演示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.title{color:#ff6600;font-size:35px;height:50px;float:left}
.neirong{color:#3333ff;font-size:24px;background:#ccc;height:50px;floatleft;}
#tit{floatright;}
</style>
</head>
<body >
<h1 class="title" id="tit">这是一个标题,他现在运用了#tit id的样式</h1>
<h2 class="neirong">这是一个内容，他现在运用了.neirong类的样式</h2>
</body>
</html>
| 
发表于 2022-4-26 17:39:35
楼主
