css基础

weixin_51711897

已于 2023-10-16 14:00:53 修改

阅读量47

点赞数

分类专栏： web 文章标签：前端

于 2023-08-09 18:39:14 首次发布

本文链接：https://blog.csdn.net/weixin_51711897/article/details/132194535

版权

本文详细介绍了CSS的基础知识，包括入门使用方式（行内样式、内部样式和外部样式）、基本语法、选择符及其优先级、样式属性（颜色、字体、文本、尺寸等）以及网页布局（如浮动布局、定位布局和弹性布局）。此外，还讨论了CSS中的选择符优先级、样式污染问题以及如何使用less和sass等工具扩展CSS。最后，深入探讨了弹性布局的概念和相关属性，帮助开发者更好地理解和应用CSS进行网页布局。

摘要由CSDN通过智能技术生成

CSS

层叠样式表（Cascading Style Sheets），与HTML一样，也是一种标记语言，其作用就是给HTML页面标签添加各种样式，定义网页的显示效果，将网页内容和显示样式进行分离，提高了显示功能。简单一句话就是，CSS的代码可以告诉浏览器怎么美化HTML标签的内容。

入门使用

css代码可以写在html标签中作为标签的属性值存在，也可以写在html网页中，作为附加代码存在，也可以写在单独的css文档中，通过html的link标签引入使用。

行间样式/行内样式

css代码可以作为在每一个标签的style属性中作为值使用。语法格式：

<标签名  style="样式属性: 属性效果值; 样式属性: 属性效果值;....">

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h4 style="background-color: red; color: lightblue;">黄鹤楼送孟浩然之广陵</h4>
    <p style="background-color: red; color: yellow;">
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p style="background-color: deeppink; color: yellow;">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

内部样式

css可以作为在网页中的附加代码写在style标签内部存在。代码语法格式：

<style>
选择符1 {
     
    样式属性: 属性效果值; 
    样式属性: 属性效果值;
    ....
}
    
选择符2 {
     
    样式属性: 属性效果值; 
    样式属性: 属性效果值;
    ....
}
    
....
</style>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式，达到了结构与表现分离初步的效果</title>
    <style>
    h4, p {
     background-color: red;}
    h4 {
     color: lightblue;}
    p {
     color: yellow;}
    .p2 {
     background-color: deeppink;}
    </style>
</head>
<body>
    <h4>黄鹤楼送孟浩然之广陵</h4>
    <p>
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p class="p2">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

外部样式

css还可以作为单独的css格式文件存在，通过html的link标签引入到网页中。

common.css，代码：

h4, p {
   background-color: red;}
h4 {
   color: violet;}
p {
   color: yellow;}
.p2 {
   background-color: deeppink;}

3.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式，彻底实现结构与表现的分离</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <h4>黄鹤楼送孟浩然之广陵</h4>
    <p>
      故人西辞黄鹤楼，<br>
      烟花三月下扬州。
    </p>
    <p class="p2">
      孤帆远影碧空尽，<br>
      唯见长江天际流。
    </p>
</body>
</html>

3.1.html，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式，彻底实现结构与表现的分离</title>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <h4>赠汪伦</h4>
    <p>
      李白乘舟将欲行，<br>
      忽闻岸上踏歌声。
    </p>
    <p class="p2">
      桃花潭水深千尺，<br>
      不及汪伦送我情。
    </p>
</body>
</html>

开发中，针对css提供的三种引入使用方式，我们一般最常用的是外部样式，其次到内部样式。而行间样式在css使用过程中基本上是禁止使用的。而在后续的js特效编写中，行间样式是最常用的。所以css的三种引入使用方式，我们都要掌握并熟练使用。

基本语法

作为一门标记语言，css的语法也是比较简单的，主要由三部分构成：选择符，样式属性和属性值。

css中的语法虽然简单，但是太多内容了，所以要学会css，就需要多背多写，掌握使用规律，懂得借助浏览器与css手册。

注意，在前端领域中，有些人会觉得css负责外观样式这块，很容易存在重复代码的情况，因此就有人就基于服务端编程语言，实现了一些扩展了css语法的编译工具，例如：less，sass等。可以让开发者在安装less，sass以后，可以在css中实现函数、变量或循环判断等操作。当然即便使用了less或者sass等编译工具，里面编写的大部分代码还是属于css原生代码，而且最终浏览器识别的只会是css代码。

