当前位置: 首页 > news >正文

CSS常用属性

CSS常用属性

1. 像素的概念

  • 概念:我们的电脑屏幕是,是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)。
  • 规律:像素点越小,呈现的内容就越清晰、越细腻。

注意点:如果电脑设置中开启了缩放,那么就会影响一些工具的测量结果,但这无所谓,因为我们工作中都是参考详细的设计稿,去给元素设置宽高。

2. 颜色的表示

2.1 表示方式一:颜色名

  • 编写方式:直接使用颜色对应的英文单词,编写比较简单,例如:
    color : red;

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

2.2 表示方式二:rgb 或 rgba

  • 编写方式:使用 红、绿、蓝 这三种光的三原色进行组合。
  • r表示红色,g表示绿色,b表示蓝色,a表示透明度。
  • 举例:
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 *//* 也可以使用百分比表示一种颜色(用的少) */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
  • 小规律:
    1. 若三种颜色值相同,呈现的是灰色,值越大,灰色越浅。
    2. rgb(0, 0, 0) 是黑色, rgb(255, 255,255) 是白色。
    3. 对于 rbga 来说,前三位的 rgb 形式要保持一致,要么都是 0~255 的数字,要么都是百分比 。

2.3 表示方式三: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: #ff9988;/* 可简为:#f98 *//* 但要注意前三位简写了,那么透明度就也要简写 */
color: #ff998866;/* 可简为:#f986 */

注意点: IE 浏览器不支持 HEXA ,但支持 HEX 。

2.4 表示方式四:HSL 或 HSLA

  • HSL 是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)
    • 色相:取值范围是 0~360 度,具体度数对应的颜色如下图:
      在这里插入图片描述
    • 饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)
    • 亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是白色了)
  • HSLA 其实就是在 HSL 的基础上,添加了透明度。

3. CSS字体属性

3.1 字体大小

  • 属性名: font-size
  • 作用:控制字体的大小。
  • 语法:
div {font-size: 40px;
}
  • 注意点:
    1. Chrome 浏览器支持的最小文字为 12px ,默认的文字大小为 16px ,并且 0px 会自动消失。
    2. 不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小。
    3. 通常以给 body 设置 font-size 属性,这样 body 中的其他元素就都可以继承了。
  • 借助控制台看样式:
    在这里插入图片描述

3.2 字体族

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

3.3 字体风格

  • 属性名: font-style
  • 作用:控制字体是否为斜体。
  • 常用值:
    1. normal :正常(默认值)
    2. italic :斜体(使用字体自带的斜体效果)
    3. oblique :斜体(强制倾斜产生的斜体效果)

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

  • 语法:
div {font-style: italic;
}

3.4 字体粗细

  • 属性名: font-weight
  • 作用:控制字体的粗细。
  • 常用值:
    • 关键词:
      1. lighter :细
      2. normal : 正常
      3. bold :粗
      4. bolder :很粗 (多数字体不支持)
    • 数值:
      1. 100~1000 且无单位,数值越大,字体越粗 (或一样粗,具体得看字体设计时的精确程度)。
      2. 100~300 等同于 lighter , 400~500 等同于 normal , 600 及以上等同于bold 。
  • 语法:
div {font-weight: bold;
}
div {font-weight: 600;
}

3.5 字体复合写法

  • 属性名: font ,可以把上述字体样式合并成一个属性。
  • 作用:将上述所有字体相关的属性复合在一起编写。
  • 编写规则:
    1. 字体大小、字体族必须都写上。
    2. 字体族必须是最后一位、字体大小必须是倒数第二位。
    3. 各个属性间用空格隔开。
  • 实际开发中更推荐复合写法,但这也不是绝对的,比如只想设置字体大小,那就直接用 font-size 属性。

4. CSS文本属性

4.1 文本颜色

  • 属性名: color
  • 作用:控制文字的颜色。
  • 可选值:
    1. 颜色名
    2. rgb 或 rgba
    3. HEX 或 HEXA (十六进制)
    4. HSL 或 HSLA

开发中常用的是: rgb/rgba 或 HEX/HEXA (十六进制)。

  • 举例:
div {color: rgb(112,45,78);
}

4.2 文本间距

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

4.3 文本修饰

  • 属性名: text-decoration
  • 作用:控制文本的各种装饰线。
  • 可选值:
    1. none : 无装饰线(常用)
    2. underline :下划线(常用)
    3. overline : 上划线
    4. line-through : 删除线
  • 可搭配如下值使用:
    1. dotted :虚线
    2. wavy :波浪线
    3. 也可以指定颜色
  • 举例:
a {text-decoration: none;
}

4.4 文本缩进

  • 属性名: text-indent 。
  • 作用:控制文本首字母的缩进。
  • 属性值: css 中的长度单位,例如: px
  • 举例:
div {text-indent:40px;
}

后面我们会学习 css 中一些新的长度单位,目前我们只知道像素( px )。

