8、前端开发:CSS知识总结——文本样式

7、前端开发CSS知识总结——字体样式 字体样式 阅读详情

 

字体设置也是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性,比如更改字体,控制字体大小和粗细等等。

目录

一、行高    

 1、行高(line height)

  line-height:

 2、单行文本在父元素中垂直居中

 3、font中也可以指定行高

 二、文本样式

 1、text-transform 可以用来设置文本的大小写

 2、text-decoration 可以用来设置文本的修饰

3、lerrer-spacing 可以指定字符间距

4、 word-spacing 可以设置单词之间的距离

5、text-align 用于设置文本的对齐方式

6、 text-indent 设置首行缩进

 7、 white-space:; 设置网页如何处理空白

 8、 text-overflow:文本溢出包含元素时发生的事情

9、 设置文本的阴影

10、设置元素的阴影

三、图片三像素的问题

四、如何设置元素水平垂直居中 

一、行高    

 1、行高(line height)

            文字占有的实际高度

            行高=上间距+文字的大小+下间距

            默认情况下,上间距=下间距

  line-height:

               可选值

                 1、直接是一个大小  line-height:50px;

                 2、可以放一个倍数   line-height:2;

                     是当前字体的倍数

                 3、可以放一个百分比   是当前字体的百分比

 2、单行文本在父元素中垂直居中

设置文本的高度跟父元素高度一致即可

 3、font中也可以指定行高

语法:

 font:字体的大小/行高 字体;

 二、文本样式

font-family:设置字体;
font-style:设置字体的风格,例如倾斜、斜体等;
font-weight:设置字体粗细;
font-size:设置字体尺寸;
font-variant:将小写字母转换为小型大写字母;
font-stretch:对字体进行伸缩变形(使用较少,并且主流浏览器都不支持);
font:字体属性的缩写,可以在一个声明中设置多个字体属性。 

 1、text-transform 可以用来设置文本的大小写

可选值

 nome默认值  文本正常显示

 uppercase 文本大写

 lowercas  文本小写

 capitalize 单词首字母大写

text-transform:capitalize;

 2、text-decoration 可以用来设置文本的修饰

 可选值

 nome 默认值 文本正常显示

 underline  下划线

 overline   上划线

 line-through   删除线

   

         text-decoration:line-through;

3、lerrer-spacing 可以指定字符间距

4、 word-spacing 可以设置单词之间的距离

      letter-spacing: 20px;

                word-spacing: 20px; 

5、text-align 用于设置文本的对齐方式

可选值

 left 文本向左 默认值

 right  文本向右

 justify  两端对齐

             text-align: center

 

6、 text-indent 设置首行缩进

常用的 em单位

              text-indent: 2em;

 7、 white-space:; 设置网页如何处理空白

   可选值 nowarp 不换行

 8、 text-overflow:文本溢出包含元素时发生的事情

设置单行文本省略号的写法  :

先设置宽固定的宽度  :width: 300px;         

设置不换行 :white-space:nowrap;

设置省略号:text-overflow: ellipsis;

裁剪多余的内容/溢出的内容:overflow: hidden;

9、 设置文本的阴影

 text-shadow: h-shadow v-shadow bulr color;

参数:

        第一个参数:阴影的水平位移距离   (必填)正值向右 负值向左

        第二个参数:阴影的垂直位移距离    (必填) 正值向下  负值向下

        第三个参数:阴影的模糊半径

        第四个参数:阴影的颜色  (默认字体颜色)

 h1{

            color: red;

            text-shadow:10px 30px 15px rgba(0, 0, 0, .5);

        }

10、设置元素的阴影

         box-shadow: h-shadow v-shadow bulr color;

  参数:

           第一个参数:阴影的水平位移距离   (必填)正值向右 负值向左

           第二个参数:阴影的垂直位移距离    (必填) 正值向下  负值向下

           第三个参数:阴影的模糊半径

           第四个参数:阴影的颜色  (默认黑色)

三、图片三像素的问题

解决图片三像素的问题:

               1、vertical-align:;非baseline默认值即可

               2、将图片转成块元素(副作用:独占一行)

               3、在父元素,将font-size设置0(副作用:父元素里面的所有的字都没有)

               4、让元素脱离文档流,就不会再区分块元素,行内元素,行内块元素

                   (副作用:可能会让你的布局混乱) 

四、如何设置元素水平垂直居中 

vertical-align  设置元素垂直对齐的方式

设置图文对齐方式

可选值:baseline  基线对齐  默认值

top  bottom   middle

Proteus课设原理图及报告 1. I/O 口:32 个可编程 I/O 引脚,分成 4 个并行 I/O 端口 (P0, P1, P2, P3),P0 功能段选 a、b、c、d、e、f、g、dp 使其中部分点亮,P2 功能为位选 1、2、4.按键操作分析:P3.0-设置时钟的时间,P3.1-确定更改的时钟时间,P3.2-对。时钟设置标志 0 不设置,1 设置时,2 设置分,3 设置秒。P3.0 按下的次数对应 不设置,设置时,设置分, 阅读详情