注意：在css中，HTML文档的标签，也叫元素。

结构	描述
选择符	用于查找一个或多个HTML标签(元素)
样式属性	设置HTML元素的外观效果类型，例如：长度、字体颜色、背景、边框等等
样式属性值	设置HTML元素的外观效果的具体描述参数。例如：5px，红色等等。

语法格式：

选择符 {
   
    样式属性: 样式属性值;
    样式属性: 样式属性值;
    样式属性: 样式属性值, 样式属性值, 样式属性值;
}

在前面一节中，我们所学习的三种CSS引入使用方式的内部样式或者外部样式中，使用的就是css的完整语法：
p，#p2，h4就是选择符，表示告诉浏览器，html网页中所有的p，#p2，h4等元素全部添加指定样式。
background-color，表示告诉浏览器，要设置指定元素的外观效果类型是：背景颜色。
color，表示告诉浏览器，要设置指定元素的外观效果类型是：文本字体颜色。

选择符

选择符（selector），主要是为了按照规定的查找规则，告诉浏览器，我们要给哪些元素需要添加外观效果。

元素选择符

通过选择符直接查找到HTML元素，添加样式。

选择符	描述
*``**	通配选择符，表示所有的html元素。
`tag`	类型选择符，也叫元素选择符或标签名选择符，表示通过指定元素的标签名作为选择符，给他们添加样式
`.class`	类选择符，表示通过给元素添加class属性值对元素进行分类，给指定分类的元素添加样式。
`#id`	ID选择符，表示通过给元素添加id属性值，给唯一的id属性值的单个元素添加样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* css的注释只有一种 */
    /* *，通配选择符，表示任意的HTML元素 */
    * {
     
        background-color: aqua;  /* 背景颜色：湖绿色; */
    }
    /* 直接使用标签名作为选择符，就是类型选择符，指定网页中的某一类型的元素 */
    a {
     
        color: blue; /* 字体颜色：红色; */
        text-decoration: none; /* 文本-线条装饰：无; */
    }

    /* id选择符，#号后面这个指定元素的id值，表示给某一个元素设置css样式 */
    #baidu{
     
        font-size: 32px; /* 字体-大小：32像素; */
        font-family: sans-serif; /* 字体-家族：无衬线字体 */
    }

    /* 类选择符，通过class属性指定某些HTML元素归纳为同一类，可以通过类选择符，直接指定类的元素添加样式 */
    .first{
     
        font-size: 32px; /* 字体-大小：32px */
        text-decoration: underline; /* 文本-线条装饰：下划线; */
    }
    .second{
     
        background-color: gray; /* 背景-颜色：灰色; */
        color: white; /* 字体颜色：白色; */
    }
    .third{
     
        border: 5px solid red; /* 边框：边框宽度(1px) 边框类型(实线) 边框颜色(红色) */
    }
    </style>
</head>
<body>
    <!-- 元素的属性是唯一的，所以同一个元素中，不能出现多个一样的属性名，如果有多个同名属性，浏览器只会识别第一个属性 -->
    <h1 class="first" class="second">一个标题</h1>
    <!-- 一个元素可以同时属于1或多个不同的分类,类名之间使用空格隔开 -->
    <p class="first third">一个段落</p>
    <p class="second">一个段落</p>
    <a class="second" href="https://www.taobao.com">淘宝</a><br><br>
    <a class="second third" href="https://www.tmall.com">天猫</a><br><br>
    <!-- 一个元素的id属性值不能有多个-->
    <a id="baidu" class="third" href="https://www.baidu.com">BaiDu</a><br><br>
    <!-- 不同的HTML元素中可以声明同一个id属性值，但是不推荐并且强烈反对！因为在将来的js编写特效时会可能出现错误 -->
    <a id="baidu" href="https://www.baidu.com">BaiDu</a><br>
</body>
</html>

关系选择符

HTML中，元素与元素之间存在的两个关系：

关系选择符主要通过元素与元素之间的嵌套关系（父子关系，祖先后代关系）和并列关系（兄弟关系，同辈关系）来查找元素。

