1.7_CSS基礎
阿新 • • 發佈：2020-12-04
層疊樣式表 (Cascading Style Sheets)
CSS產生緣由
HTML 標籤原本被設計為用於定義文件內容。通過使用 <h1>、<p>、<table> 這樣的標籤，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的資訊。同時文件佈局由瀏覽器來完成，而不使用任何的格式化標籤。 由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（比如字型標籤和顏色屬性）新增到 HTML 規範中，建立文件內容清晰地獨立於文件表現層的站點變得越來越困難。
CSS作用
樣式通常儲存在外部的
CSS語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告。
selector{declaration1; declaration2; ...declarationN }
- 選擇器通常是您需要改變樣式的 HTML 元素。
- 每條宣告由一個屬性和一個值組成。
- 屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector{property:value}
例子：
將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為
h1{color:red; font-size:14px;}
Css外部樣式引用
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css">
</head>
更多css內容請參考
http://www.w3school.com.cn/css/index.asp
示例：
<html> <hand> <title>我要自學網</title> <!--引入Css樣式--> <link rel="stylesheet" type="text/css"href="CssTest.css"> </hand> <!--設定style樣式--> <body style="background-color:#C1FFC1"><!--顏色可參照RGB顏色表--> <!---註釋--> <!--圖片標籤--> <img src="D:\學習\selenium自動化測試\課程素材\sc1\程式碼\Logo.png" width=200 high="100"> <!--標題標籤--> <h1>自學網口號</h1> <h2>自學網口號</h2> <!--段落標籤--> <!--<br/>是換行標籤--> <!--style屬性，字型，字型顏色，字型大小，文字對齊方式，多個屬性用分號;間隔--> <p style="font-family:隸書;color:red;font-size:30;text-align:center">自學成才，<br/>快速成功</p> <p>增加收入，改變命運</p> <p>這是一個神奇的網站，你值得擁有</p> <!--超連結標籤--> <a href="http://www.baidu.com">百度一下</a> <div style="background-color:yellow;height:200;width:200"> <p>這是一個div區域，分割槽，節</p> <a href="http://www.w3school.com.cn/tags/index.asp">更多標籤</a> <a href="http://www.w3school.com.cn/tags/html_ref_standardattributes.asp">更多屬性</a> </div> </body> </html>
CssTest.css程式碼：
p {color:red;font-size:40}/*針對段落的樣式*/ h1 {color:green}/*針對標題1的樣式*/