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


相关文章
|
3天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
7天前
|
Web App开发 前端开发 Windows
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
CSS基础常用属性之字体属性(如果想知道CSS的字体属性知识点,那么只看这一篇就足够了!)
|
3天前
|
移动开发 前端开发 HTML5
CSS 常用样式属性和字体图标
CSS 常用样式属性和字体图标
|
3天前
|
前端开发 iOS开发
通过css内修改input框placeholder样式
通过css内修改input框placeholder样式
12 1
|
7天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
3天前
|
Web App开发 存储 SQL
CSS3 常用样式
CSS3 常用样式
CSS3 常用样式
|
3天前
|
移动开发 前端开发 搜索推荐
CSS3 字体艺术:为你的网页增添一抹色彩!
CSS3 字体艺术:为你的网页增添一抹色彩!
|
3天前
|
移动开发 前端开发 UED
CSS3 常用样式属性
CSS3 常用样式属性
|
3天前
|
移动开发 前端开发 HTML5
认识 CSS (基础选择器、字体样式)
认识 CSS (基础选择器、字体样式)
|
2天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js