选择符	描述
`选择符1, 选择符2{}`	群组选择符，表示同时给多个不同的选择符对应的元素添加外观效果，也叫并集选择符。
`选择符A 选择符B{}`	包含选择符，表示给指定的（祖先）选择符A下的（后代）选择符B对应的元素添加外观效果，也叫后代选择符。
`选择符A>选择符B{}`	子选择符，表示给指定的（父辈）选择符A下一层的（子）选择符B对应的元素添加外观效果，也叫子选择符。
选择符A+选择符B {}	相邻选择符，表示给跟着选择符A的下一个（同辈）选择符B对应的元素添加外观效果。
选择符A~选择符B {}	兄弟选择符，表示给与选择符A拥有同一个父辈的所有选择符B对应的元素添加外观效果，也叫同辈选择符。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 群组选择符，同时设置多个选择符对应的元素，添加样式 */
    h1, p, b, a{
     
        color: red;
    }
    /* 群组选择符里面的各个选择符成员，可以是任意的选择符，不限于类型选择符 */
    .p1, .p2, .a1{
     
        background-color: yellow;
    }
    /* 包含选择符，可以指定某些被指定选择符所包含的元素指定样式 */
    ul li a{
     
        color: blue;
    }
    /* 包含选择符中的祖先或后代选择符，不仅可以是上面类型选择符，也可以其他的任意选择符 */
    .list2 li a{
     
        text-decoration: line-through;/* 文本-修饰线条：贯穿线; */
    }
    /* 子选择符，用于给指定选择符下的子选择符对应的元素添加样式 */
    li>a{
     
        border: 3px double blue; /* 边框样式：边框宽度[3px] 边框类型[双实线] 边框颜色[蓝色]; */
    }

    /* 多种选择符可以相互搭配使用 */
    ul p>a{
     
        background-color: orange;
    }
    /* 相邻选择符，设置紧跟着指定选择符的下一个元素，并且该元素符合+号后面的选择符规则时，可以给当前元素加上外观效果 */
    .p1+p{
     
        text-shadow: -5px -5px 2px black; /* 文本阴影效果：水平阴影偏移量[正右负左] 垂直阴影偏移量[正下负上] 模糊效果 阴影颜色 */
    }
    /* 兄弟选择符，设置指定元素后面的所有兄弟选择符，实际上是找弟弟 */
    .li-1~.li-2{
     
        text-shadow: -2px -2px 2px red;
    }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p class="p1">第1段内容</p>
    <b>加粗文本内容</b>
    <p>第1段内容p1后面的第一个p标签</p>
    <h1>标题</h1>
    <p class="p1">第2段内容</p>
    <p class="p2">第3段内容</p>
    <p>第4段内容</p>
    <p><a href="">第5段内容 p下面的a标签</a></p>
    <p><a class="a1" href="">第6段内容 p下面的a标签</a></p>
    <ul class="list">
        <li><a href="">第1个li-----------------</a></li>
        <li class="li-1"><a class="a1" href="">第2个li,  ul li a</a></li>
        <li class="li-2"><a class="a1" href="">第3-1个li</a></li>
        <li class="li-3"><a class="a1" href="">第3-2个li</a></li>
        <li class="li-2"><a class="a1" href="">第3-3个li</a></li>
        <li>
            <ul>
                <li><p>1</p></li>
                <li><a href="">a2</a></li>
                <li>3</li>
            </ul>
        </li>
    </ul>
    <ul class="list2">
        <li><a href="">.list2 a</a></li>
        <li>
            <p>
                <a href="">.list2 p a</a>
                <a href="">.list2 p a</a>
            </p>
        </li>
    </ul>
</body>
</html>

属性选择符

选择符	描述
`选择符[attr="val"]`	给拥有属性名attr并且属性值为val的指定选择符添加外观效果
选择符[attr]	给拥有属性名attr的指定选择符添加外观效果
选择符[attr^=“val”]	给拥有属性名attr并且属性值以val开头的指定选择符添加外观效果
选择符[attr*=“val”]	给拥有属性名attr并且属性值包含val的指定选择符添加外观效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    input[type="text"]{
     
        border: 1px solid  red;
        outline-color: red; /* 输入框的焦点外边线-颜色：红色 */
    }
    input[disabled]{
     
        border: 0; /* 去除边框 */
    }
    input[value*='登录']{
     
        cursor: pointer;
    }
    </style>
