常用样式
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>
<!-- <a href="">123</a> -->
<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>
<div><div/>
br*100
<body/>
<html/>