广州网站建设推广易尚ps网页设计案例
css层叠样式
层叠样式
（1）定义：css是一种用来表现html或xml等文件样式的计算机语言。
（2）css 不仅可以静态的修饰网页，还可以配合各种动态对网页元素进行格式化；
（3）层叠样式表有两种方法：
第一种：在head中加上style属性
代码：
<style type="text/css">
p{
color: red;
}
</style>
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
p{
color: red;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<em>a</em>
<i>i</i>
<h1>标题</h1>
</body>
</html>
第二种：通过外链方式
在css中新建一个css文件，在css文件中写内容
在使用link 通过外链方式实现
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<!--<style type="text/css">
p{
color: red;
}
</style>-->
<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<em>a</em>
<i>i</i>
<h1>标题</h1>
</body>
</html>
二、选择器
（1）id选择器 # id
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
#dcs{
color: red;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->
</head>
<body>
<p id=dcs>1</p>
<p>2</p>
<p>3</p>
<em id=dcs>a</em>
<i>i</i>
<h1>标题</h1>
</body>
</html>
（2）class选择器（.）
(3)标签选择器
比如：i 标签
（4）组合标签
（5）伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
p{
color: red;
}
p:hover{
color: blue;
cursor: pointer;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->
</head>
<body>
<p id=dcs>1</p>
<p class=a>2</p>
<p>3</p>
<em id=dcs>a</em>
<i>i</i>
<h1>标题</h1>
</body>
</html>
三、层叠样式中的内容可以多样化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠样式</title>
<style type="text/css">
p{
color: red;
font-size: 50px;
font-family: "微软雅黑" ;
font-style: italic;
font-weight: bold;
text-align: center;
cursor: pointer;
text-decoration: underline;
}
</style>
<!--<link rel="stylesheet" type="text/css" href="../css/渲染.css"/>-->
</head>
<body>
<p id=dcs>1</p>
<p class=a>2</p>
<p>3</p>
<em id=dcs>a</em>
<i>i</i>
<h1>标题</h1>
</body>
</html>