</head>
<body>
    <form action="">
        <input type="text" value="1.0" disabled><br>
        账号: <input type="text"><br>
        密码: <input type="password"><br>
        <input type="button" value="登录">
        <input type="button" value="重新登录">
    </form>
</body>
</html>

伪类选择符

伪类选择符，是根据元素的位置状态或使用状态（交互状态）来查找某一类元素。

选择符	描述
选择符:link	设置超链接在未被访问前的样式。
选择符:visited	设置超链接在其链接地址已被访问过时的样式。
`选择符:hover`	设置元素在其鼠标悬停时的样式。
选择符:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
选择符:focus	设置元素在成为输入焦点时的样式（用于表单输入框，或者具有contenteditable属性的元素）。
`选择符:first-child`	匹配父元素的第一个子选择符。
选择符:last-child	匹配父元素的最后一个子选择符。
`选择符:nth-child(n)`	匹配父元素的第n个子选择符。
选择符:checked	匹配处于选中状态的选择符。(用于input type为radio与checkbox时)
选择符:disabled	匹配用户界面上处于禁用状态的选择符。（常用于表单项）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 当鼠标悬停在指定选择符上方时，设置外观效果 */
    ul li:hover{
     
        background-color: red;
        list-style: circle; /* 列表项类型：圆圈效果; 如果值为none，则去除项目符号 */
    }
    /* 当鼠标对指定选择符的元素按下没松开时，设置外观效果 */
    ul li:active{
     
        color: white;
    }
    /* 当指定选择符对应的元素获取输入焦点时，设置外观效果 */
    h1:focus, input:focus{
     
        color: red;
    }
    a{
     
        text-decoration: none;
    }
    /* 设置超链接的未访问时的外观样式，决定元素是否处于未访问状态的条件，是浏览器内是否有存在当前超链的访问历史记录 */
    a:link{
     
        color: red;
    }
    /* 设置超链接的已访问时的外观样式，决定元素是否处于已访问状态的条件，是浏览器内是否有存在当前超链的访问历史记录 */
    a:visited{
     
        color: blue;
    }
    /* 当选择符对应的元素属于父元素的第一个子元素时，设置样式 */
    .data1 li:first-child{
     
        border: 1px solid red;
    }
    .data1 li:last-child{
     
        border: 1px solid red;
    }
    /* 当选择符对应的元素属于父元素的第n个子元素时，设置样式，css中元素的排列序号从1开始 */
    .data1 li:nth-child(2){
     
        background-color: red;
    }
    /* 当选择符对应的元素属于父元素的第偶数个子元素时，设置样式，css中元素的排列序号从1开始 */
    .data2 li:nth-child(2n){
     
        background-color: red;
    }
    /* 当选择符对应的元素属于父元素的第奇数个子元素时，设置样式，css中元素的排列序号从1开始 */
    .data3 li:nth-child(2n-1){
     
        background-color: red;
    }

    /* 当选择符对应的元素属于父元素的指定倍数个子元素时，设置样式，css中元素的排列序号从1开始 */
    .data4 li:nth-child(3n){
     
        background-color: red;
    }
    .data4 li:nth-child(3n-1){
     
        background-color: yellow;
    }
    .data4 li:nth-child(3n-2){
     
        background-color: green;
    }

    /* 当选择符对应的元素处于被选择状态时，设置外观效果 */
    input:checked ~ span:after {
     
        content: "我被选中了"
    }
    /* 当选择符对应的元素处于被禁用状态时，设置外观效果 */
    input:disabled{
     
        color: red;
    }
    </style>
</head>
<body>
    <!-- 当HTML元素具有布尔属性，contenteditable 表示当前元素是一个可编辑元素 -->
    <h1 contenteditable>标题</h1>
    <input type="text" placeholder="请输入一段文本内容。">
    <ul class="data1">
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p>
        <a href="https://www.taobao.com">淘宝</a><br>
        <a href="https://www.tmall.com">天猫</a><br>
    </p>
    <hr>
    <ul class="data2">
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <ul class="data3">
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <ul class="data4">
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <p>
        <label>
            <input type="radio" name="lve"> 男
            <span></span>
        </label>
        <label>
            <input type="radio" name="lve"> 女
            <span></span>
        </label>
    </p>

    <p><input type="text" value="此处不能修改" disabled></p>
