Css 基本使用

CSS的構成與規則

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

選取器 { 屬性 : 值;}

說明

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

選取器

Class 選取器

範例

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

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

ID 選取器

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

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

後代選取器

  <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>

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

屬性選取器

 <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>

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

擬態選取器

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

  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;
  }

Previous嵌入第三方服務 Next使用方式 Background

Last updated 4 years ago

選取器

Class 選取器

範例

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

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

ID 選取器

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

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

後代選取器

  <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>

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

屬性選取器

 <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>

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

擬態選取器

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

  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;
  }

CSS的構成與規則

說明

選取器

Class 選取器

ID 選取器

後代 選取器

屬性選取器

擬態選取器

CSS的構成與規則

說明

選取器

Class 選取器

ID 選取器

後代 選取器

屬性選取器

擬態選取器

後代選取器

後代選取器