07.CSS常用样式

CSS常用样式

1.颜色样式

颜色名

介绍

直接使用颜色对应的英文单词,编写比较简单

具体颜色名参考 MDN 官方文档

例子
p {
    color:red;
}
缺点

颜色名这种方式,表达的颜色比较单一,所以用的并不多

rgb或rgba

介绍

使用 红、黄、蓝 这三种光的三原色进行组合

  • r:红色
  • g:绿色
  • b:蓝色
  • a:透明度
举例
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色(用的少) */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
规律
  • 若三种颜色值相同,呈现的是灰色,值越大,灰色越浅
  • rgb(0, 0, 0) 是黑色, rgb(255, 255,255) 是白色
  • 对于 rbga 来说,前三位的 rgb 形式要保持一致,要么都是 0~255 的数字,要么都是百分比

HEX 或 HEXA

介绍

HEX 的原理同与 rgb 一样,依然是通过:红、绿、蓝色 进行组合,只不过要用 6位(分成3组) 来表达

格式
# rrggbb
组成
  • 每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f )
  • 所以每一种光的最小值是: 00 ,最大值是: ff
示例
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的,就可以简写*/
color: #ff9988;/* 可简为:#f98 */
/* 但要注意前三位简写了,那么透明度就也要简写 */
color: #ff998866;/* 可简为:#f986 */
注意点

IE 浏览器不支持 HEXA ,但支持 HEX

HSL 或 HSLA

介绍
  • HSL:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
  • 色相:取值范围是 0~360 度
  • 饱和度:取值范围是 0%~100%(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)
  • 亮度:取值范围是 0%~100%( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是
    白色了)
  • HSLA 其实就是在 HSL 的基础上,添加了透明度
图示色相

取色工具

如果想要从颜色中获取 rgba,那么可以依赖一些取色工具

2.字体样式

字体大小

作用

控制字体的大小

属性名

font-size

语法
div {
    font-size: 40px;
}
注意点
  • Chrome 浏览器支持的最小文字为 12px ,默认的文字大小为 16px ,并且 0px 会自动消失
  • 不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小
  • 通常以给 body 设置 font-size 属性,这样 body 中的其他元素就都可以继承了

字体族

作用

控制字体类型

属性名

font-family

语法
div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}
注意
  • 使用字体的英文名字兼容性会更好,具体的英文名可以自行查询,或在电脑的设置里去寻找
  • 如果字体名包含空格,必须使用引号包裹起来
  • 可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,没有找到就使用后面的,且通常在最后写上 serif (衬线字体)或 sans-serif (非衬线字体)
  • windows 系统中,默认的字体就是微软雅黑

字体风格

作用

控制字体是否为斜体

属性名

font-style

常用值
  • normal:正常(默认值)
  • italic:斜体(使用字体自带的斜体效果)
  • oblique:斜体(强制倾斜产生的斜体效果)
语法
div {
    font-style: italic;
}
推荐

实现斜体时,更推荐使用 italic

字体粗细

作用

控制字体的粗细

属性名

font-weight

常用值
  • 关键词:lighter(细),normal(正常),bold(粗), bolder(很粗,多数字体不支持)
  • 数值:100~1000 且无单位,数值越大,字体越粗
  • 100~300 等同于 lighter , 400~500 等同于 normal , 600 及以上等同于 bold
语法
div {
    font-weight: bold;
}
div {
    font-weight: 600;
}

字体复合写法

作用

将上述所有字体相关的属性复合在一起编写

编写规则
  • 字体大小、字体族必须都写上
  • 字体族必须是最后一位、字体大小必须是倒数第二位
  • 各个属性间用空格隔开
推荐

实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 font-size 属性

3.文本样式

文本颜色

作用

控制文字的颜色

属性名

color

可选值
  • 颜色名
  • rgb 或 rgba
  • HEX 或 HEXA
  • HSL 或 HSLA
举例
div {
    color: rgb(112,45,78);
}

文本间距

作用

调整字母或单词之间的间距

可选值
  • 字母间距:letter-spacing
  • 单词间距:word-spacing(通过空格识别词)
  • 属性值为像素( px ),正值让间距增大,负值让间距缩小

文本修饰

作用

控制文本的各种装饰线

属性名

text-decoration

可选值
  • none:无装饰线(常用)
  • underline:下划线(常用)
  • overline:上划线
  • line-through:删除线
可搭配值
  • dotted:虚线
  • wavy:波浪线
  • 也可以指定颜色
举例
a {
    text-decoration: none;
}