</body>
</html>

伪对象选择符

所谓的伪对象选择符，也叫伪元素选择符，表示选择或设置外观的仅仅是元素内容的一部分。

选择符
`选择符::after`	在指定选择符的末尾追加样式或内容。
选择符::before	在指定选择符的前面插入样式或内容。
选择符::placeholder	设置指定选择符对应的表单输入框中的提示文本的外观样式。
选择符::selection	设置指定选择符对应的元素的内容处于被鼠标划选时的外观效果。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*给指定选择符被鼠标划选的部分内容，设置外观样式*/
    p::selection{
     
        color: yellow;
        background-color: black;
    }
    /* 给指定输入框元素的提示帮助信息设置外观样式 */
    input[type="text"]::placeholder{
     
        font-size: 12px; /* 字体-大小：12px，注意，谷歌浏览器中，默认最小字体只能是12px。 */
        color: red;
        text-align: center; /* 文本-水平对齐方式: 居中[center]、居左[left,默认值], 居右[right], 两端对齐[justify]*/
    }
    .news::before{
     
        content: "[";
    }
    .news::after{
     
        content: "]"
    }

    .money::before{
     
        content: "$";
    }
    .content::after{
     
        content: ".....";
        color: red;
    }
    </style>
</head>
<body>
    <p class="news">风吹麦浪起，扑面穗生香。金色的麦田里，收割机在麦浪中来回忙碌，一颗颗饱满的麦粒从收割机仓门倾泻而下，源源不断地被送上运粮车，颗粒归仓。</p>
    <input type="text" placeholder="请输入账号！"><br>
    <span class="money">100</span>
    <p class="content">一个基本的文章内容</p>
</body>
</html>

css样式的优先级

css在使用过程中，因为很多的选择符有具有批量查找的特点，所以很容易出现样式污染的问题。样式污染出现的原因是因为css代码编写过程中，因为引入方式、书写先后顺序以及选择符的优先级等问题导致的。注意：样式污染并非不好，而是要可控！

引入方式的优先级

针对css中的代码，使用不同的引入方式，会存在不同的优先级问题。三种引入方式中，行内样式的权重是最高的，比另外两种都要高。内部样式与外部样式权重是一样的，所以只要css不是行内样式，不管是外部还是内部样式的使用过程中，写在后面的css代码，会覆盖前面的写的css代码。其中，如果在样式属性值后面加上!important，则表示无视权重，优先使用当前属性值作为最终的展示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="9.1.css">
    <style>
    .p1, .p2{
     
        color: red;
    }
    .p3{
     
        color: blue!important; /* 让css无视权重，使用当前属性值作为最终展示效果。 */
    }
    </style>
    <link rel="stylesheet" href="9.2.css">
</head>
<body>
    <p class="p1">第1个p标签</p>
    <p class="p3" style="color: orange;">第2个p标签</p>
    <p class="p2">第3个p标签</p>
    <p class="p3" style="color: orange;">第4个p标签</p>
</body>
</html>

9.1.css，代码：

.p1 {
   color: yellow;}

9.2.css，代码：

.p2 {
   color: yellow;}

在css使用过程中，浏览器本身对于HTML元素的外观实际上是预设了一些默认样式的。这些样式存在了user agent stylesheet。所以实际上，user agent stylesheet提供的样式才是权重最低的。所以也是因为浏览器本身对于不同的HTML元素内部预设一些默认外观效果，所以w3c又针对这种情况，又提供了2个纯净标签，是几乎没有任何内置样式的：div、span。其中，div标签代表网页的一个板块，自带换行效果。span标签代码的是文本的一部分内容，所以不会自动换行，也没有任何外观样式。div+span+css往往用于网页的排版布局。

选择符的优先级

