CSS学习(二)——文字与文本

长度与颜色

长度:px像素

颜色:1. 十六进制 2. 英文

文字属性

属性名称 设定值 说明
font-style normal 正常显示
  italic 斜体
font-variant normal 正常显示
  small-caps 将小写字母更换为较小的大写字母
font-weight normal 正常显示
  bold 粗体
font-size 像素 字体大小(默认14px)
  百分比  
font-family 字体名称 设置字体

用内嵌式排版样式的标记定义型来举例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>文字与文本</title>
<style type="text/css">
	p{font-size:30px;font-variant:small-caps;font-weight:bold;font-family:黑体;}
</style>
</head>
<body>
  <p>What Are You Doing?</p>	
</body>
</html>

font属性的简化写法:例如,font:italic bold 200px 隶书;
注意,简写时各个属性的位置不能发生改变,要按照上面规范书写。

文本属性

属性名称 设定值 说明
color 十六进制 颜色
  英文 颜色
  三原色单位 颜色
letter-spacing normal 正常显示
  长度(例如1px) 文本间隔
word-spacing normal 正常显示
  数字 单词间距
white-space normal 文本自动处理换行
  pre 换行和空白受保护
  nowrap 强制在同一行显示
text-align left 文字靠左
  right 文字靠右
  center 文字居中
text-decoration none 正常显示
  underline 加下划线
  overline 加顶线
  line-through 加删除线
text-indent 长度 首行缩进
  百分比 首行缩进
line-height 像素 行高(行间距)
  数字/百分比(常用) 行高
text-transform none 正常显示
  capitalize 字符串第一个字符大写
  uppercase 都设置为大写字符
  lowercase 都设置为小写字符
vertical-align sub 设置文字为下标
  super 设置文字为上标
  top 元件往上靠齐
  middle 设置文字在中线位置
  bottom 元件往下靠齐

vertical-align举例:
<head>
  <style type="text/css">  
    img{vertical-align:-100px;}
  </style>
</head>
<body>
  <img src="pic.jpg">CSS文字与文本
</body>

你可能感兴趣的:(html,css)