CSS新手入门笔记整理:CSS字体样式

news2024/11/24 13:53:48

字体类型:font-family

语法

font-family:字体1,字体2,...,字体n;
  • font-family可以指定多种字体。使用多个字体时,将按从左到右的顺序排列,并且以英文逗号(,)隔开。如果我们不定义font-family,浏览器将会采用默认字体类型,也就是“宋体”。
  • 对于font-family属性,如果字体类型只有一个英文单词,则不需要加上双引号;如果字体类型是多个英文单词或是中文的,则需要加上双引号。
  • 在实际开发中,比较美观的中文字体有微软雅黑、苹方,英文字体有Times New Roman 、Arial和Verdana。

字体大小:font-size

语法

font-size:10px;

font-size属性取值有两种:

  • 一种是“关键字”,如small、medium、large等;
  • 另外一种是“像素值”,如10px、16px、21px等。

字体粗细:font-weight

语法

font-weight:取值;

font-weight属性取值有两种:

  • 一种是“100~900的数值”,
  • 另一种是“关键字”。

font-weight属性可以取100、200、…、900这9个值。其中100相当于lighter,400相当于normal,700相当于bold,而900相当于bolder。

属性值

说明

normal

正常(默认值)

lighter

较细

bold

较粗

bolder

很粗(其实效果与 bold 差不多)


字体风格:font-style

语法

font-style:取值;

属性值

说明

normal

正常(默认值)

italic

斜体

oblique

斜体

有些字体有斜体italic属性,但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。


字体颜色:color

语法

color:颜色值;

color属性取值有两种,

  • 一种是“关键字”,
  • 另一种是“十六进制RGB值”。

除了这两种,其实还有RGBA、HSL等。

关键字,指的就是颜色的英文名称,如red、blue、green等。参考CSS 颜色名称

十六进制RGB值


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

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

相关文章

Elasticsearch启动失败问题汇总

版本elasticsearch-8.11.1,解压安装完后,修改安装目录下conf/jvm.options, 默认配置如下: -Xms4g -Xmx4g 默认的配置占用内存太多了,调小一些: -Xms256m -Xmx256m由于es和jdk是一个强依赖的关系&#xff0…

代码随想录算法训练营第五十六天| 647. 回文子串 516.最长回文子序列

文档讲解&#xff1a;代码随想录 视频讲解&#xff1a;代码随想录B站账号 状态&#xff1a;看了视频题解和文章解析后做出来了 647. 回文子串 class Solution:def isPalindrome(self, string):left, right 0, len(string) - 1while left < right:if string[left] ! stri…

CV计算机视觉每日开源代码Paper with code速览-2023.11.22

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【语义分割】Mobile-Seed: Joint Semantic Segmentation and Boundary Detection for Mobile Robots 论文地址&#xff1a;https://arxiv.or…

智能AIGC写作系统ChatGPT系统源码+Midjourney绘画+支持GPT-4-Turbo模型+支持GPT-4图片对话

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

Linux文件与路径

Linux文件与路径 1、文件结构 ​ Windows和Linux文件系统区别 ​ 在windows平台下&#xff0c;打开“此电脑”&#xff0c;我们可以看到盘符分区 ​ 每个驱动器都有自己的根目录结构&#xff0c;这样形成了多个树并列的情形 ​ 但是在 Linux 下&#xff0c;我们是看不到这些…

ECharts配置项手册了解及使用

1&#xff1a;点击文档然后选择配置项手册或者&#xff1a;Documentation - Apache ECharts 2&#xff1a;

某思路等考通一级MSOffice的分析

看到有朋友寻求2021版的等级考试一级软件&#xff0c;秉承授人以鱼不如授人以渔的理念&#xff0c;特写这个帖子。 某思路等考通一级MSOffice&#xff0c;版本6.5。 用到的软件&#xff0c;ScanId&#xff0c;de4dot,dnSpy。 第一步&#xff1a;分析 软件启动后有在线激活提示&…

1.6锁的升级过程

一、偏向锁 轻量级锁 当有新的线程进来时 其实就是竞争不激烈&#xff0c;但是确实存在多个锁竞争的情况&#xff0c;而且是&#xff0c;大家都很有序的进行&#xff0c;一释放&#xff0c;下一个线程就拿到锁&#xff0c;很有顺序的获取锁&#xff0c;基本上通过自旋的方式代…

leetcode:414. 第三大的数

