牛腩新闻发布系统之Css总结

CSS（Cascading Style Sheets的缩写）也称级联样式表，他是用来表现HTML或XML等文件的计算机语言。网页的布局就是通过Css编写的。说白一点CSS就是用户打开网站所看到网页的布局。

  Css特点：

	它是实现了网页内容与样式的分离。

     Css的选择器：

           Css的选择器有很多种，这里我就不过到去介绍了，想学的可以到 http://www.w3school.com.cn/css/css_selector_type.asp去学习一下。

   我就简单的介绍一下我在牛腩中所学到的选择器。

ID选择器>类选择器>元素选择器

在对ID选择器进行编写时，我们要在ID选择器前“#”

例:

#intro{font-weight:bold;}

注：ID选择器在使用时必须保持字段唯一性。同时ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox浏览器中不起作用。

 

而我们在对类选择器时进行编写时，要在类选择器的前面加“.”

例：

.important {color:red;}

注：class选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。类名的第一个字符不能使用数字！它无法在 Mozilla 或Firefox 中起作用。

Css核心内容：

主要是指标准流、盒子模型与定位。

其中标准流是指：页面显示的顺序与代码的编写顺序呢相一致。

盒子模型：个人理解就是大方框套小方框。每个方框之间又用不同的名称来区别。如图所示：

定位则是对于盒子模型进行的一系列的操作。

定位包括：相对定位、绝对定位和浮动。

相对定位：

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
定位属性为：

#box_relative {
	       position: relative; /*相对定位*/
	       left: 30px;/*在原先位置上向右移30像素*/
	      top: 20px;/*在原先位置上向下移动20像素*/
	       }

要注意的是：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

定位属性为：

	#box_relative {
	  position: absolute;/*绝对定位*/
	  left: 30px;/*距离包含框的左边的距离*/
	  top: 20px;/*距离包含框的顶部的距离*/
	}

         

浮动：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

Css中我们通过float属性进行实现浮动的。

Css样式设计 ：

空格代表父子。

例：h1em {color:red;}

逗号“，”表示并列。

例：h1,me{color:red;}

Css页面是用户直接看到的，所以在设计CSS时一定要设计的美观。因为给用户第一印象很重要。以上是我对CSS的理解，有不对的地方，请多指教。