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

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

文章目录

  • 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.kler.cn/a/589260.html

相关文章:

  • 计算机网络笔记再战——理解几个经典的协议HTTP章4
  • Excel(函数篇):COUNTIF与CONUTIFS函数、SUMIF与SUMIFS函数、ROUND函数、MATCH与INDEX函数、混合引用与条件格式
  • 使用 Theos 开发 iOS 应用(IPA)记事本
  • 【NLP】 6. 词向量的可变性及其影响
  • DeepSeek本地部署 (Windows+Ollama+Docker Desktop+ RAGFlow)
  • VSTO(C#)Excel开发10:启动和卸载顺序 事件处理 监视变化
  • 蓝桥杯备考:模拟+堆 ---接水问题
  • Unity 封装一个依赖于MonoBehaviour的计时器(下) 链式调用
  • 【新人系列】Golang 入门(五):集合类型 - 下
  • Docker系列——从零开始打包FunASR的Http服务
  • Nuxt3 使用 ElementUI Plus报错问题
  • Android之Sentry接入
  • 在 Windows 11 上使用 PyCharm 创建一个 Flask 项目,并使用 `pipenv` 进行虚拟环境管理
  • HarmonyOS NEXT 声明式UI语法学习笔记-创建自定义组件
  • 麒麟服务器操作系统QT系列软件工具手册
  • AD9850函数信号发生器制作(全套资料)
  • RK3568 android11 基于PN7160的NXP NFC移植
  • ASP.NET Webform和ASP.NET MVC 后台开发 大概80%常用技术
  • 操作系统的磁盘调度
  • 鸿蒙Next开发中的坑与问题总结