css文字向右对齐_CSS从零开始——基本样式（2）

最新推荐文章于 2024-08-31 14:41:23 发布

亚大伯斯

最新推荐文章于 2024-08-31 14:41:23 发布

阅读量1.3k

点赞数 1

文章标签： css文字向右对齐

本文链接：https://blog.csdn.net/weixin_26833205/article/details/112535591

版权

本文深入探讨CSS中的文本样式，包括文本颜色、对齐方式、修饰、变换和阴影。详细阐述了color、text-align、text-decoration、text-transform、text-shadow等属性的用法，帮助开发者更好地控制页面文本的显示效果。

摘要由CSDN通过智能技术生成

之前一起看过了选择器和背景的样式，出于篇幅的考虑，我肯定不能每一个小细节都记录的清楚，所以养成查看参考手册是个好习惯。今天主要就是来看看文本和字体的样式。

1 文本

通过 CSS ，我们可以控制文本的样式，比如文本颜色、对齐、缩进、间距等等。

1.1 文本颜色

color 属性就是用来设置文本颜色的，之前我们在 CSS的值 这个章节讲过颜色的指定方式，同样的，文本颜色也可以通过以下方式指定：

HEX值：#ff00ee
RGB值：rgb(255, 0, 232)
颜色名称：red

以下代码将 h1 设置为蓝色：

h1 {
  color: blue;
}

1.2 文本对齐

text-align 指定文本块的水平对齐方式，可以有如下的可能值：

left：向左对齐
right：向右对齐
start：向文本头部对齐，如果页面文字方向是从左到右，则向左对齐；如果是从右到左，则向右对齐
end：向文本尾部对齐，如果页面文字方向是从左到右，则向右对齐；如果是从右到左，则向左对齐
center：居中对齐
justify：向两端对齐
inherit：继承母元素的对齐方式

下面的例子展示了大部分的对齐方式呈现出来的效果：

#left {
  text-align: left;
}
#right {
  text-align: right;
}
#justify {
  text-align: justify;
}
#center {
  text-align: center;
}
#start {
  text-align: start;
}
#end {
  text-align: end;
}

结果1，请留意justify的效果

结果2，请留意justify的效果

1.3 文本修饰

text-decoration 对文本块应用修饰，例如如下划线；其可能的值为：

none：无修饰
强调线：可以直接使用，包括上划线 overline、下划线 underline、删除线 line-through
线的样式：不设置强调线则无法生效，包括实心 solid、圆点 dotted、虚线 dashed、双线 double、波浪线 wavy
线的颜色：不设置强调线则无法生效，支持任何颜色代码，或者颜色名称

默认值为none，即无修饰。

其实它是以下三种属性的简写方式，由于使用较少，这里不做介绍了，请点击链接查看参考手册：

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

这里是一个例子：

#left {
  text-align: left;
  text-decoration: line-through dashed red;
}
#right {
  text-align: right;
  text-decoration: overline dotted blue;
}
#justify {
  text-align: justify;
  text-decoration: line-through solid yellow;
}
#center {
  text-align: center;
  text-decoration: overline dashed brown;
}
#start {
  text-align: start;
  text-decoration: underline double aqua;
}
#end {
  text-align: end;
  text-decoration: underline dotted chartreuse;
}

其实针对同一个元素，可以同时设置上划、下划和删除线，类似这样：

#justify {
  text-align: justify;
  text-decoration: line-through overline underline;
}

1.4 文本变换

在以字母为主的页面上，可以通过 text-transform 属性来控制文本的大小写，不过这个对于东亚语系，基本没有作用，所以这个属性在国内以中文为主的网页基本不会用到，它可以包含如下值：

none：无更改
capitalize：每个单词的首字母大写
uppercase：全部大写
lowercase：全部小写
inherit：继承母元素的样式

