返回

从零开始学前端

#知识库
#拓展知识
63%
进度
0/11
知识点
0
笔记
概述
HTML CSS 概念初识
HTML的基本认识
CSS 的基本认识
学习前的准备工作
HTML 基础入门
HTML 的语法认识
HTML 的框架标签
HTML 的内容标签
HTML 的布局标签
CSS样式表初识
CSS 的标准应用语法
CSS的引用方式
选择器的多种使用方法
CSS的盒模型认识
标签的宽和高尺寸
CSS 常用属性的应用规则
文字属性
色彩/图片属性
排版定位
动画效果
其它常见样式类型
网站前端布局实例
HTML样式的语法
CSS 全局预设
顶部样式定义
内容样式定义
首页知识库知识库从零开始学前端

文字属性

UX百科编辑部 编辑于 2024-01-0714人正在学
00

4.1.1 文本属性

在 CSS 中,文本指的是标签中的文字内容,我们可以控制一些特定的文本属性,常用的包含:

  • color:标签中的文本颜色,使用颜色名或 #212131 这样的编码
  • line-height:每行文本的高度,用像素单位设置
  • text-align:文本的对齐属性,包含 left、right、center(居中)
  • text-decoration:文本的修饰内容,包含 none、underline(下划线)、line-through(删除线) 等设置
  • word-spacing:字间距,用像素单位设置

这里就不每个属性都演示一次了,大家可以自己动手试试。我们主要关注 text-align 这个属性。

text-align 这个属性有向下继承的特性,即我们在父标签中定义了对齐方向,那么子标签也会遵守这个方向。

4.1.2 字体属性

在 CSS 中,字体属性和本文属性时分开的,这是很容易搞混的东西。字体属性用的是 font 属性,而在 font 下还包含若干常用的属性:

  • font-family: 设置文字的字体
  • font-size:文字的字号,用像素表示
  • font-style:字体风格,包含 normal(默认)、italic(斜体)、oblique(倾斜)
  • font-weight:字体的字重,可以用数字也可以字体自带字种

字体设置的规则上,并不是我们想怎么设置都可以,而是考虑用户有什么字体

因为浏览器对文字的渲染是通过用户本地的字库来完成的,这也是为什么我们设计 UI 和网页的时候不能随心所欲用字体的原因之一。

在中文界面中,通常我们不用去设置中文字体,但可以为英文或数字文本设置一些常见的英文字体,例如 “Arial”,“Futura” 等。

并且可以设置多个字体,通过逗号隔开,如果第一个字体用户没有,那么会自动替换成下一个字体

4.1.3  列表属性

列表在实际应用中非常的普遍,CSS 有专门针对列表的属性设置,即 list-style 属性,它还包含下面一些属性类型:

  • list-style-image:列表项符号替换成图片的设置;
  • list-style-postion:列表项符号图片所处的位置;
  • list-style-type:列表项符号的类型,包含none、disc(实心圆)、circle(空心圆)、suqare(方形)、decimal(数字)等;

list-style 这个属性只能作用在 ul、ol、li 标签,对其它标签无效。对于列表项的图像设置我们先撇开不谈,我们设置最多的数值就是采用 none,否则浏览器会自带列表项符号(很丑)。

点赞
收藏
学会
7510014
下一篇: 色彩/图片属性
前面为了展示模块实际区域,我们应用过很多次 background 属性来定义背景色,相信大家已经有所了解。但是,background 的作用可不仅仅只是定义背景色而已,它包含: background-color:定义背景色的属性 background-image:定义背景图片的属性,使用 &#822...
笔记 (1)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