编程技术是改变世界的力量。
本站
当前位置:网站首页 > HTML/CSS > 正文

重学前端基础:有关文本设置的集合

gowuye 2023-10-18 04:23 34 浏览 0 评论

字体

改变字号

font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

  • <absolute-size> 有 small large medium
  • <relative-size> 有 smaller larger
div
 font-size 12px
 p#sample0
 font-size 16px
 p#sample1
 font-size 2em
 p#sample2
 font-size 200%

改变字体

font-family: [ <family-name> | <generic-family> ]#

<generic-family> 可选选项,但具体使用字体由浏览器决定

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
font-family: arial, Verdana, sans-serif;

NOTE:优先使用靠前的字体

加粗字体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-weight: normal;
font-weight: bold;

倾斜字体

font-style: normal | italic | oblique | inherit

italic 使用字体中的斜体,而 oblique 在没有斜体字体时强制倾斜字体。

更改行距

line-height: normal | <number> | <length> | <percentage>

normal 值为浏览器决定,在1.1至1.2之间(通常设置值为1.14左右)

/* length 类型 */
line-height: 40px;
line-height: 3em;
/* percentage 类型 */
line-height: 300%;
/* number 类型 */
line-height: 3;

NOTE:当line-height为 number 类型时,子类直接继承其数值(不计算直接继承)。 而当为 percentage 类型时,子类则会先计算再显示(先计算后继承)。

字间距(字母间距)

letter-spacing: normal | <length>

其用于设置字间距或者字母间距,此属性适用于中文或西文中的字母。 如果需要设置西文中词与词的间距或标签直接的距离则需要使用 word-spacing。

word-spacing: normal | <length>

font shorthand

font: 30px/2 "Consolas", monospace;
font: italic bold 20px/1.5 arial, serif;
font: 20px arial, serif;

NOTE:当其他值为空时,均被设置为默认值。

改变文字颜色

color: <color>

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }
/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }
/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

对齐方式

文字居中

text-align: start | end | left | right | center | justify | match-parent | start end

NOTE:默认为文本左对齐。

文本垂直对齐

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

NOTE:<percentage>的参照物为line-height

文本缩进

text-indent: <length> | <percentage> && [ hanging || each-line ]

NOTE:缩进两个字可使用 text-indent: 2em;

格式处理

保留空格格式

white-space: normal | pre | nowrap | pre-wrap | pre-line

pre 行为同 <pre> 一致。

New linesSpaces and tabsText wrappingnormalCollapseCollapseWrapnowrapCollapseCollapseNo wrapprePreservePreserveNo wrappre-wrapPreservePreserveWrappre-linePreserveCollapseWrap

文字换行

word-wrap: normal | break-word

NOTE:允许长单词自动换行。

word-break: normal | break-all | keep-all

NOTE:break-all 单词中的任意字母间都可以换行。

文本装饰

文字阴影

text-shadow:none | <shadow-t># 或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
 text-shadow: 1px 1px 1px #000,
 3px 3px 5px blue;
}
  1. value = The X-coordinate X 轴偏移像素
  2. value = The Y-coordinate Y 轴偏移像素
  3. value = The blur radius 阴影模糊半径
  4. value = The color of the shadow 阴影颜色(默认为文字颜色)

文本装饰(下划线等)

text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
 text-decoration: underline;
}
h1.over {
 text-decoration: overline;
}
p.line {
 text-decoration: line-through;
}
p.blink {
 text-decoration: blink;
}
a.none {
 text-decoration: none;
}
p.underover {
 text-decoration: underline overline;
}

高级设置

省略字符

text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止换行 */

更换鼠标形状

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit

常用属性

cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

  • <uri> 图片资源地址代替鼠标默认形状
  • <default> 默认光标
  • <none> 隐藏光标
  • <pointer> 手型光标
  • <zoom-in>
  • <zoom-out>
  • <move>
cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 当 uri 失效时或者则会起作用 */

强制继承

inherit 会强制继承父元素的属性值。

font-size: inherit;
font-family: inherit;
font-weight: inherit;
...
word-wrap: inherit;
work-break: inherit
text-showdow: inherit

相关推荐

python中调试pdb_python怎么调试
python中调试pdb_python怎么调试

