- 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、建立网页模版使得重用性增强；将设计与网页内容隔离，这点有点像分层。知识总有其内在的联系，找到这些关系，织成知识网，让知识和这些语言一样，达到可重用的效果。