CSS教程-04-文本样式
CSS教程-04-文本样式
季书歌 发表于4个月前
CSS教程-04-文本样式
  • 发表于 4个月前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

字体的css

p {
			  font-family: arial,sans-serif;/*字体是arial和sans-serif,首先加载的是arial,如果没有就加载sans-serif*/
			  color: red;/*字体的颜色为红色,可以用#XXXXX表示*/
			  text-align: center;/*字体的水平居中*/
			  font-size: 18px;/*字体的大小*/
			 /*font-size: 2.6rem;字体大小为2.6rem*/
			 height: 18px;/*p标签的高度*/
			 line-height: 18px;/*行高,如果高度等于行高,那么字体就会垂直居中*/
			  letter-spacing: 2px;/*字母间距,很少用到*/
			  word-spacing: 4px;/*行距,很少用到*/
			}

 

字体大小:

在我们以前的模块的CSS值和单位文章中,我们审查了长度和大小单位。字体大小(用font-size属性设置)可以取大多数这些单位(其他,例如百分比)测量的值,但是您将用于设置文本大小的最常用单位是:

  • px(像素):您想要文本高的像素数。这是一个绝对的单位 - 它在几乎任何情况下都会产生与页面上字体相同的最终计算值。
  • ems:1em等于我们正在设计的当前元素的父元素上设置的字体大小(更具体地说,是包含在父元素中的大写字母M的宽度)。如果你有一个大量设置了不同字体大小的嵌套元素,但它是可行的,如下所示。何必?一旦习惯了它,这是很自然的,你可以使用ems来调整大小,而不仅仅是文本。您可以使用ems整个网站的大小,从而使维护变得简单。
  • rems:这些工作就像ems 一样,除了1 rem等于在文档(即<html>)的根元素上设置的字体大小,而不是父元素。这样做使数学更容易解决您的字体大小,但不幸rem的是Internet Explorer 8及更低版本不支持。如果您需要支持旧的浏览器与你的项目,你可以坚持使用emS或px,或使用填充工具如REM-单位填充工具。 

字体样式,字体重量,文字变换和文字装饰 (内容很多,不要死记硬背,了解和熟悉即可)

CSS提供了四种常见的属性来改变文本的视觉重量/重点:

  • font-style:用于打开和关闭斜体文字。可能的值如下(你很少使用这个,除非你想转一些斜体造型,因为某些原因):
    • normal:将文本设置为正常字体(关闭现有斜体)。
    • italic:将文本设置为使用该字体斜体版本(如果可用); 如果不可用,它将以斜体模拟斜体。
    • oblique:将文本设置为使用倾斜正常版本创建的斜体字体的模拟版本。
  • font-weight:设置文字的粗体大小。这在现有的情况下很多值你有许多可用的字体变体(如-light-正常-Bold-extrabold-black等),但实际上你很少使用其中的任何除了normalbold
    • normalbold:正常和粗体字体重
    • lighterbolder:设置当前元素的大胆为一个步骤比其父元素的大胆更轻或更重。
    • 100900数值粗体值,如果需要,可提供比上述关键字更精细的粒度控制。 
  • text-transform:允许您设置要转换的字体。值包括:
    • none:防止任何转型。
    • uppercase:将所有文本转换为大写字母。
    • lowercase:将所有文本转换为小写。
    • capitalize:转换所有单词以使第一个字母大写。
    • full-width:将所有字形转换为固定宽度的正方形,类似于等宽字体,允许将例如拉丁字符与亚洲语言字形(如中文,日语,韩语)对齐。
  • text-decoration:设置/取消在字体上的文本装饰(您将主要使用此来取消设置链接的默认下划线)。可用的值为:
    • none:取消任何已经存在的文字装饰。
    • underline:强调文字。
    • overline:给文本上线。
    • line-through对文本进行删除线
    注意text-decoration,如果要同时添加多个装饰,可以一次接受多个值text-decoration: underline overline。另外请注意,text-decoration是一个速记属性text-decoration-linetext-decoration-styletext-decoration-color 

文本对齐:

text-align属性用于控制文本在其包含的内容框内的对齐方式。可用的值如下,并且与常规文字处理器应用程序的工作方式几乎相同:

  • left:左对齐文本。
  • right右边文本正确。
  • center:中心文本。
  • justify:使文本展开,改变单词之间的差距,使所有文本行的宽度相同。你需要仔细使用它 - 它可以看起来很可怕,特别是当它应用于一个有很多长的单词的段落。

文本布局样式(熟悉、了解)

  • text-indent:指定在文本内容的第一行开头之前应留下多少水平空间。
  • text-overflow:定义未显示溢出的内容向用户发出信号。
  • white-space:定义元素中的空格和关联行中断的处理方式。
  • word-break:指定是否断开单词内的行。
  • direction:定义文本方向(这取决于语言,通常最好让HTML处理该部分,因为它与文本内容相关。)
  • hyphens:为支持的语言打开和关闭连字符。
  • line-break:放松或加强亚洲语言的突破。
  • text-align-last:定义一个块或一行的最后一行在强制换行之前对齐。
  • text-orientation:定义一行中文本的方向。
  • word-wrap:指定浏览器是否可以在单词中断行,以防止溢出。
  • writing-mode:定义文本行是水平还是垂直布置,以及后续行的方向。
共有 人打赏支持
粉丝 0
博文 59
码字总数 19899
×
季书歌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: