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上面瀏覽器