相关推荐

别再只调PID了!手把手教你从LC谐振到检波,搞定STM32智能车电磁循迹硬件电路

本文深入解析STM32智能车电磁循迹硬件电路设计,从LC谐振选频到数字信号处理,提供完整的信号链路设计要点与实战技巧。通过优化电磁杆布局和信号放大电路,显著提升赛道位置检测精度,误差可控制在±0.5cm以内,为智能车竞赛提供可靠硬件支持。

weixin_29220405的博客 242

前端开发_HTML5_CSS部分-文字(font)/文本(text)

文字(font)/文本(text)属性 1.引入 上一节课我们讲解了有关边框的问题,接下来我们来学习一下有关文字的相关属性,文字的相关属性主要有两个,一个是文字属性:font,另一个则是文本属性:text 。 2.文字属性(font) font文字常用属性 1.font-size:用于定义文字的字体大小,一般情况取值为:12px和18px,如:font-size:12px。 2.font-family:用于定义字体的类型,字体的类型如同之前我们接触到的word中的字体类型,如: ..

u013185175的博客 3163

CSS文本样式与浮动

明日方舟

2302_79986066的博客 2250

前端CSS3--字体样式

一、font-family设置字体 sans-serif是专指西文中没有衬线的字体 例如:为网页中的文字设置字体为"宋体"。 <style type="text/css"> body{ font-family:"宋体",sans-serif; } 或 body{font-family:"Microsoft Yahei";} </style> 二、font-size设置字体大小 例如:设置网页中文字的字号为12像素。 <style type="text/css"> bod

weixin_45981384的博客 3608

CSS字体样式属性调试

CSS字体样式属性调试 1.font-size font-size属性用于设置字号 p { font-size:20px; 2.font-family font-family用于设置字体 p { font-family:"Mirsoft YaHei"; } 网页中常用字体有宋体,微软雅黑,黑体等 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体,如果都没有,则以我们电脑默认的字体为准。 p { font-family:"Mirsoft YaHei"

Web_chicken的博客 8204

8前端开发CSS知识总结——文本样式(1)

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。letter-spacing 属性增加或减少字符间的空白(字符间距)word-spacing属性增加或减少字与字之间的空白。text-align属性指定元素文本的水平对齐方式。文本缩进属性是用来指定文本的第一行的缩进。可用来设置文本的大小写;......

不迁怒,不贰过。小知识,大智慧。 636

【Web世界探险家】3. CSS美学(二)文本样式

属性表示注意点font-size字号通常用的单位是 px 像素,一定要跟上单位font-famly字体按照实际需求写字体字体粗细加粗是700 或者 bold 不加粗是 normal 或者 400 数字不要跟单位font-style字体样式倾斜是 italic 不倾斜是 noramlfont字体连写连写的顺序,不能随意换位置;字号 和 字体 必须同时出现属性表示注意点color文本颜色通常用 十进制text-align文本对齐设定文字水平的对齐方式文本缩进。

QQ3447387928的博客 1万+

【WEB前端开发】基础知识大总结(HTML5+CSS3)

本文共一万七千字,十六个内容点,七十个知识点。覆盖HTML5+CSS3基础知识,内容包括:转义字符、表单标签、语义化标签、Head标签、CSS引用方式、CSS背景属性、CSS文本属性、基础选择器、伪类选择器、伪元素选择器、CSS优先级、块级元素与行内元元素、盒子模型、定位、浮动、多媒体查询

Create value with coding 1万+

web前端开发CSS笔录

web前端开发CSS笔录,详细介绍CSS的用法和特点,偶尔翻来复习一下,让你的前端学习更加通俗易懂

陈二狗的博客 1953

CSS文本标签及样式

文本标签 1、em 和 strong em标签用于表示一段内容中的着重点。 strong标签用于表示一个内容的重要性。 这两个标签可以单独使用,也可以一起使用。 <p><strong>警告:任何情况下不要接近僵尸。</strong> 他们只是 看起来 很友好,实际上他们是为了吃你的胳膊! </p> 通常em显示为斜体,而strong显示为粗体。 2、i 和 b i标签会使文字变成斜体。 b标签会使文字变成粗

weixin_43376571的博客 4311

CSS3-文本样式2

第1关:文本外观样式相关的概念 1、下列选项中,用于设置文本行高的属性是( ) B.line-height 2、下列选项中,可以设置文本上划线的属性是( ) D.text-decoration 3、下列选项中,可使文本字母全部改为大写的属性设置是( ) B.text-transform:uppercase 第2关:CSS-文本空间的设置 任务描述 本关任务:设置美食专栏网页的文字外观的样式。 相关知识 为了完成本关任务,你需要掌握:1.文本首行缩进的设置,2.文本行高的设置,3.文本文字..

weixin_52184490的博客 894

CSS 核心知识全面解析:从基础样式到复杂布局

本文围绕 CSS 核心知识展开,从文本样式切入,深入解析盒模型这一 CSS 布局关键概念,进而详细讲解显示模式、弹性布局、定位等重要技术,这些内容构成了现代网页构建的基础,为后续更复杂的前端开发工作筑牢根基。

2402_83075343的博客 643

前端开发基础】CSS基础知识以及CSS3

三、CSS层叠样式表 一 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS的主要使用场景就是美化网页的,布局页面的 1.1 HTML的局限性 说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义,比如< h1>表名这是一个大标题,< p>表明这是一个段落,< img>表明这儿有一个图片,< a>表示此处有链接。 1.2

qq_43293778的博客 7851

前端学习css

层叠样式表(Cascading Style Sheets)CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离css控制页面的展示效果html 决定页面结构。

记录学习过程 328

CSS(网页的美化)

css语法

2503_94479566的博客 1044

HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位

本文使用原生 HTML、CSSJavaScript 实现一个可直接运行的可视化 JSON 工具。无需框架和构建环境,支持 JSON 格式化、压缩、树形折叠、关键词搜索及解析错误定位,并介绍递归渲染、安全 DOM 操作、响应式布局和本地数据处理边界。

xiaominglao的博客 259

个人主页左侧子菜单排序

摘要 本文实现了一个个人主页侧边栏菜单系统,主要功能包括: 分组菜单按点击时间动态排序:点击某个菜单后,该菜单会置顶到所在分组的第一个位置,同时该分组也会置顶到所有分组的最前面。排序结果会在下次刷新页面时生效。 菜单功能特点: 支持分组显示/折叠功能 记录菜单点击时间并本地存储 支持iframe内嵌显示或新窗口打开 侧边栏可收缩/展开 技术实现: 使用localStorage存储菜单状态和点击记录 动态生成菜单DOM结构 通过排序算法实现菜单重组 提供响应式交互体验 系统通过记录每个菜单项和分组的最后点击时

u012116089的博客 77

个人主页左侧菜单支持分组,以及菜单显示和隐藏

这是一个个人主页的HTML代码实现,主要特点包括: 左侧可折叠菜单栏,包含分组菜单功能(支持展开/折叠),并配有悬浮恢复按钮 右侧内容区可加载iframe显示网页内容 内置多个常用工具链接(开发工具、AI工具、刷题平台等) 底部隐藏的"秘密入口"按钮可全屏展示love.html页面 响应式设计,支持移动设备查看 菜单项分类清晰(5个分组),每个链接都设置了iframe加载权限控制 简洁现代的设计风格,包含平滑过渡动画效果 代码结构清晰,使用纯HTML/CSS/JavaScript实现,无

u012116089的博客 53

PostCSS 和 UnoCSS 的作用和区别

PostCSS 和 UnoCSS 的作用和区别

xxuxioxx的博客 254

【北斗导航卫星系统】基于MATLAB的B3I信号捕获与扩频信号特性分析:信号处理及捕获算法设计与实现(含详细代码及解释)

内容概要:本文档详细介绍了北斗导航卫星系统B3I信号的捕获过程及其MATLAB实现。首先,通过加载PRN序列库和设置关键参数,生成采样信号并计算自相关和互相关函数,展示了PRN序列的特性。接着,设计了扩频信号捕获算法,包括预处理、并行码相位搜索和多普勒频移补偿,最终实现了从接收信号中检测卫星信号并估计其码相位偏移的功能。完整MATLAB代码展示了从参数设置、数据加载、信号预处理、信号捕获算法到结果输出的全过程。此外,还引入了相干积分、自适应阈值和多段处理等创新点,以提高检测的准确性和可靠性。适合人群:具备一定MATLAB编程基础和数字信号处理知识的学生或工程师,特别是对卫星导航系统感兴趣的读者。使用场景及目标:①学习扩频信号的特性及其相关性分析方法;②掌握扩频信号捕获的基本原理和技术实现;③了解北斗导航系统的B3I信号捕获过程及其MATLAB实现;④提高信号处理和算法设计能力。其他说明:为了确保最佳的学习效果,建议读者在阅读过程中逐步实践代码,调整参数并观察结果变化。同时,注意根据实际应用场景调整检测阈值和相干积分次数等参数,以获得更优的检测性能。

上一篇: 6、前端开发:CSS知识总结——样式的继承和选择器的权重
下一篇: 7、前端开发:CSS知识总结——字体样式
越努力越好
博客等级 码龄4年 250粉丝 40原创
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

越努力越好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值