【前端】HTML+CSS复习记录【5】

文章目录


前言

长时间未使用HTML编程,前端知识感觉忘得差不多了。通过梳理知识点,重新学习和巩固前段相关知识。

学习位置:W3CSchool:HTML + CSS 基础实战


一、padding、margin、border(边框边距)

  • padding(内边距) margin(外边距) border(边框),均可单边设置,可如下描写。
  • 这四个值按顺时针排序:上,右,下,左,并且设置的效果等同于特定声明每一个方向的padding。
    border属性不会继承到子元素中

​padding​控制着元素内容与​border​之间的空隙大小。

​margin​(外边距)属性控制元素的边框与其他元素之间的距离。margin为正值时,元素大小不变,外部元素大小变化。值越大,离外部元素距离越大。margin为负值时,元素大小会根据值的绝对值大小变化,外部元素大小不变,可被内部元素覆盖。

二、样式优先级

  • CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。
  • CSS 优先规则2:"直接样式"比"祖先样式"优先级高。
  • CSS优先规则3:优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。(补充学习:CSS基础之伪类选择器
  • CSS优先规则4:属性后插有 !important 的属性拥有最高优先级。
css 复制代码
 p {color: red !important;}
  • CSS 优先规则5:第二个声明始终优于第一个声明。
  • HTML 元素里应用的 class 的先后顺序无关紧要。但是,在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。如果.blue-text在.pink-text的后面声明,所以.blue-text会覆盖.pink-text的样式。

三、var(使用 CSS 变量更改多个元素样式)

background:var(custom-property-name, value)

ustom-property-name 是必需的, 自定义属性的名称,必需以 -- 开头。value 可选,备用值,在自定义属性不存在或未生效的时候使用。
:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式

css 复制代码
:root {
  --main-bg-color: coral;/*定义*/
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
#div1 {
  background-color: var(--main-bg-color);/*使用*/
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

四、media quary(媒体查询)

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。​CSS ​变量可以简化媒体查询的方式。 当屏幕小于或大于媒体查询所设置的值,通过改变变量的值,那么应用了变量的元素样式都会得到响应修改。

css 复制代码
:root {
    --rabbit-ear-shadow: pink;
	--rabbit-basecolor: gray;/*一般生效*/
    --rabbit-skincolor:whitesmoke;
	--rabbit-background:rgb(198, 250, 241);
}
	
@media (max-width: 350px) {
    :root {
        --rabbit-basecolor:white;  /*当宽度小于等于350px时,代替上面定义的变量生效*/
    }
}	

系列文章目录

【前端】HTML+CSS复习记录【1】
【前端】HTML+CSS复习记录【2】
【前端】HTML+CSS复习记录【3】
【前端】HTML+CSS复习记录【4】

【前端】HTML+CSS复习记录【5】(本章)

相关推荐
知识分享小能手1 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲1 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮3 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel4 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip4 小时前
JavaScript事件流
前端·javascript
CodeCraft Studio4 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
赵得C4 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG4 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904274 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js