个人学习日记—CSS字体样式属性调试工具

2023-11-04

font字体

font-size:大小

作用:

font-size属性用于设置字号

p {  
    font-size:20px; 
}

单位:

  • 可以使用相对长度单位,也可以使用绝对长度单位。

  • 相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
    在这里插入图片描述
    注意:

  • 我们文字大小以后,基本就用px了,其他单位很少使用

  • 谷歌浏览器默认的文字大小为16px

  • 但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小

font-family:字体

作用:

font-family属性用于设置哪一种字体。

p{ font-family:"微软雅黑";}

可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体, 如果都没有,则以我们电脑默认的字体为准。

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

常用技巧:
1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。
4. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

font-weight:字体粗细

  • 在html中如何将字体加粗我们可以用标签来实现
    • 使用 b 和 strong 标签是文本加粗。
  • 可以使用CSS 来实现,但是CSS 是没有语义的。
属性值 描述
normal 默认值(不加粗的)
bold 定义粗体(加粗的)
100~900 400 等同于 normal,而 700 等同于 bold 我们重点记住这句话

font-style:字体风格

  • 在html中如何将字体倾斜我们可以用标签来实现
    • 字体倾斜除了用 i 和 em 标签,
  • 可以使用CSS 来实现,但是CSS 是没有语义的

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

属性 作用
normal 默认值,浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。

font:综合设置字体样式 (重点)

基本语法格式如下:

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意:

  • 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
  • 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用

font总结

属性 表示 注意点
font-size 字号 我们通常用的单位是px 像素,一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-style 字体样式 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal
font 字体连写 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现

CSS外观属性

color:文本颜色

  • 作用:
    color属性用于定义文本的颜色,
  • 其取值方式有如下3种:
表示表示 属性值
预定义的颜色值 red,green,blue,还有我们的御用色 pink
十六进制 #FF0000,#FF6600,#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

注意

我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色

text-align:文本水平对齐方式

  • 作用:
    text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性
  • 其可用属性值如下:
属性 解释
left 左对齐(默认值)
right 右对齐
center 居中对齐

注意:

是让盒子里面的内容水平居中, 而不是让盒子居中对齐

line-height:行间距

  • 作用:

  • line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。

  • 单位:

    • line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
  • 技巧:一般情况下,行距比字号大7.8像素左右就可以了。

text-indent:首行缩进

  • 作用:
    text-indent属性用于设置首行文本的缩进,
  • 属性值
    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
    • 建议使用em作为设置单位。
      1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

描述
none 默认。定义标准的文本。 取消下划线(最常用)
underline 定义文本下的一条线。下划线 也是我们链接自带的(常用)
overline 定义文本上的一条线。(不用)
line-through 定义穿过文本下的一条线。(不常用)

CSS外观属性总结

属性 表示 注意点
color 颜色 我们通常用 十六进制 比如 而且是简写形式 #fff
line-height 行高 控制行与行之间的距离
text-align 水平对齐 可以设定文字水平的对齐方式
text-indent 首行缩进 通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration 文本修饰 记住 添加 下划线 underline 取消下划线 none

开发者工具(chrome)

此工具是我们的必备工具,以后代码出了问题

我们首先第一反应就是:

  • “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。
  • 菜单: 右击网页空白出—检查
  • 通过开发人员工具小指针工具,查找页面元素
  • 左侧是html页面结构,右侧是css样式

小技巧:

  1. ctrl+滚轮 可以 放大开发者工具代码大小。
  2. 左边是HTML元素结构 右边是CSS样式。
  3. 右边CSS样式可以改动数值和颜色查看更改后效果。
  4. ctrl + 0 复原浏览器大小
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

个人学习日记—CSS字体样式属性调试工具 的相关文章

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d
  • Overflow:auto 导致子 DIV 的绝对元素消失

    我有一个 div A 我在其中设置了overflow auto 现在在该 div 内 我有两个 div 父 div B 设置为position relative和子 div C 是position absolute 现在的问题是 设置ove
  • 父级嵌入框阴影与子级 div 重叠

    我遇到一个问题 子级 div 与父级框阴影底部重叠 父级有一个 max height w overflow y 滚动 任何帮助都会很棒 https i stack imgur com jQe0r png https i stack imgu
  • 水平滚动条仅出现在页面底部

    我有一个具有以下 HTML 结构的页面 div class wrapper div The wrapper被设置为min width 1100px至于原因我就不多说了 因此 当浏览器大小调整为小于 1100px 时 我希望出现水平滚动条 我
  • 我的CSS出了什么问题?活动链接不改变颜色

    我无法让我的 WordPress 菜单活动链接保持红色 我添加了我认为与导航相关的 CSS 还有正文等 以防影响问题 感谢您的帮助 body font family Helvetica Neue sans serif font size 1
  • 角度 2 中的动态 styleUrls?

    是否可以将样式表的 url 动态注入到组件中 就像是 styleUrls stylesheet1 css this additionalUrls 或者 一厢情愿并注意这只是假代码 export class MyComponent imple
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色

