什么是 CSS?
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常存儲在 CSS 文件中
- 多個樣式定義可層疊為一
css如何引入
- 外部樣式表(推薦)
- 通過
<link>引入css - 通過
@import引入樣式，放入 css 中
- 通過
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
- 內部樣式表
- 將 CSS 放在頁面的
<style>元素中。
- 將 CSS 放在頁面的
<style>
h1 { background: orange; }
</style>
- 內嵌樣式(不推薦)
<p style="background: orange; font-size: 24px;">CSS 很 ??<p>
css語法
selector{
property1:value;
property2:value;
....
}
選擇器
屬性聲明 = 屬性名:屬性值
注釋 /* */
瀏覽器私有屬性
-
chromesafari- -weikit -
-
firefox- -moz-
-
IE- -ms-
-
opera- -o-
為了兼容不同的瀏覽器,我們需要用到這些私有屬性
.pic{
-weikit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
屬性值語法
例:
margin:[<length>|<percentage>|auto]{1,4}
基本元素 組合符號 數量符號
組合符號
- 組合符號 -
空格
-
<'font-size'><'font-family'>空格隔開的兩個基本屬性- 必須出現,順序不能錯
- 合法值: 12px arial
- 不合法值: 2em 或者 arial 14px
- 組合符號 -
&&
-
<length>&&<color>&&連接的基本屬性- 必須出現但順序沒有關系
- 合法值:green 2px 或者 10px red
- 組合符號 -
||
-
underline||overline||line-through||bink- 至少出現一個,順序無關
- 合法值: underline 或者 overline underline
- 組合符號 -
|
-
<color>|transparent- 只能出現一個
- 合法值 orange 或者 transparent
- 組合符號 -
[]
-
bold[thin||<length>]- 主要是分組的作用, []里可以看做一個整體,再和外面屬性計算
- 合法值: bold thin 或者 bold 2em
數量符號
- 數量符號 -
無
-
<length>- 基本元素只能出現一次
- 合法值:1px
- 數量符號 -
+
-
<color-stop>[,<color-stop>]+- +加號可以出現一次或者多次
- 合法值:#fff , red或者blue, green 50%,gray
- 數量符號 -
?
-
insert?&&<color>-
?可以出現也可以不出現 - 合法值:red 或者insert blue
-
- 數量符號 -
{}
-
<length>{2,4}- 最少出現幾次,最多出現幾次,上例說最少出現2次,最多4次
- 數量符號 -
*
-
<time>[.<time>]*- *表示可以出現0次,1次或者多次
- 數量符號 -
#
-
<time>#- 出現一次或多次,中間用逗號隔開
- 合法值: 2s,4s
屬性值例子
padding-top:<length>|<percentage>
padding-top:1px;
padding-top:1em 5%; (錯)
border-width:[<length> |thick|medium|thin]{1,4}
border-width:2px;
border-width:2px small; (錯)
box-shadow:[inset? &&[<length>{2,4}&&<dolor>?]]#|none
box-shadow:3px 3px rgb(50%,50%,50%),red 0 0 4px inset;
box-shadow:inset 2px 4px,2px blue; (錯)
@規則語法
- @ 標識符 xxx;
- @ 標識符 xxx {};