当css代码采用外部样式或者内部样式时，针对同一个元素使用不同的选择符，也会存在优先级的比较，容易导致样式污染的问题。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* 通配选择符的优先级比类型选择符的要低 */
    *{
     
        text-decoration: none;
        color:red;
    }
    p{
     
        color: blue;
    }
    /*
    子选择符与包含选择符 比 类型选择符的优先级要高。
    子选择符与包含选择符的优先级一样的，嵌套层级一样时，谁写在后面，就优先显示谁
    如果嵌套不一样，则嵌套层级越多的，优先级越高。
     */
    b {
     
        background-color: red;
        color: white;
    }

    body>p>b{
     
        background-color: green;
        color: red;
    }
    p b {
     
        background-color: blueviolet;
        color: pink;
    }

    /* 类选择符的优先级比包含选择符或子选择符的优先级要高 */
    .p3{
     
        background-color: yellow;
    }

    body p {
     
        background-color: blue;
    }

    /* 属性选择符与类选择符的优先级是一样的。 */
    [type=text]{
     
        border: 1px solid blue;
    }
    .input{
     
        border: 1px solid red;
    }

    /* 所有的选择符中，ID选择符的优先级最高！ */
    </style>
</head>
<body>
    <a href="">超链接</a>
    <p class="p1"><b>第1个p标签</b></p>
    <p class="p3"><b>第2个p标签</b></p>
    <p class="p2">第3个p标签</p>
    <p class="p3">第4个p标签</p>

    <input class="input" type="text" value="请输入昵称"><br><br>
    <input class="input" type="text" value="请输入账号"><br>

</body>
</html>

通配选择符 < 类型选择符 < 子选择符 | 包含选择符 < 类选择符 | 属性选择符 | 伪类选择符 < 多种选择符组合使用情况 < ID选择符 < 行内样式 < !important

样式属性

颜色

颜色的表示

css中针对颜色表达支持三种写法：单词表示法、十六进制表示法和RGB函数表示法。

单词表示法

通过英文单词来表达颜色。但是因为计算机中支持的颜色普遍在1677万种颜色左右。

red;  /* 红色 */
yellow;  /* 黄色 */
blue;  /* 蓝色 */
green;  /* 绿色 */

十六进制表示法

采用十六进制数值来表达一个颜色。通常格式：#RRGGBB。计算机中所有的颜色都是由屏幕发光来呈现出来的。所以一切的颜色都是基于光的三原色（红、绿、蓝）。每种颜色的发光程度从不亮到最亮之间分成了256个级别，使用十六进制来表达则是00_{FF之间，如果使用十进制来表达则是0}255。

#ffffff         /* 白色，红绿蓝三种颜色都发光而且是最亮*/
#000000    /* 黑色，红绿蓝三种颜色都不发光 */
#ff0000     /* 红色，只有红色发光，其他不发光 */
#00ff00     /* 绿色 */
#0000ff     /* 蓝色 */
#ffff00      /* 黄色 */
#ff00ff      /* 紫色 */
#00ffff      /* 青色  */
/* 当 三种光的原色发光程序一样时，如果不是白色与黑色，则属于灰色。*/
#333333   /* 灰色 */
#666666   /* 灰色 */
#999999   /* 灰色 */
#fafafa      /* 灰色 */
#aaaaaa    /* 灰色 */

在前端开发中，针对计算机中支持的1677万中颜色，虽然都能实现，但是因为不同的计算机的屏幕的材质不一样。所以有时候会存在同一种颜色在不同电脑屏幕下展示效果不一样。由此衍生了一种web安全颜色（也就是上图photoshop中的web颜色）。web安全颜色是指代从1677万中颜色中抽取出来的部分能保证在所有屏幕，所有浏览器下显示一致的颜色。

十六进制表达法支持简写。

#aaaaaa   ---> #aaa
#aabbcc   ---> #abc


#ffffff         /* 白色*/    #fff;
#000000    /* 黑色*/    #000;
#ff0000     /* 红色 */    #f00;
#00ff00     /* 绿色 */    #0f0;
#0000ff     /* 蓝色 */    #00f;
#ffff00      /* 黄色 */     #ff0;
#ff00ff      /* 紫色 */     #f0f;
#00ffff      /* 青色  */    #0ff;
/* 当 三种光的原色发光程序一样时，如果不是白色与黑色，则属于灰色。*/
#333333   /* 灰色 */    #333;
#666666   /* 灰色 */    #666;
#999999   /* 灰色 */    #999;
#fafafa      /* 灰色 */    /* 不能简写 */
#aaaaaa    /* 灰色 */    #aaa;

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title

最低0.47元/天解锁文章

weixin_51711897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录