效果如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>hello</title> 
    <style>
      #capitalize {
        text-transform: capitalize;
      }
      #uppercase {
        text-transform: uppercase;
      }
      #lowercase {
        text-transform: lowercase;
      }
    </style>
  </head>
  <body>
    <p id="capitalize">text-transform: capitalize - the initial letter of every word will be uppercase.</p>
    <p id="uppercase">text-transform: uppercase - every word will be uppercase.</p>
    <p id="lowercase">text-transform: lowercase - every word will be lowercase.</p>
  </body>
</html>

可以看到这个属性对德语可以产生作用，但是对日语和中文是没有用的，因为东亚语系大部分没有大小写的区别

1.5 文本阴影

CSS 3 当中引入的 text-shadow，主要用来控制文本的阴影，在不使用特殊字体或者图像的情况下就可以直接在页面上渲染文本阴影，这大大减少了网络流量，是非常有用的一个属性。

它可以控制水平阴影，垂直阴影，模糊的距离，以及阴影的颜色，可以包含如下值：

none：无阴影
阴影宽度：各种长度值都可以使用
阴影颜色：各种颜色值都可以使用

这里是一个例子：

h1 {text-shadow: 2px 2px #FF0000;}
h2 {text-shadow: 2px 2px 2px green;}

如上，为了明确的突出效果，我们给文本阴影设置了 2px 的下偏移和右偏移，并给 h2 设置了 2px 的模糊距离，同时使用明确的红绿两种颜色确保在截图的情况下可以看的清晰。我承认有点丑-_-

1.6 文本属性列表

因为数量繁多，所以建议大家看看参考手册，如下就是绝大多数的文本属性的列表，点击链接可以直接跳转到参考手册，希望可以帮助到大家。

color ：CSS 1 引入，设置文本的颜色
direction ：CSS 2 引入，规定文本的方向 / 书写方向
letter-spacing ：CSS 1 引入，设置字符间距
line-height ：CSS 1 引入，设置行高
text-align ：CSS 1 引入，规定文本的水平对齐方式
text-decoration ：CSS 1 引入，规定添加到文本的装饰效果
text-indent ：CSS 1 引入，规定文本块首行的缩进
text-transform ：CSS 1 引入，控制文本的大小写
vertical-align ：CSS 1 引入，设置元素的垂直对齐方式
white-space ：CSS 1 引入，设置怎样给一元素控件留白
word-spacing ：CSS 1 引入，设置单词间距
text-emphasis ：CSS 1 引入，向元素的文本应用重点标记以及重点标记的前景色
hanging-punctuation ：CSS 3 引入，指定一个标点符号是否可能超出行框
punctuation-trim ：CSS 3 引入，指定一个标点符号是否要去掉
text-align-last ：CSS 3 引入，当 text-align 设置为 justify 时，最后一行的对齐方式
text-justify ：CSS 3 引入，当 text-align 设置为 justify 时指定分散对齐的方式
text-outline ：CSS 3 引入，设置文字的轮廓
text-overflow ：CSS 3 引入，指定当文本溢出包含的元素，应该发生什么
text-shadow ：CSS 3 引入，为文本添加阴影
text-wrap ：CSS 3 引入，指定文本换行规则
word-break ：CSS 3 引入，指定非CJK文字的断行规则
word-wrap ：CSS 3 引入，设置浏览器是否对过长的单词进行换行

2 字体

CSS 可以选择字体系列，设置字体大小，控制字体重量，并添加字体样式。

2.1 字体系列

font-family 属性按照首选项的顺序指定字体。浏览器以第一个字体开始，并使用可用的字体。

CSS 定义了一些可用的通用字体。浏览器用于呈现它们的确切字体可以有变化，通用字体系列的摘要如下表：

以下代码显示应用于文本块的 font-family 属性：

p {
  font-family: "HelveticaNeue  Condensed", monospace;
}

如果HelveticaNeue Condensed在本地系统中不可用，则使用通用等宽字体。

2.2 字体大小

font-size 属性设置字体的大小，它可以使用如下的值：

xx-small, x-small, small, medium, large, x-large, xx-large：设置字体大小，浏览器负责决定每个值表示的确切大小
smaller, larger：相对于父元素的字体大小设置字体大小
length：使用 CSS 长度值精确设置字体大小
%：将字体大小设置为父元素的字体大小的百分比

下面是个例子：

<html>
<head>
  <style type="text/css">
    p.absoluteone {
      font-size: xx-small;
    }
    p.absolutetwo {
      font-size: x-small;
    }
    p.absolutethree {
      font-size: small;
    }
    p.absolutefour {
      font-size: medium;
    }
    p.absolutefive {
      font-size: large;
    }
    p.absolutesix {
      font-size: x-large;
    }
    p.absoluteseven {
      font-size: xx-large;
    }
    p.pixelsone {
      font-size: 9px;
    }
    p.pixelstwo {
      font-size: 12px;
    }
    p.pixelsthree {
      font-size: 14px;
    }
    p.pixelsfour {
      font-size: 18px;
    }
    p.pixelsfive {
      font-size: 24px;
    }
    p.pixelssix {
      font-size: 36px;
    }
    p.pixelsseven {
      font-size: 48px;
    }
    p.picaone {
      font-size: 1pc;
    }
    p.picatwo {
      font-size: 2pc;
    }
    p.picathree {
      font-size: 3pc;
    }
    p.picafour {
      font-size: 4pc;
    }
    p.pointone {
      font-size: 9pt;
    }
    p.pointtwo {
      font-size: 12pt;
    }
    p.pointthree {
      font-size: 14pt;
    }
    p.pointfour {
      font-size: 18pt;
    }
    p.pointfive {
      font-size: 24pt;
    }
    p.pointsix {
      font-size: 36pt;
    }
    p.pointseven {
      font-size: 48pt;
    }
    p.relativeone {
      font-size: smaller;
    }
    p.relativetwo {}
    p.relative {
      font-size: larger;
    }
    p.emone {
      font-size: 1em;
    }
    p.emtwo {
      font-size: 2em;
    }
    p.emthree {
      font-size: 3em;
    }
    p.emfour {
      font-size: 4em;
    }
    p.exone {
      font-size: 1ex;
    }
    p.extwo {
      font-size: 2ex;
    }
    p.exthree {
      font-size: 3ex;
    }
    p.exfour {
      font-size: 4ex;
    }
    p.exfive {
      font-size: 5ex;
    }
    p.exsix {
      font-size: 6ex;
    }
    p.exseven {
      font-size: 7ex;
    }
    p.percentone {
      font-size: 50%;
    }
    p.percenttwo {
      font-size: 75%;
    }
    p.percentthree {
      font-size: 100%;
    }
    p.percentfour {
      font-size: 150%;
    }
    p.percentfive {
      font-size: 200%;
    }
    p.percentsix {
      font-size: 400%;
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>Font Sizes</h1>
    <div class="column">
      <h2>Absolute</h2>
      <p class="absoluteone">xx-small</p>
      <p class="absolutetwo">x-small</p>
      <p class="absolutethree">small</p>
      <p class="absolutefour">medium</p>
      <p class="absolutefive">large</p>
      <p class="absolutesix">large</p>
      <p class="absoluteseven">large</p>
    </div>
    <div class="column">
      <h2>Pixels</h2>
      <p class="pixelsone">9 px</p>
      <p class="pixelstwo">12 px</p>
      <p class="pixelsthree">14 px</p>
      <p class="pixelsfour">18 px</p>
      <p class="pixelsfive">24 px</p>
      <p class="pixelssix">36 px</p>
      <p class="pixelsseven">48 px</p>
    </div>
    <div class="column">
      <h2>Points</h2>
      <p class="pointone">9 pt</p>
      <p class="pointtwo">12 pt</p>
      <p class="pointthree">14 pt</p>
      <p class="pointfour">18 pt</p>
      <p class="pointfive">24 pt</p>
      <p class="pointsix">36 pt</p>
      <p class="pointseven">48 pt</p>
    </div>
    <div class="column">
      <h2>Picas</h2>
      <p class="picaone">1 pc</p>
      <p class="picatwo">2 pc</p>
      <p class="picathree">3 pc</p>
      <p class="picafour">4 pc</p>
    </div>
    <hr />
    <div class="column">
      <h2>Relative Sizes</h2>
      <p class="relativeone">smaller</p>
      <p class="relativetwo">no style</p>
      <p class="relativethree">larger</p>
    </div>
    <div class="column">
      <h2>Ems</h2>
      <p class="emone">1em</p>
      <p class="emtwo">2em</p>
      <p class="emthree">3em</p>
      <p class="emfour">4em</p>
    </div>
    <div class="column">
      <h2>Exs</h2>
      <p class="exone">1ex</p>
      <p class="extwo">2ex</p>
      <p class="exthree">3ex</p>
      <p class="exfour">4ex</p>
      <p class="exfive">5ex</p>
      <p class="exsix">6ex</p>
      <p class="exseven">7ex</p>
    </div>
    <div class="column">
      <h2>Percents</h2>
      <p class="percentone">50%</p>
      <p class="percenttwo">75%</p>
      <p class="percentthree">100%</p>
      <p class="percentfour">150%</p>
      <p class="percentfive">200%</p>
      <p class="percentsix">400%</p>
    </div>
  </div>
</body>
</html>

有点长，也就是展示一下大小，看看就好

2.3 字体外观

（1）font-style

font-style 属性可以设置字体样式，包括：

normal：普通样式
italic：斜体
oblique：倾斜

斜体字体和倾斜字体之间有区别，但是区别对文本的外观没有什么区别。

（2）font-weight

font-weight 属性可以设置字体的粗细，包括：

normal：普通样式
bold：粗体
bolder：更粗
lighter：更细
100 - 900：默认粗细是 400，小于 400 则越来越细，大于 400 则越来越粗，700 等同于 bold

以下例子使用到了 font-weight 和 font-style 属性：

<html>
  <head>
    <style type="text/css">
      p.one {
        font-style: normal;
      }
      p.two {
        font-style: italic;
        font-weight: bold
      }
      p.three {
        font-style: oblique;
        font-weight: lighter;
      }
    </style>
  </head>
  <body>
    <p class="one">This is a normal font</p>
    <p class="two">This is an italic font</p>
    <p class="three">This is an oblique font</p>
  </body>
</html>

2.4 @font-face 规则

在 CSS 3 之前，我们只能使用已在用户计算机上安装好的字体，不能够使用离线字体，不过通过 CSS 3 的 @font-face 规则，就可以使用任意字体了。

当找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上，“自己的”的字体是在 @font-face 规则中定义的：

@font-face
{
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div
{
  font-family:myFirstFont;
}

如上述代码，在新的 @font-face 规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

URL 尽量使用小写字母的字体，大写字母在某些浏览器中会产生意外的结果（虽然不想提，但是比如 IE 就是这样的）。

它可以支持的属性如下：

font-family：必需，规定字体的名称
src：必需，定义字体来源url
font-stretch：可选，定义如何拉伸字体
font-style：可选，定义字体的样式
font-weight：可选，定义字体的粗细
unicode-range：可选。定义字体支持的 UNICODE 字符范围，默认是 "U+0-10FFFF"

2.5 字体属性列表

其实有关字体的属性不算多，可以点击下面的列表链接跳转到对应的参考手册：

font： CSS 1 引入，在一个声明中设置所有字体属性
font-family： CSS 1 引入，规定文本的字体系列
font-size： CSS 1 引入，规定文本的字体尺寸
font-style： CSS 1 引入，规定文本的字体样式
font-variant： CSS 1 引入，规定文本的字体样式
font-weight： CSS 1 引入，规定字体的粗细
@font-face： CSS 3 引入，一个规则，允许网站下载并使用非"Web-safe"的字体
font-size-adjust： CSS 3 引入，为元素规定 aspect 值
font-stretch： CSS 3 引入，收缩或拉伸当前的字体系列

亚大伯斯

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