CSS樣式（一）- 基本語法
css樣式 - 基本語法
css又叫層疊樣式表
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告
選擇器: 通常是您需要改變樣式的HTML元素
例如：
h1 {width:300px;height:100px;color:red; font-size:14px;}
此時，在通用模板中應該加入css部分
在原有的模板的<!--js/css-->下面加入
<style type="text/css">
*{margin:0;padding:0;}
</style>
之後的標準模板就變成了
<!doctype html> <html> <head> <!--聲明當前頁面的編碼集：中文編碼（GBK/GB2312）,國際編碼（utf-8）--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--聲明當前頁面的三要素--> <title>HTML國際化標準模板 - TCH</title> <meta name="Keywords" content="關鍵詞,關鍵詞,關鍵詞"> <meta name="description" content=""> <!--css/js--> <style type="text/css"> *{margin:0;padding:0;} </style> </head> <body> </body> </html>
css語法的具體形式用法如下：
<head> <!--css:層疊樣式表，一件美麗的外衣一樣--> <style type="text/css"> *{margin:0;padding:0} <!--為了相容各種瀏覽器的貼合邊界解決方案（實際專案中使用組合樣式，效率比*高）--> .tch{width:300px;height:100px;backgroud:#ffcc00} <!--此處的選擇器要與div裡的class對應選擇器用本身也可以div class也可以--> </style> </head> <body> <!--div:盒子，層，容器--> <!--一般不用id整個頁面的只能用一次，style的優先順序比較高也不常用--> <div class="" id="" style=""></div> <div class="tch"></div> </body>
在百度的標準裡，0.3s可以開啟的網頁才可以上線，所以，能省的程式碼一定要優化
6進位制顏色值可以使用簡寫縮寫格式 比如#339900寫為#390，這樣節約位元組，或者使用英文單詞red等
大多數樣式表包含不止一條規則，而大多數規則包含不止一個宣告，如： body{font-size:12px;font-family:"微軟雅黑";color:#666;}，基於大資料分析，這種可以作為字型預設格式，是令使用者看著最舒服的格式。 樣式在實際開發中要橫排寫，會節省位元組比如換行符等 html裡html標籤和css樣式不區分大小寫比如 width可以寫成WIDTH,但是一般不用大寫，以小寫作為標準 修改的會加註釋比如 /* jdf-1.0.0/ adsad.css Date:2012-01-01 11:23 */
css樣式語法 - 選擇器分組
對選擇器進行分組，用逗號將需要分組的選擇器分開
h1,h2,h3,h4,h5,h6 {
color : green;
}
多個選擇器共用一個屬性
css樣式語法 - css註釋
css樣式裡的註釋和html body裡的註釋格式不同，形式：/*註釋內容*/，在企業級規範裡，一般都會用註釋寫明程式碼段的作用、標識，例如：
/*t_header S*/
.t_header{font-size:15px;}
/*t_header E*/
S表示開始（start），E表示結束（end）
css樣式語法 - 類選擇器（class）
在css中類選擇器以一個點號顯示
.center{text-align:center;}
<p class="center">測試標籤</p>
這樣此p標籤就遵循類選擇器center的原則，文字都居中對齊
css樣式語法 - id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式
id 選擇器以 "#" 來定義
例： 兩個 id 選擇器
<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>
注意： id 屬性只能在每個 HTML 文件中出現一次。
id 選擇器和派生選擇器
在現代佈局中，id 選擇器常常用於建立派生選擇器
css樣式語法 - 從外部引入樣式
從外部引入樣式分為兩種辦法（注：一定要寫在<header>標籤裡）：
Link樣式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式： <style type="text/css">@import url("css.css");></style>
css樣式語法 - 行內樣式
行內樣式形式：
<!--以style="css樣式"-->
<div style="color:red;font-size:12px;"></div>
<div style="color:red;font-size:12px;"></div>
<h1 class="tch" style="font-size:40px;font-family:"微軟雅黑";>adsad</h1> 這裡的class不管用，因為style的優先順序高，會把class的屬性覆蓋掉，id的優先順序要比style高
樣式語法的應用
1.當在網頁裡看到文字的時候，首先要想到文字的預設值
body{font-size:12px;font-family:"微軟雅黑";color:#666;}
基於大資料分析出來的使用者看著最舒適的字型格式設定
2.外部引用樣式
<link style="text/css" rel="stylesheet" href="css.css"><link> 也可以 <style type="text/css">@import url("css.css");></style>
3.css樣式 - background
任何元素都可以 body{ /*背景顏色*/ backgroud-color:#ffcc00; /*背景顏色，簡寫形式，一般企業級開發都是用該種方法*/ backgroud:red ; /*裡面雙引號單引號沒引號都可以，但是在刷個引號內部就要用單引號了，一般都用相對路徑*/ backgroud-image:url("images/1.gif"); /*背景圖片簡寫形式，一般企業級開發都會使用此方式*/ backgroud:url(images/mv.jpg); /*預設值是repeapt,設定不重複在平鋪的時候就不會因為鋪不滿而重複填充*/ backgroud-repeat: no-repeat; /*橫向平鋪*/ backgroud-repeat: repeat-x; /*縱向平鋪*/ backgroud-repeat: repeat-y; /*背景圖片的位置*/ backgroud-postion: top left; backgroud-postion: top center; backgroud-postion: top right;
backgroud-postion: center left; backgroud-postion: center center; backgroud-postion: center right;
backgroud-postion: bottom left; backgroud-postion: bottom center; backgroud-postion: bottom right;
/*背景圖片的百分比形式 : 水平百分比，垂直百分比*/ backgroud-postion:80%,40%; /*背景圖片位置的數值形式,水平，垂直，單位畫素*/ backgroud-postion: 20px 100px;
/*backgroud-size 真實專案中不會放到body裡，body的高度和寬度是根據瀏覽器所定的*/ body{backgroud:url("images/bg.jpg"); no-repeat; backgroud-size:cover}
/*背景影象企業級應用方式，有時會拆開寫，比如公共元素*/ backgroud:url("images/mv.jpg") no-repeat 200px 100px; }