学习CSS.3学习笔记
CSS 常用文本样式
以下是一些常用的 CSS 文本样式:
- 字体样式
- 字体类型:
font-family: 'Arial', sans-serif;
:设置字体为 Arial,如果没有 Arial 字体,则使用系统默认的无衬线字体。font-family: 'Times New Roman', serif;
:设置字体为 Times New Roman,如果没有该字体,则使用系统默认的有衬线字体。- 字体大小:
font-size: 16px;
:将字体大小设置为 16 像素。font-size: 1.2em;
:字体大小相对于其父元素字体大小的 1.2 倍,这是一种相对单位,常用于保持文本在不同屏幕和设备上的可读性。- 字体粗细:
font-weight: normal;
:正常粗细,等同于font-weight: 400;
。font-weight: bold;
:加粗,等同于font-weight: 700;
,常用于突出显示标题或重要信息。font-weight: 100;
:最细的字体粗细,数值越大,字体越粗,一般有 100、200、300、400、500、600、700、800、900 等等级别。- 文本排版
- 文本对齐:
text-align: left;
:文本左对齐,常用于段落文本的默认对齐方式。text-align: center;
:文本居中对齐,适用于标题、重要提示等需要突出显示的文本。text-align: right;
:文本右对齐,可用于一些特定的布局需求,如表格中的数据对齐。text-align: justify;
:两端对齐,常用于报纸、书籍等排版,使文本的左右两端都对齐,但可能会导致单词间距不均匀。- 文本缩进:
text-indent: 2em;
:首行缩进 2 个字符宽度,符合中文排版习惯,常用于段落首行缩进,增强文本的层次感。- 行高:
line-height: 1.5;
:行高是字体大小的 1.5 倍,合适的行高可以使文本更易读,避免行与行之间过于拥挤或过于疏远。line-height: 24px;
:将行高固定为 24 像素,适用于需要精确控制行间距的场景。- 文本修饰
- 文本颜色:
color: #ff0000;
:设置文本颜色为红色,使用十六进制颜色代码。color: rgb(0, 0, 255);
:设置文本颜色为蓝色,使用 RGB 颜色模式。color: rgba(0, 128, 0, 0.5);
:设置文本颜色为半透明的绿色,其中 0.5 表示透明度。- 文本装饰:
text-decoration: none;
:去除文本装饰,常用于链接,使其看起来像普通文本。text-decoration: underline;
:给文本添加下划线,可用于强调或表示链接。text-decoration: overline;
:给文本添加上划线,较少使用,可用于一些特殊效果。text-decoration: line-through;
:给文本添加删除线,表示文本被删除或不再有效。- 其他
- 字母间距:
letter-spacing: 1px;
:字母间距增加 1 像素,可以使文本看起来更宽敞,常用于标题或需要强调的文本。- 单词间距:
word-spacing: 2px;
:单词间距增加 2 像素,对英文等以空格分隔单词的语言有效,可改善文本的视觉效果。- 文本转换:
text-transform: uppercase;
:将文本转换为大写,常用于标题或缩写词。text-transform: lowercase;
:将文本转换为小写。text-transform: capitalize;
:将每个单词的首字母大写,适用于标题或需要突出显示的文本。。
vertical-align
- 属性名:
vertical-align
。 - 作用:用于指定
同一行元素之间
,或表格单元格
内文字的垂直对齐方式
。 - 常用值:
baseline
(默认值):使元素的基线与父元素的基线对齐。top
:使元素的顶部
与其所在行的顶部
对齐。middle
:使元素的中部
与父元素的基线
加上父元素字母x
的一半。bottom
:使元素的底部
与其所在行的底部
对齐。
注意:
vertical-align
不能控制块元素。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 YOUXIANYU!
评论