网站制作教程:CSS 文本属性

你的网络首码项目网 网站建设来源:你的网络首码项目网评论107字数 2068阅读模式

此页包含文本命名空间中的属性(名称中带有单词的属性)以及其他一些相关属性。text

除了各种CSS字体属性之外,还有其他属性可以帮助设置文本样式。例如,您可以更改文本的颜色、对齐文本、添加装饰属性等。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

在CSS中,可以使用下面列出的属性设置文本样式。使用此列表,您可以了解如何使用每个css文本属性及其在浏览器中的外观。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

文本颜色

有关详细信息,请参阅颜色属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    color: olive;
  }
</style>

<p>此 CSS 文本颜色为橄榄色</p>

文本对齐

有关详细信息,请参阅文本对齐属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-align: right;
  }
</style>

<p>此 CSS 文本右对齐</p>

文本缩进

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-indent: 50px;
  }
</style>

<p>此文本缩进 50 像素。这意味着段落的第一行将缩进 50 像素,但以下行不会缩进。文本需要换行才能看到缩进 - 因此所有这些文本!</p>

字母间距

有关详细信息,请参阅字母间距属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    letter-spacing: 5px;
  }
</style>

<p>此文本应用了字母间距</p>

字间距

有关详细信息,请参阅字间距属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    word-spacing: 50px;
  }
</style>

<p>此文本应用了字间距</p>

文本修饰

有关详细信息,请参阅文本修饰属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  .overline {
    text-decoration: overline;
  }
  .line-through {
    text-decoration: line-through;
  }
  .underline {
    text-decoration: underline;
  }
  a:link {
    text-decoration: none;
  }
</style>


<p class="overline">此文本的顶部有一行</p>
<p class="line-through">此文本中间有一行</p>
<p class="underline">此文本下面有一行</p>
<a href="/css/" target="_blank">此超链接没有下划线</a>

文本转换

有关详细信息,请参阅文本转换属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  .uppercase {
    text-transform: uppercase;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .capitalize {
    text-transform: capitalize;
  }
</style>

<p class="uppercase">此文本已转换为大写</p>
<p class="lowercase">此文本已转换为小写</p>
<p class="capitalize">此文本已大写。</p>

文本方向

有关详细信息,请参阅方向属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    direction: rtl;
  }
</style>

<p>此文本从右向左运行。这对于文本从右向左排列的语言非常有用。虽然英语不是很有用...</p>

CSSunicode-bidi

有关详细信息,请参阅统一码-双向属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

将其与direction属性结合使用可确定文本的方向。可能的值:正常值、嵌入值、双向覆盖值和继承值。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
</style>

<p>此文本从右向左运行。这对于文本从右向左排列的语言非常有用。虽然英语不是很有用....</p>

文本阴影

有关详细信息,请参阅文本阴影属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    text-shadow: 2px 2px 8px orange;
  }
</style>

<p>如果您的浏览器支持 CSS 文本阴影属性,则此文本将具有阴影。</p>

空白区域

告诉浏览器如何处理空格。可能的值:、和。normalprenowrap文章源自你的网络首码项目网-https://www.youranweb.com/255.html

有关详细信息,请参阅空白属性。文章源自你的网络首码项目网-https://www.youranweb.com/255.html

<!DOCTYPE html>
<title>Example</title>
<style>
  p {
    white-space: pre;
  }
</style>

<p>此文本有一个换行符(实际上,它有很多换行符!),空格预设设置告诉浏览器像HTML pre标记一样尊重它。
</p>
文章源自你的网络首码项目网-https://www.youranweb.com/255.html文章源自你的网络首码项目网-https://www.youranweb.com/255.html
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网

发表评论