css概述：
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
css的四種引入方式：
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用
<div style="color: deeppink; background-color: greenyellow">hello man</div>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color:deeppink; font-size: 20px; background-color: yellowgreen; } a{ text-decoration: none; } </style> </head>
3 鏈接式
將一個.css文件引入到HTML文件中
<link rel="stylesheet" href="day102.css">
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中
<style> @import "day102.css"; </style>
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的四種引入方式"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="60;https://www.baidu.com"> <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7"> <title>Title</title> <style> /*p{*/ /* color:deeppink;*/ /* font-size: 20px;*/ /* background-color: yellowgreen;*/ /*}*/ /*a{*/ /* text-decoration: none;*/ /*}*/ </style> <!--第二種css引入方式(嵌入式)：style標簽通過css代碼所寫標簽名字來找--> <!--<link rel="stylesheet" href="day102.css">--> <!--第三種css引入方式(鏈接式)，通過引入css文件，css文件直接寫css代碼就可以了；通過html語言規范引用過來，屬於html范疇；link引入次數不限，可引入多個文件；先准備css，准備好后再加載html--> <style> @import "day102.css"; </style> <!--第四種css引入方式(導入式)，通過css規范引用過來的；導入式文件數量有限制；先加載html后加載css，所以有時候看到有些html沒有被css渲染--> </head> <body> <!--<div style="color: deeppink; background-color: greenyellow">hello man</div>--> <!--style屬性值就是css代碼，css代碼規范就是一組組鍵值對；這是第一種css引入方式(行內式)，以后盡量不要這么使用--> <span>hello span</span><br> <a href="https://www.baidu.com" target="_blank">我可以點擊</a> <p>hello p</p> <p>hello p2</p> </body> </html>
p{ color:greenyellow; background-color: red; } a{ text-decoration: none; }
css文件里的代碼，直接寫css代碼即可