[HTML、CSS、JavaScript学习]No.02标题样式以新浪新闻页面为样例

本文链接：https://blog.csdn.net/qq_36439118/article/details/131138993

前提引入
CSS的三种引入方式
选择器
分析一下
**关于这个网站的标题部分已经结束，下一篇文章将对正文内容进行学习。**
**如果你觉得本篇文章对你的学习有些许帮助，不妨留下点赞和收藏再走，持续更新个人学习日志！！![在这里插入图片描述](https://img-blog.csdnimg.cn/37917beeda89468cb0100ad7c0b867aa.jpeg#pic_center)

前提引入

在上一篇博客中我们对新浪新闻的标题进行了模仿
原本页面：
在这里插入图片描述

其中时间、作者的文本颜色为灰色，而我们的黑色，模仿的不太彻底，这篇博客将引入CSS样式，对标签进行美化。

CSS的三种引入方式

行内样式

通过对标签进行属性赋值的方式，添加style=“要改变的属性名称=属性值”
直接在HTML标签内使用，只对单个HTML标签起效果，不推荐使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
</head>
<body>
    <!-- 改变标题颜色 -->
    <!-- 方法一：行内样式 -->
    <h1 style="color: red;">中国国防部长：请各国管好自家的军舰飞机</h1> 
</body>
</html>

外联样式

CSS代码保存在外部，HTML文件通过链接式link或者导入式@import引用这个外部样式表。

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>演示</title>
  <!-- 方法三：外联样式 -->
  <!--链接式-->
  <link type="text/css" rel="stylesheet" href="./css/news.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("./css/news.css");
  </style>
</head>
<body>
     <h1>我会变红</h1>
</body>
</html>

/*css\news.css*/
/* 将所有的h1标签的颜色都设置为红色 */
h1 {
    color: red;
}

链接式：
通过link标签链接外部样式表。link标签只能出现在head部分，可以使用多次

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

link标签有三个重要的属性：

type ：定义被链接文档的MIME类型
rel ：定义当前文档和被链接文档之间的联系
href ：定义被链接文档的位置

导入式：
通过@import引入外部样式，代码如：

<style type="text/css">
  @import url("css文件路径");
</style>

@import必须写在style之间

内嵌样式（推荐）

对当前页面所有的h1标签都有用。内嵌样式的代码均要放在head标签中，要在head标签中的style标签中写入CSS样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
    <!-- 方法二：内嵌样式 推荐-->
    <!-- 对当前页面所有的h1标签都有用 -->
    <style>
        h1{
        	/* color可以通过关键字、rgb、十六进制数三种方式来赋值 */
            /* color: red; */
            /* color: rgb(0, 255, 0); */
            color: #4D4F53;
        }
    </style>
</head>
<body>
    <h1>我会变灰色</h1>
</body>
</html>

选择器

在CSS中常用简单的有三种选择器，分别为元素选择器、ID选择器、类选择器，选择器可以在CSS中控制样式时，指定某一个或者某一类标签一起进行样式的改变。

元素选择器

/* 元素选择器 语法 */
元素 {
   样式声明;
}

/* 元素选择器 */
/* 此CSS样式针对所有的h1标签都有效，使得所有h1标签颜色变红 */
h1 {
    color: red;
}

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>我会变红</h1>
</body>
</html>

效果如下：
在这里插入图片描述

ID选择器

在使用ID选择器之前，需要对你想要改变样式的标签进行命名，也就是取个ID，可以通过属性赋值的方式，通过id属性进行ID赋值。

<!-- id赋值 -->
<h1 id="你赋值的ID"></h1>

/* ID选择器 语法 */
#ID {
   样式声明;
}

/* ID选择器 */
/* 此CSS样式针对所有的id为author的标签都有效，使得所有该标签颜色变绿 */
#author {
    color: green;
}

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
    <style>
        #author {
            color: green;
        }
    </style>
</head>
<body>
    <h1 id="author">我会变绿</h1>
</body>
</html>

效果如下：
在这里插入图片描述

类选择器

在使用ID选择器之前，需要对你想要改变样式的标签进行命名，也就是取个ID，可以通过属性赋值的方式，通过id属性进行ID赋值。

<!-- 类取名 -->
<h1 class="你取的类名"></h1>

/* 类选择器 语法 */
.类名 {
   样式声明;
}

/* 类选择器 */
/* 此CSS样式针对所有的类名为author的标签都有效，使得所有该标签颜色变蓝 */
#author {
    color: blue;
}

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>演示</title>
    <style>
        .author {
            color: blue;
        }
    </style>
</head>
<body>
    <!-- id赋值 -->
    <h1 class="author">我会变蓝</h1>
</body>
</html>

效果如下：
在这里插入图片描述

分析一下

此时我们已经学习了如何利用CSS修改标签的样式，并且学会了选择器可以指定某个标签或者某一类标签改变样式，那么该如何将时间、作者的文本颜色修改为灰色呢？

我们可以利用选择器加CSS样式，改变时间、作者的标签，但是此时这俩东西都在一个hr标签中，我们需要将其分开来处理，又要保持原本的含义，可以用span标签来包裹我们需要改变样式的标签。

【注意】span标签没有特殊含义，可以用它来编组或者达成自己想要的其他效果。

将时间和作者分别用两个span标签包裹，分别对其进行id和类选择器的使用，然后采用CSS的内嵌样式，通过两个选择器对所对应的标签进行对应的修改操作，将其颜色改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国国防部长：请各国管好自家的军舰飞机</title>
    <style>
        h1 {
            color: #4D4F53;
        }
        /* 类选择器 */
        .cls{
            color: #968D92;
        }
        /* ID选择器 */
        #author {
            color: #968D92;
            font-size: 14px;   /*设置字体大小*/
        }
    </style>
</head>
<body>
    <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png"> 新浪政务 > 正文
    <h1>中国国防部长：请各国管好自家的军舰飞机</h1>
    <hr>
    <span id="author">2023年06月04日 15:06</span> 央视网 <span class="cls">作者：央视新闻</span>
    <hr>
</body>
</html>