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的相关知识,今日课程到此结束,各位晚安!