CSS基础

大神的文章写的太好了，不由自主要转载这篇给大家看，也希望大家能看看这位大神自己搭建的博客！！我也一直看，真心蛮好的

再次奉献上这位大神的CSS文章

原址http://www.moadd.com/?p=102

CSS实际上起到一个装修的作用，让网页展示更好的效果。 有的同学说css很简答，其实不然，深入学习还是要有一个过程的，尤其是刚学的时候，对于布局的认识，对于基本效果的把握。今天，先对基本的css概念有一个认知，知道大概有哪些内容，明天在进行一个深入的分析。

谈到css 必然就要说起 div+css ,怎么理解

说白了把网页比作一张纸，div就相当于在纸上画个框，css就是要告知你画的这个框要多少宽，多少高，框里的字体大小，颜色，背景，框里有没有图片，框里文字行距，框与其他框之间的距离等等。具体细节看下面吧。

CSS简介

1)CSS – Cascading StyleSheet,级联样式表

是由W3C定义的一套用于显示网页内容的标准

目前普遍使用的版本是CSS2.0

最新版本是CSS3.0

2)CSS的作用：用于将网页的内容和显示分离

HTML标记用于提供网页的内容

而CSS负责提供网页的显示方式

div+css是页面布局的标准方式

3)CSS的分类：内联样式、内部样式表、外部样式表

—————————————————————

掌握CSS内联样式的使用：

1)语法：

<标记 style=”css样式属性：值; css样式属性：值”>

说明：

a.任何一个HTML标记都可以使用style属性

b.style对应的样式属性只对当前标记起作用

如：

…

—————————————————————

常用的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.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文件中引用外部样式表?