CSS样式的三种常用类型-网站建设-菜鸟之家

首页网站建设正文

CSS样式的三种常用类型

2018-03-28 581

CSS样式类型常用的分为三种：内联式、嵌入式、外链式。

CSS样式的三种常用类型

1、内联式（行内样式表）

通过标签的 style 属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ...">内容</标签名>

示例：

<body style="background-color: #1A8A0B;color:#FFFFFF;">
<p style="font-size: 30px;">哈喽，要保持微笑哦。</p>
</body>

优点：十分灵活，书写方便，权重高。

缺点：只能操作某一个标签，没有实现样式和结构分离。

2、嵌入式（内部样式表）

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。语法格式为：

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #1A8A0B;
color:#FFFFFF;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>哈喽，要保持微笑哦。</p>
</body>
</html>

优点：可以通过一条语句操作多个标签或类。

缺点：只能控制一个页面，没有彻底实现样式和结构分离。

3、外链式（外部样式表）

将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。语法格式为：

href定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。rel定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。type="text/css"通知浏览器要加载一个css文件。

示例：

首先我们要创建一个css文件，比如：style.css，然后在里面就能直接写代码。

body{
background-color: #1A8A0B;
color:#FFFFFF;
}
p{
font-size: 30px;
}

其次我们在html文件的head头部标签中引入这个css文件。

优点：一个单独的CSS文件，多个HTML文件可以引用一个CSS样式表文件。HTML代码和CSS代码分离，修改方便。

4、CSS的优先级

内联式优先级最高；

其它两种按照加载顺序，写在后面的优先级更高。

标签：
建站
设计

发表评论：取消回复

上一篇>>站长应知的五个健康生活细节

=========================================

下一篇>>关于医保电子凭证