標籤：lang margin pdf blink [] property 分組 空格 引入
第4章.CSSCSS簡介Cascading Style Sheet 層疊樣式表：定義頁面中的表現樣式
history：
CSS1(1996)--CSS2(1998)--著手CSS3草案(拆分成很多模組)(2001)--CSS2.1修訂(2007)--全面推廣on-going（部分屬性已經實現）
如何引入CSS？
外部樣式表：頁面的樣式多
<head>
<link rel="stylesheet" href="base.css">
</head>
內部樣式表：頁面的樣式少
<head>
<style>...</style>
</head>
內嵌樣式：不利於維護，不建議
<p style="......">...</p>
文法：
selector { // 選取器
property1: value; // 屬性名稱：屬性值=屬性聲明
property2: value;
...
}
注釋 /*...*/ （不支援//）
瀏覽器私人屬性：
為了區分，會在之前加上特有的首碼 i.e.
chrome/safari：-webkit-
firefox：-moz-
IE：-ms-
opera：-o-
為了相容不同瀏覽器，會將私人屬性寫在之前，把標準寫在最後
i.e.
屬性值文法：
margin : [<length>|<percentage>|auto] {1,4}
基本元素：<length><percentage>auto；組合符號：[] | ；數量符號{1,4}
基本元素：
關鍵字：auto, solid, bold...
類型：
基本類型：<length><percentage><color>...
其他類型：基本類型的組合：<‘padding-width‘>(padding-width和屬性同名，需要加引號)、<color-stop>
符號：/ , 用於分割屬性值
inherit/ initial：每個屬性都可以取這兩個值
組合符號：
空格：必須出現，且順序也必須相同
i.e. <‘font-size‘><‘font-family‘> --合法值：12px arial
&&：必須出現（順序不要求）
i.e. <length>&&<color> --合法值：green 2px/ 1em blue
||：至少出現一個
underline||overline||line-through||blink --合法值：blink underline
|：只能出現一個
<color> | transparent -- 合法值：orange/ transparent
[]：分組作用，括弧內看做一個整體
bold [thin || <length>] -- 合法值：bold thin/ blod 2em
數量符號：
無：出現一次
+：出現一次或多次
?：出現0次或一次
{}：出現次數的範圍(included)
*：出現0次一次或多次
#：出現1次或多次，中間必須要用,隔開
以上為普通規則的文法，還有一種叫@規則：
@標識符...;
@標識符... {}
i.e.
@media: 裝置符合該媒體查詢條件，裡面的樣式才會生效
@keyframes：描述css動畫的中間步驟
@font-face：引入web的字型
等等
選取器
簡單選取器
標籤選取器：p{......} ：p即為p標籤
類別選取器：在標籤內加入class屬性和對應值（註：class的值可以是多個），.class_value {......}
className: naming convention 字母、數字、中劃線、底線；必須以字母開頭，case sensitive
id選取器：在標籤內加入id屬性和對應值
與類別選取器類似，區別：#id_value {......}；unique id；
萬用字元選取器：* 選擇頁面內所有的元素
屬性選取器：
選中具有某個屬性的元素 [attribute] {......}
i.e. case 修改密碼
<form action=""> <div> <input disabled type="text" value="張三"> // 使用者無法修改，css可使用disabled屬性選取器 </div> <div> <input type="password" placeholder="密碼"> </div></form>
[disabled] {...}
選中某個屬性為某值的元素 [attribute=value] {......}
i.e. [type=button] {......}
#id即為該類屬性選取器的特例
選中某個屬性帶有某值的元素 [attribute~=value] {......}
i.e. [class~=sports] {......}
.class即為該類屬性選取器的特例
選中某個屬性以某值開頭的元素 [attribute|=value] {......}
i.e. [lang |= en] {......} /*lang屬性值為en或值以en開頭的元素*/
選中某個屬性以某值開頭的元素 [attribute^=value] {......}
i.e. [href ^= "#"] {......} /*href屬性值以#開頭的元素*/ （若屬性值是符號或裡麵包含了空格，需要用到引號）
選中某個屬性以某值結尾的元素 [attribute$=value] {......}
i.e. [href $= pdf] {......} /*href屬性值以pdf結尾的元素*/
選中某個屬性包含了某個屬性值的元素 [attribute*=value] {......}
i.e. [href *= "lady.163.com"] {......}
虛擬元素選取器
組合選取器
前端開發工程師 - 01.頁面製作 - 第4章.CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
