HTML与CSS入门

最新推荐文章于 2023-11-15 22:30:51 发布

weixin_46370867

最新推荐文章于 2023-11-15 22:30:51 发布

阅读量509

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_46370867/article/details/107827796

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、 HTML

1.HTML简介

HTML是Hyper Text Markup Language的缩写，即：超文本标记语言。

HTML是一门标记语言，不是一门编程语言。

1.超文本：就是指页面内可以包含图片、链接，音乐，程序等非文字元素。

2.标记语言：是一种将文本及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编辑。

2、HTML版本发展历程

1.超文本标记语言（第一版）

2.HTML 2.0

3.HTML 3.2

4.HTML 4.0 ——1997年12月24日。W3C推荐标准

5.HTML5的第一份正式草案已于2008年1月22日公布，正式版本发布于2014年12月29日。

3、HTML结构

<!DOCTYPE html>
<html >
    <head>
    </head>
    <body>
    </body>
</html>

1.HTML文档文件的后缀名为html 和 htm ，两种后缀名是一样的。

2.HTML文档也被称为网页。

3.HTML文档包含HTML标签和纯文本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XtLdnxMV-1596640212277)(C:\Users\acer\Desktop\me\0315启嘉html笔记截图\html结构.png)]

4.<!DOCTYPE>声明

声明有助于浏览器正确显示网页。因为网络上有很多不同的文件，所以正确声明HTML的版本后，浏览器就能正确显示网页内容。

声明的位置：在文档中的最前面，处于HTML标签之前。
声明的作用：告诉Web浏览器页面使用了哪种HTML版本。不是一个HTML元素
给HTML文档添加<!DOCTYPE>声明后，浏览器可以预先知道文档类型。

5、HTML元素（HTML标签）

1、html标签是由尖括号（< >）包围的关键字

2、html标签的几种类型

双标签：有开始标签（开放标签）和结束标签（闭合标签）；结束标签中一般有" / "
单标签：只有开始标签，没有结束标签。
空元素：不包含任何文本内容，没有结束标签。
闭合元素：具有开始标签和结束标签，可以包含文本内容。

