常用样式

1、字体样式

font-family：字体族科，多值用于备用，以,隔开

font-family: "STSong", "Arial";

font-size：字体大小
font-style：字体风格 normal | italic | oblique
font-weight：字体重量 normal | bold | lighter | 100~900
line-height：行高
font：字重风格大小/行高字族

2、文本样式

color：文本颜色
text-align：横向排列

left 居左 | center 居中 | right 居右

vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象顶端对齐

text-indent：字体缩减
text-decoration：字划线
letter-spacing：字间距
word-spacing：词间距
word-break：自动换行

normal：默认换行规则
break-all：允许在单词内换行

3、背景样式

background-color：颜色
background-image：图片

background-image: url(bg.png);

background-repeat：重复

repeat | no-repeat | repeat-x | repeat-y

background-position：定位

top | bottom | left | right | center

background-attachment：滚动模式

scroll | fixed

==============================================================================================================================================================

笔记

字体样式:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>字体样式</title>
　　<style type="text/css">
　　span {
　　/*大小*/
　　font-size: 30mm;
　　/*字重: bold normal lighter 100~900*/
　　font-weight: 900;
　　/*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/
　　line-height: 50mm;
　　/*样式: 一般不关心*/
　　font-style: normal;
　　/*字族:可以自定义字族*/
　　/*当Segoe UI Emoji不存在,或不起作用,再选取微软雅黑 */
　　/*备用字族*/
　　font-family: "Segoe UI Emoji", "微软雅黑";

　　/*css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值*/
　　font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
　　}
　　</style>
</head>
<body>
　　<span>123abc呵呵</span>
</body>
</html>

文本样式:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>文本样式</title>
　　<style type="text/css">
　　span {
　　/*颜色*/
　　color: red;
　　/*水平居中方式:left center right*/
　　text-align: center;
　　/*字划线: underline line-through overline none*/
　　text-decoration: overline;
　　/*字间距*/
　　letter-spacing: 3px;
　　/*词间距*/
　　word-spacing: 10px;
　　}
　　a {
　　/*应用场景*/
　　text-decoration: none;
　　}
　　div {
　　 300px;
　　/*显示方式*/
　　display: inline-block;
　　}
　　div {
　　font-size: 12px;
　　/*垂直排列方式: top baseline bottom*/
　　vertical-align: baseline;
　　/*缩进*/
　　text-indent: 2em;
　　}
　　/*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/
　　.div {
　　/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
　　word-break: break-all;
　　}
　　h1 {
　　text-align: center;
　　}
　　</style>
　　</head>
<body>
　　<h1>标题</h1>
　　<span>123 abc 呵呵</span>
　　
　　<div>嘻嘻哈哈嘿嘿嘻嘻哈哈嘿嘿嘻嘻哈哈 </div>
　　<div>red yellow green big small red yellow green big small red</div>
　　<div class="div">abcdefabcdefabc</div>
</body>
</html>

背景样式:

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title>背景样式</title>
　　<style type="text/css">
　　div {
　　 300px;
　　height: 300px;
　　background-color: red;
　　}
　　div {
　　/*背景图片*/
　　background-image: url("data/bg_repeat.gif");
　　/*平铺: no-repeat repeat-x repeat*/
　　background-repeat: no-repeat;
　　/*定位*/
　　/*10px == 10px center 设置一个值,第二个值默认为center*/
　　/*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/
　　/*background-position: right center;*/

　　/*定位相关的涉及到滚动时的效果: scroll fixed*/
　　background-attachment: fixed;
　　}
　　div {
　　/*整体设置*/
　　background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
　　}
</style>
</head>
<body>

　　br*100

<body/>

<html/>