H5笔记——CSS的三种样式
2017-01-21 本文已影响249人
行走的苹果哥
CSS:层叠样式表，控制
HTML标签的样式，在美化网页中起到非常重要的作用，编写的格式是键值对形式的。
CSS有三种样式：行内样式，页内样式，外部样式。
行内样式
行内样式：直接在标签的style属性中书写。我通过
div标签(容器标签)和p标签(段落标签)来展示。如下代码：
设置边框时，dashed是虚线的效果，如果要设置成实线，可以改为solid。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<div style="color: blue; font-size: 18px; background-color: aqua;">我是容器标签</div>
<p style="color: red; font-size: 18px; background-color: burlywood; border: 5px dashed green">
我是段落标签
</p>
</body>
</html>
显示效果如下：
Paste_Image.png
页内样式
页内样式是把样式放在
<head>里面，在网页的style标签中书写。如下代码：分别设置了字体颜色、字体大小、背景颜色、边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页内样式</title>
<style>
div{
color:red;
font-size: 30px;
border: 4px solid yellow;
}
p{
color: blue;
font-size: 44px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<div>我是容器标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>
显示效果如下：
Paste_Image.png
外部样式
外部样式：顾名思义是把这些标签的style属性写到外部的css文件中，在网页中引用。创建一个css文件，通过
stylesheet来引用。
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<!--引用外部的样式-->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div>我是容器标签</div>
<div>我是容器标签</div>
<p>我是段落标签</p>
<p>我是段落标签</p>
</body>
</html>
显示效果如下：
Paste_Image.png
