JavaWeb-基础样式-03-优快云博客

Case

依然是以模仿这个网页实例为例

需要将发布时间设置为灰色。

需要设置没有语义的标签 span 用于组合行内元素。

<span>2023年03月02日 21:50 </span> <span>央视网 </span>

CSS三种选择器：

/* 元素选择器 */
        span {
            color: #888 ;
        }

/* 类选择器 */
        .cls {
            color:#888  ;
        }

<span class="cls">2023年03月02日 21:50 </span> <span>央视网 </span>

/* id选择器 */
        #time{
            color:#888;
        }

<span class="cls" id="time">2023年03月02日 21:50 </span> <span>央视网 </span>

三种选择器的优先级是：

id选择器 > 类选择器 > 元素选择器

如果三者同时存在仅表现id选择器的设置内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈： 中国底气 新思想夯实大国粮仓</title>
    <!-- 内嵌样式 -->
     <style>
        /* 选择器 */
        h1 {
            /* color: red; */
            /* color: rgb(255, 0, 0); */
            /* 十六进制 */
            color: #4D4F53;
            /* 那么如何能够准确的找到某个颜色对应的参数呢，可以使用谷歌的拾词器LIVE COLOR PICKER */
        }
        /* 元素选择器 */
        /* span {
            color: #888 ;
        } */
        /* 类选择器 */
        /* .cls {
            color:#888  ;
        } */
        /* id选择器 */
        #time{
            color:#888;
            font-size: 13px;
        }
     </style>

     <!-- 外联样式：将内嵌的style内容直接定义到CSS的外部文件中 -->
      <!-- <link rel="stylesheet" href="./CSS/news.css"> -->
</head>
<body>
    <img src="./img\news_logo.png" > 新浪政务> 正文
    
    <!-- <h1 style="color: black;">焦点访谈： 中国底气 新思想夯实大国粮仓</h1> -->
    <h1>焦点访谈： 中国底气 新思想夯实大国粮仓</h1>
    <hr>
    <span class="cls" id="time">2023年03月02日 21:50 </span> <span>央视网 </span>
    <hr>
</body>
</html>