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

news2024/12/21 22:14:55

文章目录

前言
一、padding、margin、border（边框边距）
二、样式优先级
三、var（使用 CSS 变量更改多个元素样式）
四、media quary（媒体查询）
系列文章目录

前言

长时间未使用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 的属性拥有最高优先级。

 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样式

: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 变量可以简化媒体查询的方式。当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。

: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时，代替上面定义的变量生效*/
    }
}