前端CSS基础4（像素，颜色，字体属性大小复合属性）

news2024/12/23 5:25:43

前端CSS基础4（像素，颜色，字体属性大小复合属性）

  • CSS代码编写位置
  • CSS像素
  • CSS颜色
  • CSS常用字体属性和大小
  • 字体的复合属性

CSS代码编写位置

  1. 在HTML文件的头部使用
<head>
    <style>
        /* 在这里编写CSS代码 */
    </style>
</head>

2. 在外部引入的样式表文件（.css文件）中：

<link rel="stylesheet" href="styles.css">

3. 在HTML元素的style属性中：

<p style="color: blue; font-size: 16px;">Hello, World!</p>

4. 在内联样式中：

<div style="background-color: #f0f0f0;">
    <!-- 内容 -->
</div>

CSS代码可以直接在HTML文件中嵌入，也可以在独立的外部样式表文件中定义，然后通过链接引入到HTML文件中。此外，你还可以在HTML元素的style属性中为特定元素设置样式，或者使用内联样式直接在元素中指定样式。不同的方法适用于不同的场景和需求。

CSS像素

CSS像素（CSS pixel）是用于在网页上定义元素大小和位置的度量单位。它不同于物理像素，因为物理像素是显示器上的最小可显示单元，而CSS像素则是浏览器中用于渲染网页的虚拟像素。

在高分辨率显示器上，一个CSS像素可能包含多个物理像素，而在低分辨率显示器上，一个CSS像素可能只包含一个或几个物理像素。因此，使用CSS像素可以确保网页在不同分辨率的显示器上具有一致的外观和布局。

CSS像素可以通过设置元素的宽度、高度、边框等属性来定义。例如，以下代码将一个div元素的宽度设置为100px：

div {
  width: 100px;
}

CSS颜色

在CSS中，颜色主要有以下两种表示方式：

  • 英文单词：这种方式使用预定义的颜色名称来表示颜色。这些颜色名称通常是大家熟知的，如red、blue、green等。这些颜色名称不区分大小写，并且CSS支持大约140种这样的标准颜色名称。
  • 十六进制值：这种表示方法通过一个以#开头的六位十六进制数来表示颜色。例如，#FF0000代表红色。在这种表示法中，前两位表示红色（#ff0000)，中间两位表示绿色(#00ff00)，最后两位表示蓝色(#0000ff)。要想添加透明度则再在其后面加两位十六进制，#开头的八位十六进制数来表示颜色和透明度。
    除了这两种基本的颜色表示方式，CSS还提供了其他几种更为复杂的颜色表示方法，包括：
  • RGB：这是一种基于红绿蓝三原色的组合来表示颜色的方式。例如，rgb(255,0,0)表示红色。注意三位数字的范围都是0~255，或者是三位数字都用百分比来表示（25%，15%，10%），用百分比时，三位数值的范围是0%-100%
  • RGBA：这是RGB的扩展，增加了一个透明度参数。例如，rgba(255,0,0,0.5)表示半透明的红色。注意最后一位的数值范围为0-1，或者0%-100%
  • HSL：这是一种基于色相（H）、饱和度（S）和亮度（L）的颜色表示方法。它允许用户以一种更直观的方式来选择颜色。
  • HSLA：这是HSL的扩展，同样增加了一个透明度参数。
    在 HSL 颜色表示法中，数值范围如下：
    色相（H）：表示颜色在色相环上的角度，范围是 0 到 360 度。0 度对应红色，120 度对应绿色，240 度对应蓝色。
    饱和度（S）：表示颜色的鲜艳程度，范围是 0% 到 100%。0% 表示灰色阴影，100% 表示完全饱和的颜色。
    亮度（L）：表示颜色的明暗程度，范围也是 0% 到 100%。0% 代表黑色，100% 代表白色。
    通过这些参数的组合，可以定义出各种不同的颜色。

在这里插入图片描述

/* HSL表示法 */
<h2 style="color: hsl(120, 100%, 50%)">欧买噶</h2>; /* 绿色 */

/* HSLA表示法，其中透明度值在0（完全透明）到1（完全不透明）之间 */
<h1 style="color: hsla(210, 100%, 50%, 0.5)">欧买噶</h1>; /* 半透明的蓝色 */

CSS常用字体属性和大小

CSS常用字体属性：
font-family：设置文本的字体系列。
这段CSS代码 font-family: Arial, sans-serif; 的意思是指定一个字体系列，其中有两个备选项：首选使用Arial字体，如果计算机上没有安装Arial字体，则会回退到sans-serif字体或浏览器的默认无衬线字体。

