HTML_CSS学习:CSS像素与颜色

devtools/2024/11/15 6:12:50/
htmledit_views">

一、像素

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>像素</title>
</head><style>.atguigu1{/*单位可以是cm,但不能是m,dm*/width: 1cm;height: 1cm;background-color: #f73131;}.atguigu2{/*单位可以是cm、mm,但不能是m,dm*/width: 1mm;height: 1mm;background-color: #f73131;}.atguigu3{/*单位可以是cm、,但不能是m,dm*/width: 100px;height: 100px;background-color: #f73131;}</style>
<body><div class="atguigu1"></div><br><div class="atguigu2"></div><br><div class="atguigu3"></div></body>
</html>

二、颜色_第一种表示_颜色名

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色名</title><style>.atguigu{color: blue;}</style>
</head>
<body><h2 class="atguigu">尚硅谷</h2></body>
</html>

三、颜色_第二种表示_rgb或rgba

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rgb和rgba表示</title><style>.atguigu1{color: rgb(255,0,0);}.atguigu2{color: rgb(0,255,0);}.atguigu3{color: rgb(0,0,255);}.atguigu4{color: rgb(133,43,226);}.atguigu5{color: rgb(100%,0%,0%);}.atguigu6{color: rgba(255,0,0,0.5);}.atguigu7{color: rgb(50,50,50);}</style>
</head>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2><h2 class="atguigu6">尚硅谷6</h2><h2 class="atguigu7">尚硅谷7</h2></body>
</html>

四、颜色_第三种表示_HEX或HEXA

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HEX或HEXA</title>
</head><style>.atguigu1{/*#color: #第一组第二组第三组;没两位一组,16进制*/color: #af17bf;}.atguigu2{/*#color: #第一组第二组第三组;没两位一组,16进制*/color: #7fbf17;}.atguigu3{/*#color: #第一组第二组第三组;没两位一组,16进制*/color: #be9b29;}.atguigu4{/*#color: #第一组第二组第三组;没两位一组,16进制*/color: #c7edcc;}.atguigu5{/*#color: #第一组第二组第三组;没两位一组,16进制*/color: #87ceebff;/*带有透明度*/}/*HEXA是8位最后1两位是透明度*/</style>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2></body>
</html>

五、颜色_第五种表示_HSL或HSAL

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HSL或HSLA</title><style>.atguigu1{/*color: hsl(色相,饱和度,亮度);*/color:hsl(0, 100%, 50%);}.atguigu2{/*color: hsl(色相,饱和度,亮度);*/color:hsl(60, 100%, 50%);}.atguigu3{/*color: hsl(色相,饱和度,亮度);*/color:hsl(120, 100%, 50%);}.atguigu4{/*color: hsl(色相,饱和度,亮度);*/color:hsl(180, 100%, 50%);}.atguigu5{/*color: hsl(色相,饱和度,亮度);*/color:hsl(240, 100%, 50%);}.atguigu6{/*color: hsl(色相,饱和度,亮度);*/color:hsl(300, 100%, 50%);.atguigu7{/*color: hsl(色相,饱和度,亮度);*/color:rgba(300, 100%, 50%, 0.55);}</style>
</head>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2><h2 class="atguigu6">尚硅谷6</h2><h2 class="atguigu7">尚硅谷7</h2></body>
</html>


http://www.ppmy.cn/devtools/28852.html

相关文章

《与 Apollo 共创生态——Apollo7周年大会干货分享》

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 阿波罗X企业自动驾驶解决方案自动驾驶技术提升与挑战自动驾驶系统功能与性能的详细解析<td alig…

【docker 】Windows10安装 Docker

安装 Hyper-V Hyper-V 是微软开发的虚拟机&#xff0c;仅适用于 Windows 10。 按键&#xff1a; win键X &#xff0c;选着程序和功能 在查找设置中输入&#xff1a;启用或关闭Windows功能 选中Hyper-V 点击确定 安装 Docker Desktop for Windows Docker Desktop 官方下载…

pyqt QSplitter控件

pyqt QSplitter控件 QSplitter控件效果代码 QSplitter控件 PyQt中的QSplitter控件是一个强大的布局管理器&#xff0c;它允许用户通过拖动边界来动态调整子控件的大小。这个控件对于创建灵活的、用户可定制的用户界面非常有用。 QSplitter控件可以水平或垂直地分割其包含的子…

code-server容器webpack的ws无法连接解决方法

TLDR 通过指定client的wsrul去连接ws devServer.client.webSocketURL ‘wss://<Forwarded uri>/ws’ 拓扑 1、code-server: 用于编写代码、启动webpack dev-server 服务&#xff1b;[https://<domain>:8001] 2、webpack: 用于浏览dev-server服务&#xff1b;[ht…

postman一直转圈圈,无法启动

解决 地址栏输入%appdata%进入此目录&#xff0c;删除%appdata%目录下的postman文件可以解决问题。

《青少年成长管理2024》084 “成长计划:计划分类”2_2

《青少年成长管理2024》084 “成长计划&#xff1a;计划分类”2_2 三、项目计划&#xff08;一&#xff09;什么是项目计划&#xff08;二&#xff09;基础项目计划&#xff08;三&#xff09;要素项目计划&#xff08;四&#xff09;专业项目计划 四、任务计划&#xff08;一&…

C语言—函数

一、函数的概念 函数是C语言的基本功能单位&#xff0c;实现一个功能可以通过封装一个函数来实现&#xff1b; 封装函数一切以函数的功能为主&#xff0c;根据功能来设置参数和返回值&#xff1b; 函数就是讲特定功能的代码封装在一个函数内部&#xff0c;当要使用这些代码时…

Linux进程——进程的创建(fork的原理)

前言&#xff1a;在上一篇文章中&#xff0c;我们已经会使用getpid/getppid函数来查看pid和ppid,本篇文章会介绍第二种查看进程的方法&#xff0c;以及如何创建子进程&#xff01; 本篇主要内容&#xff1a; 查看进程的第二种方法创建子进程系统调用函数fork 在开始前&#xff…