> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong.md).

# Css 基本使用

## CSS的構成與規則

![](/files/-MJb50PYIcetT7f4oNf1)

CSS(Cascading Style Sheets) 使用方式如下

{% hint style="info" %}
選取器 { 屬性 :  值;}
{% endhint %}

### 說明

1. 選取器 : 使用在html 中的地方，ex : class 、 id 、object
2. 屬性 : 設定哪個屬性，ex： 背景、大小、寬度
3. 值 : 設定什麼值，ex  :  #ddd ， px，1s 
4.

## 選取器

### Class 選取器

範例

{% tabs %}
{% tab title="HTML" %}

```markup
    <div class="content">
      <h1 class="title-1">H1</h1>
      <h2 class="title-2">H2</h2>
      <h3 class="title-3">H3</h3>
    </div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.title-1{
    background: yellow;
}
.title-2{
    background: #ddd;
}
.title-3{
    background:red;
}

```

{% endtab %}
{% endtabs %}

### ID 選取器

{% tabs %}
{% tab title="HTML" %}

```markup
   <div class="content">
      <h1 id="Title-1">H1</h1>
      <h2 id="Title-2">H2</h2>
      <h3 id="Title-3">H3</h3>
    </div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.title-1{
    background: yellow;
}
.title-2{
    background: #ddd;
}
.title-3{
    background:red;
}

```

{% endtab %}
{% endtabs %}

### 後代 選取器

{% tabs %}
{% tab title="HTML" %}

```markup
  <ul class="list1">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>
  <ul class="list2">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>
  <ul class="list3">
    <li>list-1</li>
    <li>list-2</li>
    <li>list-3</li>
  </ul>
```

{% endtab %}

{% tab title="CSS" %}

```css
  .list1 li{
    list-style: decimal;
  }
  .list2 li{
    list-style: square;
  }
  .list3 li{
    list-style: lower-alpha;
  }
```

{% endtab %}
{% endtabs %}

### 屬性選取器

{% tabs %}
{% tab title="Html" %}

```markup
 <div class="img-inner">
   <img class="img-resp" src="images/reason1"  >
   <img class="img-resp" src="images/reason2" alt="" >
   <img class="img-resp" src="images/reason3"  >
 </div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.img-resp{
  width: 25%;
  display: block;
  padding: 10px;
  margin: 10px;
  border: solid 1px #ddd;
}
.img-resp[alt]{
  border-color:#000;
}
```

{% endtab %}
{% endtabs %}

### 擬態選取器

{% tabs %}
{% tab title="Html" %}

```markup
 <a href="javascript:;">link</a>
```

{% endtab %}

{% tab title="CSS" %}

```css
  a{
    display: block;
    width: 500px;
    padding: 1em;
    margin-left: auto;
    margin-right: auto;
    border: 5px;
  }

  a:link{
    color:#fff;
    background-color: #269aff;
  }

  a:visited{
    color:#fff;
    background-color: #027;
  }

  a:hover{
    color:#a0b9ff;
    background-color: #4c69ba;
  }

  a:active{
    color:#fff;
    background-color: #3b55a0;
  }

  a:focus{
    color:#000;
    background-color: #ccc;
  }
```

{% endtab %}
{% endtabs %}

| 動作       | 內容                  |
| -------- | ------------------- |
| :link    | 未被點選連結樣式，或是一般載入時的連結 |
| :visited | 已經被點閱過的連結           |
| :hover   | 游標滑入超連結文字時呈現效果      |
| :active  | 在超連結文字上並按下不放時候呈現的效果 |
| :focus   | 焦點時的狀態              |