百科知识

超全CSS文本样式代码大集合,让你的文字排版更美观!

CSS文本样式属性是用于定制文本视觉效果的一系列参数,涵盖了诸如字体色彩、排列方向、段落首行缩进以及行与行之间的距离等多个维度。

文本色彩设定属性名称:color。

属性取值:

英文色彩名称:color: blue;

十六进制色彩代码:color: #FF0000;

RGB色彩模型:color: rgb(0,0,255)或rgb(0%,0%,100%)

在实际开发过程中,十六进制色彩表示法因其精确性和简洁性而更为普遍。

代码演示:

代码执行效果展示

文本排列方式属性名称:text-align。

属性取值:

“text-align: left”:默认设置,文本向左对齐。

“text-align: center”:文本居中对齐。

“text-align: right”:文本向右对齐。

代码演示:

运行结果界面:

文本修饰效果属性:text-decoration。

属性取值:

“text-decoration: none”:默认状态,无修饰线。

“text-decoration: underline”:为文本添加下划线。

特别说明:在超链接标签中,下划线是默认显示的,可以通过设置此属性来移除下划线。

“text-decoration: overline”:为文本添加上划线。

“text-decoration: line-through”:为文本添加删除线。

代码演示:

运行结果界面:

段落首行缩进属性名称:text-indent。通常用于设置段落首行的缩进。

属性取值:px或em。

em是一个相对单位,

若当前元素已定义了文字大小,则缩进大小依据当前元素文字大小的一个em单位显示。

若当前元素未定义文字大小,则缩进大小依据父元素文字大小的一个em单位显示,即1em等于16px。

代码演示:

运行结果界面:

行间距调整属性名称:line-height。用于设定文本的行高,即行与行之间的间隔。

行间距的计算公式为:行间距 = 文本高度 + 上间距 + 下间距(上间距等于下间距)。

行间距的调整实际上就是设置上下间距的高度。

属性取值:px或em。

代码演示:

运行结果界面:

样式表的类型主要有:行内样式表(行内式)、内部样式表(内嵌式)、外部样式表(链接式)

行内样式表:位置:直接放置在元素的开始标签内部。

特点:编写内容简洁,权重级别高,但仅能作用于单个标签,可能导致结构样式混杂。

语法:style=”color: green;”

注意:多个属性之间应使用空格进行分隔。

代码演示:

内部样式表(内嵌式)位置:位于head标签下,与title标签并置。样式属性均包含在style标签中。

特点:实现了部分结构与样式的分离,但仍然在同一HTML文件内。

语法:

代码演示:

外部样式表(链接式)第一步:创建index.css文件,在文件中直接写入样式属性,无需任何标签。

第二步:在HTML文件的head标签中,添加link标签来引入CSS文件。

第三步:为HTML文件中需要应用样式的元素添加相应的选择器。

特点:实现了结构与样式的全局分离,一个CSS文件可以控制多个HTML页面。

注意:在CSS文件中只有样式属性和选择器,不包含任何HTML标签,即直接书写选择器和属性,无需style标签。

代码演示:

第一步:新建index.css文件,并设置样式属性。

第二步:在HTML文件的head标签中添加link标签来引用CSS文件。

第三步:在HTML标签中调用相应的样式属性。

运行结果界面:

以上是本日学习的全部内容,明日将继续深入学习CSS的相关知识,今日课程到此结束,各位晚安!