CSS基础教程4——字体和文字样式(下)

简介: text-align:值;常用值有left(左对齐),center(居中),right(右对齐),其中居中最为常用。

CSS基础教程4——字体和文字样式(下)


CSS基础教程4——字体和文字样式(下)


文本水平对齐方式


text-align:值;


常用值有left(左对齐),center(居中),right(右对齐),其中居中最为常用。


文本修饰线


text-decoration:值;


常用值有underline(下划线),line-through(删除线),overline(上划线),none(无样式)


行高


line-height:值;


取值可以为数字+px或者倍数(当前标签font-size的值),行高也可以使用font连写font:style weight size/line-height family;例如:

1.png

行高的作用类型于word文档中的行间距,行高除此之外还可以用作元素垂直居中(行高与盒子或者模型高度一致即可)。


颜色取值(了解)


color取值可以为:英文关键字、十六进制、rgb、rgba,一般用十六进制和rgba。


rgb和rgba的区别


RGB 是代表Red(红色) 、Green(绿色)、 Blue(蓝色)三个单词的缩写,而RGBA颜色值是 RGB 颜色值的扩展,添加了一个 alpha 通道,它规定了对象的不透明度。


R:红色值。 正整数(0 ~ 255)或 百分数(0.0% - 100.0%)

G:绿色值。 正整数(0 ~ 255)或 百分数(0.0% - 100.0%)

B:蓝色值。 正整数(0 ~ 255)或 百分数(0.0% - 100.0%)

A:透明度。取值0~1之间,不可为负值


rbga中的a与rgb+opacity(元素整体透明度,后续讲解)的区别


使用rgba不会对元素值进行透明,例如文字,效果看下图:

1.png

而使用rgb+opacity由于opacity是定义元素整体透明度,因此文字也会透明,效果看下图:

1.png

实际应用根据实际操作需求设置


标签居中


margin: 0 auto;


margin属性为元素外边距(后续会专门讲解),此写法意思为元素上下边距不设置,元素左右根据盒子或者模型宽度对等,按照默认浏览器的宽度效果为居中。


相关文章
|
15天前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
27 1
简单几行代码CSS实现网页自动打文字效果
|
10天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
26 6
|
1月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
23 1
css实现涂绘文字的效果
|
15天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
21天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
36 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
1月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
|
21天前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
28天前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
25 0
|
28天前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
21 0
|
2月前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
33 0