HTML详解连载(5)

news2024/11/23 15:39:17

HTML详解连载(5)

  • 专栏链接 [link](http://t.csdn.cn/xF0H3)
    • 下面进行专栏介绍
  • 开始喽
    • 行高:设置多行文本的间距
      • 属性名
      • 属性值
      • 行高的测量方法
    • 行高-垂直居中
      • 技巧
    • 字体族
      • 属性名
      • 属性值
      • 示例
      • 扩展
    • font 复合属性
      • 使用场景
      • 复合属性
      • 示例
      • 注意
    • 文本缩进
      • 属性名
      • 属性值
    • 文字对齐方式
      • 作用:控制内容水平对齐方式
      • 属性名:text-aline
      • 属性值
      • 水平对齐方式-图片
    • 文本修饰线
      • 属性名
      • 属性值
    • color文字颜色
      • 属性名
      • 属性值
        • 颜色表示方式
          • 颜色关键字-颜色英文单词
          • 十六进制表示法-#RRGGBB
          • 提示
    • 调试工具-谷歌浏览器
      • 作用
      • 打开调试工具
    • 复合选择器
      • 定义
      • 作用
    • 后代选择器
      • 写法
      • 子代选择器
        • 选择器写法
      • 并集选择器
        • 写法
      • 交集选择器
        • 写法
        • 注意
    • 伪类选择器
      • 鼠标悬停状态
        • 选择器
        • 强调
        • 伪类-超链接
          • 状态
          • 注意

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

在这里插入图片描述

行高:设置多行文本的间距

属性名

line-height

属性值

数字+px
数字(当前标签font-size属性值的倍数)

行高的测量方法

从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)

行高-垂直居中

技巧

行高属性值等于盒子高度属性值

字体族

属性名

font-family

属性值

字体名

示例

font-family:楷体;

扩展

font-family属性值可以写多个字体名,各个字体间用逗号隔开,执行顺序是从左到右依次查找
font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体

font 复合属性

使用场景

设置网页文字公共样式

复合属性

属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开
font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

示例

div {
 font:italic 700 30px/2 楷体;
}

注意

字号和字体值必须书写,否则font属性不生效

文本缩进

属性名

text-index

属性值

数字+px
数字+em(1em=当前标签的字号大小)

文字对齐方式

作用:控制内容水平对齐方式

属性名:text-aline

属性值

left-左对齐(默认)
center-居中
right-右对齐

水平对齐方式-图片

text-aline本质是控制内容的对齐方式,属性要设置给内容的父级

文本修饰线

属性名

text-decoration

属性值

属性属性值
none
underline下划线
line-through删除线
overline上划线

color文字颜色

属性名

color

属性值

颜色表示方式

颜色关键字-颜色英文单词

rgb表示法-rgb(r,g,b)-rgb三原色 取值0-255
rgba表示法-rgba(r,g,b,a)a表示透明度 取值0-1

十六进制表示法-#RRGGBB
提示

只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色。

调试工具-谷歌浏览器

作用

检查、调式代码;帮助程序员发现代码问题、解决问题

打开调试工具

F12
在这里插入图片描述### 调试工具细节
1.如果是错误的属性有黄色叹号
2.CSS属性的前面有多选框,如果勾选:属性生效

复合选择器

定义

由两个或多个基础选择器,通过不同的方式组合而成

作用

更准确、更高效的选择目标元素(标签)

后代选择器

选中某元素的后代元素

写法

父选择器 子选择器{CSS属性},父子选择器之间用空格隔开。

子代选择器

选中某元素的子代元素(最近的子级)

选择器写法

父选择器>子选择器{CSS属性},父子选择器之间用>隔开

并集选择器

选中多组标签设置相同的样式

写法

选择器1,选择器2,…选择器N{CSS属性},选择器之间用,隔开

交集选择器

选中同时满足多个条件的元素

写法

选择器1选择器2{CSS属性},选择器之间连携,没有任何符号

注意

如果交集选择器中由标签选择器,标签选择器必须书写在最前面

在这里插入图片描述

伪类选择器

伪类表示元素状态,选中元素的某个状态设置样式

鼠标悬停状态

选择器

hover{CSS属性}

强调

任何标签都可以设置鼠标悬停状态

伪类-超链接

状态
:link	访问前
:visited访问后
:hover	鼠标悬停
:action 点击时(激活)
注意

如果要给超链接设置以上四个状态,应按照LVHA的顺序书写

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

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

相关文章

全网最细,Python接口自动化测试-Session会话保持(实战详细)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 在接口测试的过程…

ubuntu python虚拟环境venv搭配systemd服务实战(禁用缓存下载--no-cache-dir)

文章目录 参考文章目录结构步骤安装venv查看python版本创建虚拟环境激活虚拟环境运行我们程序看缺少哪些依赖库,依次安装它们接下来我们配置python程序启动脚本,脚本中启动python程序前需先激活虚拟环境配置.service文件然后执行部署脚本,成功…

PyQt5利用QTextEdit控件输入多行文本

1、总代码 #!/usr/bin/env python # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApplication,QWidget from PyQt5 import QtCore, QtWidgetsclass Ui_Form(object):def setupUi(self, Form):Form.setObjectName("Form")Form.resize(320, 240)s…

KafkaStream:基本使用

简介: kafkaStream:提供了对存储在kafka中的数据进行流式处理和分析的功能 特点: KafkasSream提供了一个非常简单轻量的Library,它可以非常方便的嵌入到java程序中,也可以任何方式打包部署 入门案例: 1、…

在C++中怎么判断一个东西是左值还是右值

