CSS入门4 文本样式

4、文本样式

1、文本样式简介

文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写转换
line-height	行高
letter-spacing word-spacing	文字间距词间距

2、首行缩进：text—indent

语法

text-index:像素值

说明
在css中，通常使用像素px作为单位
举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{font-size: 14px;text-indent: 28px;}</style></head><body><h3>安装jdk</h3><p>Java要实现“编写一次，到处运行”的目标，就必须提供相应的Java运行环境，既运行Java程序的平台</p><p>学习Java最好选用Java SE提供的Java软件开发工具箱jdk</p></body>
</html>

运行结果：

3、水平对齐：text-align

语法

text-aligan:取值

说明

属性值	说明
left	左对齐（默认值）
center	剧中对齐
right	右对齐

举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#p1{text-align: left;}#p2{text-align: center;}#p3{text-align: right;}</style></head><body><p id="p1">窗前明月光（左对齐）</p><p id="p2">疑似地上霜（居中对齐）</p><p id="p3">举头望明月（右对齐）</p></body>
</html>

运行结果：

4、文本修饰text-decoration

语法

text-decoration:取值;

说明
取出所有下划线效果：

text-decortation:none;

举例：去除超链接下划线效果

5、大小写:text-transform

语法
text-transform:取值;
说明
text-transform的取值有4个，如表所示：

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
none	无转换（默认值）
capitalize	只将每个英文单词的首字母转换为大写

举例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#p1{text-transform: uppercase;}#p2{text-transform: lowercase;}#p3{text-transform: capitalize;}</style></head><body><p id="p1">rome wat's built in a day.</p><p id="p2">rome wat's built in a day.</p><p id="p3">rome wat's built in a day.</p></body>
</html>

运行效果

6、行高：line-height

语法

line-height：像素值;

7、字间距

语法

letter-spacing:像素值;

CSS入门4 文本样式相关推荐

HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
CSS 入门2（样式属性+元素溢出+显示特性+盒子模型）
css样式属性常用布局样式属性常用文本样式属性元素溢出显示特性盒子模型常用布局样式属性 <!DOCTYPE html> <html lang="en" ...
【web前端开发】CSS文字和文本样式
文章目录前言字体大小字体粗细字体样式字体 font复合属性文本缩进文本水平对齐方式文本修饰线行高颜色标签水平居中 ⭐思维导图前言本篇文章主要讲解CSS中的文字和文本样式及一些 ...
4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
【CSS】设置文本样式
大家好,我是翼同学! 目录 1️⃣前言 2️⃣文本样式
CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式颜色 color rgb(颜色) R ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...
CSS入门 0x3 链接样式
链接的伪类选择器注意使用次序 a:link a:visited a:hover a:focus a:active 未访问链接已访问链接鼠标悬停键盘选中被激活的,发生在单击时 <!DOC ...

CSS入门4 文本样式

4、文本样式

1、文本样式简介

2、首行缩进：text—indent

3、水平对齐：text-align

4、文本修饰text-decoration

5、大小写:text-transform

6、行高：line-height

7、字间距

CSS入门4 文本样式相关推荐

最新文章

热门文章