前言
- CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表
一、內(nèi)聯(lián)式引入
- 用法： 在元素上直接通過style屬性進(jìn)行設(shè)置css樣式設(shè)置
- 示例：
<h1 style="color:red;">style屬性的應(yīng)用</h1>
<p style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>
- 實際在寫頁面時不提倡使用，在測試的時候可以使用。
- 例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>CSS樣式引入方式一：內(nèi)聯(lián)式</title>
</head>
<body>
<!--使用行內(nèi)樣式引入CSS-->
<h1 style="color:red;font-size: 50px;">pytohon9999</h1>
<p style="color:red;font-size:30px;">我是p標(biāo)簽</p>
</body>
</html>
二、內(nèi)部樣式表引入
- 用法： 在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中
- 例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>CSS樣式引入方式二：內(nèi)部樣式表</title>
<!-- 使用內(nèi)部樣式表引入CSS-->
<style type="text/css">
div {
background: rosybrown;
color: red;
width: 20px;
height: 60px;
}
</style>
</head>
<body>
<div>pytohon9999</div>
</body>
</html>
三、外聯(lián)式引入
-
用法：
-
CSS代碼保存在擴(kuò)展名為.css的樣式表中
-
HTML文件引用擴(kuò)展名為.css的樣式表
-
有兩種方式：鏈接式、導(dǎo)入式
-
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>CSS樣式引入方式三：外聯(lián)式引入</title>
<!-- 鏈接式：推薦使用 -->
<link rel="stylesheet" href="./css文件的樣式.css">
<!-- 導(dǎo)入式 -->
<style type="text/css">
@import url("./css文件.css");
</style>
</head>
<body>
<div>pytohon9999</div>
</body>
</html>
四、CSS 中的優(yōu)先級
- 1. 樣式的優(yōu)先級
- 行內(nèi)樣式 > 內(nèi)部樣式 > 外部樣式(后兩者是就近原則)
- 1.1 行內(nèi)樣式 和 **內(nèi)部樣式 **比較優(yōu)先級：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行內(nèi)樣式和內(nèi)部樣式表的優(yōu)先級</title>
<!--內(nèi)部部樣式表-->
<style type="text/css">
div {
background: green;
}
</style>
</head>
<body>
<!--行內(nèi)樣式-->
<div style="background: red;font-size: 50px;color: aliceblue;">pytohon9999</div>
</html>
- 瀏覽器運行效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-703700.html
- 結(jié)論：行內(nèi)樣式優(yōu)先級高于內(nèi)部樣式表
- 1.2 **內(nèi)部樣式表 和 外部樣式 **比較優(yōu)先級：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>內(nèi)部樣式表 和 外部樣式的優(yōu)先級</title>
<!-- 外聯(lián)式之：鏈接式 -->
<link rel="stylesheet" href="./css文件.css">
<!--內(nèi)部部樣式表-->
<style type="text/css">
div {
background: green;
}
</style>
</head>
<body>
<!--行內(nèi)樣式-->
<div>pytohon9999</div>
</html>
- 瀏覽器運行效果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-703700.html
- 結(jié)論：行內(nèi)樣式優(yōu)先級高于內(nèi)部樣式表
到了這里，關(guān)于01_前端css編寫的三種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
