HTML详解连载(5)

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.mfbz.cn/a/72575.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

挑战Open AI!!!马斯克宣布成立xAI.

北京时间7月13日凌晨,马斯克在Twitter上宣布:“xAI正式成立,去了解现实。”马斯克表示,推出xAI的原因是想要“了解宇宙的真实本质”。Ghat GPT横空出世已有半年,国内外“百模大战”愈演愈烈,AI大模型的现状…

Ajax-AJAX请求的不同发送方式

🥔:你一定能成为想要成为的人 发送AJAX请求不同方式 发送AJAX请求不同方式1、jQuery发送AJAX请求2、axios发送AJAX请求(重点)3、fetch发送AJAX请求 发送AJAX请求不同方式 1、jQuery发送AJAX请求 首先需要jquery的js文件&#xf…

集合Collection-List-ArrayList学习

一、集合 集合是数据容器。相较于数组集合具有以下几个特点: 数组一旦创建,长度不可改变。集合的长度会自动扩容。集合具有很多数组没有的功能函数API数组元素的存储特点单一,不同的集合有不同的存储特点。 1. Collection顶层接口 Collect…

用python来爬取某鱼的商品信息(2/2)

目录 上一篇文章 本章内容 设置浏览器为运行结束后不关闭(可选) 定位到搜索框的xpath地址 执行动作 获取cookie 保存为json文件 修改cookie的sameSite值并且导入cookie 导入cookie(出错) 导入cookie(修改后&…

Jmeter(五) - 从入门到精通 - 创建网络计划实战和创建高级Web测试计划(详解教程)

1.简介 上一篇中已经将其的理论知识介绍了一下,这一篇就带着大家一步一步的把上一篇介绍的理论知识实践一下,然后再说一下如何创建高级web测试计划。 2.网络计划实战 通过上一篇的学习,将其分类为: (1)不需…

python -- 函数闭包

1. LEGB规则 L: local 是局部作用域 E: Enclosed 是嵌套函数的外层函数作用域 G: Global 全局作用域 B:Build-In 内置作用域 变量的使用权重:局部变量 > 外层作用域变量 > 全局变量 > 内置变量 下面代码执行后,x变量的值分别为多少&#xff1…

KafkaStream:Springboot中集成

1、在kafka-demo中创建配置类 配置kafka参数 package com.heima.kafkademo.config;import lombok.Data; import org.apache.kafka.common.serialization.Serdes; import org.apache.kafka.streams.StreamsConfig; import org.springframework.boot.context.properties.Configu…

怎么做Tik Tok海外娱乐公会呢?新加坡市场怎么样?

一、为什么选择TikTok直播 1. 海外市场潜力巨大 • 自2016年始,多家直播平台陆续拓展至东南亚、中东、俄罗斯、日韩、欧美、拉美等地区。 • 海外市场作为直播发展新蓝海,2021年直播行业整申请cmxyci体规模达百亿美元,并维持高速增长。 &a…

【数据结构系列】链表

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

异常(下)Java常见异常,异常的使用原则

文章目录 前言一、Java常见异常 1.常见异常2.实例展示二、异常的使用原则总结 前言 该文介绍了Java的一些常见异常,并给出对应的例子进行解释。介绍异常的使用原则,即创建,抛出异常的编程规范。 一、Java常见异常 前要:Java API中…

sklearn机器学习库(一)sklearn中的决策树

sklearn机器学习库(一)sklearn中的决策树 sklearn中决策树的类都在”tree“这个模块之下。 tree.DecisionTreeClassifier分类树tree.DecisionTreeRegressor回归树tree.export_graphviz将生成的决策树导出为DOT格式,画图专用tree.export_text以文字形式输出树tree.…

Jmeter(六) - 从入门到精通 - 建立数据库测试计划(详解教程)

1.简介 在实际工作中,我们经常会听到数据库的性能和稳定性等等,这些有时候也需要测试工程师去评估和测试,因此这篇文章主要介绍了jmeter连接和创建数据库测试计划的过程,在文中通过示例和代码非常详细地介绍给大家,希望对各位小伙…

基于YOLOv8+PyQt5开发的行人过马路危险行为检测告警系统(附数据集和源码下载)

系列文章目录 文章目录 系列文章目录前言欢迎来到我的博客!我很高兴能与大家分享关于基于YOLOv8的行人过马路危险行为检测告警系统的内容。 一、系统特点1. 采用最新最优秀的目标检测算法YOLOv82. 系统分别基于PyQt5开发了两种GUI图形界面,供大家学习使用…

consul安装启动流程

普通软件包安装 首先cd /opt ,将安装包放到该目录下 下载consul安装包 进入consul官网找到自己开发平台对应的安装包下载 https://www.consul.io/downloads.html 或使用命令 wget https://releases.hashicorp.com/consul/1.6.2/consul_1.6.2_linux_amd64.zip (如果…

解决lldb调试时可能出现的personality set failed: Function not implemented

最近在尝试使用Visual Studio 2022远程连接Linux进行C/C的开发,由于CentOS风波不断,所以现在的开发基本上都是使用ubuntu了,但是目前VS2022有一些BUG,就是远程调试时,如果目标系统是ubuntu则会出现启动调试器很慢的问题…

js设置css变量控制页面一行展示指定个数的元素

前置知识: CSS变量之var()函数的应用——动态修改样式 & root的使用 flex相关知识 场景: 动态设置给父元素内子元素设置每行排列几个 通过 document.body.style.setProperty(--itemNum, 5)设置样式变量,然后通过给父元素设置display: f…

PyQt5的信号与槽函数

目录 一、介绍 二、一个信号连接一个槽 三、一个信号连接多个槽 四、多个信号连接一个槽 五、自定义信号 1、创建自定义信号 2、让自定义信号携带值 一、介绍 在下图中 (1)widget就是PyQt中的控件对象。其实就是组件(2)…

uniapp 用 hbuilderx下载 uview

uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场 1.uniapp官网下载资源 2按下载 3.官网安装文档 要按 这个红色圈错了 然后看他的配置步骤 第四easycom 就可以 不用配了

Linux MQTT智能家居(温度,湿度,环境监测,摄像头等界面布局设置)

文章目录 前言一、温度湿度曲线布局二、环境监测界面布局三、摄像头界面布局总结 前言 本篇文章来完成另外三个界面的布局设置。 这里会使用到 feiyangqingyun的一些控件库。 一、温度湿度曲线布局 TempHumtiy.h: #ifndef TEMPHUMTIY_H #define TEMPHUMTIY_H#include <…

Java-运算符和控制语句(上)(基于c语言的补充)

算术运算符 关于求余 不管分子&#xff0c;分母是正还是负&#xff0c;对于分母&#xff0c;直接取正&#xff1b;对于分子若有负号&#xff0c;则先提取出来&#xff1b;剩下两个正的分子分母运算&#xff1b;最后&#xff0c;若刚才的分子有负号&#xff0c;对最后的结果添加…