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.hqwc.cn/news/68443.html

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

相关文章

广告聚合平台能为APP开发者提供哪些帮助

应用变现平台是帮助开发者优化广告策略并最终获得更多收入的综合途径。在广告变现过程中,接入单一的广告联盟,变现效率不高,并且开发者需要花费许多精力进行筛选和管理,难免会应接不暇,而聚合广告平台的出现则一定程度…

一百五十二、Kettle——Kettle9.3.0本地连接Hive3.1.2(踩坑,亲测有效,附截图)

一、目的 由于先前使用的kettle8.2版本在Linux上安装后&#xff0c;创建共享资源库点击connect时页面为空&#xff0c;后来采用如下方法&#xff0c;在/opt/install/data-integration/ui/menubar.xul文件里添加如下代码 <menuitem id"file-openZiyuanku" label&…

NFT Insider#102:The Sandbox重新上线LAND桥接服务,YGG加入Base生态

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members(https://twitter.com/WHALEMembers)、BeepCrypto&#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周…

Rust语法:所有权引用生命周期

文章目录 所有权垃圾回收管理内存手动管理内存Rust的所有权所有权转移函数所有权传递 引用与借用可变与不可变引用 生命周期悬垂引用函数生命周期声明结构体的生命周期声明Rust生命周期的自行推断生命周期约束静态生命周期 所有权 垃圾回收管理内存 Python&#xff0c;Java这…

leetcode 面试题 02.05 链表求和

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;面试题 02.05 链表求和 ps&#xff1a; 首先定义一个头尾指针 head 、tail&#xff0c;这里的 tail 是方便我们尾插&#xff0c;每次不需要遍历找尾&#xff0c;由于这些数是反向存在的&#xff0c;所以我们直接加起来若…

iObit Uninstaller 最新版13 Pro更新了什么?

iObit Uninstaller 专业且易用的 Windows 卸载程序&#xff0c;它可以轻松删除不需要的程序&#xff0c;插件和 Windows 应用程序&#xff0c;还可以对电脑旧的应用一键更新。 功能和特点 安装监视器 安装监视器会检测并记录安装中的所有系统更改&#xff0c;以确保在将来彻底…

07_Hudi案例实战、Flink CDC 实时数据采集、Presto、FineBI 报表可视化等

7.第七章 Hudi案例实战 7.1 案例架构 7.2 业务数据 7.2.1 客户信息表 7.2.2 客户意向表 7.2.3 客户线索表 7.2.4 线索申诉表 7.2.5 客户访问咨询记录表 7.3 Flink CDC 实时数据采集 7.3.1 开启MySQL binlog 7.3.2 环境准备 7.3.3 实时采集数据 7.3.3.1 客户信息表 7.3.3.2 客户…

【Linux进行时】进程概念

进程的概念 什么是进程呢&#xff1f; ❓首先我们需要认识一下什么叫进程呢&#xff1f; 课本概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等 &#x1f525;内核观点&#xff1a;担当分配系统资源&#xff08;CPU时间&#xff0c;内存&#xff09;的实体。…

移远RM500U-CN模块直连嵌入式ubuntu实现拨号上网

目录 1 平台&#xff1a; 2 需要准备的资料 3 参考文档 4 编译环境与驱动移植 4.1 内核驱动添加厂家ID和产品ID 4. 2.添加零包处理 4.3 增加复位恢复机制 4.4 增加批量输出 批量输出 URB 的数量和容量 的数量和容量 4.5 内核配置与编译 5 QM500U-CN拨号&#xff08;在开…

STL转GLTF【在线工具】

3DConvert 是一个可以进行3D模型格式转换的在线工具&#xff0c;支持多种3D模型格式进行在线预览和互相转换。 1、STL与GLTF格式简介 STL&#xff08;Stereo Lithography&#xff09;文件是一种用于3D打印的文件格式。它是由3D Systems公司开发的一种二进制文件格式&#xff0…

T113-S3 Tina-Linux -- 2.开发板使用

1. 硬件环境 1.1 开发板 型号&#xff1a;100ASK_T113-PRO Base V1.1&#xff08;韦东山&#xff09;配置&#xff1a;CPU&#xff1a;T113-S3&#xff0c;RAM&#xff1a;128MB&#xff0c;ROM&#xff1a;128MB 2. 各模块使用 2.1 wifi wifi模组型号&#xff1a;XR829…

基于扩频的数字视频水印嵌入和检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ................................................................. for j 1:length(attens…