【前端】如何制作一个自己的代码(10)

接上文。

  1. 颜色名称

color的属性值,设置成颜色的英文名就能显示对应的颜色。

比如,这里的red表示红色,这种设置颜色的方式是最简单的。

但是不同的浏览器,对颜色的解析可能存在差异,实际开发中不建议使用颜色名称来指定颜色。

<style>

    h3 {

        color: red;

    }

<style>   

<h3>夜曲编程</h3>

2. RGB

也就是说,为了更精确地表示颜色,我们会通过具体的数值来最大限度地控制颜色。接下来,我们先来看看RGB,是如何表示颜色的。

rgb()函数

RGB是red、green、blue的首字母缩写。

rgb()函数,是通过对red、green、blue三原色的强度进行控制,从而实现不同的颜色。

rgb()的语法规则:rgb(red,green,blue)

这三个参数的取值为0到255的整数,最低值为0,最高值为255

<style>

    h3 {

        color: rgb(255,0,0);

    }

</style>

<h3>夜曲编程</h3>

补充:

部分RGB

红,绿,蓝三原色叠加,组合起来有1600多万种不同的颜色。我们了解几种常见的颜色,更多复杂的颜色使用时再查询即可。

         

3.十六进制码

CSS中,除了使用RGB定量地表示颜色,还有一种常见的表达方法--十六进制码。

十六进制码,是以#开头的6位十六进制数表示颜色的方式。其语法规则为:#FF0000

这个6位数可以分为三组,依次对应red、green、blue三种颜色的强度。

每组两位数,最低值为00,最高值为FF

比如#FF0000的FF表示red的强度,00表示green的强度,后一组00表示blue的强度。

<style>

    h3 {

        color: #FF0000;

    }

</style>

<h3>夜曲编程</h3>

补充:

部分十六进制码

十六进制码大小写都可以。同样的,我们不需要记住太多十六进制码。有很多网页工具提供了不同颜色的十六进制码。

              

十六进制码的简写

使用十六进制码表示颜色时,如果每组的两个十六进制数是相同的。

例如 #FF0000、#FFFFFF、#AABBCC,则可以将它们简写#F00、#FFF、#ABC。

背景颜色

除了字体颜色外,在制作网页时我们往往会在网页中添加一些背景颜色让网页更加美观,吸引访问者的眼球。

我们设置字体颜色时,使用color属性。

而设置背景颜色,则使用background-color属性,属性值同样可以使用颜色名称、RGB和十六进制码。

第6-9行,通过RGB的方式,给h3元素设置背景颜色为:rgb(255,176,51)

第11-14行,通过十六进制码的方式,给p元素设置背景颜色为:#5E80F4

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <style>

        h3 {

            /* 给h3元素,设置背景颜色为rgb(255,176,51) */

            background-color: rgb(255,176,51);

        }

       

        p {

            /* 给p元素,设置背景颜色#5E80F4 */

            background-color: #5E80F4;

        }

    </style>

</head>

<body>

    <h3>夜曲编程</h3>

    <p>网页开发基础</p>

</body>

</html>

除了前面的颜色样式外,字体样式和文本样式也是网页设计中的重要组成部分。

合适的字体和文本排版,不仅可以使页面更加美观,也可以提升用户体验。接下来,我们先来看看CSS如何设置字体样式

CSS设置字体样式的属性有很多。

比如,更改字体类型、控制字体风格、控制字体大小和粗细等等。

因为字体英文为font,所以四个属性都是以font开头。

明天继续。

今天累了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/451104.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE基础(2)

一.分析脚手架 1.1.脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── He…

内网wordpress更换IP后无法访问的解决办法

一、现象 一台装有wordpress的台式机&#xff0c;从一个校区移到了另一个校区&#xff0c;更换了IP地址&#xff0c;导致无法正常访问。 二、分析 安装wordpress的时候里面的ip&#xff08;或域名&#xff09;都已固定。安装好后&#xff0c;内网通过IP访问&am…

2024年10月份实时获取地图边界数据方法,省市区县街道多级联动【附实时geoJson数据下载】

首先&#xff0c;来看下效果图 在线体验地址&#xff1a;https://geojson.hxkj.vip&#xff0c;并提供实时geoJson数据文件下载 可下载的数据包含省级geojson行政边界数据、市级geojson行政边界数据、区/县级geojson行政边界数据、省市区县街道行政编码四级联动数据&#xff0…

7、Vue2(二) vueRouter3+axios+Vuex3

14.vue-router 3.x 路由安装的时候不是必须的&#xff0c;可以等到使用的时候再装&#xff0c;如果之前没有安装的话&#xff0c;可以再单独安装。之前的终端命令行不要关闭&#xff0c;再重新开一个&#xff0c;还需要再package.json文件的依赖中添加。 如果忘记之前是否有安…

ESP32移植Openharmony设备开发---(4)Timer定时器

Timer内核定时器 官方文档&#xff1a;OpenAtom OpenHarmony 所需头文件&#xff1a;los_swtmr.h 头文件所在位置&#xff1a; 基本概念&#xff1a; 软件定时器 软件定时器&#xff0c;是基于系统Tick时钟中断且由软件来模拟的定时器&#xff0c;当经过设定的Tick时钟计数…

猫分鱼干 -算法题解

