# 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   | 焦點時的狀態              |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://information9527.gitbook.io/html/qian-duan-san-xiong-di/css-ji-ben-shi-yong.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.