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.rhkb.cn/news/90313.html

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

相关文章

YOLO v8目标跟踪详细解读(二)

上一篇,结合代码,我们详细的介绍了YOLOV8目标跟踪的Pipeline。大家应该对跟踪的流程有了大致的了解,下面我们将对跟踪中出现的卡尔曼滤波进行解读。 1.卡尔曼滤波器介绍 卡尔曼滤波(kalman Filtering)是一种利用线性…

Python学习 -- 常用函数与实例详解

在Python编程中,数据转换是一项关键任务,它允许我们在不同数据类型之间自由流动,从而提高代码的灵活性和效率。本篇博客将深入探讨常用的数据转换函数,并通过实际案例为你展示如何巧妙地在不同数据类型之间转换。 数据类型转换函…

分布式监控平台——Zabbix

市场上常用的监控软件: 传统运维:zabbix、 Nagios 一、zabbix概述 作为一个运维,需要会使用监控系统查看服务器状态以及网站流量指标,利用监控系统的数据去了解上线发布的结果,和网站的健康状态。 利用一个优秀的监…

【数学建模】--因子分析模型

因子分析有斯皮尔曼在1904年首次提出,其在某种程度上可以被看成时主成分分析的推广和扩展。 因子分析法通过研究变量间的相关稀疏矩阵,把这些变量间错综复杂的关系归结成少数几个综合因子,由于归结出的因子个数少于原始变量的个数&#xff0c…

【第三讲-三维空间刚体运动】

旋转矩阵 点、向量、坐标系 坐标系分为左左手系和右手系 下面讨论有关向量的运算: 内积 外积: 外积的结果是一个向量,方向垂直于这两个向量,大小为

sift-1M数据集的读取及ES插入数据

sift是检查ann近邻召回率的标准数据集,ann可以选择faiss,milvus等库或者方法;sift数据分为query和base,以及label(groundtruth)数据。本文采用sift-1M进行解读,且看如下: 1、sift-1m数据集 官方链接地址:Evaluation of Approximate nearest neighbors: large datase…

brew+nginx配置静态文件服务器

背景 一下子闲下来了,了解的我的人都知道我闲不下来。于是,我在思考COS之后,决定自己整一个本地的OSS,实现静态文件的访问。那么,首屈一指的就是我很熟的nginx。也算是个小复习吧,复习一下nginx代理静态文…

通过网关访问微服务,一次正常,一次不正常 (nacos配置的永久实例却未启动导致)

微服务直接访问没问题,通过网关访问,就一次正常访问,一次401错误,交替正常和出错 负载均衡试了 路由配置检查了 最后发现nacos下竟然有2个order服务实例,我明明只开启了一个呀 原来之前的8080端口微服务还残留&…

spring按条件注入@Condition及springboot对其的扩展

概述 spring的ioc极大的方便了日常开发,但随着业务的迭代。配置的一些参数在某些情况下需要按条件注入。 比如原先定义的db公共模块下,相关的配置和工具类只是基于mysql的。但是后续有模块需要使用mongo/es等其他数据库,又想继续使用db公共…

基于ipad协议的gewe框架进行微信群组管理(二)

友情链接 geweapi.com 点击访问即可。 获取群组详情 小提示: 该接口可以一次查询20个群组查询出来的信息是不带公告的 请求URL: http://域名地址/api/group/detail 请求方式: POST 请求头: Content-Type:applica…

HTTP和HTTPS协议

目录 一、HTTP和HTTPS区别🌻 二、有了https还有使用http场景吗🍊 三、https协议的工作原理💥 四、https协议的优点和缺点🍞 一、HTTP和HTTPS区别🌻 HTTP(Hypertext Transfer Protocol)和HTT…

Android AOSP源码编译——AOSP整编(二)

切换到源码目录下执行下面命令 1、初始化环境 . build/envsetup.sh //清除缓存 make clobber2、选择编译目标 lunchAOSP 预制了很多 Product。这里为了简单我们先不用真机,而是选择模拟器的方式,对于 x86_64 模拟器,我们选择的是 aosp_x86…

3.1 Qt样式选择器

本期内容 3.1 样式选择器 3.1.1 Universal Selector (通用选择器) 3.1.2 Type Selector (类型选择器) 3.1.3 Property Selector (属性选择器) 3.1.4 Class Selector (类选择器) 3.1.5 ID Selector (ID选择器) 3.1.6 Descendant Selector (后裔选择器) 3.1.7 Chil…

微信小程序data-item设置获取不到数据的问题

微信小程序data-item设置获取不到数据的问题 简单说明: 在微信小程序中,通过列表渲染使用wx:for根据数组中的每一项重复渲染组件。同时使用bindtap给每一项绑定点击事件clickItem,再通过data-item绑定数据。 **问题:**通过data-i…

windows程序基础

一、windows程序基础 1. Windows程序的特点 1)用户界面统一、友好 2)支持多任务:允许用户同时运行多个应用程序(窗口) 3)独立于设备的图形操作 使用图形设备接口( GDI, Graphics Device Interface )屏蔽了不同硬件设备的差异&#…

Elasticsearch - 闲聊ElasticSearch中的分页

文章目录 概述分页方案from-size内部执行过程【Query】阶段【fetch】阶段潜在问题注意事项 深度分页Scroll (Scroll遍历数据)Scroll ScanSliced ScrollSearch After基于pit机制的search after 小结 概述 ElasticSearch是一款强大的搜索引擎,…

Spring kafka源码分析——消息是如何消费的

文章目录 概要端点注册创建监听容器启动监听容器消息拉取与消费小结 概要 本文主要从Spring Kafka的源码来分析,消费端消费流程;从spring容器启动到消息被拉取下来,再到执行客户端自定义的消费逻辑,大致概括为以下4个部分&#x…

flutter-第三方组件

卡片折叠 stacked_card_carousel 扫一扫组件 qr_code_scanner 权限处理组件 permission_handler 生成二维码组件 pretty_qr_code 角标组件 badges 动画组件 animations app更新 app_installer 带缓存的图片组件 cached_network_image 密码输入框 collection 图片保存 image_g…

数据分析两件套ClickHouse+Metabase(一)

ClickHouse篇 安装ClickHouse ClickHouse有中文文档, 安装简单 -> 文档 官方提供了四种包的安装方式, deb/rpm/tgz/docker, 自行选择适合自己操作系统的安装方式 这里我们选deb的方式, 其他方式看文档 sudo apt-get install -y apt-transport-https ca-certificates dirm…

SpringBoot复习:(44)MyBatisAutoConfiguration

可以看到MyBatisAutoConfiguration引入了MyBatisProperties这个属性: MyBatisAutoConfiguration中配置了一个SqlSessionFactoryBean,代码如下: 可以配置mybatis-config.xml,需要配置文件里指定: mybatis.config-locationclasspath:/mybat…