题目 假如有一群猫排成一行&#xff0c;要分配鱼干&#xff0c;每一只猫都有一个等级值。你作为管理员有很多鱼干但是需要按下边的分配制度分配&#xff1a; 1. 每一只猫至少要分配一斤鱼干&#xff0c;鱼干分配最小单位是斤&#xff0c;必须保证是整数。 2. 猫比他们邻居有更高…

大语言模型训练

大语言模型训练 1.两大问题2.并行训练2.1数据并行2.2模型并行2.3张量并行2.4混合并行 3.权重计算3.1浮点数3.2混合精度训练3.3deepspeed&#xff08;微软&#xff09;3.3.1 ZeRO3.3.2ZeRO-offload 3.3总结 4.PEFT4.1Prompt TuningPrefix-tuning4.2P-tuning & P-tuning v2 5…

数字图像处理:图像去噪

图像去噪–总变差去噪&#xff08;TV&#xff09; 引用资料&#xff1a; 1.全变分图像去噪算法&#xff08;TV&#xff09; 2.TV去噪的理解 总变差去噪 (Total Variation Denoising) 是一种经典的图像去噪方法&#xff0c;能够有效减少噪声&#xff0c;同时保留图像的边缘细节…

10.15.2024刷华为OD C题型(二)

10.15.2024刷华为OD C题型&#xff08;二&#xff09; 密码输入检测智能成绩表 如果是目标院校150分能过&#xff0c;而且这道题是两百分的话我就阿弥陀佛了。 这类简单类型的字符串处理题目一看就有思路&#xff0c;起码能做&#xff0c;遇到那种稍微加点数学的&#xff0c;感…

【STM32 HAL库】MPU6050姿态解算 卡尔曼滤波

【STM32 HAL库】MPU6050姿态解算 卡尔曼滤波 前言MPU6050寄存器代码详解mpu6050.cmpu6050.h 使用说明 前言 本篇文章基于卡尔曼滤波的原理详解与公式推导&#xff0c;来详细的解释下如何使用卡尔曼滤波来解算MPU6050的姿态 参考资料&#xff1a;Github_mpu6050 MPU6050寄存器…

C语言中的文件操作:从基础到深入底层原理

文件操作是几乎所有应用程序的重要组成部分&#xff0c;特别是在系统级编程中。C语言因其高效、灵活以及接近硬件的特点&#xff0c;成为了文件操作的理想选择。本文将全面深入地探讨C语言中的文件操作&#xff0c;从文件系统的概念到具体的文件操作函数&#xff0c;再到底层的…

外包干了2年,技术原地踏步。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近2年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试&…

020 elasticsearch7.10.2 elasticsearch-head kibana安装

文章目录 全文检索流程ElasticSearch介绍ElasticSearch应用场景elasticsearch安装允许远程访问设置vm.max_map_count 的值 elasticsearch-head允许跨域 kibana 商品数量超千万&#xff0c;数据库无法使用索引 如何使用全文检索&#xff1a; 使用lucene&#xff0c;在java中唯一…

Nginx(Linux):启动停止Nginx

目录 1、理解Nginx后台进程2、停止Nginx(方式一&#xff1a;使用信号源)2.1 获取master进程号2.1 设置信号源 3、停止Nginx(方式二&#xff1a;使用命令行) 1、理解Nginx后台进程 Nginx后台进程包含master和worker两类进程。 master进程&#xff1a;主要用来管理worker进程&am…

鸿蒙学习笔记--搭建开发环境及Hello World

文章目录 一、概述二、开发工具下载安装2.1 下载开发工具DevEco Studio NEXT2.2 安装DevEco Studio 三、启动软件四、第一个应用Hello World4.1 创建应用4.2 创建模拟器4.3 开启Hyper-v功能4.4 启动虚拟机 剑子仙迹 诗号&#xff1a;何须剑道争锋&#xff1f;千人指&#xff0c…

【Linux】:线程概念

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家带来线程概念相关代码和知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…

9.存储过程安全性博客大纲(9/10)

存储过程安全性博客大纲 引言 在数据库系统中&#xff0c;存储过程是一种预先编写好的SQL代码集合&#xff0c;它被保存在数据库服务器上&#xff0c;可以通过指定的名称来调用执行。存储过程可以包含一系列的控制流语句&#xff0c;如IF条件语句、WHILE循环等&#xff0c;使…

智能汽车制造:海康NVR管理平台/工具EasyNVR多品牌NVR管理工具/设备实现无插件视频监控直播方案

一、背景介绍 近年来&#xff0c;随着网络在我国的普及和深化发展&#xff0c;企业的信息化建设不断深入&#xff0c;各行各业都加快了信息网络平台的建设&#xff0c;大多数单位已经或者正在铺设企业内部的计算机局域网。与此同时&#xff0c;网络也成为先进的新兴应用提供了…

【Git】基本操作+分支管理

Git基本操作 Git仓库创建 Git仓库的基本认知 Git仓库就是一个用来跟踪和管理项目文件变化的地方&#xff0c;其记录了所有的修改历史&#xff0c;可以回退到之前的任何一个历史版本 工作区&#xff1a;正在进行实际操作的文件夹暂存区&#xff1a;临时保存想要提交修改的区域…

【LeetCode:349. 两个数组的交集 + 哈希表】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…