CSS基础

大神的文章写的太好了，不由自主要转载这篇给大家看，也希望大家能看看这位大神自己搭建的博客！！我也一直看，真心蛮好的
再次奉献上这位大神的CSS文章
原址http://www.moadd.com/?p=102

CSS实际上起到一个装修的作用，让网页展示更好的效果。 有的同学说css很简答，其实不然，深入学习还是要有一个过程的，尤其是刚学的时候，对于布局的认识，对于基本效果的把握。今天，先对基本的css概念有一个认知，知道大概有哪些内容，明天在进行一个深入的分析。
谈到css 必然就要说起 div+css ,怎么理解
说白了把网页比作一张纸，div就相当于在纸上画个框，css就是要告知你画的这个框要多少宽，多少高，框里的字体大小，颜色，背景，框里有没有图片，框里文字行距，框与其他框之间的距离等等。具体细节看下面吧。

1. CSS简介
   1)CSS – Cascading StyleSheet,级联样式表
   是由W3C定义的一套用于显示网页内容的标准
   目前普遍使用的版本是CSS2.0
   最新版本是CSS3.0
   2)CSS的作用：用于将网页的内容和显示分离
   HTML标记用于提供网页的内容
   而CSS负责提供网页的显示方式
   div+css是页面布局的标准方式
   3)CSS的分类：内联样式、内部样式表、外部样式表
   —————————————————————
2. 掌握CSS内联样式的使用：
   1)语法：
   <标记 style=”css样式属性：值; css样式属性：值”>
   说明：
   a.任何一个HTML标记都可以使用style属性
   b.style对应的样式属性只对当前标记起作用
   如：

   
   …
   

   
   —————————————————————
3. 常用的CSS样式属性
   3.1 文本样式属性
   color:color-name|#rrggbb – 设置字体颜色
   font-size:npx – 设置字体大小，以像素为单位
   font-family:字体名称 – 设置字体类型
   font-weight:normal|bold – normal正常字体，bold是粗体
   font-style:normal|italic – italic斜体
   text-decoration:none|underline – underline下划线
   line-height:npx – 设置行高
   text-align:left|center|right|justify – 设置对齐方式
   3.2 尺寸相关属性
   width:npx – 设置宽度，单位为像素
   height:npx – 设置高度
   3.3 背景色和背景图像
   background-color:color-name|#rrggbb
   background-image:url(图像路径)
   –>设置背景图像，可以使用相对路径或网络路径
   background-repeat:no-repeat|repeat-x|repeat-y|repeat
   –>设置背景图像平铺方向
   background-position:水平位置 垂直位置
   说明：
   水平位置：像素值|left|center|right|百分比
   垂直位置：像素值|top|center|bottom|百分比
   省略垂直位置，默认垂直位置为50%(水平位置不能省略)
   如：
   background-position:left bottom
   或background-position:20px 50px
   重点使用复合背景样式属性：
   background：color-name|#rrggbb
   background：url(…) repeat left 20px //设置背景图像位置(复合 属性)
   background的复合属性可以设置背景色也可以设置背景图像
   (图像路径url可以加单引号，在有空格的路径时可以使用)
4. 掌握内部样式表
   4.1 基本语法：
   
   
   selector{样式属性：值;样式属性：值}
   …
   
   
   说明：selector称为选择器，用于指定样式属性应用在哪些HTML元素上，分为HTML选择器、ID选择器、类选择器、上下文选择器
   4.2 HTML选择器：
   selector是与HTML标记对应的名称，如：
   div{样式属性：值}
   设置的样式属性应用在HTML文档的所有的HTML标记上
   4.3 ID选择器：
   针对具有id属性的HTML元素设置css样式(id属性值不能以数字开头，不要重复)
   1)<标记 id=”t1″>在HTML元素上设置id属性
   2)定义ID选择器：

t1{样式属性：值} –>只对id属性为t1的标记起作用

4.4 类选择器：
1)使用class属性设置HTML元素的样式类
<标记 class=”样式类名称”>
通过class属性指定HTML元素具有相同的样式类
2)定义类选择器：
.样式类名称{样式属性：值}
4.5 上下文选择器：
语法：
selector1 selector2{样式属性：值}
如：div table{ … } 应用在div中的table标记
div .error{ … } 应用在div中的具有样式类error的标记

div .odd{ … } 应用在id为div中的具有样式类odd的标记

区分使用逗号分割的选择器：
selector1,selector2{ … }
—>选择器selector1和selector2具有相同的样式属性
———————————————————-
内部样式表中的注释： /…/
——————————————————————
5. 理解CSS盒模型(Box Model)
5.1 什么是Box Model?
元素具有边框、边框和内容之间具有距离
元素和元素之间具有边距，称为Box Model
相关的样式属性：
border:边框样式属性
padding:内补丁样式属性，用于设置边框和内容的距离
margin:外补丁样式属性，用于设置元素之间边框之间的距离
padding(内补丁) – 内容和边框间的距离 context 和 border
margin(外补丁) – 内容和内容间的距离
5.2 边框样式属性：
1) 基本语法：
border:width style color
说明：
width用于指定边框的宽度，以像素为单位，默认为0
style用于设置线型，常用的有：
solid(实线)，dotted(点线),dashed(划线)
color用于指定边框的颜色
/表格样式属性border-collapse设置合并方式 /
border-collapse:collapse|separate
2)border-top:width style color 上边框
border-right:width style color 右边框
border-bottom:width style color 下边框
border-left:width style color 左边框
—————————————————————
6. CSS盒模型(二)
1)内补丁样式属性：设置边框和内容之间的距离
padding:npx
padding:topbottom leftright
padding:top leftright bottom
padding:top right bottom left
padding-top:npx 单独设置内容和上边框的距离
padding-right:npx
padding-bottom:npx
padding-left:npx
2)外补丁样式属性：设置元素和元素之间边框的距离
margin:npx
margin-top,margin-right,margin-bottom,margin-left
———————————————————–
7. 布局相关的样式属性
7.1 display – 设置元素的显示方式
语法display:none|block|inline
说明：
display:none设置元素不显示
display:block 设置元素以块状元素的方式显示。块状元素总是从一个新行开始，内容结束时换行。
默认的块状元素有：

,…,

,

,

,,,

,

display:inline 设置元素以行内元素的方式显示。
默认的行内元素有：,,,,等
7.2 float – 使块状元素浮动
语法 – float:left|right
情形1:

情形2:

div1和div2向左并排排列(不是标准的写法)
情形3:

div1和div2向左并排排列(标准写法)
情形4:

div1和div2并排排列，改变浏览器窗口大小时，只要父元素的宽度大于div1和div2的宽度之和，div1和div2始终保持并排排列
7.3 clear – 清理周围的浮动元素的浮动效果
语法：clear – left|right|both
——————————————————————
8. 掌握外部样式表的定义和使用
1)将样式表属性定义在一个单独的样式表文件(.css文件),以便于多个HTML文件重复使用
课堂练习：
创建外部样式表：mycss.css
2)如何在HTML文件中引用外部样式表?