蓝桥杯Web应用开发-CSS 基础语法4(字体属性、链接中的伪类、列表样式)

专栏持续更新中

字体属性

字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示:

属 性可 取 值描 述
fontfont-style、font-variant、font-weight、font-size(或 line-height)、font-family在一个声明中设置所有的字体属性
font-family字体名称、inherit设置字体类型
font-sizexx-small、x-small、small、medium(默认)、large、x-large、xx-large smaller、largerlength、%、inherit
font-weightnormal(默认)、bold、bolder、lighter、inherit 100、200…900(400=normal,700=bold)设置字体粗细
font-stylenormal、italic、oblique、inherit设置字体风格

新建一个 index13.html 文件,在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>h3 {font-size: 20px;font-family: 隶书;line-height: 28px;}span {font: italic 16px 华文彩云;}</style></head><body><h3>Web 前端技术</h3><span>在当今社会中,Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用系统,就必须掌握 Web 前端技术。</span></body>
</html>

在这里插入图片描述

链接中的伪类

何为伪类呢?

在 CSS 中,伪类是添加到选择器的关键字,给指定元素设置一些特殊状态,我们以 : 开头。

链接有以下四个状态。这四种状态也称之为超链接的伪类。
a:link 普通的、未被访问的链接。
a:hover 鼠标指针位于链接的上方。
a:active 链接被单击的时刻。
a:visited 用户已访问的链接。

针对超链接的上述四种状态设置样式规则,能起到美化超链接的作用。例如,为了完成下对超链接的显示要求,编写的 CSS 样式代码如下。

状态颜色背景色文本修饰
未访问蓝色无下画线
鼠标移到黑色#DDDDDD下画线
正单击红色#AAAAAA删除线
已访问绿色无下画线

对于超链接的伪类,我们推荐的使用顺序是::link - :visited - :hover - :active。

新建一个 index14.html 文件,在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {text-decoration: none;}a:link {color: red;}a:visited {color: blue;}a:hover {color: green;}a:active {color: yellow;}</style></head><body><a href="#">这是一个链接</a></body>
</html>

在这里插入图片描述

我们为什么要按照这样的顺序来使用呢?🤔 我们调整一下这几个伪类的顺序,看看会发生什么。
我们把 a:link 放到最后,效果如下。
在这里插入图片描述

从图中我们可以发现其中的样式属性都被覆盖了。

我们把 a:hover 放到 a:active 之后,效果如下。
在这里插入图片描述

从图中我们可以发现 a:active 的属性样式被覆盖了。
通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。

列表样式

属 性可 取 值描 述
list-stylelist-style-type、list-style-position、list-style-image在一个声明中设置所有的列表属性
list-style-imageURL、none设置图像为列表项标志
list-style-positioninside、outside、inherit设置列表中列表项标志的位置
list-style-typedisc(默认)、circle、square、decimal 等设置列表项标志的类型

list-style-position 是 CSS 属性,用于控制列表项标记(如圆点或数字)的位置,特别是在列表项的文本流中的位置。这个属性有两个可能的值:

  1. outside: 列表项标记位于列表项框之外,与文本不在同一流中。这是默认值。
  2. inside: 列表项标记位于列表项框内,与文本在同一流中。
    ul { list-style-position: outside; /* 列表项标记位于列表项框外 / } ol { list-style-position: inside; / 列表项标记位于列表项框内 */ }
    在默认情况下(outside),列表项标记会在文本的外部,与文本不在同一行。如果设置为 inside,列表项标记将放在列表项框内,与文本在同一行。选择使用哪个取决于你的设计和排版需求。
    使用 list-style-position 属性可以影响整个列表的外观。这在设计有关列表的网页时可以很有用,特别是当你想要调整列表项标记的位置以及文本的对齐方式时。

新建一个 index15.html 文件,在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul {list-style-position: inside;list-style-image: url(list.gif);}</style></head><body><ul><li></li></ul></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/670868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《计算机网络简易速速上手小册》第5章:无线网络和移动通信(2024 最新版)

5.1 WLAN的工作原理 - 揭秘无线局域网络的魔法 5.1.1 基础知识 无线局域网络&#xff08;WLAN&#xff09;允许设备通过无线方式连接到一个局部区域网络&#xff0c;主要基于IEEE 802.11标准&#xff0c;俗称Wi-Fi。WLAN的核心是无线路由器&#xff0c;它不仅充当着网络中各设…

【多模态】27、Vary | 通过扩充图像词汇来提升多模态模型在细粒度感知任务(OCR等)上的效果

论文&#xff1a;Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models 代码&#xff1a;https://github.com/Ucas-HaoranWei/Vary 出处&#xff1a;旷视 时间&#xff1a;2023.12 一、背景 当前流行的大型视觉-语言模型 Large Vision-Language Mode…

挑战杯 python+opencv+深度学习实现二维码识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; pythonopencv深度学习实现二维码识别 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 该项目较为新颖&…

探索Gin框架:Golang Gin框架请求参数的获取

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 前言 我们在专栏的前面几篇文章内讲解了Gin框架的路由配置&#xff0c;服务启动等内容。 专栏地址&…

后台弱口令问题

