CSS初探

• CSS简介
• CSS内容
  • 使用
  • 标识
    
  • 标识之间关系
  • 容器
• CSS核心内容
  • 标准流
  • 盒子模型
  • 浮动
  • 定位
• CSS个人总结
• 版本1

CSS简介

CSS是Cascading Style Sheet的缩写，它是一种用来表现HTML或 XML等文件式样的计算机语言，直译过来是级联样式表，不过由于语言的差异，我觉得翻译成“风格样式表”更合适，因为CSS的主要作用是美化、调整、布局网页内容，更像是在定义网页的风格。

CSS内容

使用：首先需要先建立一个CSS，然后拖到想要引用的网页的head中，表示将这两个绑定到一起。

标识：id class body。利用这些标识可以设置指定元素的样式，如使用块级元素div，在其内部定义id和class：<div id= "category" class="commonfrm">然后在CSS文件中对category和commonfrm进行设置：

.commonfrm
{
    /* 公共框架*/
    border:1px solid red;
    float:left ;
    }

和

#category
{/*新闻类别框架*/
 width: 150px;
 height :400px;
    }

该div及其它使用category或commonfrm的位置都将按已定义的样式设置。

标识之间的关系：它们的共同点是都可以对样式进行设置，但是在对待同一个元素还是有区别的，在同一个元素中，class可以并列，但是id不可以，同时id和class可以并列。在css中，空格标识子级，逗号标识并列。

标识的优先级：三者的优先级依次是：id>class>body。这可以理解为id是对一个指定的进行设置，而class是对一类进行设置，而body默认是对内部所有元素的设置，即有特殊有普通时，以特殊为准。

容器：行内元素 块级元素。

行内元素：

span（定义文本内区块，单行）

a（锚点）

img（图片）

input（输入框）

块级元素：

dir（目录列表）

div（常用块级元素）
dl（定义列表）
h1（大标题）
h2（副标题）
h3（3级标题）
h4（4级标题）
h5（5级标题）
h6（6级标题）
hr（水平分隔线）
ol（排序表单）
p（段落）
table（表格）
ul（非排序列表）

常见使用组合：

<ol>

<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为：
1……
2……
3……
ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>

更多css元素，可以下载CSS文档流与块级元素(block)、内联元素(inline)。

CSS核心内容

标准流：标准流是默认的排版顺序，即按照body中的顺序显示。

盒子模型：盒子模型，盒子模型实际上是为了方便理解记忆，将容器形象化的一个模型说明。即每个容器，自外向内都有外边距margin、边框border、内边距padding。形象距离一下：有个木盒子，盒子里面有块糖，则盒子外面的部分可以称之为外边距，盒子本身的厚度可以称之为边框，而糖与盒子之间的距离可以称之为内边距。不管是内边距、边框还是外边距都有方向之分，上下左右依次为top、buttom、left、right。例如定义某容器左边框，则可以为

{/*木盒子左边框参数*/
 border-left:1px solid red;
    }

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

定位：相对 绝对。

相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

效果图：

绝对定位：

	#box_relative {
 	 position: absolute;
  	left: 30px;
  	top: 20px;
	}

效果图：

CSS个人总结

刚刚接触css，只是浅层次的了解。我觉得CSS作为一种语言也有其他语言的共性，比如可重用性：利用id或class、建立网页模版使得重用性增强；将设计与网页内容隔离，这点有点像分层。知识总有其内在的联系，找到这些关系，织成知识网，让知识和这些语言一样，达到可重用的效果。