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


相关文章
|
26天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
9天前
|
数据采集 存储 前端开发
Puppeteer教程:使用CSS选择器点击和爬取动态数据
本文介绍如何使用Puppeteer结合CSS选择器爬取动态网页数据,以贝壳网的二手房价格为例,通过代理IP提高爬虫成功率。文章详细讲解了Puppeteer的安装和配置、代码实现及数据趋势分析,帮助读者掌握动态网页爬取技术。
Puppeteer教程:使用CSS选择器点击和爬取动态数据
|
14天前
|
前端开发 JavaScript UED
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
159 1
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
22 4
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
52 2
|
20天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
|
20天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
20天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
1月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
39 0