選擇器
- 組選擇器
h1,h2,h3{
color:red;
} ```
<code> 所有h1,h2,h3都是紅色</code>
- 派生選擇器
li strong {
font-style: italic;
} 然后所有 <li><strong> 斜體</strong></li>元素 字體為斜體 ```
- id 選擇器
<p> id 選擇器由＃號開頭</p>
- id 選擇器和派生選擇器
font-style: italic;
text-align: right;
margin-top: 0.5em;
} ```
- 類選擇器
```.center {text-align: center} ```
- 屬性選擇器
```[title]
{
color:red;
} ```
###CSS引用
- 外部樣式表
```<link rel="stylesheet" type="text/css" href="my.css" />
- 內部
<style type="text/css"> hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
- 嵌套
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
注意，同時引用，嵌套覆蓋內部，內部覆蓋外部
常用屬性
- 背景色
背景色 p {background-color: gray; padding: 20px;} 背景圖 body {background-image: url(/i/eg_bg_04.gif);} background-repeat:no-repeat; 是否重復，不重復 background-position 屬性設置背景圖像的起始位置。 ／／左上角是 0% 0%。右下角是 100% 100%。 ／／100px,100px 像素 ／／top left，top center，top right，center left，center center，center right，bottom left，bottom center，bottom right - 文本
縮進
text-indent: 5em; //縮進文本
text-indent: 20%; //縮進文本 ,占父類的百分比
***********************************************************
水平對齊
text-align:justify;//與left不同，這是兩端對齊，將父類填滿
***********************************************************
字間隔
word-spacing: 30px;
word-spacing: -0.5em; //設置為負，會導致文字重合。
***********************************************************
字母間隔
字母間隔是單個字母的間隔，和上面字間隔(word 單詞，w o r d 字母)的區別
letter-spacing: 30px;
letter-spacing: -0.5em; //設置為負，會導致文字重合。
***********************************************************
字符轉換
text-transform: uppercase，none，lowercase
，capitalize
***********************************************************
文本裝飾
text-decoration: none，underline，overline，line-through，blink
依次效果是：沒有，下劃線，上劃線，刪除線，閃爍blink ***********************************************************
字間隔
word-spacing: 30px;
word-spacing: -0.5em; //設置為負，會導致文字重合。
***********************************************************
-列表
例：ul{
list-style:square:inside url('/img/xxx.jpg');
}
list-style,list-style-image,list-style-position,list-style-type....
- 輪廓（Outline）
更多
end
