text 文本样式属性:
所有的文本样式属性,都有继承的属性
color 设置文本颜色a
值:
color_name 规定颜色值为颜色名称的颜色(比如 red)。
hex_number 规定颜色值为十六进制值的颜色(比如 #ff0000)。
rgb_number 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))范围0-255。
用10进制表示16进制
inherit 规定应该从父元素继承颜色。 默认
direction 设置文本书写方向。
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。
备注:春眠不觉晓,
letter-spacing 设置文字符间距如果设置在单词里 会把每个字母当成一个汉字
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。 单位 px
inherit 规定应该从父元素继承 letter-spacing 属性的值。
word-spacing 设置单词间距 两个空格之间的文字为一个词
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。 单位 px
inherit 规定应该从父元素继承 word-spacing 属性的值。
line-height 设置行高
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 默认字体大小为16px
length 设置固定的行间距 单位px。 单位为px
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
text-align 对齐元素中的文本 水平对齐方式
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
vertical-align 设置元素的垂直对齐
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。 与父元素的中线对齐
bottom 把元素的底端与行中最低的元素的底端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
text-decoration 向文本添加修饰
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
text-indent 缩进元素中文本的首行 首行缩进
length 定义固定的缩进。默认值:0。 px
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。
text-shadow 设置文本阴影
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。0px 最清晰
color 可选。阴影的颜色。
text-transform 控制元素中的字母 大小写
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。 针对英文
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。
white-space 设置元素中空白的处理方式
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止 pre-wrap 保留空白符序列,但是正常地进行换行。 pre-line 合并空白符序列,但是保留换行符。 inherit 规定应该从父元素继承 white-space 属性的值。
字体属性
font属性:字体系列
font-family:字体类型
font-size 指定文本的字体大小:{
xx-small
x-small
small
medium
large
x-large
xx-large
}=>把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。默认值:medium。
smaller:把 font-size 设置为比父元素更小的尺寸
larger:把 font-size 设置为比父元素更大的尺寸
length:把 font-size 设置为一个固定的值
%:把 font-size 设置为基于父元素的一个百分比值
inherit: 规定应该从父元素继承字体尺寸。
font-style:指定文本的字体样式:{
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
}
font-variant 以小型大写字体或者正常字体显示文本。
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight 指定字体的粗细:{
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。
}
font 简写方式(层叠为一)
按照一定的顺序设置:font-style font-variant font-weight font-size/line-height font-family
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)