常用样式
一 概念
# 常用样式
#### 1、字体样式
* font-family：字体族科，多值用于备用，以,隔开
```css
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：横向排列
```css
left 居左 | center 居中 | right 居右
```
* vertical-align：纵向排列
```css
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：自动换行
```css
normal：默认换行规则
break-all：允许在单词内换行
```
#### 3、背景样式
* background-color：颜色
* background-image：图片
```css
background-image: url(bg.png);
```
* background-repeat：重复
```css
repeat | no-repeat | repeat-x | repeat-y
```
* background-position：定位
```css
top | bottom | left | right | center
```
###### v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center
* background-attachment：滚动模式
```css
scroll | fixed
```
###### v_eg：父级设置属性，子集内容超出父级范围
###### v_hint：掌握基本属性
二 代码示范
文本样式
<!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 {
width: 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">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</div>
</body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style type="text/css">
div {
width: 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>
<p>1</p>
</div>
</body>
</html>