4.5 文本对齐_水平

  • 属性名: text-align 。
  • 作用:控制文本的水平对齐方式。
  • 常用值:
    1. left :左对齐(默认值)
    2. right :右对齐
    3. center :居中对齐
  • 举例:
div {text-align:  center;
}

4.6 细说 font-size

  1. 由于字体设计原因,文字最终呈现的大小,并不一定与 font-size 的值一致,可能大,也可能小。

例如: font-size 设为 40px ,最终呈现的文字,可能比 40px 大,也可能比 40px小。

  1. 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。

4.7 行高

  • 属性名: line-height
  • 作用:控制一行文字的高度。
  • 可选值:
    1. normal :由浏览器根据文字大小决定的一个默认值。
    2. 像素( px )。
    3. 数字:参考自身 font-size 的倍数(很常用)。
    4. 百分比:参考自身 font-size 的百分比。
  • 备注:由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。
  • 举例:
div {line-height: 60px;line-height: 1.5;line-height: 150%;
}
  • 行高注意事项:

    1. line-height 过小会怎样?—— 文字产生重叠,且最小值是 0 ,不能为负数。
    2. line-height 是可以继承的,且为了能更好的呈现文字,最好写数值。
    3. line-height 和 height 是什么关系?
      • 设置了 height ,那么高度就是 height 的值。
      • 不设置 height 的时候,会根据 line-height 计算高度。
  • 应用场景:

    1. 对于多行文字:控制行与行之间的距离。
    2. 对于单行文字:让 height 等于 line-height ,可以实现文字垂直居中。

备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感。

4.8 文本对齐_垂直

    1. 顶部:无需任何属性,在垂直方向上,默认就是顶部对齐。
    1. 居中:对于单行文字,让 height = line-height 即可。

问题:多行文字垂直居中怎么办?—— 后面我们用定位去做。

    1. 底部:对于单行文字,目前一个临时的方式:
      让 line-height = ( height × 2 ) - font-size - x 。
      备注: x 是根据字体族,动态决定的一个值。

问题:垂直方向上的底部对齐,更好的解决办法是什么?—— 后面我们用定位去做。

4.9 vertical-align

  • 属性名: vertical-align 。
  • 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式。
  • 常用值:
    1. baseline (默认值):使元素的基线与父元素的基线对齐。
    2. top :使元素的顶部与其所在行的顶部对齐。
    3. middle :使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
    4. bottom :使元素的底部与其所在行的底部对齐。

特别注意: vertical-align 不能控制块元素。

5. CSS列表属性

列表相关的属性,可以作用在 ul 、 ol 、 li 元素上。
在这里插入图片描述

6. CSS表格属性

1. 边框相关属性(其他元素也能用):

在这里插入图片描述
注意:
1. 以上 4 个边框相关的属性,其他元素也可以用,这是我们第一次遇见它们。
2. 在后面的盒子模型中,会详细讲解边框相关的知识。

2. 表格独有属性(只有 table 标签才能使用):

在这里插入图片描述

以上 5 个属性,只有表格才能使用,即: table标签。

7. CSS背景属性

在这里插入图片描述

8. CSS鼠标属性

在这里插入图片描述
扩展:自定义鼠标图标:

/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

相关文章:

CSS常用属性

CSS常用属性 1. 像素的概念 概念:我们的电脑屏幕是,是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)。规律:像素点越小,呈现的内容就越清晰、越细腻。 注意点&#xff…...

AI新宠Arc浏览器真可以取代Chrome吗?

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…...

基于Java (spring-boot)的实验室管理系统

一、项目介绍 普通用户: 1.登录,注册 2.查看实验室列表信息 3.实验室预约 4.查看预约进度并取消 5.查看公告 6.订阅课程 7.实验室报修 8.修改个人信息 教师登录: 1.查看并审核预约申请 2.查看已审核预约并导出到excel 3.实验室设备管理,报修 …...

Android用setRectToRect实现Bitmap基于Matrix矩阵scale缩放RectF动画,Kotlin(一)

Android用setRectToRect实现Bitmap基于Matrix矩阵scale缩放RectF动画,Kotlin(一) 基于Matrix,控制Bitmap的setRectToRect的目标RectF的宽高。从很小的宽高开始,不断迭代增加setRectToRect的目标RectF的宽高&#xff0c…...

【AI绘画+Midjourney平替】Fooocus:图像生成、修改软件(Controlnet原作者重新设计的UI+Windows一键部署)

代码:https://github.com/lllyasviel/Fooocus windows一键启动包下载:https://github.com/lllyasviel/Fooocus/releases/download/release/Fooocus_win64_2-1-831.7z B站视频教程:AI绘画入门神器:Fooocus | 简化SD流程&#xff0c…...

Java技术栈 —— Hive与HBase

Java技术栈 —— Hive与HBase 一、 什么是Hive与HBase二、如何使用Hive与HBase?2.1 Hive2.1.1 安装2.1.2 使用2.1.2.1 使用前准备2.1.2.2 开始使用hive 2.2 HBase2.2.1 安装2.2.2 使用 三、Apache基金会 一、 什么是Hive与HBase 见参考文章。 一、参考文章或视频链…...