文本缩进

作用

控制文本首字母的缩进

属性名

text-indent

属性值

css 中的长度单位,例如: px

举例
div {
    text-indent:40px;
}

文本对齐之水平

作用

控制文本的水平对齐方式

属性名

text-align

常用值
  • left:左对齐(默认值)
  • right:右对齐
  • center:居中对齐
举例
div {
    text-align: center;
}

行高

作用

控制一行文字的高度

属性名

line-height

可选值
  • normal:由浏览器根据文字大小决定的一个默认值
  • 像素( px )
  • 数字:参考自身 font-size 的倍数(很常用)
  • 百分比:参考自身 font-size 的百分比
备注

由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感

举例
div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}
注意事项
  • line-height 过小会怎样?文字产生重叠,且最小值是 0 ,不能为负数
  • line-height 是可以继承的,且为了能更好的呈现文字,最好写数值
  • line-height 和 height 是什么关系?设置了 height ,那么高度就是 height 的值。不设置 height 的时候,会根据 line-height 计算高度
应用场景
  • 对于多行文字:控制行与行之间的距离
  • 对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中

文本对齐之垂直

作用

使文本垂直对其

可选值
  • 顶部:无需任何属性,在垂直方向上,默认就是顶部对齐
  • 居中:对于单行文字,让 height = line-height 即可
  • 底部:最好用定位去做,当然这种也可以 line-height = ( height × 2 ) - font-size - x(x 是根据字体族,动态决定的一个值)

vertical-align

作用

用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式

属性名

vertical-align

常用值
  • baseline(默认值):使元素的基线与父元素的基线对齐
  • top:使元素的顶部与其所在行的顶部对齐
  • middle:使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
  • bottom:使元素的底部与其所在行的底部对齐
特别注意

vertical-align 不能控制块元素

4.列表属性

5.边框属性

6.表格属性

7.背景属性

8.鼠标属性

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java版企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。 2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看所…

水闸水雨情监测设施建设项目

功能设计 在水闸上、下游挡墙外侧各安装1套雷达水位计,水闸屋顶布置个雨量计,水位及雨量监测数据的采集与传输主要是实时的完成水位、雨量数据的采集与处理,并按照设定的工作方式、时间间隔、增量范围将数据上传至扬压力监测站边缘计算终端&…

EasyExcel实现⭐️本地excel数据解析并保存到数据库的脚本编写,附案例实现

目录 前言 一、 EasyExcel 简介 二、实战分析 1.Controller控制层 2. service方法和方法实现 3.EasyExcel相关类 3.1 excel表实体类 3.2 自定义监听器类 4.测试 4.1 准备工作 4.2 断点调试 5.生成脚本文件 三、分析总结 章末 小伙伴们大家好,最近开发的时…

微服务最佳实践:构建可扩展且高效的系统

微服务架构彻底改变了现代软件开发,提供了无与伦比的敏捷性、可扩展性和可维护性。然而,有效实施微服务需要深入了解最佳实践,以充分发挥微服务的潜力,同时避免常见的陷阱。在这份综合指南中,我们将深入研究微服务的关…

getchar的功能和用法

getchar()是C语言中的一个标准库函数,用于从标准输入(通常是键盘)读取一个字符,并将其作为int类型返回。它通常用于从键盘获取用户输入。 getchar()函数在程序中等待用户输入,当用户输入一个字符并按下回车键后&#…

【抄作业】ubuntu完全卸载CUDA,彻底卸载cuda,卸载不同版本的cuda,cuda不同版本的卸载方法

卸载的实现方法 如何正确、完全的卸载cuda呢? 其实cuda安装时就已经准备好了卸载的接口,卸载程序在/usr/local/cuda-xx.x/bin下,需要注意的是cuda10.0及之前的版本卸载程序名为uninstall_cuda_xx.x.pl,而cuda10.1及之后的版本卸…

【玩转 TableAgent数据智能分析】-数据分析师的大模型

【玩转 TableAgent数据智能分析】-数据分析师的大模型 九章云极DataCanvas介绍TableAgent的新手入门指南:官网首页立刻体验问题测试问题1:问题2:问题3:问题4:问题5: 通用大模型对比分析对csv数据集的支持比…

【游戏篇】Scratch之小猴子接水果

【作品展示】小猴子接水果 操作:点击小绿旗,按下键盘左右键控制小猴子移动拿到水果,同时也要躲避炸弹。

Windows汇编调用printf

