css样式简介

最新推荐文章于 2022-06-17 12:49:15 发布

我是大头鸟

最新推荐文章于 2022-06-17 12:49:15 发布

阅读量837

点赞数 1

分类专栏： CSS 文章标签： CSS样式

本文链接：https://blog.csdn.net/datouniao1/article/details/47700145

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!-- CSS样式:
当读到一个样式的时候，浏览器会根据它来格式化HTML文档
如何插入样式表:
我们应该知道什么是样式表，样式表有哪几类，我们用来格式化HTML文档的
CSS文件就是样式表，样式表可以分为三类:
外部样式表
内部样式表
内联样式表
那么这三类样式表分别是什么意思，我们通过几个例子来为大家解析一下:
首先是外部样式表：
当我们的样式想应用于很多的界面的时候，外部样式表是我们理想的选择，使用外部样式表我们可以通过改变一个文件来改变多个界面的外观，
怎样来使用外部的样式表：
我们在想要使用该外部的样式表的网页中使用<link>标签连接到外部的样式表。
html文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="external.css">
<title></title>
</head>
<body id="b">
<p id="para">我是一个段落</p>
</body>
</html>
css文件:
#para
{
font-size: 7;
color: red;
}
#b
{
background-color: green;
}
我们要知道是外部样式表是可以在任何的文本编辑器中进行编辑的，文件是不能包含任何
html表签,也就是不能用<p>,<h>之类的，但是元素是可以用的，比如p，h，样式表应该用.css扩展名进行保存
内部的样式表:
我们刚才看的哪一个是外部的样式表，在HTML文档的外部进行的定义，可以想到内部的
样式表应该在HTML文档的内部进行定义，正如你想的那样，内部样式表在HTML文档中是
通过在<head>之间通过一个<style>进行定义的，也就是使用<style>标签在文档的头部定义内部样式，下面我我们通过一个例子来解释一个内部样式表的定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.bo
{
background-color: green;
}
.para
{
color: red;
font-size：7;
/*字体最大设置为7号字体*/
}

</style>
<title></title>
</head>

<body class="bo">
<p class="para">我是段落</p>
</body>
</html>
最后还有一个样式是内联样式：
由于主要是表现和内容混杂在一起，内联样式会损坏失掉样式表中的
许多的优势，请慎用这种办法，比如说样式仅仅是需要一个元素上应用
一次可以使用内联样式，你需要的是相关的标签内使用style这个属性
比如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="red">
<p style="color:siena;margin-left:20px">This is a paragraph</p>
</body>
</html>

要知道的是bgcolor表示的是body的属性，但是background并不是他的属性

有的时候可能出现多重样式，比如我们引入了外部的样式，但是又在这个文档中的定义了内部的样式，这个时候两种样式会有重叠

也就是说比如我们在外部的样式中对p定义了三个属性:

color:green;

text-align:left;

font-size:7;

}

而且我们在内部的样式中一样是定义了两种样式，也是针对p这个元素:

text-laign:right;

font-szie:30pt;

}这个时候我们在HTML文档中定义段落时候，会是怎样的段落:

是这样的: