CSS常用属性(二)

来自CloudWiki
Cloud17讨论 | 贡献2017年10月15日 (日) 02:35的版本
跳转至: 导航搜索

相对单位和绝对单位

  • HTML页面中的大小尺寸量度属性,一般都可以使用绝对单位值相对单位值两种方式设置。

绝对单位

  • 绝对单位的值就是用磅、像素、毫米等度量单位设置为固定数值。
  • 如果使用像素px作为字号单位,则受显示器分辨率影响较大,因此,推荐使用计算机字体的标准单位pt
属性值单位 描述 属性值单位 描述
px 像素 mm 毫米
pt 磅,1pt=1/72英寸 cm 厘米
pc 皮卡,1pc=12 pt in 英寸

相对单位

  • 块元素的宽度或高度使用相对取值单位时,就是相对浏览器或者父元素宽度或高度的百分比;
  • 采用这种单位可随浏览器(或父元素)大小或者字号大小的变化而自动调整
属性值单位 描述
em 是当前字号大小的倍数,可根据字号的改变而自动调整。
ex 是当前字号高度值的倍数
% 适用区域大小或线条长度,一般是相对浏览器窗口或父元素同方向尺寸的百分比。如width:90%;,

字体属性

CSS样式属性 取值和描述
font-family:字体集; 系统支持的各种字体,彼此用逗号隔开
font-size:字号大小; 不同单位的绝对固定值(建议用pt)、%和em两个相对单位值、预定义取值。
font-style:风格样式; normal常规、italic斜体、oblique偏斜体
font-weight:粗细; normal常规、100~900、bold粗、bolder更粗
  • 可以按以下顺序综合为字体设置属性:
   font-style
   font-variant
   font-weight
   font-size/line-height
   font-family
  • 例如:
    • font-family: arial, sans-serif; font-size: 30px; font-style: italic; font-weight: bold;
    • 等价于:font: italic bold 30px arial, sans-serif; — 注意顺序
    • 使用综合设置时还可以在设置字号的同时设置行高,即在字号后加“/”再跟行高值。

文本属性

文本外观格式属性 取值和描述
color:前景字符颜色; 预定义颜色、十六进制、十进制、十进制百分比
letter-spacing:字间距; 带单位的固定数值
word-spacing:单词间距; 带单位的固定数值
line-height:行间距; 带单位固定数值、字符高度倍数、字符高度百分比%
text-decoration:装饰; none无装饰(默认)、underline下划线、overline上划线、line-through删除线、blink闪烁
text-align:水平对齐方式; left(默认)、right、center、 justify两端对齐
text-justify:两端对齐; IE浏览器配合text-align:justify;样式规则实现两端对齐
text-indent:首行缩进量; 带单位的固定数值、百分比%
word-break:切断单词; normal英文单词词间换行中文任意(默认)、break-all允许英文单词中间断开换行中文任意、keep-all不允许中日韩文换行英文正常
word-wrap:控制换行; normal不允许换行(默认)、break-word 强制换行
direction:书写方向; ltr从左向右、rtl从右向左
  • line-height:为一行文本设置了字号和行高之后,页面解析执行时,会使用(行高-字号)/2,将结果分别增加到文本的上方和下方,从而形成一个行内框(该框是无法显示但确实存在的),行内框中的文本在垂直方向是居中的,页面设计中经常利用这一特点控制一行文本在某个div中垂直方向居中。
  • text-indent:首行缩进量;
    • 可采用不同单位的数值、字符宽度的倍数em、或相对浏览器窗口宽度的百分比%。
    • 例如使用 text-indent:30px; 设置缩进30像素与字号大小无关。
    • 如果使用 text-indent:2em; 则无论字号大小取值如何,都会缩进两个字符。