css样式笔记

css样式笔记

• css 文本：

1. text-indent: 2rem ; 文本缩进
2. text-align： center left right justify(两端对齐) inherit（从父元素继承）
3. word-spacing ：2rem 字间隔
4. letter-spacing：2rem 字母间隔
5. text-transform：none uppercase lowercase capitalize 字符转换
6. text-decoration：none underline overline（下划线） line-through（上划线） blink（文本闪烁）
7. white-space ：normal 处理空白格
8. direction：ltr rtl inherit 设置文本方向
9. line-height： 设置行高

• css 字体：

10. font-family font-size font-style font-weight

• css 链接

11. a a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻

• CSS 列表

12. list-style-type ： square 列表样式 list-style-image : url(xxx.gif) list-style : url(example.gif) square inside

• CSS Table

13. border-collapse:collapse; 设置是否把表格边框合并为单一的边框
14. border-spacing:10px 50px 相邻单元格的间距
15. caption-side：设置表格标题的位置
16. empty-cells：设置是否显示表格中的空单元格。

• CSS outline 轮廓

17. outline-color 设置轮廓的颜色
18. outline-style 设置轮廓的样式
19. outline-width 设置轮廓的宽度

• padding,margin,border 自行了解
• CSS 定位和浮动

20. positon: static relative absolute (子绝父相) overflow: hidden auto（元素溢出的解决） z-index (层级顺序) vertical-align：（元素的垂直对齐方式）
21. float: right left 清除浮动的几种方法

• css 对齐方式：

22. 水平对齐： margin: auto; width:70%;
23. 使用 position 属性进行左和右对齐 :position:absolute;right:0px; width:300px;
24. 使用 float 属性来进行左和右对齐:float:right; width:300px;

• css 其他属性

25. clear : left（在左侧不允许浮动元素） right both (清除浮动)
26. cursor：pointer crosshair 等： 指针类型
27. display： inline block inline-block等
28. visibility： hidden collapse 设置元素可见与不可见
29. opacity ：0.6 图片透明度

img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}