HTML應用CSS
css是層疊樣式表的縮寫,從html4開始使用,是爲了更好地渲染HTML元素
css主要通過三種方式添加到HTML中:
- 內聯樣式: 在HTML標籤中使用style屬性
- 內部樣式表: 在HTML文檔頭部使用style元素來調用css
- 外部引用: 使用外部css文件
內聯樣式
當特殊樣式應用到個別元素時,可以在元素單獨使用style屬性
//這個例子定義了該段落的字體顏色,背景顏色,左邊距的屬性
<p style="color: blue;background-color:gray;margin-left: 10px">this is a paragraph..</p>
//這個例子演示字體與對齊
<h1 style="font-family: Ani;font-size: 40px">A Title</h1>
<p style="text-align: center">使用text-align的屬性替代center標籤</p>
內部樣式表
當特殊樣式應用到整個HTML文件時,可以使用內部樣式表
<head>
<style type="text/css">
body{background-color: blueviolet}
p{color: aqua;font-size: 12px;text-align: center}
</style>
</head>
外部樣式表
當特殊樣式應用到很多頁面時,可以使用外部樣式表,這個時候需要創建.css文件,然後在HTML頭部使用link標籤導入
<html>
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑/xx.css">
</head>
</html>
css選擇器
css選擇器可以理解爲以什麼樣的方式選擇某一部分空間進行css渲染
主要有三類
構造選擇器
構造選擇器針對網頁中的一類標籤疊加樣式,一般形式爲:
<style type="text/css">
標籤名 { 美化屬性}
</style>
這樣本文件中所使用的所有該標籤都按照設定的css樣式進行渲染
類選擇器
類選擇器針對某一類中的個別元素
<style type="text/css">
.非關鍵字類名{ 美化屬性}
</style>
類選擇器是自己命名的,但是不能夠使用關鍵字,類選擇器以點開頭,調用方式爲:
<li class="對應非關鍵字類名"/>
id選擇器
id選擇器類似類選擇器,其實符號是井號#而不是點 ,一般與div配合應用於區域
<style type="text/css">
#id名{ 美化屬性}
</style>
<!--調用方式-->
<div id="id名">....</div>