HTML详解连载(6)

简介: HTML详解连载(6)

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记

进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽



CSS特性

优简代码/定位问题,并解决问题

继承性

层叠性

优先级

继承性

子级默认继承父级的文字控制属性

注意

标签自己有样式,则生效自己的样式,不继承

层叠性

特点

相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加:不同的CSS属性都生效

优先级

也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。

规则

选择器优先级高的样式生效

公式

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意

选中标签的范围越大,优先级越低

叠加计算

如果是符合选择器,则需要权重叠加计算

公式(每以及之间不存在进位)

行内样式 ,id选择器个数,类选择器个数,标签选择器个数

规则

1、从左到右依次比较个数,同一级个数多的优先级高,如果个数相同,则向
  后比较!important权重最高
2、继承权重最低



Emmet写法分析

代码的简写方式,输入缩写 VScode会自动生成对应的代码

HTML

CSS:大多数简写方式为属性单词的首字母

背景图

网页中,使用背景图实现装饰性的图片效果。

属性名

background-image(bgi)

属性值

url(背景图URL)

注意

背景图默认是平铺的效果

背景图平铺方式

属性名

background-repeat(bgr)

属性值

属性 含义
no-repeat 不平铺
repeat 平铺(默认)
repeat-x 水平方向平铺
repeat-y 垂直方向平铺

背景图位置属性

属性名

background-position(bgp)

属性值

水平方向位置 处置方向位置

关键字

关键字 含义
left 左侧
right 右侧
center 居中
top 顶部
button 底部

坐标(数字+pz,正负都可以)

注意

关键字取值方式写法,可以颠倒顺序

可以只写一个关键字,另一个方向默认为居中;数字只写一个值表示水平方向,垂直方 向为居中

背景图缩放

作用

设置背景图大小

属性名

backgro-size(bgz)

常用属性值

关键字 含义
cover 等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain 等比例缩放背景图片以完全装入背景区,可能背景区部分空白
百分比 根据盒子尺寸计算图片大小

数字+单位(px)

背景图固定

作用

背景不会随着元素的内容滚动

属性名

background-attachment(bga)

属性值

fixed


背景复合属性

属性名

background(bg)

属性值

背景色,背景图,背景图平铺方式,背景图位置/背景图缩放,背景图固定

显示模式

标签(元素)的显示方式

作用

布局网页的时候,根据标签的显示模式选择合适的标签摆放内容(空 格隔开,不区分顺序)

块级元素

位置

独占一行

宽度默认是父级的1000%

添加宽高属性生效

行内元素

位置

一行共存多个

尺寸

尺寸由内容撑开

加宽高不生效

行内块元素

位置

一行共存多个

尺寸

设置宽高属性生效

默认尺寸由内容撑开

转换显示模式

属性名

display

关键字 含义
属性值 效果
block 块级
inline-block 行内块
inline 行内
相关文章
|
6月前
|
移动开发 前端开发 搜索推荐
|
5月前
|
数据采集 搜索推荐
HTML4(四)
HTML4(四)
30 0
|
7月前
|
前端开发 Python
初识HTML
本文介绍了HTML的基本概念和使用方法。
|
移动开发 前端开发 UED
HTML详解连载(2)
HTML详解连载(2)
|
7月前
|
前端开发 JavaScript
HTML
HTML
261 0
|
移动开发 前端开发 JavaScript
HTML基本讲解与使用
HTML基本讲解与使用
|
存储 移动开发 前端开发
HTML 总结
HTML 总结
104 0
|
前端开发 JavaScript Java
HTML简识
本文主要介绍博主关于HTML的学习笔记。 HTML与我们之前学习的Java并不同,它并不能表达逻辑,而是只能表达“有哪些东西”的一种信息,所以其语法较为简单。 其语法格式是通过标签的样式来构成的,通过这一篇文章就可以基本掌握HTML的用法。
84 0
HTML简识
|
移动开发 开发工具 HTML5
HTML5简单总结
学习HTML后的简单总结
178 0
HTML5简单总结