CSS知识回顾（2）

css创建

• 插入样式表的方法有三种:

1. 外部样式表(External style sheet)
2. 内部样式表(Internal style sheet)
3. 内联样式(Inline style)

• CSS 优先规则：

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

css背景

• 关键字
  {% tabs bg %}

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

{% endtabs %}

• 百分比值

bady{
background-position: 50% 50%;
}
//background-position 的默认值是 0% 0%，在功能上相当于 top left。

• 长度值

background-position: 50px 100px;
//在左上角向右50像素和向下100像素的位置

• 背景关联(attachment)

 background-attachment:fixed

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

css文本

• 缩进：text-indent 百分比%/像素大小px/inherit/

• 水平对齐：`text-align

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

• 字母间距：letter-spacing
• 字间距： word-spacing
• 区别就是第一个是字符或者字母间的间距，第二个则是字或单词的间距

2. 字符转换 text-transform

• text-transform 属性控制文本的大小写。

h1 {text-transform:uppercase}//全是大写字母
h2 {text-transform:capitalize}//定义每个单词首字母大写
p {text-transform:lowercase}//定义全是小写字母

3. 文本装饰 text-decoration

none //默认文本样式	
underline //下划线
overline //上划线
line-through //中部划线
blink //文本闪烁

4. 空白空间属性：whiteSpace

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

5. 文本方向directon

• rtl 和ltr