2023年8月13日&#xff0c;周日早上 #include <iostream>// 函数模板&#xff0c;根据参数类型判断是左值还是右值 template<typename T> void checkValueType(T&& arg) {if constexpr(std::is_lvalue_reference<T>())std::cout << "Expr…

运营商加速抢占云计算,5G带来更多利润,上半年躺赚近千亿

中国移动已率先公布了上半年的业绩&#xff0c;业绩显示它们正在加速抢占此前由互联网企业占据优势的云计算市场&#xff0c;不过最让它们开心的还是5G继续带动利润的高速增长&#xff0c;预计三大运营商今年上半年可以躺赚近千亿元。 中国移动无疑仍然是运营商行业的领头羊&am…

tampermonky插件安装

换了电脑&#xff0c;今天重新下载了tampermonky&#xff0c;哎&#xff0c;被自己气死的一上午。wwwww&#xff0c;最后发现最大的问题就是没有问题。 Edge能不用下载直接安装&#xff0c;但是何少 下载tampermonky&#xff0c;在谷歌程序扩展-chrome://extensions/ 添加解压…

VirtualBox 导致的系统蓝屏问题

1&#xff0c;操作系统win7,已经启动了结果蓝屏 2&#xff0c;进入操作系统的命令行模式删除virtualbox的相关目录可以启动&#xff0c;但是无法在控制面板卸载&#xff0c;只要点击卸载就会发生蓝屏 3&#xff0c;删除注册表的相关内容 4&#xff0c;导致无线网络链接受限&…

京东面试曝光:零点秒杀如何防止Redis雪崩崩溃?

大家好&#xff0c;我是你们的小米&#xff01;今天要和大家聊一个超有技术含量的话题&#xff0c;那就是如何应对零点秒杀活动下的Redis雪崩问题。在京东的面试题中&#xff0c;这个问题可是相当有挑战性哦&#xff01;废话不多说&#xff0c;咱们直接进入主题吧。 什么是雪崩…

Academic Inquiry|国外文献查找

一个失去了男子气概的人总有很多忧虑&#xff0c;这样就可以分散注意力&#xff0c;而不必为那件特别的羞耻而苦恼不堪。 ——《狂野之夜》〔美〕乔伊斯卡罗尔欧茨著 樊维娜译 许多研究者在进行研究的时候&#xff0c;都会查找对应主体的国内外引用文献&#xff0c;而大多得出的…

2023杭州十大画室排行榜丨哪家画室是你的最佳选择?

美术&#xff0c;是一种表达&#xff0c;是一种情感的释放&#xff0c;也是一种对美的追求。而在杭州的画室&#xff0c;就是这种追求的最好舞台。接下来&#xff0c;我们将一起揭晓杭州十大画室&#xff0c;一起感受艺术的独特魅力&#xff0c;一起感受那种深入骨髓的艺术冲击…

2023/08/13_______JVM(CG)垃圾回收 算法(复制算法,标记清除,标记清除压缩)

JVM GC算法 复制算法 1&#xff0c;每一次GC都会将伊甸&#xff08;Eden&#xff09;活的对象移到幸存区中&#xff1a;一旦Eden区被GC后 就会是空 只要有内容就是from区 谁空谁是to区 内存会从 伊甸->幸存区to->幸存from&#xff08;这个时候to和from交换区域&#xf…

STM32入门学习之定时器输入捕获

1.定时器的输入捕获可以用来测量脉冲宽度或者测量频率。输入捕获的原理图如下&#xff1a; 假设定时器是向上计数。在图中&#xff0c;t1~t2之间的便是我们要测量的高电平的时间(脉冲宽度)。首先&#xff0c;设置定时器为上升沿捕获&#xff0c;如此一来&#xff0c;在t1时刻可…

C语言刷题训练【第十天】

大家好&#xff0c;我是纪宁。 今天是C语言刷题训练的第十天&#xff0c;加油&#xff01; 文章目录 &#x1f386;1、求函数返回值&#xff0c;传入 -1 &#xff0c;则在64位机器上函数返回&#xff08; &#xff09;&#x1f3a4;2、读代码选结果&#xff08; &#xff09;&…

8.13树的总结(有新知识再更新)

二叉树题目几个重点&#xff1a; 1. 理解递归&#xff0c;优先掌握递归实现 递归三部曲&#xff1a;1.确定递归函数的参数和返回类型&#xff1b;2.确定终止条件 &#xff1b;3.确定递归逻辑 因为递归一层一层对我来说有点绕&#xff0c;主要感悟就是只针对某一个节点思考&…

Mac思维导图软件Xmind for Mac中文激活版

好的思维导图软件能帮助用户更好的发挥创作能力&#xff0c;XMind是一款流行的思维导图软件&#xff0c;可以帮助用户创建各种类型的思维导图和概念图。 多样化的导图类型&#xff1a;XMind提供了多种类型的导图&#xff0c;如鱼骨图、树形图、机构图等&#xff0c;可以满足不同…

计算机视觉中的特征检测和描述

一、说明 这篇文章是关于计算机视觉中特征检测和描述概念的简要理解。在其中&#xff0c;我们探讨了它们的定义、常用技术、简单的 python 实现和一些限制。 二、什么是特征检测和描述&#xff1f; 特征检测和描述是计算机视觉中的基本概念&#xff0c;在图像识别、对象跟踪和图…

Seaborn图表使用指南!

目录 介绍线图散点图直方图概率密度函数 &#xff08;PDF&#xff09;箱线图小提琴剧情配对图热图关节图地毯图 一、介绍 数据科学已成为一个突出的领域&#xff0c;近年来呈爆炸性增长。对精通从数据中获取见解并应用这些见解来解决现实世界问题的数据科学家的需求从未增加。…