- [color="skyblue"]发起各人在根元素声明全部需要使用到的样式,例如字体、颜色、巨细等,这样你在誊写盒子样式的时间会比力方便(自定义属性一样平常都是语义化标签)
- [color="skyblue"]尽量使用相对单元(例如em),在html设置字体巨细,其他盒子使用相对单元,这样你可以通过调整html的字体巨细来达到调整全部字体的目的
- [color="skyblue"]自顶向下誊写css样式,养成良好习惯,配合@media媒体查询实现响应式布局
:root
:root 这个 CSS [color=“skyblue”]伪类匹配文档树的根元素。对于 HTML 来说,:root 体现<html>元素,除了优先级更高之外,与html 选择器相同。
- /* 选择文档的根元素(HTML 中的 <html>) */
- :root {
- background: yellow;
- }
复制代码 声明全局 CSS 变量
在声明全局 CSS 变量时 :root 会很有用:
- :root {
- --main-color: hotpink;
- --pane-padding: 5px 42px;
- }
复制代码 使用 CSS 自定义属性
- 自定义属性是由 CSS 作者定义的,它包含的值可以在[color=“skyblue”]整个文档中重复使用
- 由自定义属性标志设定值(比如: --main-color: black;)
- 由 [color=“skyblue”]var() 函数来获取值(比如: color: var(--main-color);)
- 自定义属性在某个地方存储一个值,然后在其他很多地方引用它
- 另一个好处是[color=“skyblue”]语义化的标识。比如,--main-text-color 会比 #00ff00 更易理解
- 自定义属性受级联的约束,并从其父级继承其值
基本用法
声明一个自定义属性,[color=“skyblue”]属性名需要以两个减号(--)开始,属性值则可以是任何有用的 CSS 值
和其他属性一样,自定义属性也是写在规则集之内的,如下:
- element {
- --main-bg-color: brown;
- }
复制代码 注意,规则集所指定的选择器定义了自定义属性的可见作用域。
通常的最佳实践是定义在根伪类 :root下,这样就可以在 HTML 文档的任何地方访问到它了:
- :root {
- --main-bg-color: brown;
- }
复制代码 注意
[color=“skyblue”]自定义属性名是巨细写敏感的,--my-color 和 --My-color 会被以为是两个不同的自定义属性
Var()函数
如前所述,使用一个局部变量时用[color=“skyblue”] var() 函数包裹以体现一个合法的属性值:
- element {
- background-color: var(--main-bg-color);
- }
复制代码 自定义属性的继承性
[color=“skyblue”]自定义属性会继承。这意味着如果在一个给定的元素上,没有为这个自定义属性设置值,在其父元素上的值会被使用。
- <div class="one">
- <div class="two">
- <div class="three"></div>
- <div class="four"></div>
- </div>
- </div>
复制代码- .two {
- --test: 10px;
- }
- .three {
- --test: 2em;
- }
复制代码 在这个情况下, var(--test) 的效果分别是:
- 对于元素 class="two" :10px
- 对于元素 class="three" :2em
- 对于元素 class="four" :10px (继承自父属性)
- 对于元素 class="one" :非法值,会变成自定义属性的默认值
注意,这些是自定义属性,并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时间才管帐算,而并不会按其他规则进行保存。
自定义属性备用值
用 [color=“skyblue”]var()函数可以定义多个备用值(fallback value),当给定值未定义时将会用备用值替换。
备注: 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性,备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制,该机制仅当给定值未定义或是无效值的时间见效。
- 函数的第一个参数是自定义属性的名称。
- 如果提供了第二个参数,则体现备用值
- 当自定义属性值无效时见效。第二个参数可以嵌套,但是不能继承平铺展开下去了
- .two {
- color: var(--my-var, red); /* Red if --my-var is not defined */
- }
- .three {
- background-color: var(
- --my-var,
- var(--my-background, pink)
- ); /* pink if --my-var and --my-background are not defined */
- }
- .three {
- background-color: var(
- --my-var,
- --my-background,
- pink
- ); /* Invalid: "--my-background, pink" */
- }
复制代码 第二个例子展示了如何处置处罚一个以上的 fallback。该技术大概会导致性能题目,因为它花了更多的时间在处置处罚这些变量上。
JavaScript 中的值
在 JavaScript 中获取或者修改 CSS 变量和操纵平常 CSS 属性是一样的:
- // 获取一个 Dom 节点上的 CSS 变量
- element.style.getPropertyValue("--my-var");
- // 获取任意 Dom 节点上的 CSS 变量
- getComputedStyle(element).getPropertyValue("--my-var");
- // 修改一个 Dom 节点上的 CSS 变量
- element.style.setProperty("--my-var", jsVar + 4);
复制代码 最佳单元实践
1. px(像素)
- 描述:绝对单元,基于体现设备的物理像素点。尽管称为“像素”,但在高分辨率屏幕上大概会有所不同。
- 特点:
- 提供了准确的尺寸控制。
- 不随浏览器设置或父元素字体巨细的变化而变化。
- 适用场景:当你需要固定的、不可缩放的尺寸时使用,例如细线边框、图标巨细等。
- div {
- width: 200px; /* 固定宽度 */
- }
复制代码 2. em
- 描述:相对单元,相对于当前元素的字体巨细。如果父元素设置了字体巨细,则 em 的值基于该字体巨细计算。
- 特点:
- 允许根据文本巨细调整布局。
- 如果嵌套元素较多,大概导致复杂度增加,因为每个层级的字体巨细都会影响下一层级。
- 适用场景:适用于盼望随着父元素的字体巨细变化而变化的设计部分,如段落、标题等。
- p {
- font-size: 1.5em; /* 相对于父元素字体大小放大1.5倍 */
- }
复制代码 3. rem(root em)
- 描述:类似于 em,但它是相对于根元素(即 <html> 标签)的字体巨细来计算。
- 特点:
- 简化了响应式设计中的尺寸管理,因为它只依靠于根元素的字体巨细。
- 避免了 em 大概导致的嵌套层级题目。
- 适用场景:非常适合用于整个页面的基础布局和排版,因为它提供了更划一的尺寸关系。
- html {
- font-size: 16px;
- }
- div {
- font-size: 1.2rem; /* 相对于根元素字体大小放大1.2倍 */
- }
复制代码 4. vw 和 vh(视窗宽度和高度百分比)
- 描述:1vw 等于视口宽度的 1%,1vh 等于视口高度的 1%。
- 特点:
- 动态地适应用户的屏幕尺寸。
- 特别适合创建全屏或基于视口比例的设计。
- 适用场景:当需要设计可以或许自适应不同屏幕尺寸的内容时非常有用,比如全屏背景图、响应式布局等。
- div {
- width: 50vw; /* 占据视口宽度的一半 */
- height: 30vh; /* 占据视口高度的30% */
- }
复制代码 5. %(百分比)
- 描述:相对单元,相对于包含块(通常是父元素)的宽度或高度。
- 特点:
- 提供了一种机动的方式来定义元素巨细,使其可以根据其容器巨细自动调整。
- 可以应用于宽度、高度、内边距、外边距等多个属性。
- 适用场景:流体布局中,尤其是那些需要根据父容器巨细动态调整自身巨细的元素。
- div {
- width: 80%; /* 占据父元素宽度的80% */
- }
复制代码 6. fr(网格分数单元)
- 描述:仅在 CSS Grid 布局中使用的单元,体现可用空间的一部分。
- 特点:
- 提供了一种简朴的方法来分配网格轨道的空间。
- 可以轻松创建复杂的网格布局。
- 适用场景:在构建基于网格的布局时,用于定义行和列的巨细。
- .container {
- display: grid;
- grid-template-columns: 1fr 2fr; /* 第二列是第一列宽度的两倍 */
- }
复制代码 @media
@media CSS@规则可用于基于一个或多个媒体查询的效果来应用样式表的一部分。使用它,你可以指定一个媒体查询和一个 CSS 块,当且仅当该媒体查询与正在使用其内容的设备匹配时,该 CSS 块才能应用于该文档。
备注: 在 JavaScript 中,可以使用 CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。
语法
@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。
- /* 在你的代码的顶层 */
- @media screen and (min-width: 900px) {
- article {
- padding: 1rem 3rem;
- }
- }
- /* 嵌套至其他的 at 条件规则中 */
- @supports (display: flex) {
- @media screen and (min-width: 900px) {
- article {
- display: flex;
- }
- }
- }
复制代码 媒体类型
媒体类型(media type)描述设备的一样平常种别。除非使用 not 或 only 逻辑运算符,否则媒体类型是可选的,并且会(隐式地)应用 all 类型。
- all
适用于全部设备
- print
适用于在打印预览模式下在屏幕上查看的分页材料和文档
- screen
主要用于屏幕
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |