8、前端开发:CSS知识总结——文本样式(1)

简介: 8、前端开发:CSS知识总结——文本样式(1)

1、text-transform

可用来设置文本的大小写;


可选值:


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

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>半壁为璜</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

运行结果:


THIS IS SOME TEXT.


this is some text.


This Is Some Text.

2、text-decoration

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。


text-decoration 属性是以下三种属性的简写:


       text-decoration-line       text-decoration-color       text-decoration-style


/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/
/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

可选值:


描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

3、letter-spacing

letter-spacing 属性增加或减少字符间的空白(字符间距)


可选值:

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

4、word-spacing


word-spacing属性增加或减少字与字之间的空白。


可选值:

描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。

5、text-align


text-align属性指定元素文本的水平对齐方式。


可选值:



描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值

6、text-indent


文本缩进属性是用来指定文本的第一行的缩进。


相关文章
|
5天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
19 2
|
7天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
7天前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
19 2
|
10天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
13 1
|
3天前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
7 0
|
6天前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
19 0
|
6天前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
17 0
|
10天前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
13 0
|
10天前
|
Web App开发 存储 前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)2
【前端基础篇】CSS基础速通万字介绍(下篇)
15 0
|
10天前
|
前端开发
【前端基础篇】CSS基础速通万字介绍(下篇)1
【前端基础篇】CSS基础速通万字介绍(下篇)
16 0