CSS3总结

CSS英文名：Cascading Style Sheets

中文名:汉式层叠样式表

作用：用于修饰网页信息的显示样式，控制网页的外观；

组成：选择器+一条声明；

选择器：表明要应用规则的元素；

声明：用于表明应该如何显示选择器指定的元素；

语法结构：选择器{属性：属性值} 例：{p:color:#000;}

样式表的种类：1.内部样式表 2.外部样式表 3.行内样式表

选择器

• 通配符选择器 *{}
• 标签选择器：p{}
• 类别选择器：.classname{}
• ID选择器：#idname{}
• 伪类选择器： ：link{} :visited{} :hover{} :active{} 巧记 L-V-H-O
• 群组选择器：h1,h2,p{}
• 后代选择器：div a{}
• 选择器的优先级：id>class>标签

文字属性：

• 字体颜色：color:#000;
• 字体类型：font-family:Arial/Verdna/sens-serif; 默认的是：Arial
• 字体大小：font-size:12px;
• 粗体：font-weight:normal普通显示/bold粗体显示;
• 斜体：font-style:normal普通显示/italic斜体显示/oblique倾斜;
• 文字大写：text-transform:uppercase;
• 文字小写：text-transform:lowercase;

段落属性：

• 文本缩进：text-indent:2em/-2em;//可正可负
• 文本对齐：text-align:center/left/right;
• 文本修饰：text-decoration:none/underline/overline/line-through;
• 行高：line-height:20px;
• 字符间距:letter-spacing:2px;
• 词间距：word-spacing:2px;

背景属性：

• 背景颜色：background-color:#f00;
• 背景图片：background-image:url(“路径”);
• 背景平铺：background-repeat:repeat(默认)/no-repeat(不平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺);
• 背景位置：background-position:left/center/right/top/bottom/数值;
• 背景属性的缩写写法：background:url(路径) no-repeat center top;

列表属性：

• list-style-type:none;清除列表的项目符号
• list-style-img:url(路径);将一个图片作为项目符号使用
• list-style-position:;表明项目符号显示的位置
• list-style:disc;小圆点
• list-style:circle;实心小圆点
• list-style:square;实心正方形

定位：

• 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
• 语法：选择符{position:value;}
• static：默认。标准文档流，默认值，无特殊定位，处于文档流中。
• relative:相对定位。不脱离文档流，以自身的位置进行偏移。
• absolute:绝对定位。脱标不占位，相对于具有定位属性的父级元素（除了静态定位）偏移。如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。
• fixed:固定定位。是绝对定位的一种特殊形式，以浏览器窗口作为参照物。
• 注：固定定位始终以浏览器窗口为参照物，不管浏览器的滚动条如何滚动，也不管浏览器窗口大小如何变化它始终以浏览器窗口作为参照物。

浮动：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
• float:left/right;
• float:left;左浮动，使块元素在一行显示。
• float:right;右浮动，使块元素在一行显示。

其它常用属性：

• border

width （宽） height （高）
颜色 border-color ;

样式：border-style: dotted solid dashed none;
宽度：border-width: 2px;
border:宽度 颜色 样式（不能省略）
上边框颜色 border-top-color:
下边框复合属性 border-bottom:

• 边距和填充
  外边距 margin
  设置元素外边距的宽度
  margin-top\bottom\left\right
  margin 复合属性，顺序为上右下左
  padding内边距
  内容和边框之间的的距离
  padding-top\bottom\left\right
  padding 复合属性 上右下左

• z-index属性
  设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠加在值较小的元素之上
  元素可拥有负的z-index属性值，默认值是：auto,默认层是：0层
  当没有设置、属性或者层数相同时，后面的元素显示在上面
  z-index的属性值，只能为整数，正整数，0，负整数

• display属性
  none不显示
  inline-block行内块元素
  block块元素
  inline行内元素

• overflow属性
  指定对于盒中容纳不下的内容的显示方式
  visible可见（默认值）
  hidden隐藏
  scroll滚动-一定出现滚动条
  auto自动-按需出现滚动条

• visibility 属性
  设置可见性
  visible：设置对象可视
  hidden：设置对象隐藏

• visibility:hidden与display:none的区别
  visibility:hidden设置不可见的元素也会占据页面上的空间
  display:none不可见的元素, 属性不占据页面空间

• 盒模型

边框：border属性

内边距：padding属性

外边距：margin属性

内容:content