网站的运营管理不能缺少后台管理系统的支持&#xff0c;若能成功进入后台管理系 统&#xff0c;就意味着在Web渗透测试中成功了一大半。进行非授权登录有很多种方法&#xff0c; 这里主要介绍的是弱口令问题&#xff0c;破解弱口令是进入系统的最常见也是最有效的方 法&#xf…

如何在 Java 中通过 Map.Entry 访问 Map 的元素

我们使用 Map.Entry 来遍历 ConcurrentHashMap 的代码片段如下&#xff1a; for (Map.Entry<String, String> entry : map.entrySet()) { System.out.println("Key: " entry.getKey() ", Value: " entry.getValue()); } 在 Map.java 中&…

RabbitMQ_00000

MQ的相关概念 RabbitMQ官网地址&#xff1a;https://www.rabbitmq.com RabbitMQ API地址&#xff1a;https://rabbitmq.github.io/rabbitmq-java-client/api/current/ 什么是MQ&#xff1f; MQ(message queue)本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中…

web前后端小坑记录

游戏服务器过年这段时间忙完了&#xff0c;好久没看web了&#xff0c;重温一下。发现竟然没有文章记录这些修BUG的过程&#xff0c;记录一下。 目录 如何处理F5刷新&#xff1f; 如何处理F5刷新&#xff1f; 后端应该发现路由不存在&#xff0c;直接返回打包好的index.html就…

2024美赛数学建模C题完整论文教学(含十几个处理后数据表格及python代码)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了数学建模美赛本次C题目Momentum in Tennis完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 C论文共49页&…

第6节、T型加减速转动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本章介绍步进电机T型加减速的控制方法&#xff0c;分三个小节&#xff0c;本小节主要内容为该控制方法的推导与计算。目前各平台对该控制方法介绍的文章目前较多&#xff0c;但部分关键参数并未给出推导…

Linux【docker 设置阿里源】

文章目录 一、查看本地docker的镜像配置二、配置阿里镜像三、检查配置 一、查看本地docker的镜像配置 docker info一般没有配置过是不会出现Registry字段的 二、配置阿里镜像 直接执行下面代码即可&#xff0c;安装1.10.0以上版本的Docker客户端都会有/etc/docker 1.建立配置…

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-8.16再使用微信3.9.7.29

在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-8.16再使用微信3.9.7.29 《在openSUSE-Leap-15.5-DVD-x86_64中使用deepin-wine-6.0.0.62再使用微信3.9.5》 https://blog.csdn.net/weixin_42145772/article/details/135074804?spm1001.2014.3001.5501 按照上面文章的方法…

计算机设计大赛 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …

飞天使-k8s知识点16-kubernetes实操1-pod

文章目录 深入Pod 创建Pod&#xff1a;配置文件详解写个pod的yaml 文件深入Pod 探针&#xff1a;探针技术详解 深入Pod 创建Pod&#xff1a;配置文件详解 资源清单参考链接&#xff1a;https://juejin.cn/post/6844904078909128712写个pod的yaml 文件 apiVersion: v1 kind: P…

Android Compose 一个音视频APP——Magic Music Player

Magic Music APP Magic Music APP Magic Music APP概述效果预览-视频资源功能预览Library歌曲播放效果预览歌曲播放依赖注入设置播放源播放进度上一首&下一首UI响应 歌词歌词解析解析成行逐行解析 视频播放AndroidView引入Exoplayer自定义Exoplayer样式横竖屏切换 歌曲多任…

Unix五种I/O模型(阻塞、非阻塞、多路复用、信号驱动、异步)

文章目录 概要一、I/O基础二、阻塞式I/O三、非阻塞式I/O三、I/O多路复用四、信号驱动I/O五、异步I/O六、小结 概要 在工作中&#xff0c;经常使用Nginx、Redis等开源组件&#xff0c;常提到其高性能的原因是网络I/O的实现是基于epoll&#xff08;多路复用&#xff09;。这次呢…

护眼灯的色温标准是什么?护眼灯参数标准介绍

选择合适的护眼台灯不仅能提升家居的品质&#xff0c;还能为我们的生活增添一份温馨与舒适。不过有些色温调节不当不仅不能达到很好的学习效率&#xff0c;还容易打瞌睡&#xff0c;甚至伤眼睛的情况也有可能出现&#xff0c;那么什么色温有什么标准呢&#xff1f; 一、合适的…

互联网加竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

大型语言模型(LLM)的优势、劣势和风险

最近关于大型语言模型的奇迹&#xff08;&#xff09;已经说了很多LLMs。这些荣誉大多是当之无愧的。让 ChatGPT 描述广义相对论&#xff0c;你会得到一个非常好&#xff08;且准确&#xff09;的答案。然而&#xff0c;归根结底&#xff0c;ChatGPT 仍然是一个盲目执行其指令集…

进程控制(Linux)

进程控制 一、进程创建1. 再识fork2. 写时拷贝 二、进程终止前言——查看进程退出码1. 退出情况正常运行&#xff0c;结果不正确异常退出 2. 退出码strerror和errno系统中设置的错误码信息perror异常信息 3. 退出方法exit和_exit 三、进程等待1. 解决等待的三个问题2. 系统调用…