VS2022 汇编 项目右键 生成依赖项 生成自定义 勾选masm 链接器 高级 入口点 main X86 .686 .model flat,stdcall option casemap:none includelib ucrt.lib includelib legacy_stdio_definitions.libEXTERN printf:proc.data szFormat db %s,0 szStr db hello,0.code main…

Python Socket编程

Python Socket编程 文章目录 Python Socket编程1. 弄懂HTTP、Socket、TCP这几个概念五层网络模型 2. client和server实现通信Socket编程模式指南代码实现 3. socket实现聊天和多用户连接4. socket模拟http请求 1. 弄懂HTTP、Socket、TCP这几个概念 整个计算机网络都是有协议组…

leetcode算法题:省份数量

leetcode算法题547 链接:https://leetcode.cn/problems/number-of-provinces 题目 有 n 个城市,其中一些彼此相连,另一些没有相连。如果城市 a 与城市 b 直接相连,且城市 b 与城市 c 直接相连,那么城市 a 与城市 c 间…

c#按照时间进行数据存储(不用数据库)

概要介绍 按照日期生成文件夹,按照时间生成文件名,存储字符串。 可以用于简单数据记录(如果数据存储考虑格式文本,保存为csv格式) 实现效果 调用方法 SaveText.saveStr("测试字符串"DateTime.Now.ToStrin…

6.3 C++11 原子操作与原子类型

一、原子类型 1.多线程下的问题 在C中&#xff0c;一个全局数据在多个线程中被同时使用时&#xff0c;如果不加任何处理&#xff0c;则会出现数据同步的问题。 #include <iostream> #include <thread> #include <chrono> long val 0;void test() {for (i…

C语言算法~BF算法和KMP算法

各位CSDN的各位你们好啊&#xff0c;今天小赵要给大家分享一个算法方面的知识这个算法也是小赵琢磨了好久&#xff0c;才算把它理明白&#xff0c;今天小赵就用一篇博客带你理明白这个算法——KMP算法。当然再介绍这个算法前&#xff0c;小赵还会介绍一个BF算法和一个函数&…

对多个 App 设计工具组件使用一个回调

当要在App 中提供多种方法来执行某个操作时&#xff0c;在组件间共享回调非常有用。例如&#xff0c;当用户点击按钮或在编辑字段中按下 Enter 键时&#xff0c;App 可以用同样的方式响应。 共享回调的示例 此示例说明如何创建一个 App&#xff0c;其中包含共享一个回调的两个…

数字孪生博物馆解决方案

数字孪生技术在博物馆领域的应用&#xff0c;可以为博物馆提供更丰富的数字化体验&#xff0c;促进文物的保护、展示和教育。以下是数字孪生博物馆解决方案的一些关键组成部分&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…

vue echart实现横向柱状图颜色渐变、标签右对齐

需求&#xff1a;用echart实现柱状图的横向展示&#xff0c;对指定数据的柱状图进行颜色区分&#xff0c;且对应标签值展示在柱状图右侧&#xff0c;实现文字的右对齐。 主要问题点&#xff1a; 1、柱状图的颜色渐变 通过colorStops设置color渐变的起止颜色&#xff0c; color…

在Linux上安装配置Nginx高性能Web服务器

1 前言 Nginx是一个高性能的开源Web服务器&#xff0c;同时也可以作为反向代理服务器、负载均衡器、HTTP缓存以及作为一个邮件代理服务器。它以其出色的性能和灵活性而闻名&#xff0c;被广泛用于处理高流量的网站和应用程序。本文将介绍在Linux环境中安装Nginx的步骤&#xf…

josef约瑟 静态电压继电器 HWY-41B 19-240V 导轨式安装

HWY-40系列无辅源静态电压继电器 HWY-41A无辅源静态电压继电器 HWY-42A无辅源静态电压继电器 HWY-43A无辅源静态电压继电器 HWY-44A无辅源静态电压继电器 HWY-45A无辅源静态电压继电器 HWY-41B无辅源静态电压继电器 HWY-42B无辅源静态电压继电器 HWY-43B无辅源静态电压继电器 …

【项目管理】CMMI对项目管理有哪些个人启发和思考

导读&#xff1a;本人作为项目经理参与公司CMMI5级评审相关材料准备工作&#xff0c;现梳理CMMI有关知识点&#xff0c;并结合项目给出部分示例参考&#xff0c;以及本人对于在整理材料过程中一些启发和体验思考。 目录 1、CMMI定义 2、CMMI-5级 3、CMMI文档清单 4、示例-度…