当你的Python程序出现错误或行为不符合预期时,调试工具是一种非常有用的方式来帮助你找到问题所在。Python内置了一个强大的调试器模块,称为pdb(Pyth...

2023-10-22 12:21 gowuye

vue3+tsx开发语法详解_vue3+typescript
vue3+tsx开发语法详解_vue3+typescript

很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pn...

2023-10-22 12:20 gowuye

对前端初学者的一些帮助(常见名词解释)
对前端初学者的一些帮助(常见名词解释)

1.HTML:HTML是超文本标记语言,“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。2.CSS:主要用来设计网页的样式,美化网页;...

2023-10-22 12:20 gowuye

JAVA多线程详解(超详细)_java多线程菜鸟教程
JAVA多线程详解(超详细)_java多线程菜鸟教程

一、线程简介1、进程、线程程序:开发写的代码称之为程序。程序就是一堆代码,一组数据和指令集,是一个静态的概念。进程(Process):将程序运行起来,我们称之...

2023-10-22 12:19 gowuye

一文搞懂什么时候用 Runnable?什么时候用 Callable ?

今天我们看一道leetcodehard难度题目:统计可以被K整除的下标对数目。题目给你一个下标从0开始、长度为n的整数数组nums和一个整数k,返回满足下述条件的下标对(i...

优化重复冗余代码的8种方式_优化重复冗余代码的8种方式是什么

日常开发中,我们经常会遇到一些重复代码。大家都知道重复代码不好,它主要有这些缺点:可维护性差、可读性差、增加错误风险等等。最近呢,我优化了一些系统中的重复代码,用了好几种的方式。感觉挺有用的,所以本文...

高级 CSS 和 Sass:Flexbox、网格、动画等等!
高级 CSS 和 Sass:Flexbox、网格、动画等等!

Udemy-高级CSS和Sass:Flexbox、网格、动画等等!讲师:JonasSchmedtmann下载:口袋资源网高级CSS和Sass:...

2023-10-22 12:19 gowuye

我们现在正处于 JavaScript 消亡的边缘?
我们现在正处于 JavaScript 消亡的边缘?

每10年JavaScript都会发生一次改朝换代式的变革。在我看来,JavaScript当前正处于一次快速变革的开始,而这段时期未来可能会被称为Ja...

2023-10-22 12:19 gowuye

CSS预编译器三剑客及PostCSS_前端预编译css有哪几种
CSS预编译器三剑客及PostCSS_前端预编译css有哪几种

这篇文章包含两个部分,第一部分是个CSS预编译器:Sass、Less、Stylus,他们之间的对比,第二部分是现在大火的PostCSS。为什么会出现CSS预编译...

2023-10-22 12:18 gowuye

CSS预处理语言Sass入门_css3预处理器
CSS预处理语言Sass入门_css3预处理器

1.引言CSS3之前的CSS都大都是枚举属性样式,而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用,让CSS的编程黯淡无光,Sass就是一...

2023-10-22 12:18 gowuye

“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇
“金三银四”,让我们愉快的开始准备Web面经吧:CSS篇

前言又到了一年一度的“金三银四的季节了”。不过恐怕大家都有感觉,当下,正面临着近几年来的最严重的互联网寒冬,因此今天的“金三银四”肯定又是一场更为惨烈的江湖厮杀...

2023-10-22 12:18 gowuye

sass @extend(继承)指令详解_sass内置函数总结

在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在HTML中给元素定义两个class,一个通用样式,一个特殊样式。普通CSS的实现接下来以警...

Sass混合的使用_sas中如何合并两组数据

本节我们学习Sass中的混合,Sass中的混合是通过@mixin指令来定义的,混合允许我们定义可以在整个样式表中重复使用的样式,避免使用无语意的类。混合可以包含所有的CSS规则和任何其他...

css代码规范工具stylelint_代码规范

css样式的书写顺序及原理——很重要!很重要!很重要!为什么重要???概括讲就是,它涉及了浏览器的渲染原理:reflow和repaint还想知道更多为什么可以参考:https://blog.csdn....

CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使
CSS-in-JS 是恶魔还是天使?_天启四骑士是恶魔还是天使

有些人极为讨厌CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于JavaScript,而是属于CSS,并且CSS...

2023-10-22 12:17 gowuye

取消回复欢迎 发表评论: