CSS(Cascading Style Sheets) 使用方式如下
選取器 : 使用在html 中的地方，ex : class 、 id 、object
屬性 : 設定哪個屬性，ex： 背景、大小、寬度
值 : 設定什麼值，ex : #ddd ， px，1s
範例
動作
內容
:link
未被點選連結樣式，或是一般載入時的連結
:visited
已經被點閱過的連結
:hover
游標滑入超連結文字時呈現效果
:active
在超連結文字上並按下不放時候呈現的效果
:focus
焦點時的狀態
Last updated
Was this helpful?
Was this helpful?
<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;
}
<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;
}