美文网首页
CSS文本样式

CSS文本样式

作者: 勿以浮沙筑高台 | 来源:发表于2016-09-13 13:47 被阅读6次

CSS提供了几个属性来操作字体。
font,可以很方便的指定字体的属性。比如:

  • 字体加粗,字体的风格:斜体和字体变形:小写和大写字母
  • 字体的大小
  • 行高
  • 字体
eg1:######
p {font: italic 75%/125% "Comic Sans MS", cursive;}```
这条规则定义了字体的几个属性,使整个段落文本都变成斜体。
字体大小设置为每个段落父元素字体大小的3/4,行高设置为125%(比常规的间隔稍大一些)。
文本字体设置为 Comic Sans MS,假如该字体不被浏览器支持则使用默认字体:cursive。
这条规则还把bold和small-caps这些效果给去掉了(设置它们的值为normal)。

######字体######使用 
font-family 属性指定文本的字体。

简体中文的字体示例:
Windows:```font-family:微软雅黑;```
Mac OS:```font-family:"Songti SC";```

######字号######
使用font-size 属性指定字体的大小。浏览器用户浏览页面时,可以覆盖页面默认的文号大小,也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。

你可使用系统内置的值来设置字号,比如small,medium和large。你也可以使用相对父元素字号大小的值来设置,比如:smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度(相对于父元素字号大小);因此1.5em就是1.5倍的父元素字号大小。

如果有必要你也可以指定一个实际的大小,比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上,因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium,然后再给它的子元素设置个相对值。

######行高######
使用 line-height 属性指定文本的行间距。

行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成,而且这个段落的字号还比较小,这时给它指定一个稍大的间距,这样阅读起来会更方便

######文本装饰######
单独的 text-decoration就可以为文本指定其他风格,比如underline或line-through。你也可以把值设置成none,把这些风格取消掉。

######其他属性######
使用font-style: italic;指定文本为斜体;
使用 font-weight: bold;指定文本加粗;
使用 font-variant: small-caps;指定文本为小型大写字母;
如果我们想单独设置某个效果失效,我们可以把其相应的属性设置为normal或inherit.

**PS: 在一个复杂的样式表中,应该避免使用font属性,因为它的副作用(重置其他个体属性)。**

相关文章

  • 5、CSS文本样式

    CSS文本样式

  • CSS选择器与文本样式

    CSS选择器以及文本样式 CSS学习 CSS 层叠样式表(Cascading Style Sheets)CSS可用...

  • css基础知识

    CSS概述 css指层叠样式列表(Cascading Style Sheets)样式定义如何显示HTML文本把样式...

  • Css样式--文本样式详解

    Css样式--文本样式详解 文本样式包括所谓的文本缩进:text-indent水平对齐:text-align:ce...

  • 从零开始学CSS - 样式

    样式 CSS 背景属性 CSS 文本属性 CSS 字体属性 链接 常见的链接样式,text-decorat...

  • day03

    A今天学了什么? 1.CSS基本样式讲解 1.1css背景样式 1.2CSS文本 1.3CSS字体 1.4.css...

  • css 01

    css 初识 css 通常称为css样式或层叠样式表(级联样式),主要用于设置html页面中的文本内容(字体,大小...

  • web前端入门到实战:css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import...

  • day03

    A今天学到了什么 1.css基本样式 1.css背景 2.css 文本 3.css 字体 4.css 列表样式...

  • DAY04

    1、CSS样式 1.1、CSS背景样式 1.2、背景的简写 1.3、背景吸附 1.4、背景大小 2、文本样式 2....

网友评论

      本文标题:CSS文本样式

      本文链接:https://www.haomeiwen.com/subject/nmumettx.html