一、题目 函数原型&#xff1a;int thirdMax(int* nums, int numsSize) 二、思路 将数组降序排序。 如果数组元素个数小于3&#xff0c;直接返回第一个元素&#xff1b; 如果数组元素个数大于等于3&#xff0c;且不同元素个数小于3&#xff0c;直接返回第一个元素&#xff1b; …

sqli-labs靶场详解less-24(二次注入)

less-24 对于一个像我一样的小白来说这关就像php代码审计 一开始进行判断注入点的时候怎么都找不到一点思路都没有 只能搜教程 说是二次注入 从来没遇见的题型 于是从代码审计开始 先说一下什么叫二次注入 二次注入 二次注入是指通过SQL语句存储到数据库的用户输入被读取后再次…

创建SpringBoot Helloword 程序详细步骤

本文档实现SpringBoot hello word 程序&#xff0c;翻译于Spring | Quickstart 目录 一、项目创建步骤1.1 创建项目1.2 添加代码1.3 运行 参考教程 一、项目创建步骤 1.1 创建项目 在官网Spring Initializr上创建项目 1.2 添加代码 在IDE中打开项目并在src/main/java/com/zo…

【数据结构】二叉树之链式结构

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、前置说明二、二叉树的遍历2.1 前序遍历2.2 中序遍历2.3 后序遍历2.4 层序遍历 三、…

mysql处理40w数据脚本执行慢问题

需求背景&#xff1a; 2张表 SS_ZYXX 1w数据&#xff0c;WD_GZPZ 50w数据 SS_ZYXX.id WD_GZPZ.zyxx_id 找到SS_ZYXX表有数据&#xff0c;关联表WD_GZPZ没有数据的SS_ZYXX表的id 处理方案 方案一&#xff1a; 联合查询&#xff1a; 下面sql&#xff0c;在mysql执行时间3…

netty(三) taskQueue自定义任务,http服务器快速入门,netty核心模块,Unpooled

如果执行某些业务比较复杂&#xff0c;比较耗时&#xff0c;可以使用异步来完成 当然可以有多个任务 上面的结果是&#xff0c;在第一个任务处理完&#xff0c;再等20秒执行&#xff0c;简单来说&#xff0c;就是第一个在10秒执行&#xff0c;第二个在第30秒的时候执行&#…

vue2使用ts vue-class-component

目前&#xff0c;对于Vue3来说&#xff0c;TypeScript的支持已经相当成熟&#xff0c;但公司的老项目一直处于迭代和维护无法从v2重构成v3&#xff0c;并且重构的成本也是很大的一个问题&#xff0c;所以记录一下vue2如何去搭配TypeScript。 目录 一、脚手架创建项目 二、vu…

二叉树的递归套路(2)

与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 最大二叉搜索树 &#x1f48e;总结 最大二叉搜索树 题目 给定一颗二叉树的头节点head&#xff0c;返回这颗二叉树中最大的二叉搜索子树的节点数量 搜索二叉树&#xff1a;整棵树上没有重复值&#xff0c;左树的值都…

解决ansible批量加入新IP涉及known_hosts报错的问题

我们把一批新的IP加入到ansible的hosts文件&#xff0c;比如/etc/ansible/hosts&#xff0c;往往会有这样的提示&#xff0c; 因为本机的~/.ssh/known_hosts文件中并有fingerprint key串&#xff0c;使用ssh连接目标主机时&#xff0c;一般会提示是否将key字符串加入到~/.ssh/…

【密码学引论】分组密码

第三章 分组密码 DES、IDEA、AES、SM4 1、分组密码定义&#xff08;按照五个组成部分答&#xff09; 密钥空间&#xff1a;属于对称加密算法kekd明密文空间&#xff1a;将明文划分为m比特的组&#xff0c;每一块依次进行加密加解密算法&#xff1a;由key决定一个明文到密文的…

Redis多机数据库

文章目录 Redis多机数据库一、主从复制1、旧版复制功能的实现a、同步b、命令传播 2、旧版复制功能的缺陷3、新版复制功能的实现a、部分同步功能b、复制实现步骤 4、心跳检测 二、哨兵1、Sentinel概念2、Sentinel初始化流程3、故障转移过程 三、集群1、几个概念2、集群创建流程a…

西南科技大学(数据结构A)期末自测练习一

一、填空题(每空0.5分,共5分) 1、数据结构是指( A )。 A、数据元素的组织形式 B、数据类型 C、数据存储结构 D、数据定义 2、数据结构被形式地定义为(D,R),其中D是( B )的有限集合,R是D上( D )的有限集合。 (1)A.算法B.数据元素C.数据操作D.逻辑结构 (2)A.操作B.…