選擇器

• 組選擇器

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）

更多

CSS

end