注意：在HTML中标签通常是成对出现的，不要忘记结束标签。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QmBzMf8Q-1596640212305)(C:\Users\acer\Desktop\A_`Q0M@LY77}GJY9SBDCLTQ.png)]

（在XHTML 、XML以及未来版本的HTML中，所有元素都必须被关闭。）

6.HTML标签不区分大小写，

6、HTML头部

元素包含了所有的头部标签元素。可以添加在头部区域的元素标为：、标签提供的元数据不会显示在页面上，但是会被浏览器解析。元素通常用于（1）为搜索引擎定义关键字（2）为网页定义描述内容（3）定义网页作者（4）设置HTML页面的编码格式

    <!DOCTYPE html> 

    <html lang="en">

    <head>
        <!-- 指定当前HTML页面的编码格式 -->
        <meta charset="UTF-8">
        <!-- 指定当前HTML页面的视口 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <meta name="keywords" content="HTML,CSS,">
    </body>

    </html>

7、HTML的属性

1.HTML属性的概念：

属性：HTML元素的附加信息

2.属性的分类

（1）通用属性：几乎所有元素都可以使用的属性，例如：id,name,style等

（2）私有属性：某一个/类元素自己的属性

（3）事件属性：为某个元素绑定事件

（4）自定义属性：开发者为某个元素设置的属性，一般都是在前端框架中使用

3.HTML属性

（1）HTML元素可以设置属性

（2）属性可以为元素添加附加信息

（3）属性一般添加在开始标签中

（4）属性总是以名称/值的形式出现

二、CSS入门

1.什么是CSS

CSS全称为Cascading Style Sheets , 译为层叠样式表

样式通常存储在样式表中,定义如何显示HTML元素。CSS是能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言，CSS能够网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

2.CSS发展历程

1994年内哈坤.利提出了CSS的最初建议。

1997年，W3C组织专门管理CSS的工作组，其负责人是克里斯.里雷。

目前，CSS的最新版本已经更新到了第三版，CSS被融入在HTML5的新版本特性中。

3.CSS版本发展历程

CSS1——作为一项W3C推荐，CSS1发布于1996年12月17日。1999年1月1日，此推荐被重新修订。

CSS2——作为一项W3C推荐，发布于1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。

CSS3——计划将CSS划分为更小的模块。

4.如何使用CSS

(1) CSS的三种样式

1）内联样式

通过HTML元素的style属性来设置CSS样式

语法结构：

style=“CSS属性：CSS属性值”

缺点：只对当前元素有效，CSS代码出现冗余

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内联样式</title>  
</head>
<body>
    <div style="color:red">启嘉班</div>
</body>
</html>

2）内嵌样式表

通过HTML元素的style元素来设置CSS样式

旧版本：设置type属性值为 “text/css”

语法结构：

<style type="text/css">
    选择器 {
        属性名：属性值；
    }
</style>

优点：（相对于内联样式表）通过CSS选择器定位HTML页面中一个或一类元素

缺点：将CSS代码嵌入到HTML页面中，只能对当前HTML页面有效

编码的风格不符合编码原则中的低耦合

导致代码可能出现冗余

[^低耦合：这部分代码的使用和修改影响到其他部分的代码尽可能的少]:

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌样式</title>
    <style>
        p {
            color:blueviolet;
        }
    </style>
</head>
<body>
    <p>启嘉班</p>
</body>
</html>

3) 外联样式表

通过HTML元素的元素来引入外部CSS样式表（后缀名为.CSS的文件）

元素：

作用：用来引入HTML页面外部的资源
属性：

rel属性：用来设置外部资源与当前HTML页面的关系

href属性：用来设置引入外部资源的路径

语法结构：

<link rel="stylesheet" type="text/css" href="CSS文件路径">

步骤：

1.创建一个CSS文件，用来存储CSS样式内容

2.在HTML页面中通过元素引入外部指定的CSS文件

优点：相对于内联样式和内嵌样式表

将CSS样式与HTML页面进行分离（低耦合）

不会出现内联样式或内嵌样式表产生的代码冗余

缺点：可能对HTML页面的加载造成负担，导致性能下降

示例：

style.css文件

h1 {
    color:blue;
}

外联样式.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外联样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>启嘉班</h1>
</body>
   
</html>

注意：

在一个HTML页面中同时使用内联样式、内嵌样式表和外联样式表：

1.内联样式的优先级别是最高的

2.内嵌样式表和外联样式表的优先级与编写顺序有关：最后的是优先级别更高的。

（2）语法格式

选择器 {

属性名称：属性值；

···

}

语法特点：

CSS声明总是以键值对（key\value）形式存在
CSS声明总是以分号（;）结束
声明组用大括号（ {} ）括起来
每行只描述一个属性，目的：提高CSS的可读性

（3）CSS注释

<style type="text/css">
   /* 这是一个注释 */
   div {
       /* 这是另一个注释 */
       color:red;
   }
</style>

5、CSS选择器

（1）什么是CSS选择器

CSS选择器的作用是按照CSS规则定位HTML页面的一个或多个元素。

浏览器在解析HTML页面时，会根据CSS规则中的选择定位器定位HTML页面的元素，并为对应的元素设置样式。

通过CSS选择器可以实现对HTML元素的

一对一（一个选择器对应一个元素）、

一对多（一个选择器对一个对应多个元素）、

多对一（多个选择器对应一个元素）的定位。

（2）CSS选择器的分类

基本选择器、层级选择器、组合选择器、伪类选择器、伪元素选择器

<1>基本选择器

1）元素选择器

通过HTML页面的元素名称设置CSS样式

语法结构：

元素名称 {
    属性名：属性值；
}

示例代码：

div {
    color: red;
}

2)类选择器

通过HTML元素的 class 属性值 来设置CSS样式

class属于通用属性

class属性的值与类选择器是一一对应的。

命名规则：

. className 不要忘了" . "

语法结构：

.className {

    属性名：属性值；

}

示例代码：

.myDiv {
   color: red;
}

3）ID选择器

语法结构：

# className {
    属性名：属性值；
}

示例代码：

#p1 {
    color:aqua;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ID选择器，语法规则： #ID*/
        #p1{
            color:cyan;
        }
        #p2{
            color:red;
        }
    </style>
</head>
<body>
    
    <p id="p1">启嘉班</p>
    <!-- id属性，唯一，不可以重复 -->
    <p id="p2">启嘉班123</p>
</body>
</html>

ID是通用属性

当有两个相同的ID 属性时，也不报错。

原因：HTML不是一个严格语言。

原则：页面开发不能以最终的效果为准。

4）通配符选择器

可以与任何元素匹配，定位当前HTML页面中的所有元素，显示为一个星号（ * ）。

应用：用来设置当前HTML页面的默样式

注意：通配符选择器的性能不好

语法规则：

* {
属性名：属性值；
}

示例代码：

* {
color: red;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIHyy6Ls-1596640212310)(C:\Users\acer\Desktop\me\0315启嘉html笔记截图\通配符选择器.png)]

5）属性选择器（HTML元素的属性）

根据元素的属性及属性值来选择元素。

语法规则：

[标题] 
{
属性名：属性值
}

示例代码

[title]
{
    color:blue;
}

6)基本选择器的优先级

CSS分配给每一种选择器类型的权重分值

1.通配符选择器的优先级为0

2.类型（元素）选择器的优先级为1

3.类选择器和属性选择器的优先级为10

4.ID选择器的优先级为100

5.内联样式的优先级为1000

结论：内联样式总会覆盖内嵌样式表和外联样式表的任何样式。

当选择器的优先级相同时，谁在后面谁的优先级就更高。

id选择器>类选择器>元素选择器

　　规则：选择器的权重值表述为4个部分，用0,0,0,0表示。
	　　　　　通配符*的权重为0,0,0,0
	　　　　　标签选择器、伪元素选择器的权重为0,0,0,1
	　　　　　类选择器、属性选择器、伪类选择器的权重为0,0,1,0
	　　　　　id选择器的权重为0,1,0,0
	　　　　　行内样式的权重为1,0,0,0
	　　　　　!imporatant的权重为∞

　　　　　权重大的选择器覆盖权重小的选择器
　　　　　同样权重的选择器，后面的覆盖前面的
　　　　　层叠选择器按照权重相加的结果，大的覆盖小的
　　　　　!imporatant的权重最大，没得抢了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器 */
        *{
            color:red;
        }
        /* 元素选择器 */
        h1 {
            color:yellow;
        }

        /* 类选择器和属性选择器的优先级别相同，谁在后面谁有效 */

        /* 类选择器 */
        .cls{
            color:chartreuse;
        }
        
        /* 属性选择器 */
        [stu] {
            color:darkgray;
        }

    </style>
</head>
<body>
    <!-- 内联样式优先级别最高 -->
    <h1 id="h1" class="cls" style=color:deeppink>启嘉班</h1>
    
</body>
</html>

<2>层级选择器

（1）后代选择器

在祖先元素的所有后代（子孙）中，定位指定元素。

标志是一个空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        .ancestor div{  /* 启嘉2 和 启嘉3 都会变红*/
            color:red;
        }
            
    </style>
</head>
<body>
    <div class="ancestor"> 
        启嘉1
        <div class="parent">
            启嘉2
            <div class="child">启嘉3</div>
        </div>
    </div>
</body>
</html>

（2）子代选择器

对父元素的所有子元素中进行定位

标志是大于号 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        .ancestor>div{  /*应该是启嘉2变红，但是因为color是继承性的，所以启嘉2和启嘉3都会变红*/
            color:red;
        }
    </style>
</head>
<body>
    <div class="ancestor"> 
        启嘉1
        <div class="parent">
            启嘉2
            <div class="child">启嘉3</div>
        </div>
    </div>
</body>
</html>

（3）相邻选择器

定位当前元素的直接同级相邻元素

标志是加号+

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻选择器</title>
    <style>
        .child1+div{   /*处于同一级的与child1相邻的child2会变红*/
            color:red;
        }
    </style>
</head>
<body>
    <div class="ancestor"> 
        启嘉1
        <div class="parent">
            启嘉2
            <div class="child0">this is child0</div>
            <div class="child1">this is child1</div>
            <div class="child2">this is child2</div>
            <div class="child3">this is child2</div>
        </div>
    </div>
</body>
</html>

（4）兄弟选择器

定位当前元素后面的所有同级相邻元素。

标志是 ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟选择器</title>
    <style>

        .child0~div{  /*同一级的child1、child2、child3都会变红*/
            color:red;
        }
    </style>
</head>
<body>
    <div class="ancestor"> 
        启嘉1
        <div class="parent">
            启嘉2
            <div class="child0">this is child0</div>
            <div class="child1">this is child1</div>
            <div class="child2">this is child2</div>
            <div class="child3">this is child3</div>
        </div>
    </div>
</body>
</html>

<3>组合选择器

（1）并集选择器

定位所有满足条件的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        h1,h2,h3,h4,h5,h6{  /*h1,h2,h3,h4,h5,h6标签里的内容都会变色*/
            color:deeppink;
        }
    </style>
</head>
<body>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    
</body>
</html>

（2）交集选择器

定位同时满足多个条件的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器</title>
    <style>
        p.cls {
            color:red; /* p标签的cls类，即 19级启嘉班 会变红*/
        }
    </style>
</head>
<body>
    <p>18级启嘉班</p>
    <p class="cls">19级启嘉班</p>
    <p>20级启嘉班</p>
    <div class="cls">启嘉班</div>
</body>
</html>

(3) ! important

在CSS中，通过对某一样式声明 ! important ，可以更改默认的CSS样式优先级规则，

作用:使该条样式属性声明具有最高优先级。

<4>伪类选择器

（1）否定伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>否定伪类选择器</title>
    <style>
        .cls {                   /* 使cls类的内容(world)变绿 */
            color:green;
        }

        p:not(.cls) {      /* 使p标签中不是cls类的内容(hello)的背景色变蓝 */
            background-color:blue;
        }

        body :not(p) {    /* 使body中不是div标签的内容(good)的加下划线 */
            text-decoration: underline;
        }

        
    </style>
</head>
<body>
    <p>hello</p> 
    <p class="cls">world</p>   
    <div>good</div>
</body>
</html>

（2）伪类选择器

选择鼠标指针浮动在其上的元素，并设置其样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 伪类选择器：
            概念：用来表示定位元素的某种状态所显示的样式
            语法： :关键字 例如：hover
         */
        button:hover{
            background-color:aqua;
        }
    </style>
</head>
<body>
    <button>按钮</button>  
    <!-- 当鼠标碰到按钮的时候，按钮会变色 -->
</body>
</html>

<5>伪元素选择器

（1）after 和 before伪元素

after在文本的后面加上指定的内容

before在文本的前面加上指定的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after</title>
    <style>
        P::before {
            content:"##"     /* 在启嘉班前面加上## */
        }

        p::after {            /* 在启嘉班后面加上** */
            content:"**"
        }

    </style>
</head>
<body>
    <p>启嘉班</p>
</body>
</html>

结果：##启嘉班**

（2）first-line伪元素

修饰定位内容的第一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-line选择器</title>
    <style>
        p::first-line {
            color:brown;   /* 把文本的第一行变颜色*/
        }
    </style>
</head>
<body>
    <p>终于到第四棒了，只见陆一凡弯着腰，身体微微前倾，右手接过接力棒，
        以迅雷不及掩耳之势拔腿就跑，“一凡，加油!一凡，加油!”啦啦队在后方拼命地呐喊
        。只见她迈开步伐，双臂前后甩动，脸涨得通红，被汗水浸湿的前刘海沾在了额头上。
        此时此刻，跑道便是她精彩的舞台;声声加油声便是她最高的奖项;湿透的衣衫、满头的
        大汗便是她精神和毅力的体现。虽然我们班只得了第六名，但是我们丝毫没有气馁，因为我
        们都尽力了，没有得名次也没有关系，享受过程才是最重要的。
        滴滴汗水洒遍了红色的塑胶跑道，声声呐喊响彻操场的上空，所有选手在比赛中赛出了水平
        ，赛出了风格，展现了青春的活力。</p>
</body>
</html>

(3)first-letter伪元素

修饰定位文本的第一个字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-letter</title>
    <style>
        p::first-letter {   /* 使“启”变色*/
            color:hotpink;
        }

    </style>
</head>
<body>
    <p>启嘉班</p>
</body>
</html>

（4）selection伪元素

::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection只可以应用于少数的CSS属性：

color 设置颜色

background-color 设置背景颜色

cursor:定义了鼠标指针放在一个元素边界范围内时所用的光标形状

outline：设置元素周围的轮廓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>selection伪元素选择器</title>
    <style>
        p::selection {      /* 选中文本后，字体颜色变为绿色，背景色变为粉色 */
            color:hotpink;
            background-color:olivedrab;
        }
    </style>
</head>
<body>
    <p>启嘉班happyhappyhappyhappyhappyhappyhappy</p>
</body>
</html>

三、CSS的颜色

1.色调

指图像的相对明亮程度，接近通意义上的颜色

2.饱和度

颜色中灰色的含量

3.亮度

颜色中黑色的含量

4.对比度

前景色与背景色之间的差异

5.Web安全色

不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。

Web安全色目前基本有216中颜色，非色彩有6中，开发时会用到210种Web安全色。

Web安全色：https://www.bootcss.com/p/websafecolors/

6.前景色与背景色

前景色和背景色就是color和background-color两个属性。

（1）前景色

前景色就是html文本内容的颜色color属性

（2）背景色

CSS的background-color属性用来设置HTML元素的颜色，

该属性的默认值是transparent(透明)

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>为页面设置背景色</title>
  <style>
    /* 改变浏览器窗口的整体背景色 */
    body {
      background-color: lightcoral;
    }
  </style>
</head>

<body>

</body>

</html>

7.颜色值的类型

颜色值可以通过如下3种类型进行定义

色彩关键字
RGB色彩模式
HSL色彩模式

（1）色彩关键字

色彩关键字是一个不区分大小写的标识符，表示一个具体的颜色。

CSS3版本时增加了很多颜色：具体参考MDN网站的色彩关键字文章。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%89%B2%E5%BD%A9%E5%85%B3%E9%94%AE%E5%AD%97

transparent关键字表示一个完全透明的颜色，并且transparent也是background-color属性的默认值。

（2）RGB模式

全称为 Red-Green-Blue,即红-绿-蓝。

CSS中使用RGB色彩模式的2种方式

1）16进制符号

#RRGGBB：是 # 符号后面缩写6个十六进制字符（0-9，A-F）每两位表示一个颜色值，颜色值最大是ff,最小是00

#RGB：是 # 符号后面编写3个十六进制字符（0-9，A-F）

[^说明：当#RRGGBB 格式中的两个R 或 G 或 B 值相同时，可以改写为 #RGB模式，例如：#ff0033就可以改写为 #f03]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB颜色表示法</title>
    <style>
        .p1 {
            color: #ff0000;
        }
        .p2 {
            color: #f00;
        }
    </style>
</head>
<body>
    <p class="p1">启嘉班1</p>
    <p class="p2">启嘉班2</p>
</body>
</html>

2）函数符 rgb(R,G,B)

这里的R、G、B的值可以使用0 ~ 255之间的值

这里的R、G、B的值可使用0% ~ 100%之间的值

[^说明：rgb(R,G,B) 的 255 和 100% 是一致的相当有十六进制符号中的FF]:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB颜色表示法</title>
    <style>
        .p1 {
            color: rgb(255,255,66);
        }
        .p2 {
            color: rgb(05,255,90);
        }
    </style>
</head>
<body>
    <p class="p1">启嘉班1</p>
    <p class="p2">启嘉班2</p>
</body>
</html>

3）HSL模式

全称 Hue-Saturation-Lightness 即色调-饱和度-亮度。

H : 表示色调，值范围是 0~360之间的一个角度。

S ：表示饱和度，值范围是 0% ~ 100% 之间的百分值。

L : 表示亮度，值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。

3.透明度

在CSS3版本中新增了opacity属性用来设置HTML元素的透明度，该属性的值范围介于0 ~ 1之间。

如果值为 0 或 0.0 表示完全透明

如果值为 0.5 表示半透明

如果值为 1 或 1.0 表示不透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度opacity</title>
    <style>
        div {
            background-color:blue;
        }
        .a1 {
            opacity: 0.2
        }
        .a2 {
            opacity: 0.5
        }
        .a3 {
            opacity: 0.9
        }
    </style>
</head>
<body>
    <div class='a1'>这是第一个测试内容</div>
    <div class='a2'>这是第二个测试内容</div>
    <div class='a3'>这是第三个测试内容</div>
</body>
</html>

CSS中的透明度除了提供opacity属性用法之外，还可以结合RGB模式和HSL模式共同使用

RGB模式增加了 rgba(R,G,B,A) 函数，其中 A 为 alpha 表示透明度。

HSL模式增加了 hsla(R,G,B,A) 函数，其中 A 为 alpha 表示透明度。

四、值和单位

1.什么是CSS的值

CSS中的值是一种定义允许子值集合的方法。

例如：色彩关键字、RGB色彩模式或 HSL色彩模式来描述颜色的值；长度值：10px或50%等。

2.什么是CSS的单位

在使用不同类型描述长度时，需要附加单位。

在CSS中具有2中不同类型的单位长度：

绝对单位长度
相对单位长度

（1）绝对单位长度

绝对单位长度所描述的长度一般与任何其他因素是无关的。

（2）相对单位长度

相对单位长度所描述的长度一般会具有一个明确的参考物。

1）像素值(px)

像素的英文是Pixel ，简写为px , 像素是指由一个数字序列表示的图像中的一个最小单位。构成影像的最小单位就是像素。像素与分辨率有关。

2）百分比（%）

百分比（%）总是将某个值作为参考，设置这个参考值的百分比。

3）em 和 rem

em 相对于父元素的字体大小

rem 相对于根元素的字体大小

weixin_46370867

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
HTML与CSS入门

一、 HTML1.HTML简介HTML是Hyper Text Markup Language的缩写，即：超文本标记语言。HTML是一门标记语言，不是一门编程语言。1.超文本：就是指页面内可以包含图片、链接，音乐，程序等非文字元素。2.标记语言：是一种将文本及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编辑。2、HTML版本发展历程1.超文本标记语言（第一版）2.HTML 2.03.HTML 3.24.HTML 4.0 ——1997年12月24日。W3C推荐标准
复制链接

扫一扫