CSS样式表属性及定位布局

CSS样式表在网站制作中是最常用到的布局方式，他的样式属性也是非常庞大非常多的，需要长时间的去练习、记忆。下面写一下在CSS中最常用到的一些基本的属性：

一、CSS背景属性：

1、background-color 背景颜色

2、background-image 背景图片 背景图片需添加路径，即url后边添图片路径

3、background-repeat 背景的平铺方式，no-repeat是不平铺，repeat-x是横向平铺，repeat-y是纵向平铺。

4、background-position 背景图片的位置，有left,top,right等，可以随意设置

5、background-attachment 背景图片是否滚动，需要与overflow:scroll配合使用。

6、background-size 背景图片的大小，可以用像素表示。

二、CSS字体属性：

1、font-family 字体样式，一般用于添加外部字体。

2、font-size 字体大小，不同于以前HTML的字体，这里的字体可以用像素表示。

3、font-style 字体风格，如italic倾斜，normal不倾斜。

4、font-weight 字体加粗，这里可以用数字表示，也可以选择small等。

5、text-decoration  添加underline下划线、overline上划线、line-through删除线、none没有，用来去掉超链接的下划线。

6、color 字体颜色

三、对齐方式及边界边框

1、text-align 水平对齐方式

2、vertical-align 垂直对齐方式，需配合行高使用

3、line-height 行高，在不是表格的时候一般用行高position

4、text-indent 用来定义文本的缩进

5、margin 外边距，上下左右都可以设置

6、padding 内边距，上下左右可以设置

7、border 后边写边框粗细，边框样式（实、虚）、边框颜色

8、list-style 加none可以将列表前边的序号去掉

9、list-style-image 可以将序号变为图片

四、格式与布局

1、position 是定位位置的，fixed是固定位置，相对于浏览器边框位置固定。absolute是绝对位置，相对于父级元素（浏览器，绝对定位的上级）。relative是相对位置，相对于自身应该出现的位置。

2、float 是流布局的意思，在CSS样式表中经常使用，可以选择向左或向右。

4、clear-both清掉流。

5、z-index分层 控制DIV上下分层，值越大越考上。

标签: CSS属性, 布局

进阶 ：css样式表

二、CSS样表是今天的重中之重，因为以后会经常用到，CSS样式表有三种分类，分别是内联式，内嵌式和外部样式表。

1、内联式：

<div style="width:200px; height:100px; border:1px solid #000;">
style="属性1：属性值1；属性2：属性值2；"
</div>

这里最重要是时style后面的属性要用冒号和分号分隔开，上边的solid是实线的意思。内联式一般不常用，比较麻烦，可重用性差。

2、内嵌式：

<style type="text/css">
*{
margin:0px;
padding:0px;
}
div{
width:400px;
height:100px;
border:1px solid #000;
}

内嵌式一般都写在head里边，*对所有标签起作用，标签后边的属性要用大括号括起来，这里选择了div标签就代表body里边所有div的标签都提取出来添加属性，同样所有属性值用分号隔开。

3、外部样式表：外部样式表需要新建一个CSS文件，用来放样式表。注意在CSS中放样式表不要加上<style>标签，当我们需要时可以点击右键选择CSS样式添加外部样式表。标签Link是引用外部样式表，代码如下：

<link href="Untitled-0.css" rel="stylesheet" />

三、再一个就是CSS样式表选择器，如上边内嵌式里边的*是对所有标签起作用，div是用的标签选择器，对所有div起作用。

1、接下来是id选择器，用#开头后边加上id的值，如：

<div id="div-css">
这是第二个div
</div>

我们可以用#div-css来表示：

#div-css{
width:300px;
height:200px;
}

2、class选择器，这里的class是类的意思，class选择器用点开头，后边是class的值，如：

<div class="div-class;">
这是class1

<div class="div-class">

这是class2
</div>

我们可以用.div-class来表示：

.div-class{
width:200px;
}

3、复合选择器是选择两种并列的属性，中间用都好隔开，如：

<div class="q">
我是超人
</div>
<div class="w">
我是蝙蝠侠

我们可以用.q,.w来表示：

.q,.w
{
height:300px;
width:200px;
border:2px solid #F00;
}

4、后代选择器，是标签里边含着一个子标签时，选择子标签时用到的，标签只见要用空格隔开，如：

<ol id="ol1" type="A">
<li>哈哈哈</li>

<li>呵呵呵</li>
</ol>

我们可以用ol li来表示：

ol li
{
border:2px solid #F00;
background-color:#666;
height:200px;
width:200px;
}
标签: ccs, class, id, div