做网站设计的有些什么职位,wordpress数据库详解,阿里云 拦截网站,泰安中推网络科技有限公司文章目录 前言一、padding、margin、border#xff08;边框边距#xff09;二、样式优先级三、var#xff08;使用 CSS 变量更改多个元素样式#xff09;四、media quary#xff08;媒体查询#xff09;系列文章目录 前言
长时间未使用HTML编程#xff0c;前端知识感觉… 文章目录 前言一、padding、margin、border边框边距二、样式优先级三、var使用 CSS 变量更改多个元素样式四、media quary媒体查询系列文章目录 前言
长时间未使用HTML编程前端知识感觉忘得差不多了。通过梳理知识点重新学习和巩固前段相关知识。 学习位置W3CSchoolHTML 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时代替上面定义的变量生效*/}
} 系列文章目录
【前端】HTMLCSS复习记录【1】 【前端】HTMLCSS复习记录【2】 【前端】HTMLCSS复习记录【3】 【前端】HTMLCSS复习记录【4】 【前端】HTMLCSS复习记录【5】本章
