iT邦幫忙

2023 iThome 鐵人賽

DAY 4
0
自我挑戰組

線上商店串接tappay系列 第 4

class selector

  • 分享至 

  • xImage
  •  

使用class selector可以切割CSS和HTML標籤,將網頁的結構和外觀分開管理。

首先要新增.css和.html兩種檔案,並且在html的head標籤中引入

<link rel="stylesheet"type="text/css"href="css-selector.css"/>

Css的部分被寫成像物件的形式,易於修改和重複利用,也方便閱讀

/*標籤名稱選擇器*/
 body{background-color:#cccccc}
 /*id選擇器*/
 #title-1{text-decoration-line:line-through;}
/*class選擇器*/
.title {
 margin-bottom:10px;
 font-weight:bold;
 font-size:24px
 }
 .content{
     width:400px;
     padding:10px;
     border:1px dashed blue;
     color:#666666
 }
 .keyword{color:green}

在html的程式碼中,則是寫這裡要用哪個class

 <body>
       <div id="title-1"class= "title">文章第一段落的標題</div>
       <div class= "content">
        今天的<span class="keyword">天氣</span>真是不錯
       </div>

        <div class= "title">文章第二段落的標題</div>
        <div class= "content">
            今天的<span class="keyword">心情</span>真是不錯
        </div>
    </body>

另外也可以套用兩個標籤,就會疊加兩種css效果,像是這裡

 <div id="title-1"class= "title">文章第一段落的標題</div>

參考資料

彭彭的課程-CSS Selector 選擇器


上一篇
CSS練習
下一篇
網頁切版練習
系列文
線上商店串接tappay30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言