核心提示：CSS : 层叠样式表1,作用 : 美化Html页面2,css的3种写法a,行间样式表p style = width:200px; height : 100px; border:1px solid r...
CSS : 层叠样式表
1,作用 : 美化Html页面
2,css的3种写法
a,行间样式表
<p style = "width:200px; height : 100px; border:1px solid red;"> 123 </p>
b,内部样式表
<html>
<head>
<title> html学习 </title>
<style type="text/css">
#aaa {
width: 400px;
height: 300px;
border: 2px solid blue;
}
</style>
</head>
<body>
<p id="aaa">
456
</p>
</body>
</html>
c,外部样式表 样式代码专门放到一个文件中,由html网页调用
css文件
{
width: 200px;
height: 150px;
border: 3px solid yellow;
background: pink;
}
html文件：
<p id="bbb">789</p>
3，选择器
标签选择器
id选择器
类选择器
<html>
<head>
<title>css_Study</title>
<style type="text/css">
p {
font-size: 30px;
color: red;
}
p {
width: 200px;
height: 30px;
border: 1px solid red
}
#aaa {
color: green
}
.cls {
text-decoration: underline
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<a id="aaa">这是一个a标签</a>
<br/>
<p class="cls">这是一个p标签</p>
</body>
</html>