Arial: 如果用户的计算机上安装了Arial字体，文本将以Arial字体显示。
sans-serif: 如果用户的计算机上没有Arial字体，那么文本将在无衬线字体中显示。具体是什么无衬线字体取决于浏览器的默认设置。常见的无衬线字体包括Helvetica、Verdana等。
这样的设置有助于确保即使某些用户没有特定字体（比如Arial）安装在其系统中，页面上的文本也能以类似风格的字体进行合理显示。

font-family: Arial, sans-serif;
/*一般以sans-serif或者serif结尾作为保底字体选项*/
/* 按照顺序找，前者没有则按顺序找下一个字体，直到找到为止，写英文名字会更好 */
font-family: "楷体","宋体","温软雅黑","仿宋体";
font-family: "宋体";

font-size：设置文本的字体大小。

font-size: 16px;

注意谷歌浏览器默认大小为16px，最小字体为12px，并且0px会自动消失。不同浏览器的默认大小不一致。可以设置默认字体大小如下。


/* 在根元素上设置默认字体大小 */
html {
    font-size: 16px; /* 使用相对单位em或rem也是常见做法 */
}
/* 在body元素上设置默认字体大小 */
body{
  font-size: 16px
}

font-weight：设置文本的字体粗细。

/*粗，细，正常*/
font-weight: bold;
font-weight: lighter;
font-weight: normal;
/*数值从100-1000之间从细到粗*/
font-weight: 100;
font-weight: 1000;

font-style：设置文本的字体样式（斜体等）。

font-style: italic;

font-variant：设置文本的字体变体（小型大写字母等）。

font-variant: small-caps;

字体大小：

在CSS中，字体大小可以使用不同的单位来定义，例如：
像素（px）：固定尺寸，适合在Web开发中使用。

font-size: 16px;

相对长度单位（em、rem）：相对于父元素或根元素的倍数。

font-size: 1.2em; /* 相对于父元素的1.2倍 */

百分比（%）：相对于父元素的百分比大小。

font-size: 120%; /* 相对于父元素的120% */

这些是常见的CSS字体属性和字体大小的定义方式。

/* 应用字体属性和字体大小设置 */
.text {
    font-family: Arial, sans-serif; /* 字体系列 */
    font-weight: bold; /* 字体粗细 */
    font-style: italic; /* 字体样式 */
    font-variant: small-caps; /* 字体变体 */
    font-size: 16px; /* 字体大小：16像素 */
}
<div class="text">欧买噶</div>

字体的复合属性

在CSS中，可以使用 font 复合属性来同时设置文本的多个字体样式，包括字体大小、字体系列、粗细、风格等。 font 属性允许以一行代码设置多个字体相关属性，使得代码更简洁易读。

font 复合属性包括以下子属性：

  1. font-style: 指定文本的风格，如 normal（正常）、italic（斜体）或 oblique（倾斜）。
  2. font-variant: 控制字体变体，比如 small-caps（小型大写字母）。
  3. font-weight: 指定文本的粗细，如 normal、bold、lighter 或数字值（100~900）。
  4. font-size: 设置文本的字体大小，可以使用像素(px)、em、rem等单位。 line-height: 设置文本行高。
  5. font-family: 指定字体系列，可以指定多个备选字体，以确保兼容性。

当有多个字体属性要进行调整时，可以利用复合属性。注意一般按照这个顺序进行编写代码。
用法示例：

p {
    font: italic small-caps bold 20px/1.5 Arial, sans-serif;
}

在这个例子中，font 属性设置了段落元素的字体。它应用了斜体、小型大写字母、粗体，字体大小为20像素，行高为1.5倍字体大小，最后是字体系列为Arial，如果没有Arial字体，则回退到sans-serif字体。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Meta Llama 3强势来袭：迄今最强开源大模型，性能媲美GPT-4

Meta Llama 3强势来袭：迄今最强开源大模型，性能媲美GPT-4

前言 Meta的最新语言模型Llama 3已经发布&#xff0c;标志着在大型语言模型&#xff08;LLM&#xff09;领域的一次重大突破&#xff0c;其性能在行业内与GPT-4相媲美。此次更新不仅提升了模型的处理能力和精确性&#xff0c;还将开源模型的性能推向了一个新的高度。 Huggingf…
阅读更多...
从0开始学人工智能测试节选：Spark -- 结构化数据领域中测试人员的万金油技术（二）

