02CSS文本样式08
day08
CSS文本样式
font-family设置字体
font-size文字大小
font-size绝对单位|相对单位
cm mm pt pc xx-small
x-small medium large small xx-large x-large
相对单位：px em % larger smaller
color文字颜色
color:颜色|十六进制|RGB
font-weight文字加粗
微元素内文字设置粗细
语法：
font-weight:normal|bold|bolder|lighter|100~900
默认值normal相当于400 bold相当于700
设置斜体
<em><i>
font-style:normal(正常)|italic(斜体)|oblique(倾斜);
font-variant字体变形
设置元素中文本位小型大写字母
语法：font-variant:normal|samll-caps
CSS文本样式
text-align
设置元素中文本水平对齐方式
left center right justify
vertial-align属性（只对行内元素有效）不继承
设置元素内容的垂直方式
vertical-align:baseline|sub（下标）|super（上标）|top
|text-top|middle|bottom|text-bottom|长度|百分比
单行文字水平垂直居中
line-height:400px(等于盒子的高度);
text-align:center;
多行元素水平垂直居中
display:table;
display:table-cell;
vertical-align:middle;
text-align:center
line-height
设置元素中文本行高
语法：line-height:长度值|百分比
text-indent(首行缩进)
CSS继承是继承计算后的值
word-spacing 设置元素内单词之间间距
letter-spacing 设置元素内字母之间间距
text-transform 设置元素内文本的大小写（capitalize(首字母大写)|uppercase|lowercase|none）
text-decoration 设置元素内文本的装饰（underline|overline|line-through|blink(文字闪烁效果)|none）（不能继承）
案例（部分）:
font2.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <style type="text/css"> .in{font-size: 0.5in;} .cm{font-size: 0.5cm;} .mm{font-size: 5mm;} .pt{font-size: 15pt;} .pc{font-size: 2pc;} .xxSmall{font-size: xx-small;} .xSmall{font-size: x-small;} .medium{font-size: medium;} .large{font-size: large;} .xLarge{font-size: xx-large;} .xxLarge{font-size: xx-large;} .larger{font-size: larger;} .smaller{font-size: smaller;} .em{font-size:2em;} .percent{font-size: 150%;} #fontSize{font-size: 20px;} </style> </head> <body> <!-- 相对单位 --> <p>文字大小px,受显示器分辨率影响</p> <p>文字大小<span class="larger">相对父元素的文字大小变大</span></p> <p>文字大小<span class="smaller">相对父元素的文字大小变小</span></p> <div id="fontSize"> <p>文字大小<span class="em">相对值em</span></p> <p class="percent">文字大小<span>相对值%</span></p> </div> <!-- 绝对单位 --> <p>默认字体大小</p> <p class="in">文字大小是0.5in</p> <p class="cm">文字大小是0.5cm</p> <p class="mm">文字大小是5mm</p> <p class="pt">文字大小是15pt</p> <p class="pc">文字大小是2pc</p> <p class="xxSmall">文字大小是xx-small</p> <p class="xSmall">文字大小是x-small</p> <p class="medium">文字大小是medium</p> <p class="large">文字大小是large</p> <p class="xLarge">文字大小是x-large</p> <p class="xxLarge">文字大小是xx-large</p> </body> </html>
font3.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字样式</title> <style type="text/css"> h1{color: red;}/*具体颜色名称*/ p{color: rgb(0%,100%,0%);}/*数字：0~255；百分比：0%~100%*/ div{color: #080;}/*十六进制：#开头，六位：0~F*/ </style> </head> <body> <h1>CSS （层叠样式表）</h1> <p>叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> <div><p>叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></div> </body> </html>
