<pre name="code" class="html">Css 简洁
css 选择器
标签选择器
类选择器
ID选择器
Css 层叠样式表 Cascade Stytle Sheet
css 就像网页的化妆品,让你可以随意的把相同的内容转换成
不一样的外观,把就是给相似的结构以不同的样式。
css+div 是当前最流行的前台美工技术,也是web标准推荐的。
使用样式表css,让p标签进行统一变色
<!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>Document</title>
<style type="text/css">
p{
color:red;
}
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</cenetr>
</body>
</html>
p{
color:red;
}
这样就对所有的p标签的问题,统一使用红颜色。
标签选择器:
p{font-size:2em;}
类选择器: .开头
.info{background:#ff0;}
<!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>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
font-size:2em;
}
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</p>
<!--<font color="red"> 白日依山尽,</font><br>-->
<li> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li> 欲穷千里目,</li>
<li> 更上一层楼。</li>
</cenetr>
</body>
</html>
<!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>Document</title>
<style type="text/css">
p{
color:red;
font-size:2em;
}
li{
color:blue;
list-style:none;
font-size:2em;
}
.first{
color:red;
}
</style>
</head>
<body>
<center>
<h1>Css样式表</h1>
<hr>
<p>
<!--<font color="red"> 白日依山尽,</font><br>-->
白日依山尽,<br>
黄河入海流,<br>
欲穷千里目,<br>
更上一层楼。<br>
</p>
<!--<font color="red"> 白日依山尽,</font><br>-->
<li class=first> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li> 欲穷千里目,</li>
<li> 更上一层楼。</li>
</cenetr>
</body>
</html>
ID选择器:
#third{
color:green;
}
<!--<font color="red"> 白日依山尽,</font><br>-->
<li class=first> 白日依山尽,</li>
<li> 黄河入海流,</li>
<li id="third"> 欲穷千里目,</li>
<li> 更上一层楼。</li>
组合选择器: