CSS4種引入方式:行內,內聯式,外部式,導入式


CSS引入方式-行內式

通過 style這個標簽屬性,將css鍵值對直接寫入標簽內

1 <p style="width: 100px;height: 100px;background: red;"></p>
2 <!--注釋:這段代碼描述的是一個寬高為100px,背景為紅色的容器-->

css引入方式-內嵌式(嵌入式)

使用style標簽將css屬性名和屬性值引入到html頁面中,通常style標簽放置在head標簽中。為什么css樣式要放置在head標簽中呢,因為代碼從上到下執行,如果先加載結構,那么用戶看到的就將是干巴巴的內容,而沒有通過美化,而先加載樣式后加載結構,就相當於孩子出生就是穿着衣服的!

1 <head>
2     <style type="text/css">
3         p{
4             width: 100px;height: 100px;background: red;
5         }
6     </style>
7 </head>

以上代碼描述的也是一個寬高為100px,背景為紅色的容器,只不過是通過內嵌式引入的!

css引入方式之外鏈式

通過link標簽將獨立的css文件引入到html頁面中

1 <link rel="stylesheet" type="text/css" href="./style.css">

rel="stylesheet"描述了當前頁面與href所指定的文檔的關系,即說明的是href鏈接的文檔是一個新式表,type="text/css"是指定MINME類型,也就是css文檔。href="./style.css"規定被鏈接文檔的位置

css引入方式之導入式

1 <style type="text/css">
2     @import url("style.css");
3 </style>

通過@import url引入一個獨立的CSS文件,url("style.css")規定被鏈接文檔的位置


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM