HTML详解连载(5)

简介: HTML详解连载(5)

专栏链接 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的顺序书写

相关文章
|
3天前
|
移动开发 UED HTML5
HTML53
HTML5表单引入了新表单元素、新属性、新输入类型及自动验证功能,提升了用户体验和开发效率。同时,HTML5移除了如 `<acronym>`、`<applet>` 等多个HTML 4.01中的元素,简化了网页结构。
|
3天前
|
移动开发 Ruby HTML5
HTML52
HTML5引入了许多语义元素,
|
28天前
|
移动开发 前端开发 JavaScript
HTML
【10月更文挑战第14天】HTML
28 4
|
5月前
|
移动开发 前端开发 搜索推荐
|
5月前
|
存储 移动开发 前端开发
HTML大雪纷飞
HTML大雪纷飞
37 1
|
5月前
|
移动开发 API HTML5
什么是html
什么是html
41 4
|
4月前
HTML4(二)(下)
HTML4(二)(下)
23 0
|
6月前
|
前端开发 JavaScript
什么是HTML?
HTML是超文本标记语言,用于创建网页的标准语言,专注于内容结构和含义,不涉及样式。它由标签组成,如<title>、<p>、<a>等,与CSS和JavaScript配合使用,分别负责样式和交互性。示例代码展示了一个基本的HTML文档结构,包括标题、段落和链接。
|
6月前
|
前端开发 Python
初识HTML
本文介绍了HTML的基本概念和使用方法。
|
6月前
|
弹性计算 前端开发 容器
HTML详解连载(8)
HTML详解连载(8)