2021-07-16 CSS样式优先级、单位基础、颜色

最新推荐文章于 2024-06-16 17:29:19 发布

原创最新推荐文章于 2024-06-16 17:29:19 发布 · 378 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

笔记专栏收录该内容

23 篇文章

订阅专栏

这篇博客详细介绍了CSS样式的优先级，包括%、px、em、rem等单位的基础知识，以及视口单位vw和vh的使用。此外，还讲解了前端颜色的表示方式，如预定义颜色、十六进制、rgb、rgba、hsl和hsla等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS样式优先级

在这里插入图片描述

/* 类名选择器（属性选择器、伪类选择器 选择器权重 一样） */
[name]{
    color:red;
}

/* 伪类 没有 id高 */
:hover{
    color: blue;
}

/* 类名 低于 id  */
.item{
    color:red;
}

/* 元素选择器 低于 类名选择器 */
p{
    color: green;
}


/* 通配符 低于 元素选择器 */
*{
    color: brown;
    font-weight: bolder;
    color: black!important;
}

/* 继承的样式 低于通配符 */
body{
    color: darkblue;
}

/* 浏览器默认样式 */

2.单位基础

前端的尺寸单位:
% ：相对于父元素尺寸的百分比大小（比如div块定义了宽高百分比，但是相对于父元素html，body没有定义宽高百分比的话，div块是显示不出来的）
px ：像素点。用多个像素点来显示一个像素越高清，老师说的…
em ：相对单位, 1em 等于父元素的一个字体大小
rem ：相对单位, 专门用于做移动设备适配的, 相对于一个HTML的字体大小
视口：浏览器屏幕的可用区域，即除了任务栏标题栏底部工具栏之外的浏览器可视区域

vw ：1vw = 一个视口宽度的 1%;
vh ：1vh = 一个视口高度的 1%;

3.颜色

前端的颜色 color:
预定义颜色 (单词)
#十六进制
rgb rgba
hsl hsla 工业化颜色更高级严格

/* 预定义颜色 */
    background-color: red;
    background-color: pink;
    background-color: greenyellow;
    background-color: transparent;/* 透明色 */
    
    /* 十六进制  0-9 a b c e d f */
    /* #红色 绿色 蓝色 */
    background-color: #ff0000;
    background-color: #00ff00;
    background-color: #0000ff;
    background-color: #ffffff;
    background-color: #000000;
    background-color: #ffff00;
    background-color: #00ffff;
    background-color: #e4393c;
    background-color: #e49;
    background-color: #425066;
    background-color: #aabbcc;
    background-color: #abc;
    background-color: #aabb12;
    background-color: #ab12;

    /* rgb(0-255, 0-255, 0-255) */
    background-color: rgb(0, 0, 0);  /* #黑色 */
    background-color: rgb(255, 255, 255);   /* #白色 */
    background-color: rgb(255, 0, 0);   /* #红色 */
    background-color: rgb(0, 255, 0);   /* #绿色 */
    background-color: rgb(0, 0, 255);   /* #蓝色 */


    /* rgba(红色 0-255, 绿色 0-255, 蓝色 0-255, 不透明度 0-1<透明-不透明> ) */
    background-color: rgba(255, 0, 0, 0);

    /*  hsl(h色调<色环>, s饱和度, l明亮度); */
    background-color: hsl(240, 50%, 80%);

    /*  hsla(h色调<色环>, s饱和度, l明亮度, 不透明度 0-1<透明-不透明> ); */
    background-color: hsl(240, 50%, 80%, 0.6);