07_设置文本样式

html5

text {

border: medium solid red;
width: 400px;
background-color: lightgrey;
padding: 10px;
text-justify:

}

/* 处理空白
whitespace属性控制浏览器对空白字符的处理方式
*/

whiteText {

white-space: pre-line;

}

/* 指定文本方向 */

rtl {

direction: rtl;

}

ltl {

direction: ltr;

}

/* 指定单词，字母，行之间的间距 */

space {

letter-spacing: 10px;
word-spacing: 10px;
line-height: 30px;
border: thin solid red;

}

/* 控制断词
单词超过边界截断or不截断
*/

word {

word-wrap: break-word;
/*  word-wrap: normal; 默认*/
border: thin solid red;
height: 120px;
width: 130px;

}

/* 首行缩进 */

line {

text-indent: 10%;

}

/* 文本装饰与大小写转换 */

p6 {

text-decoration: blink;
text-transform: capitalize;

}

/* 创建文本阴影
text-shadow:水平偏移，垂直偏移 模糊程度 阴影颜色
*/

p7 {

text-shadow: 10px 20px 1px red;

}

/*################ 使用字体
font-family:设置字体，后面为备用字体
font-style:字体样式，斜体，假斜体，正常字体
font-weight:粗细程度
*/

p7 {

font-family: "微软雅黑", fantasy;
font-size: smaller;
font-style: italic;
font-weight: bold;

}

/* 使用web字体 */
@font-face{
font-family:MyStyle; /* 名字 */
src:url(“./cour.ttf”);/* 地址 */
}

p7 {

font-family: MyStyle, fantasy;

}

table： 指定对象作为块元素级的表格。类同于html标签（CSS2） inline-table：
指定对象作为内联元素级的表格。类同于html标签（CSS2） table-caption：
指定对象作为表格标题。类同于html标签<（CSS2）table-cell： 指定对象作为表格单元格。类同于html标签
table-row： 指定对象作为表格行。类同于html标签

start
end
left
right
justify
center