【CSS】二、浏览器调试与文字样式

news/2025/3/18 19:01:38/

文章目录

  • 1、谷歌调试前端代码
  • 2、文字属性控制
    • 2.1 字体大小
    • 2.2 字体粗细
    • 2.3 字体倾斜
    • 2.4 行高
    • 2.5 字体族
    • 2.6 复合属性
    • 2.7 文本缩进
    • 2.8 文本对齐方式
    • 2.9 文本修饰线
    • 2.10 文字颜色
  • 3、练习

1、谷歌调试前端代码

Command+Option+I或者F12打开开发者模式,选中元素栏Elements,然后选择左上方箭头,点击页面任意位置定位代码和CSS样式:
在这里插入图片描述

如此,发现项目中font.html文件的第8行,有错误(注意“⚠️”这个符号),检查发现是忘记带单位px,改完错误后,鼠标悬停在样式代码上,发现这两个都打了✅,说明都生效了,取消勾选,可直接调试效果:

在这里插入图片描述
在这里插入图片描述

刷新浏览器,重置调试,回到代码中的效果

2、文字属性控制

常用值:

在这里插入图片描述

2.1 字体大小

px即像素,谷歌浏览器默认字号16px

p {font-size: 30px;
}

2.2 字体粗细

p {font-weight: 700;
}
  • 数字
加粗700
正常400
  • 关键字
加粗bold
正常normal

2.3 字体倾斜

em {font-style: italic;
}
  • 正常(不倾斜):normal
  • 倾斜:italic

em标签默认倾斜:
在这里插入图片描述

可以使用font-style来清楚默认的倾斜效果:

在这里插入图片描述

2.4 行高

设置多行文本的间距,效果示例:

在这里插入图片描述
行高示意图:
在这里插入图片描述
也就是下图中,两个红色矩形的宽 + 文字的高,计算繁琐
在这里插入图片描述

等价一下,行高也是从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)

在这里插入图片描述

p {line-height: 2;
}

line-height,属性值:

  • 数字+px
  • 只写一个数字n,表示行高是当前标签的font-size的属性值的n倍

此外,要实现单行文字垂直居中的效果(如下图):可设置行高属性值等于盒子高度属性值,注意,实现前提是单行

在这里插入图片描述
验证下,先看默认效果:
在这里插入图片描述
文字在盒子的左上角:

在这里插入图片描述
修改后:
在这里插入图片描述
在这里插入图片描述

2.5 字体族

font-family的属性值可以写多个,用逗号隔开:

font-family: 楷体, 微软雅黑;

下面这个写法,就是:字体从左往右找,先在你的电脑里找到哪个,就用哪个,如果都没有,就从最后写的那个sans-serif(无衬线字体)中找一个就行,这样不同的电脑,也算有个保底的样式

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

网页开发中,一般使用无衬线字体,衬线是下图红色部分:

在这里插入图片描述

2.6 复合属性

上面一个个设置很烦,font即复合属性,下图中,左右两种写法等价:

在这里插入图片描述

一般用在设置网页文字的公共样式:

在这里插入图片描述
font是属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开,格式为,font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)

div {font: italic 700 30px/2 楷体; 
}

注意,字号和字体值必须写,否则font属性不生效

2.7 文本缩进

在这里插入图片描述
2em,即首行缩进两个字,即使字号变了,因此,推荐em,不用px

div {text-indent: 2em; 
}

text-indent,取值:

  • 数字 + px
  • 数字 + em,1em = 当前标签的字号大小

2.8 文本对齐方式

控制内容水平对齐方式,取值:

在这里插入图片描述

text-align: center;

在这里插入图片描述

ext-align本质是控制内容的对齐方式,属性要设置给内容的父级,比如设置图片居中

在这里插入图片描述
效果:

在这里插入图片描述

2.9 文本修饰线

属性text-decoration,取值:

在这里插入图片描述

测试去掉a标签自带的下划线:

在这里插入图片描述
修改:

在这里插入图片描述
在这里插入图片描述

2.10 文字颜色

属性名color,取值:

在这里插入图片描述
在这里插入图片描述

效果:

在这里插入图片描述

3、练习

网页制作思路:

  • 对着UI画图,从上到下,先整体再局部
  • 先标签,再 CSS 美化

下面这个新闻的练习题,注意两点:

  • 实现加粗的方式有多种,但如果你的这个加粗还有强调特殊的作用,那就用strong
  • 前面定义了div标签选择器,后面的div样式冲突了,就改用类选择器给加CSS样式

在这里插入图片描述


http://www.ppmy.cn/news/1580132.html

相关文章

Android 数据持久化之 SharedPreferences 存储

1、概述 SharedPreferences 是 Android 提供的一种轻量级存储类,用于存储简单的键值对数据。它非常适合保存应用的配置信息、用户偏好设置等。SharedPreferences支持数据类型String、int、float、long、boolean、Set(字符串集合)&#xff0c…

Secs/Gem第二讲 (基于secs4net项目的ChatGpt介绍)

好的,我们正式进入: 第二讲:深入 SECS4NET 项目结构——主机程序是怎么搭起来的? 关键词:项目结构、类图、通信类、事件处理、连接生命周期、异步机制 本讲目的 我们从源码入手,一步步搞懂: S…

【品铂科技】在高精度定位行业内的口碑怎么样?

1. ‌技术实力与行业认可‌ 公司自主研发的ABELL无线实时定位系统在复杂环境中(如工业、司法监狱等)展现出厘米级(5-10厘米)高精度定位能力,客户反馈系统稳定性强、抗干扰能力突出,成为行业技术标杆‌。参…

Spring Boot中@Valid 与 @Validated 注解的详解

Spring Boot中Valid 与 Validated 注解的详解 引言Valid注解功能介绍使用场景代码样例 Validated注解功能介绍使用场景代码样例 Valid与Validated的区别结论 引言 在Spring Boot应用中,参数校验是确保数据完整性和一致性的重要手段。Valid和Validated注解是Spring …

Spring中Bean的自动装配

1.自动装配的核心概念 定义: Bean的自动装配是Spring框架中用于自动满足Bean依赖的一种机制。通过自动装配,Spring容器会在应用上下文中为某个Bean寻找其依赖的Bean,从而减少手动配置的工作量。其核心目标是减少配置代码,通过类型…

jenkins 配置邮件问题整理

版本:Jenkins 2.492.1 插件: A.jenkins自带的, B.安装功能强大的插件 配置流程: 1. jenkins->系统配置->Jenkins Location 此处的”系统管理员邮件地址“,是配置之后发件人的email。 2.配置系统自带的邮件A…

学习threejs,使用MeshFaceMaterial面材质容器

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.MeshFaceMaterial 二…

便携版:随时随地,高效处理 PDF 文件

PDF-XChange Editor Plus 便携版是一款功能强大且极其实用的 PDF 阅读与编辑工具。它不仅支持快速浏览 PDF 文件,还提供了丰富的编辑功能,让用户可以轻松处理 PDF 文档。经过大神优化处理,这款软件已经变得十分轻便,非常适合需要随…