【代码随想录-哈希表】有效的字母异位词

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…...

SQL Server之DML触发器

一、如何创建一个触发器呢 触发器的定义语言如下: CREATE [ OR ALTER ] TRIGGER trigger_nameon {table_name | view_name}{for | After | Instead of }[ insert, update,delete ]assql_statement从这个定义语言我们可以知道如下信息: trigger_name&…...

04. 【Linux教程】安装 Linux 操作系统

通过前面的小节学习,我们已经对 Linux 操作系统有了简单的了解,同时也在 Windows 下安装了虚拟机软件 VMware ,那么本节课我们就介绍下如何使用虚拟机软件安装 Linux 操作系统。 通过第一小节的学习我们知道 Linux 有很多的发行版本&#xf…...

Facebook群控:利用IP代理提高聊单效率

在当今社交媒体竞争激烈的环境中,Facebook已经成为广告营销和推广的重要平台,为了更好地利用Facebook进行推广活动,群控技术应运而生。 本文将深入探讨Facebook群控的定义、作用以及如何利用IP代理来提升群控效率,为你提供全面的…...

香港倾斜模型3DTiles数据漫游

谷歌地球全香港地区倾斜摄影数据,通过工具转换成3DTiles格式,将这份数据完美加载到三维数字地球Cesium上进行完美呈现,打造香港地区三维倾斜数据覆盖,完美呈现香港城市壮美以及维多利亚港繁荣景象。再由12.5米高分辨率地形数据&am…...

Go指针探秘:深入理解内存与安全性

目录 1. 指针的基础1.1 什么是指针?1.2 内存地址与值的地址1.2.1 内存中的数据存储1.2.2 如何理解值的地址 2. Go中的指针操作2.1 指针类型和值2.1.1 基本数据类型的指针2.1.2 复合数据类型的指针 2.2 如何获取一个指针值2.3 指针(地址)解引用…...

Oracle12c之Sqlplus命令行窗口基本使用

Oracle12c之Sqlplus命令行窗口基本使用 文章目录 Oracle12c之Sqlplus命令行窗口基本使用1. 连接1. 超级用户2. 普通用户1. 创建普通用2. 连接 2. 修改用户连接数1. 查看默认连接最多用户数1. PL/SQL developer中查看2. Sqlplus中查看 2. 查看目前已经连接的用户数3. 修改用户连…...

react和antd学习笔记

概论 react是前端框架,antd是组件库。前端框架和组件库的区别与联系 nodejs 脚本语言需要一个解析器才能运行,JavaScript是脚本语言,在不同的位置有不一样的解析器,如写入html的js语言,浏览器是它的解析器角色。而对…...

寒假作业2月5号

第四章 堆与拷贝构造函数 一 、程序阅读题 1、给出下面程序输出结果。 #include <iostream.h> class example {int a; public: example(int b5){ab;} void print(){aa1;cout <<a<<"";} void print()const {cout<<a<<endl;} …...

滑动窗口(一)

文章目录 Leetcode209. 长度最小的子数组题目解法一(暴力求解)&#xff08;超时&#xff09;解法二&#xff08;滑动窗口&#xff09; Leetcode3. 无重复字符的最长子串题目解法一&#xff08;暴力求解&#xff09;解法二&#xff08;滑动窗口&#xff09; Leetcode1004. 最大连…...

寒假 day1

1、请简述栈区和堆区的区别? 2、有一个整形数组:int arr[](数组的值由外部输入决定)&#xff0c;一个整型变量: x(也 由外部输入决定)。要求: 1)删除数组中与x的值相等的元素 2)不得创建新的数组 3)最多只允许使用单层循环 4)无需考虑超出新数组长度后面的元素&#xff0c;所以…...

DATAX改造支持geometry类型数据同步

数据库使用postgresql安装了postgis插件存储了geometry空间数据&#xff0c;想使用datax做数据同步&#xff0c;但datax本身不支持geometry类型数据&#xff0c;如何改造呢&#xff1f; 1.首先下载已改造支持geometry类型的datax引擎&#xff0c;下载地址 https://download.c…...

Vue中keep-alive的作用、原理及应用场景

在进行Vue开发的过程中&#xff0c;我们经常会遇到需要进行组件缓存的场景&#xff0c;这时候Vue提供的keep-alive组件就派上了用场。keep-alive组件是Vue内置的一个抽象组件&#xff0c;它可以将其包裹的组件进行缓存&#xff0c;提高组件的性能&#xff0c;同时也可以节省服务…...

SpringBoot集成Redisson实现限流(二)

1. 简介 Springboot集成Redisson默认的限流器为令牌桶型限流器&#xff0c;底层是通过lua脚本去实现的。 通过lua脚本我们可以去实现一个滑动窗口限流器&#xff0c;利用ZSET格式数据就可以轻松实现。 springboot集成Redisson就不做讲解&#xff0c;可以参考&#xff1a;sprin…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...