Css 基本使用

CSS的構成與規則

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

選取器 { 屬性 : 值;}

說明

1. 選取器 : 使用在html 中的地方，ex : class 、 id 、object

2. 屬性 : 設定哪個屬性，ex： 背景、大小、寬度

3. 值 : 設定什麼值，ex : #ddd ， px，1s

選取器

Class 選取器

範例

HTML

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

CSS

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

ID 選取器

HTML

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

CSS

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

後代 選取器

HTML

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

CSS

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

屬性選取器

Html

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

CSS

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

擬態選取器

Html

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

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

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