CSS的书写格式
CSS有3种书写形式
行内样式:(内联样式)直接在标签的style属性中书写
<body style="color: red;">
<div style="background-color: aqua; color: deeppink; font-size: 34px">我是一段文字</div>
<p style="font-size: 50px; color: #34ff76; border: 2px plum dashed">我是一段文字</p>
页内样式:在本网页的style标签中书写
<html>
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<style>
div {
font-size: 20px;
background-color: rgba(58, 53, 255, 0.16);
border-color: royalblue;
border: dashed 2px;
width: 46%;
}
p {
font-size: 30px;
background-color: rgba(255, 51, 47, 0.82);
border: solid 3px ;
}
</style>
</head>
<body>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
</body>
</html>
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
testcss.css
div {
font-size: 20px;
background-color: rgba(58, 53, 255, 0.16);
border-color: royalblue;
border: double 1px;
width: 46%;
}
p {
font-size: 30px;
background-color: rgba(255, 51, 47, 0.82);
border: solid 3px ;
}
test.html
<html>
<head>
<meta charset="UTF-8">
<title>CSS Test</title>
<link href="testcss.css" rel="stylesheet">
</head>
<body>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<div>我是一段文字</div><br>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
<p>我是一段文字</p>
</body>
</html>