css概述
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網頁數據的表現，可以使網頁的表現與數據內容分離。
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3 鏈接式
將一個.css文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
注意：
導入式會在整個網頁裝載完后再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之后，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然后再顯示有樣式的網頁，這是鏈接式的優點。
用pycharm新建import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: #cc3399">hello p</p>
<div>hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
修改import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="color: #cc3399;background-color:cadetblue">hello p</p>
<div>hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
修改import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
background-color: gray;
}
</style>
</head>
<body>
<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->
<div>hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
用pycharm新建css.css文件
div{
color: rebeccapurple;
background-color: yellow;
}
修改import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->
<div>hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
修改import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="css.css">
</head>
<body>
<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->
<div style="background-color: black">hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
修改import_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css.css";
</style>
<!-- <link type="text/css" rel="stylesheet" href="css.css">-->
</head>
<body>
<!--<p style="color: #cc3399;background-color:cadetblue">hello p</p>-->
<div>hello div</div>
</body>
</html>
點擊pycharm上面瀏覽器
