简单搭建网站
从零开始学习

css文本格式(text)

请先了解下面html分类文章在学习css

属性作用
color设置文本颜色
text-align设置元素水品对齐
vertical-align设置元素垂直对齐
letter-spacing设置字符间距
word-spacing设置字间距
unicode-bidi设置返回文本是否被重写
text-transfrom设置元素中的字母
text-shadow设置文本阴影
text-indent缩进文本首行
line-height设置行高
direction设置文本方向
text-decoration给文本添加装饰
while-space设置元素中空白的处理方式

代码运行窗我只做几个你们平时用得到的,其它的我就操作方式给你们写出来

文本颜色(color)

选择器{
color:颜色代码;
}

文本颜色示例

提示:你可以先修改部分代码再运行。

对齐方式(align)

水平对齐

作用
left把文本排列到左边也是默认值
right把文本排列到右边
center把文本排列到中间
justify实现两端对齐文本效果
inherit规定应该从父元素继承 text-align 属性的值
#水平对齐#
选择器{
text-align:对齐的值;
}

垂直对齐

属性作用
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的底端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
%使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。
#水平对齐#
选择器{
text-align:值;
}
#垂直对齐#
选择器{
vertical-align:值;
}

对齐方式示例

提示:你可以先修改部分代码再运行。

文本装饰(text-decoretion)

作用
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink定义闪烁的文本。
inherit规定应该从父元素继承 text-decoration 属性的值。
#装饰文本#
选择器{
text-decoration:值;
}

none值可以用于去除超链接的下划线

提示:你可以先修改部分代码再运行。

文本缩进(text-indent)

文本第一行的缩进空间,可以用像素或者百分比来设置

#文本缩进#
选择器{
text-indent:缩进的值;
}

提示:你可以先修改部分代码再运行。

文本阴影(text-shadow)

下面的x代表水平面阴影的像素,y代表垂直阴影像素

#文本阴影#
选择器{
Text-shadow:x像素,y像素,颜色;
}

文本阴影示例

提示:你可以先修改部分代码再运行。

剩下的属性不做示例,但会教你怎么应用,一直写文章太累了,上面这些日常能用到的东西大家掌握了就够用了

文本方向(direction)

描述
ltr默认。文本方向从左到右。
rtl文本方向从右到左。
inherit规定应该从父元素继承 direction 属性的值。
#文本方向#
选择器{
direction:值;
}

字符间距(letter-spacing)

描述
normal默认。规定字符间没有额外的空间。
length定义字符间的固定空间(允许使用负值)。
inherit规定应该从父元素继承 letter-spacing 属性的值。
#字符间距#
选择器{
letter-spacing:数值;
}

文本行高(line-height)

描述
normal默认。设置合理的行间距。
number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。
#文本行高#
选择器{
line-height:数值;
}

控制元素字母(text-transform )

描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母,仅有小写字母。
inherit规定应该从父元素继承 text-transform 属性的值。
#控制元素字母#
选择器{
text-transform:值;
}

文本空白处理方式(white-space)

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。
#文本空白处理方式#
选择器{
while-space:值;
}

文本字间距(word-spacing)

描述
normal默认。定义单词间的标准空间。
length定义单词间的固定空间。
inherit规定应该从父元素继承 word-spacing 属性的值。
#文本字间距#
选择器{
word-spacing:值;
}

没有示例的请各位自己拿文中的运行框试一试,如果全部都写实例的话就太累了,日常经常用的我都写了实例的,其它没写的就只有大家自己看效果了

赞(3) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » css文本格式(text)

发表评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