码迷,mamicode.com
首页 > Web开发 > 详细

css文本样式

时间:2020-07-29 17:51:08      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:cas   设置   垂直   base   lower   颜色   ble   网页   ase   

一、  CSS字体和文本样式作用

  • 文字:颜色、字体大小、字体、加粗等
  • 文本:行高、对齐方式、文本装饰

二、文字样式属性 

  • 字体: font-family
  • 文字大小: font-size
  • 文字颜色: color
  • 文字粗细: font-weight
  • 文字样式: font-style

1.font-family字体属性

①定义

  定义元素内文字以什么字体来显示
②语法:
  font-family:[字体1][,字体2][..]

③说明:

  • 含空格字体名和中文,用英文引号(")括起
  • 多个字体,用英文逗号“,"隔开
  • 引号嵌套,外使用双引号,内使用单引号

④font-family属性值:具体字体名,字体集
⑤字体集:

  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

⑥font-size文字大小

font-size:绝对单位|相对单位

属性值

说明

In

Inch,英寸

1英寸=2.45厘米

Cm

厘米

1厘米=0.394英寸

Mm

毫米

1毫米=0.1厘米

Pt

磅,印刷的点数

72磅=1英寸

pc

派卡

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

 

属性值

CCS2缩放系数1.2

xx-small

9px

x-small

11px

small

13px

medium

16px

large

19px

x-large

23px

xx-large

28px

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.color文字颜色

定义元素内文字颜色
语法:
color:颜色名|十六进制|RGB

3.font-style文字样式

为元素内文字设置样式

语法:

font-style: normal|italic|oblique

4.font-variant字体变形

设置元素中文本为小型大写字母

语法:

font-variant: normal | small-caps

5.font属性(简写)

语法:

font : font-style font-variant font-weight font-size/line-height font-family

说明:

  • 值之间空格隔开
  • 注意书写顺序

6.text-align属性

设置元素内文本的水平对齐方式

语法:

text-align: left | right | center | justify

7.vertical-align属性

设置元素内容的垂直对齐方式

语法:

vertical-align: baseline | sub | super I top I text-top
      middle I bottom I text-bottom

      长度|百分比

三、文本样式属性

字体属性 说明
word-spacing

设置元素内单词之间间距
letter-spacing 设置元素内字母之间间距
text-transform 设置元素内文本的大小写
capitalize | uppercase | lowercase | none
text-decoration

设置元素内文本的装饰

urnderline| overline| line-through | blink | none

 

 

 

 

 

 

 

 

 

 

四、CSS文本样式应用

经验技巧:

  1. 网页制作从整体到局部
  2. 借助手册和网络

 

css文本样式

标签:cas   设置   垂直   base   lower   颜色   ble   网页   ase   

原文地址:https://www.cnblogs.com/Sweetsnow/p/13397664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!