从0开始学人工智能测试节选：Spark -- 结构化数据领域中测试人员的万金油技术（二）

Dataframe dataframe 是spark中参考pandas设计出的一套高级API&#xff0c;用户可以像操作pandas一样方便的操作结构化数据。毕竟纯的RDD操作是十分原始且麻烦的。而dataframe的出现可以让熟悉pandas的从业人员能用非常少的成本完成分布式的数据分析工作&#xff0c; 毕竟跟数据…
阅读更多...
数仓建模—数仓架构发展史

数仓建模—数仓架构发展史

数仓建模—数仓架构发展史 时代的变迁&#xff0c;生死的轮回&#xff0c;历史长河滔滔&#xff0c;没有什么是永恒的&#xff0c;只有变化才是不变的&#xff0c;技术亦是如此&#xff0c;当你选择互联网的那一刻&#xff0c;你就相当于乘坐了一个滚滚向前的时代列车&#xf…
阅读更多...
电视音频中应用的音频放大器

电视音频中应用的音频放大器

电视机声音的产生原理是将电视信号转化为声音&#xff0c;然后通过扬声器将声音播放出来。当我们打开电视并选择频道时&#xff0c;电视机首先从天线或有线电视信号中获取声音信号。声音信号经过放大器放大之后&#xff0c;就能够通过扬声器发出声音。电视机声音的产生原理和音…
阅读更多...
Ubuntu20.04 ISAAC SIM仿真下载使用流程（4.16笔记补充）

Ubuntu20.04 ISAAC SIM仿真下载使用流程（4.16笔记补充）

机器&#xff1a;华硕天选X2024 显卡&#xff1a;4060Ti ubuntu20.04 安装显卡驱动版本&#xff1a;525.85.05 参考&#xff1a; What Is Isaac Sim? — Omniverse IsaacSim latest documentationIsaac sim Cache 2023.2.3 did not work_isaac cache stopped-CSDN博客 Is…
阅读更多...
2024蓝桥杯每日一题（最短路径）

2024蓝桥杯每日一题（最短路径）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;奶牛回家 试题二&#xff1a;Dijkstra求最短路 II 试题三&#xff1a;spfa求最短路 试题四&#xff1a;作物杂交 试题一&#xff1a;奶牛回家 【题目描述】 晚餐时间马上就到了&#x…
阅读更多...
【JavaEE多线程】Thread类及其常见方法（上）

【JavaEE多线程】Thread类及其常见方法（上）

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…
阅读更多...
【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

【opencv】dnn示例-segmentation.cpp 通过深度学习模型对图像进行实时语义分割

模型下载地址&#xff1a; http://dl.caffe.berkeleyvision.org/ 配置文件下载&#xff1a; https://github.com/opencv/opencv_extra/tree/4.x/testdata/dnn 该段代码是一个利用深度学习进行语义分割的OpenCV应用实例。下面将详细解释代码的功能和方法。 引入库 引入了一些必要…
阅读更多...
蓝桥杯2024年第十五届省赛真题-宝石组合

蓝桥杯2024年第十五届省赛真题-宝石组合

思路&#xff1a;参考博客&#xff0c;对Ha,Hb,Hc分别进行质因数分解会发现&#xff0c;S其实就等于Ha&#xff0c;Hb&#xff0c;Hc的最大公约数&#xff0c;不严谨推导过程如下&#xff08;字丑勿喷&#xff09;&#xff1a; 找到此规律后&#xff0c;也不能枚举Ha&#xff…
阅读更多...
Go 单元测试之mock接口测试

Go 单元测试之mock接口测试

文章目录 一、gomock 工具介绍二、安装三、使用3.1 指定三个参数3.2 使用命令为接口生成 mock 实现3.3 使用make 命令封装处理mock 四、接口单元测试步骤三、小黄书Service层单元测试四、flags五、打桩&#xff08;stub&#xff09;参数 六、总结6.1 测试用例定义6.2 设计测试用…
阅读更多...
医学图像三维重建与可视化系统 医学图像分割 区域增长

医学图像三维重建与可视化系统 医学图像分割 区域增长

医学图像的三维重建与可视化&#xff0c;这是一个非常有趣且具有挑战性的课题&#xff01;在这样的项目中&#xff0c;可以探索不同的医学图像技术&#xff0c;比如MRI、CT扫描等&#xff0c;然后利用这些图像数据进行三维重建&#xff0c;并将其可视化以供医生或研究人员使用。…
阅读更多...
解决Mac使用Vscode无法调用外部终端

解决Mac使用Vscode无法调用外部终端

前言 今天遇到一个很奇怪的问题&#xff0c;之前好好的用Vscode还能调用外部终端&#xff0c;怎么今天不行了&#xff1f;问题出在哪里呢&#xff1f;请听我娓娓道来。 检查配置文件 我查看了一下配置文件&#xff0c;发现配置文件都是调用外部控制台&#xff0c;没毛病啊。 …
阅读更多...
Objective-C网络数据捕获：使用MWFeedParser库下载Stack Overflow示例

Objective-C网络数据捕获：使用MWFeedParser库下载Stack Overflow示例

概述 Objective-C开发中&#xff0c;网络数据捕获是一项常见而关键的任务&#xff0c;特别是在处理像RSS源这样的实时网络数据流时。MWFeedParser库作为一个优秀的解析工具&#xff0c;提供了简洁而强大的解决方案。本文将深入介绍如何利用MWFeedParser库&#xff0c;以高效、…
阅读更多...
(最详细)关于List和Set的区别与应用

(最详细)关于List和Set的区别与应用

关于List与Set的区别 List和Set都继承自Collection接口&#xff1b; List接口的实现类有三个&#xff1a;LinkedList、ArrayList、Vector。Set接口的实现类有两个&#xff1a;HashSet(底层由HashMap实现)、LinkedHashSet。 在List中&#xff0c;List.add()是基于数组的形式来添…
阅读更多...
Spring Boot后端+Vue前端：打造高效二手车交易系统

Spring Boot后端+Vue前端：打造高效二手车交易系统

作者介绍&#xff1a;✌️大厂全栈码农|毕设实战开发&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 &#x1f345;获取源码联系方式请查看文末&#x1f345; 推荐订阅精彩专栏 &#x1f447;&#x1f3fb; 避免错过下次更新 Springboot项目精选实战案例 更多项目…
阅读更多...
机器学习笔记 - 使用 OpenCV 的结构化森林进行边缘检测

机器学习笔记 - 使用 OpenCV 的结构化森林进行边缘检测

一、简述 边缘检测是计算机视觉领域中一项非常重要的任务。这是许多纯计算机视觉任务（例如轮廓检测）的第一步。即使涉及深度学习，较深层也首先学习识别边缘，然后再学习图像的复杂特征。所以，我们可以说边缘检测在计算机视觉领域非常重要。拥有良好且高效的图像边缘检测算法…
阅读更多...
后端返回的数据中含有Null的则不在前端展示

后端返回的数据中含有Null的则不在前端展示

方式 1&#xff1a;application 上加配置 只需要在配置文件 上&#xff0c;增加 如下配置。 application 格式配置&#xff1a; spring.jackson.default-property-inclusionnon_null yml 格式配置&#xff1a; spring:jackson:default-property-inclusion: non_null注意&a…
阅读更多...
美团财务科技后端一面：如何保证数据一致性？延时双删第二次失败如何解决？

美团财务科技后端一面：如何保证数据一致性？延时双删第二次失败如何解决？

更多大厂面试内容可见 -> http://11come.cn 美团财务科技后端一面&#xff1a;项目内容拷打 美团财务科技后端一面&#xff1a;项目相关面试题&#xff0c;主要包含 Zset、延时双删失败重试、热点数据解决、ThreadLocal 这几个方面相关的内容 由于前几个问题是对个人项目的…
阅读更多...
混合云构建-如何创建一个高可用的Site to Site VPN 连接 Azure 和GCP云

混合云构建-如何创建一个高可用的Site to Site VPN 连接 Azure 和GCP云

在现代云计算环境中,企业通常会采用多云战略,将工作负载分布在不同的云服务提供商上。这种方式可以提高可用性、降低供应商锁定风险,并利用每个云提供商的独特优势。然而,在这种情况下,需要确保不同云环境之间的互联互通,以实现无缝的数据传输和应用程序集成。 本文将详细介绍…
阅读更多...
微信小程序之点击事件

微信小程序之点击事件

微信小程序中常用的点击事件主要是 tap&#xff0c;但除此之外还有其他的触摸类事件&#xff0c;用于不同的交互场景。以下是一些常见的点击和触摸相关的事件及其区别&#xff1a; 1、tap——最基本的点击事件&#xff0c;适用于一般的轻触交互&#xff0c;类似于 HTML 中的 c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023