随机推荐

  • 表单数据自动封装到javaBean中

    页面表单数据的自动封装到javaBean中 先定义一个Bean类 package com test public class Bean private String name private Integer sex public Strin
  • AD19铺铜操作

    1 在Keep OUT层沿板子边缘画出板子形状 2 PCB设计界面右上角 设置 PCB Editor General 勾选 铺铜修改后自动重铺 3 铺铜之前 打一些过孔 连接板子上下两层 双层板 并设置为GND网络 右边Properties
  • 复制文件夹所有内容 和 删除整个文件夹的2个函数

    选择自 hycapril 的 Blog 实现一个静态方法将指定文件夹下面的所有内容copy到目标文件夹下面 如果目标文件夹为只读属性就会报错 April 18April2005 In STU public static void CopyD
  • keil4 破解心得

    keil4 破解心得 Obj STM32 FD SDCard MP3 axf error L6047U The size nb 在编译时出现 Obj STM32 FD SDCard MP3 axf error L6047U The size
  • bes2300之环境搭建(一)

    目录 环境搭建 sdk文件结构介绍 编译 烧录 配置烧录选项 选择端口 启动升级 简单使用 环境搭建 安装编译工具链 gcc arm none eabi 4 9 2014q4 20141203 win32 exe make 3 81 exe
  • GPIO工作模式

    参考链接 STM32 STM32F4 GPIO八种模式及工作原理详解 Z小旋 CSDN博客 stm32io口的八种工作模式 GPIO 即通用I O 输入 输出 端口 是STM32可控制的引脚 STM32芯片的GPIO引脚与外部设备连接起来
  • [备忘]域用户登陆出现“此工作站和主域间的信任关系失败”错误解决方法

    症状 登陆域用户 出现错误 此工作站和主域间的信任关系失败 并无法登陆 解决方案 1 使用本地用户登录 更改当前 域 为 工作组 如默认的WORKGROUP等 并输入具有域管理权限的用户名 密码 随后此电脑上的 域 将会被删除 2 重启电脑
  • Flink入门看完这篇文章就够了

    文章目录 第一章 概述 第一节 什么是Flink 第二节 Flink特点 第三节 Flink应用场景 第四节 Flink核心组成 第五节 Flink处理模型 流处理和批处理 第六节 流处理引擎的技术选型 拓展 什么是最多一次 最少一次和仅一
  • 算法基础之数组理论

    算法基础之数组理论 1 前言 2 数组基础定义 3 数组增删改查 3 1基本功能 3 2添加元素 3 3查询和修改元素 3 4包含 搜索和删除元素 3 5其他 3 6检验 4 动态数组及其时间复杂度 4 1动态数组的实现 4 2增删改查时间
  • 阿里云通义千问向全社会开放,近期将开源更大参数规模大模型

    9月13日 阿里云宣布通义千问大模型已首批通过备案 并正式向公众开放 广大用户可登录通义千问官网体验 企业用户可以通过阿里云调用通义千问API 通义千问在技术创新和行业应用上均位居大模型行业前列 IDC最新的AI大模型评估报告显示 通义千问
  • 【YModem】YModem串口IAP升级例程+YModem串口工具

    目录 YModem协议传输的过程 IAP例程 YModem串口工具 YModem技术手册 手把手教你如何实现自动固件更新 YModem协议是由XModem协议演变而来的 每包数据可以达到1024字节 是一个非常高效的文件传输协议 Ymode
  • ChatGPT多场景应用之基本应用

    人工智能 AI 无疑是近年来最流行和最先进的技术之一 生成式 AI模型正在促进众多任务 实现效率和自动化 目前 ChatGPT是风靡互联网的主要生成人工智能模型 据 Similar Web 称 自 2022 年 11 月发布以来 其访问量已
  • 【c语言五子棋】自定义类型五子棋/井字棋:胜负判断

    一 算法思路 由于五子棋规则比较简单 我们可以胜负判断分为以下几个方面分别判断 1 横向判断 2 竖向判断 3 斜向判断 从左下到右上 4 斜向判断 从左上到右下 二 算法原理 算法来源 参考字符串匹配的处理方法 具体可以参考 从头到尾彻底
  • 腾讯COS,Cloudbase API用法教程详细

    Chinar blog www chinar xin 腾讯云 COS Cloudbase API 本文提供全流程 中文翻译 Chinar 的初衷是将一种简单的生活方式带给世人 使有限时间 具备无限可能 Chinar 心分享 心创新 助力快速
  • 使用GCC和Makefile编译c文件

    Ubuntu下使用GCC和Makefile编译c文件 目录 Ubuntu下使用GCC和Makefile编译c文件 前言 一 GGC命令行模式 1 vim创建文件 2 gcc编译 1 编译出目标文件 2 链接为可执行文件 3 运行 二 VS2
  • 没有苹果开发者账号能否创建ios证书-最新

    在2020年以前 注册苹果开发者账号后 就可以使用香蕉云编生成证书 但2020年后 因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号 所以需要缴费才能创建ios证书了 所以新政策出来后 只能使用香蕉云编 注
  • quill富文本编辑器 自定义字体和大小 以及提交和回显

    第一步 引入quill样式 我是下载到本地了 第二步 引入js
  • 网购平台用户行为分析

    1 背景 对于电子商务网站来说 每天都会产生海量的关于用户的行为数据 分析用户的行为对于企业来说至关重要 从海量用户行为数据中可以挖掘出网购用户的个人喜好 行为特征 购买倾向等隐藏信息 从而为电子商务服务商提供有价值的信息 本文基于SQL从
  • kex_exchange_identification: Connection closed by remote host问题解决

    今天动了一下代码 打算提交到github 结果使用git push 的时候报错 kex exchange identification Connection closed by remote host 在网上找了半天各种方法都试过了 终于找
  • 个人学习日记—CSS字体样式属性调试工具

    font字体 font size 大小 作用 font size属性用于设置字号 p font size 20px 单位 可以使用相对长度单位 也可以使用绝对长度单位 相对长度单位比较常用 推荐使用像素单位px 绝对长度单位使用较少 注意