Day.01.02 css之id選擇器簡單案例

<!DOCTYPE html>
<html>
 <head>
 <meta  charset="utf-8">
  <title> 類選擇器 </title>
    <style type="text/css">
    /*基本語法
    .類選擇器名稱{
        css屬性:屬性值;
    }
    補充:選擇器名稱命名規范:小寫字母 .xxx-yyy{}
    */
        .span-news{
            font-weight:bold;/*粗體*/
            background-color:pink;
            color:black;
        }
    /*基本語法
    #id選擇器名稱{
        css屬性:屬性值;
    }
    */
        #span-news-tb{
            font-weight:bold;
            font-size:25px;/*字體大小*/
            background-color:pink;
        }
    </style>
 </head>
 <body>
    <span class="span-news">標題一</span>
    <span class="span-news">標題一</span>
    <span class="span-news">標題一</span>
    <span class="span-news">標題一</span>
    <span class="span-news">標題一</span>
    <hr>
    <span id="span-news-tb">這是一個冬天</span>
 </body>
</html>

細節:1.一般來說id選擇器提供給某一個html元素來使用
2.當我們不確定,有多個html元素來使用該樣式時,使用類選擇器

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,814評論 1贊 92
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具（例如配置管理，服務發現，斷路器，智...
    卡卡羅2017閱讀 134,991評論 19贊 139
  • CSS基礎 本文包括CSS基礎知識選擇器（重要！！！）繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,201評論 0贊 40
  • 考完英語期末考后，跟朋友說，看一部電影之后去圖書館，最后點開的卻是《奶酪陷阱》。其實，這部劇我在上一個寒假就追完了...
    白菜是世界上最好的菜閱讀 352評論 0贊 0
  • 我不知，我該如何敲下這些文字。 一秒鐘前，我甚至不知道，我會寫關于“你”。 我對你說，我好心疼自己。 你回我，傻嘉...
    心途行者噶瑪梅朵閱讀 407評論 2贊 3