天学习下css文本几个常用相关属性，包括文本颜色（color）这个是非常常见的、文本间距（这里主要指letter-spacing和word-spacing）、文本对齐（text-align）以及文本修饰（text-decoration），以下是相应的CSS和HTML代码示例。

1. 文本颜色（color）

使用color属性可以设置文本的颜色。颜色值可以是颜色名（如red）、十六进制（如#FF0000）、RGB（如rgb(255, 0, 0)）、RGBA（如rgba(255, 0, 0, 0.5)）、HSL或HSLA等。

HTML:

<p class="text-color">这是一段红色文本。</p>

CSS:

.text-color {
color: red; /* 或者使用其他颜色值，如 #FF0000, rgb(255, 0, 0) 等 */
}

2. 文本间距

• 字母间距（letter-spacing）：设置文本中字母之间的间距。
• 单词间距（word-spacing）：设置文本中单词之间的间距。

HTML:

<p class="letter-spacing">这是一个字母间距示例。</p>
<p class="word-spacing">这是 一个单词间距 示例。</p>

CSS:

.letter-spacing {
letter-spacing: 2px; /* 字母间距增加2px */
}

.word-spacing {
word-spacing: 5px; /* 单词间距增加5px */
}

3. 文本对齐（text-align）

使用text-align属性可以设置文本的对齐方式，如左对齐（left）、右对齐（right）、居中对齐（center）或两端对齐（justify）。

HTML:

<p class="text-left">左对齐文本。</p>
<p class="text-center">居中对齐文本。</p>
<p class="text-right">右对齐文本。</p>
<p class="text-justify">两端对齐文本。这是一个较长的句子，用于展示两端对齐的效果。</p>

CSS:

.text-left {
text-align: left;
}

.text-center {
text-align: center;
}

.text-right {
text-align: right;
}

.text-justify {
text-align: justify;
}

4. 文本修饰（text-decoration）

text-decoration属性用于设置文本的装饰线，如下划线（underline）、上划线（overline）、删除线（line-through）或无装饰线（none）。

HTML:

<p class="underline">下划线文本。</p>
<p class="overline">上划线文本。</p>
<p class="line-through">删除线文本。</p>
<p class="no-decoration">无装饰线文本。</p>

CSS:

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

以上就是关于CSS中文本相关属性的详细解释及代码示例。

演示效果

TML全局属性是所有HTML元素共有的属性。它们可以应用于所有元素，尽管它们可能对某些元素没有影响。

HTML属性

HTML元素可以设置属性

属性可以在元素中添加附加信息

属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。

大多数HTML元素支持的属性：

class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)

id：定义元素的唯一id

style：规定元素的行内样式（inlinestyle）

title：描述了元素的额外信息(作为工具条使用)

HTML超链接及其属性

HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示。

在标签<a>中使用了href属性来描述链接的地址。

实例

<a href="https://www.kaikeba.com/">访问开课吧</a>1复制代码类型：[html]

上面这行代码显示为：访问开课吧

点击这个超链接会把用户带到开课吧的首页。

使用target属性，你可以定义被链接的文档在何处显示。

实例

<ahref="https://www.kaikeba.com/"target="_blank">访问开课吧</a>  

target="_blank":在新窗口中打开被链接文档。  

target="_self":	默认，在相同的框架中打开被链接文档。  

target="_parent":在父框架集中打开被链接文档。  

target="_top":	在整个窗口中打开被链接文档。  

target=framename:在指定的框架中打开被链接文档。  1234567891011复制代码类型：[html]

HTML图像标签及其属性

在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

定义图像的语法是：

<imgsrc="url"alt="some_text">  1复制代码类型：[html]

URL指存储图像的位置。

alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1复制代码类型：[html]

提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

开课吧广场-人才学习交流平台