字间距、词间距的使用-CSS入门基础（010）

今天我们接着分享文本样式的内容。

letter-spacing字母间距：

在css中，我们可以使用letter-spacing属性定义字间距。

语法：

letter-spacing:像素值；

我们一般都是使用像素值为单位的。

示例代码：

<html>  <head>    <title>letter-spacing</title>    <style type="text/css">      #p1 { letter-spacing:0px;}      #p2 { letter-spacing:5px;}      #p3 { letter-spacing:10px;}    </style>  </head>  <body>    <p id="p1">I like Coding.我喜欢编程。</p>    <p id="p2">I like Coding.我喜欢编程。</p>    <p id="p3">I like Coding.我喜欢编程。</p>  </body></html>

letter-spacing控制的是字间距，每一个中文文字算作一个“字”，而每一个英文字母也算作一个“字”，这个需要大家留心记住。

word-spacing属性：

用于定义单词之间的距离，我们通常使用像素值作为单位。

语法：

word-spacing:像素值；

示例代码：

<html>  <head>    <title>word-spacing</title>    <style type="text/css">      #p1 { word-spacing:0px;}      #p2 { word-spacing:10px;}      #p3 { word-spacing:20px;}</style>  </head>  <body>    <p id="p1">I like Coding.我 喜欢编程。</p>    <p id="p2">I like Coding.我 喜欢编程。</p>    <p id="p3">I like Coding.我 喜欢编程。</p>  </body></html>

定义词间距，以空格为基准进行调节。如果多个单词被连在一起，则被视为一个单词；如果汉字被空格分隔，此时word-spacing属性有效。

文本样式的总结：

text-decoration，下划线、删除线、顶划线

text-transform，文本变形，大小写

font-variant，英文文本变为小型的大写字母

text-indent，段落文本缩进

text-align，文本水平对齐方式

line-height，行高

letter-spacing，字距

word-spacing，词距

text-decoration属性值：none，underline，line-through，overline。

text-transform属性值：none，uppercase，lowercase，capitalize。

font-variant属性值：normal，small-caps。

text-indent属性值：像素值；

text-align属性值：left，center，right。

line-height属性值：像素值；

letter-spacing属性值：像素值；

word-spacing属性值：像素值；

字间距、词间距的使用-CSS入门基础（010）相关推荐

CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
表格标题位置-CSS入门基础（020）
今天我们接着分享表格样式的内容. 默认情况下,表格标题位置是在表格的上方,但是如果我们想要把表格标题放在表格下方呢? 在css中,我们可以使用caption-side属性来定义表格标题的位置. 语法: ...
CSS入门基础学习（上）
css是层叠样式表的简称,有时称为css样式表或级联样式表. css是一种标记语言,用于设置HTML页面中的文本内容,图片的外形,以及版面的布局和外观显示样式.可以美化HTML的外观页面看起来更加简介 ...
html无序列表空心圆_列表样式的使用CSS入门基础（018）
今天我们分享关于列表样式的内容.列表项list-sytle-type:在HTML学习中,我们知道有有序列表和无序列表,都是使用type属性来定义的.1.有序列表有序列表有序列表有序列表属 ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
【测试基础】之03 CSS入门基础
CSS基础目标知道CSS的作用基本掌握CSS语法规则 CSS简介 CSS:(Cascading Style Sheets)指层叠样式表作用:用来定义如何显示HTML元素(定义HTML元素的样式 ...

字间距、词间距的使用-CSS入门基础（010）

字间距、词间距的使用-CSS入门基础（010）相关推荐

最新文章

热门文章