文章目录
- 前言
- 一、标题样式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>
总结
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）02：HTML实现标题：样式（CSS引入、选择器、span标签）和超链接内容的总结，帮助需要学习Web开发的朋友温故而知新。
下一篇文章将会总结正文排版和页面布局的知识点。