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>
-查询)
