黑马JavaWeb企业级开发（知识清单）02——HTML实现标题：样式（CSS引入、CSS选择器、span标签）和超链接

文章目录

前言
一、标题样式1：新闻标题颜色
- 1. CSS三种引入方式
- 2. 颜色表示
- 3. javacode实现
二、标题样式2：发布时间颜色
- 1. < span >标签
- 2. CSS选择器
- - 1）元素（标签）选择器（优先级最低）
  - 2）id选择器（优先级最高）
  - 3）类选择器（优先级次高）
- 3. javacode实现
三、标题超连接< a >
四、实现源码和运行效果
总结

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）02：HTML实现标题：样式（CSS引入、CSS选择器、span标签）和超链接内容的总结，帮助需要学习Web开发的朋友温故而知新。

CSS三种引入方式
颜色的表示（英文、RGB、十六进制）
< span > 标签
CSS选择器
超链接标签< a >

一、标题样式1：新闻标题颜色

在这里插入图片描述

1. CSS三种引入方式

新浪新闻的大标题颜色是深灰色，而不是黑色，要用CSS样式控制，CSS有三种引入方式
在这里插入图片描述

行内样式（不推荐）
内嵌样式：写在style标签中（可以写在页面任何位置，但通常写在head标签中）
外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）
创建css文件夹->编写.css文件->通过link引入（要选link:css)

href后面跟css文件路径

2. 颜色表示

在这里插入图片描述

3. javacode实现

右击html文件->duplicate 可以直接复制一份html文件，重命名一下，命名为标题样式1
用css修改标题颜色（我们使用方式二：内嵌样式），用吸色工具分辨出标题的rgb或者十六进制值，直接用color把rgb的值粘贴上去就行
最后实现效果

二、标题样式2：发布时间颜色

在这里插入图片描述

1. < span >标签

标签无意义，只是用来组合一行的元素的
可以把一行的元素单独切割，方便单独修改

2. CSS选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。
选择器通用语法如下：

选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}

我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

1）元素（标签）选择器（优先级最低）

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {css样式名:css样式值；
}

2）id选择器（优先级最高）

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

#id属性值 {css样式名:css样式值；
}

3）类选择器（优先级次高）

选择器的名字前面需要加上 .
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {css样式名:css样式值；
}

3. javacode实现

用< span >标签做整合之后，利用id选择器，单独将时间指定为一个id #time
同时设置一下字体字号（单位px不能省略，否则不生效）

三、标题超连接< a >

在这里插入图片描述

要实现“新浪政务”和“央视网”链接转跳，需要用到HTML中的超链接的标签
标签
< a href=“…” target=“…”>央视网< /a >
属性
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
- _self: 默认值，在当前页面打开
- _blank: 在空白页面打开
这里的href里面放的网址指->点击新浪政务四个字后网页会往什么地方跳转，我们设置为在当前标签页打开
同理，实现央视网的超链接转跳，设置为在空白页面打开。
我们需要借助CSS样式，把超链接的下划线、颜色等改一下
用元素选择器，在< style >中对**< a >标签的样式**进行要求（不太会的方法要查阅css文档）

四、实现源码和运行效果

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性的 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=S, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻</title><style>h1 {color: rgb(77, 79, 83);}/* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {/* 把超链接字体颜色仍然设置为黑色 */color: black;/* 把下划线的效果去掉 *//* 设置文本为一个标准的文本，就默认把下划线去掉了 */text-decoration: none;}</style></head>
<body><img src="../img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<!-- 方式三：外联样式 --><h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1><hr><!-- <span></span>标签无意义，只是用来组合一行的元素的 --><!-- 可以把一行的元素单独切割，方便单独修改 --><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr></body>
</html>