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

Cosmos复调

于 2024-07-21 19:59:57 发布

阅读量308

点赞数 13

分类专栏：黑马JavaWeb企业级开发全流程（笔记梳理）文章标签： html css 前端 java 笔记软件工程开发语言

本文链接：https://blog.csdn.net/apple_68589597/article/details/140591537

版权

黑马JavaWeb企业级开发全流程（笔记梳理）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

前言
一、标题样式1：新闻标题颜色
二、标题样式2：发布时间颜色
三、标题超连接< 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开发的朋友温故而知新。

下一篇文章将会总结正文排版和页面布局的知识点。

Cosmos复调

关注

13
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
黑马JavaWeb企业级开发（知识清单）02——HTML实现标题：样式（CSS引入、CSS选择器、span标签）和超链接

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

扫一扫