HTML_CSS学习:CSS像素与颜色

server/2024/9/22 23:50:30/
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/server/27803.html

相关文章

数据库原理与应用实验二 SQL SERVER查询分析器的使用

实验目的和要求 熟悉SQL SERVER环境&#xff0c;熟悉查询分析器的使用&#xff0c;能够熟练运用sql命令完成数据库&#xff0c;基本表、主码、外码和其它必要的约束条件的定义。 实验环境 Windows10 SQLServer 实验内容与过程 1 利用sql建立图书管理数据库&#xff0c;并定…

【PCL】教程 example2 3D点云之间的精确配准(FPFH特征对应关系估计变换矩阵)

这段代码主要实现了点云之间的配准功能&#xff0c;旨在通过估计点云的特征并找到最佳的对应关系来计算一个变换矩阵&#xff0c;从而可以将源点云&#xff08;src&#xff09;变换到目标点云&#xff08;tgt&#xff09;的坐标系统中。 代码功能和方法总结如下&#xff1a; 估…

C++关键概念 泛型编程 模板的元编程 印第安纳 得克萨斯

C++关键概念 泛型编程 泛型编程是C++中的一项关键概念,它允许程序员在定义数据结构、算法或类时使用类型参数。这些类型参数可以是任何数据类型,如整数、浮点数、字符串等。通过使用泛型,程序员可以编写出更加灵活、可重用的代码,而不需要为每种数据类型都编写特定的代码。…

进程的概念

文章目录 1、什么是进程&#xff08;Process&#xff09;2、PCB1.pid进程的id/标识符2.内存指针3.文件描述符表4、进程调度4.1状态4.2优先级4.3上下文4.4记账信息 1、什么是进程&#xff08;Process&#xff09; 一个程序&#xff0c;运行起来/跑起来&#xff0c;在操作系统中…

【MySQL】驱动表、被驱动表详解。—— 性能优化。

文章目录 什么是 驱动表 和 被驱动表&#xff1f;哪个表是驱动表&#xff1f;性能优化建议&#xff1a; 我是一名立志把细节都说清楚的博主&#xff0c;欢迎【关注】&#x1f389; ~ 原创不易&#xff0c; 如果有帮助 &#xff0c;记得【点赞】【收藏】 哦~ ❥(^_-)~ 如有错误…

汽车车灯的材料是什么?汽车车灯的灯罩如果破损破裂破洞了要怎么修复?

汽车车灯的材料主要包括灯罩和灯底座两部分&#xff0c;它们所使用的材料各不相同。 车灯罩的材料主要是透明且具有良好耐热性和耐紫外线性能的塑料。其中&#xff0c;聚碳酸酯&#xff08;PC&#xff09;是一种常用的材料&#xff0c;它具有高抗冲击性、耐化学品腐蚀和优良的…

正版Office-Word使用时却提示无网络连接请检查你的网络设置 然后重试

这是购买电脑时自带的已经安装好的word。看纸箱外壳有office标记&#xff0c;但是好像没有印系列号。 某天要使用。提示&#xff1a;无网络连接请检查你的网络设置。 经过网上高手的提示&#xff1a; 说要勾选勾选ssl3.0、TLS1.0、1.1、1.2。 我的截图 我电脑进去就缺1.2. …

用Scrapy 从数据挖掘到监控和自动化测试

Scrapy 是一个 BSD 许可的快速高级网络爬虫和网络抓取框架&#xff0c;用于抓取网站并从其页面中提取结构化数据。它可以用于广泛的用途&#xff0c;从数据挖掘到监控和自动化测试。 安装scrapy pip install scrapy 爬虫示例 示例代码写入文件 import scrapyclass QuotesSp…