CSS属性可以通过多种不同方式包含在HTML页面中。 HTML文档根据要包括的样式表中的信息进行格式化。
包含CSS文件的方法有很多, 如下所示：
- 外部样式表(使用HTML <link>标记)：外部CSS包含单独的CSS文件, 该文件仅包含样式属性, 借助标签属性(例如, 类, id, 标题等)。 CSS属性写在一个扩展名为.css的单独文件中, 应使用链接标记链接到HTML文档。这意味着对于每个元素, 样式只能设置一次, 并将应用于整个网页。 link标签用于将外部样式表与html网页链接。
<link rel="stylesheet" href="style.css">
- 外部样式表(使用@import规则)：规则方法必须包含在<style>标记内或样式表内。
<style> @import url(style.css); </style>
- 内部样式表(使用<style>元素)：当单个HTML文档必须具有唯一样式时, 可以使用此方法。 CSS规则集应位于头部的HTML文件中, 即CSS嵌入在HTML文件中。
<style> element { // CSS property } </style> - 内联样式内联CSS在body部分包含CSS属性, 该属性随元素附加在一起, 称为内联CSS。这种样式是在HTML标记中使用style属性指定的。它用于为单个元素应用独特的样式。
<h1 style="style property">lsbin</h1>
最佳方法：外部样式表(使用HTML <link>标记)是用于链接元素的最佳方法。在不同页面上维护和重用CSS文件既简单又高效。 <link>标记位于HTML <head>元素中。为级联样式表<type>属性指定媒体类型=" text / css", 该属性用于忽略浏览器不支持的样式表类型。
范例1：下面给出的文件包含CSS属性。该文件以.css扩展名保存。例如：geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href = "geeks.css" />
</ head >
< body >
< div class = "main" >
< div class = "GFG" >lsbin</ div >
< div id = "geeks" >A computer science portal for geeks</ p >
</ div >
</ body >
</ html >输出如下：
范例2：此示例描述了内部或嵌入式CSS。
<!DOCTYPE html>
< html >
< head >
< title >Internal CSS</ title >
< style >
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</ style >
</ head >
< body >
< div class = "main" >
< div class = "GFG" >lsbin</ div >
< div class = "geeks" >A computer science portal for geeks</ p >
</ div >
</ body >
</ html >输出如下：
范例3：此示例描述了内联CSS。
<!DOCTYPE html>
< html >
< head >
< title >Inline CSS</ title >
</ head >
< body >
< p style = "color:#009900;
font-size:50px;
font-style:italic;
text-align:center;">
lsbin</ p >
</ body >
</ html >输出如下：
@import规则：@import规则用于将一个样式表导入另一个样式表。此规则还支持媒体查询, 以便用户可以导入依赖于媒体的样式表。 @import规则必须在任何@charset声明之后在文档顶部声明。
@import的特征：
- @import规则用于将样式表导入HTML页面或其他样式表。
- @import规则还用于添加媒体查询, 因此import是与媒体相关的。
- 它总是在文档顶部声明。
语法如下：
@import url|string list-of-mediaqueries;属性值：
- url |字符串：URL或字符串表示要导入的资源的位置。网址可以是相对的, 也可以是绝对的。
- 媒体查询列表：媒体查询列表以链接URL中定义的CSS规则的应用为条件。
范例1：考虑如下所示的两个CSS文件。
- icss.css
@import url("i1css.css"); h1 { color: #00ff00; } - i1css.css
h1 { text-decoration: underline; font-size:60px; } p { padding-left: 20px; font-size: 60px; }
<!DOCTYPE html>
< html >
< head >
< title >WebPage</ title >
< link href = "icss.css" rel = "stylesheet" >
</ head >
< body >
< h1 >lsbin</ h1 >
< p >A computer science portal for geeks</ p >
</ body >
</ html >输出如下：
范例2：
<!DOCTYPE html>
< html >
< head >
< title >@import property</ title >
< style type = "text/css" >
@import url(
"https://media.lsbin.org/wp-content/uploads/imp.css");
</ style >
</ head >
< body >
< div id = "Geeks" >
< h1 >lsbin</ h1 >
< h2 >External style sheet (Using @import At-rule)</ h2 >
</ div >
</ body >
</ html >输出如下：
