CSS初探

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