对div+css排版的样式的一个总结
2009-09-27 16:53
197 查看
CSS样式：
一、CSS样式的分类：
1、内部样式表:把代码统一写在当前页面的固定位置
写在<head>与</head>之间
例如：<style type="text/css">
写内部样式
</style>
2、外部样式表：把CSS样式代码放在一个单独的 CSS文件中
连接外部的样式表<link href="内部路径或者外部路径" rel="stylesheet" />
3、行间样式表：把CSS样式代码写在标记行内，作为标记的一个属性
例如：<span class="font-size:12px;" >CSS样式</span>
4、CSS代码的组成部分：
由选择器、属性和属性值三部分组成：
语法：
选择器{
属性：属性值；
属性：属性值;
……
}
二、CSS选择器的类型：
1、标记选择器：
同一个XHTML标记，当CSS属性相同时，用标记选择器
(当对同一种标记的所有对象进行相同样式设置时，用标记选择器)
语法：
标记名称{
属性：属性值；
……
}
p{
font-size:12px;
}
h2{
font-size:20px;
}
………………
常用的CSS属性：
字号： font-size:字号;
文字颜色： color:颜色值;
**********css的常用文本属性
属性 描述 可用值
color 用于设置文字的颜色 颜色值
font-size 用于设置文字的尺寸 字号大小
font-family 用于设置文字名称，可以使用多个名 字体名称
称使用逗号分隔，浏览器按照选后顺
序依次使用可用文字
font-style 用于设置文字倾斜样式 normal(正常)/italic(斜体)
font-weight 用于设置文字的加粗样式 normal/bold(粗体)
text-decoration 用于设置文本的修饰线 none(无)/underline(下划线)
2.类选择器
同一XHTML标记，当CSS属性完全相同时，用标记选择器；当CSS属性不同时，用类选择器
当某一个或某几个对象的样式和其他对象的样式不一样时，用类选择器
语法：
.类名称{
属性：属性值；
…………
}
注意一：类名称是我们自已起名，但最好起一个有意义的名称;并且类名称是由英文字母、数字、
下划线组成，必须以字母开头.
注意二：类必须应用才能生效：
注意三：不要忘记写点（这对初学者谨记）
应用类：
给哪一个标记应用类，就在该标记中加上一个class=“类名称”的属性
<标记 class="类名称" ………………>
**********CSS样式之段落样式属性：
含义 属性
行高（行间距） line-height
首行缩进 text-indent
段落对齐方式 text-align:left/right/center
字符间距 letter-spacing
3.ID选择器
ID选择器的用法和类选择器的使用情况相同：
也就是说，使用类选择器的情况下，也可以用ID选择器，
但是这也有优先级别的，看看先应用哪一个（一般使用一个选择器就可以）
在页面中，每一个标记都可以一个name名称和id名称
在同一个页面中，ID名称只能是唯一的，不能重名
name名称和id名称都是标记的属性，所以，写法如下：
<标记 id="id名称" name="name名称" …………>
注意一：ID名称也是我们自记起名，同样只能以英文字母开头，由字母、数字、下划线组成.
ID选择器的语法：
#id名称{
属性：属性值；
…………
}
注意二：ID选择器在同一页面中，只能应用一次
4.群组选择器
当多个选择器CSS属性相同时，用群组选择器
语法：
选择器1,选择器2,选择器3{
属性：属性值;
………………
}
例如：
body,h1,h2,p
{margin:5px;
padding:5px;
}
5.通配选择器
当页面中所有标记有相同样式时，用通配选择器
语法：
*{
属性：属性值;
…………
}
#############span 标记: <span>内容</span>
span标记是不会产生任何结构上的改变，只是为了单纯的应用样式，页添加的标记。
6. 包含选择器
当需要对某一对象中的子对象进行样式设置时，用包含选择器
语法： 父对象选择器 子对象选择器{
属性：属性值;
…………
}
例如：
#d{ font：14px；}
#d a
{font：12px；}
7.标记指定性选择器
语法：标记#id名称{ 标记#类名称{
属性：属性值; 属性：属性值;
………… ......
} }
指定性更强，增强代码的可读性.
8.伪类.伪对象 (对链接样式进行设置)
a:link{
属性：属性值; (正常显示的链接文本的状态)
…………
}
a:hover{
属性：属性值; (鼠标指针放在链接文本之上的状态)
…………
}
a:active{
属性：属性值; (鼠标指针按下链接文本但是没有松开的状态)
…………
}
a:visited{
属性：属性值; (访问后的链接文本的状态样式)
…………
}
把a:visited放在a:hover之前，才会显示下划线状态(a:hover)
**********css样式属性之边框属性
1.四周边框都相同：border：线条粗细(px) 线条样式 线条颜色；
线条样式：solid(实线) / dashed(虚线) / dotte(点状线)
2.四周边框不相同：
上边框：border-top ： 线条粗细 线条样式 线条颜色 ；
右边框：border-right ：线条粗细 线条样式 线条颜色 ；
下边框：border-bottom：线条粗细 线条样式 线条颜色 ；
左边框：border-left ：线条粗细 线条样式 线条颜色 ；
**********CSS属性之padding(边框)属性：
padding控制的是内容和边框之间的距离
1、四周padding都相同：
padding:值;
2、四周padding不相同：
padding-top:值; 上边距
padding-right:值; 右边距
padding-bottom:值; 下边距
padding-left:值; 左边距
3、padding的缩写：
（1）四周都相同：
padding:值;
(2)四周不相同：
padding:值1（上 top） 值2（右 right） 值3(下 bottom) 值4(左 left);
(3)上下相同，左右相同
padding:值1(上、下) 值2(左、右);
**********CSS属性之margin属性：
margin控制的是对象边框与对象边框之间的距离
1、四周margin都相同：
margin:值;
2、四周margin不相同：
margin-top:值;
margin-right:值;
margin-bottom:值;
margin-left:值;
3、margin属性的缩写：
1、四周都一样：
margin:值;
2、上下相同，左右相同：
margin:值1 值2;
3、四周都不相同：
margin:值1 值2 值3 值4;
注意：一个对象所占空间的位置由以下几个部分组成：
高度： 对象内容高度+上、下padding+上下border+上下margin
宽度： 对象内容宽度+左右padding+左右border+左右margin
**********CSS属性之背景属性：
1、背景颜色：
background-color:颜色值;
注意：背景是加在对象边框之内的.(也就是说padding区域可以添加背景，margin区域没有背景)
2、背景图像:
background-image:url(图片路径);
3、设置背景图像的平铺方式：
background-repeat:repeat / repeat-x (水平平铺) / repeat-y(垂直平铺) / no-repeat;
4、设置背景图像的位置：
background-position:水平位置 垂直位置;
水平方向：left right center 垂直方向: top bottom middle
5、把背景图象固定到屏幕的位置：
background-attachment:fixed;
6.背景的缩写：
background: blue url(bg7,jpg) no-repeat fixed 5px 10px ;
**********CSS属性之float属性：
float属性用于设置对象的浮动方式，使对象尽量靠其父对象的左边或右边对齐.
float:left / right ;
当对象浮动后，它不再支撑父对象的高度和宽度.
##########div标记: <div>内容</div> DIV称为区域.块
在CSS+DIV排版中，DIV的作用和表格作用一样，是进行定位排版.
一般把一块完整的对象放在一个DIV中，DIV也是一个块对象.
**********CSS样式之：list-style-type
设置项目符号的列表项的图标为无
list-style-type:none;
**********CSS样式属性之：宽度和高度：
width:值;
height:值;
**********CSS样式属性之：display属性
display属性：设置对象的显示方式：
把行间元素设置为块对象显示： display:block;
**********CSS属性之clear属性：
清除浮动方式的影响：
clear:left/right/both;
{一、一列版式：
1、一列固定列宽
2、一列自适应列宽
3、一列居中 :
margin:0px auto 二、两列： 三、三列：}
**********CSS属性之clear属性：
清除浮动方式的影响：
clear:left/right/both;
四、外部样式表：
（1）外表样式表就是把CSS样式单独的写在一个CSS样式文件中
(2)在当前页面链接外部CSS样式文件：
在<head>与</head>之间写：
<link href="CSS文件路径" rel="stylesheet" type="text/css" />
**********CSS属性之position属性：
position属性也是对象定位的一种方法：
(1)position:absolute; 对象的绝对定位
position属性一般情况结合top、bottom、left、right几个属性一起使用;
对象的绝对定位指的是对象相对页面的绝对定位;
(2)对象的相对定位：
position:relative;
对象的相对定位是相对于对象自身位置的改变
**********CSS属性之Z-index属性
z-index属性用来设置当两个对象叠加时的叠加次序
在默认情况下，每一个对象都有一个z-index值,默认值为0；
当两个对象叠加时，z-index值越大，次序越在上面；如果z-index的值相等，那么后面的对象在前面对象的上面
**********CSS属性之overflow属性：
设置当内容超出对象的边界时，如何显示内容的方式
overflow:visible; 设置当对象的内容超出对象边界，让内容可见显示(对象被支撑宽度或高度)
overflow:hidden; 设置超出对象边界的内容为隐藏不显示，对象的宽度和高度不被支撑
overflow:scroll; 当内容超出对象的边界时，以出现滚动条的方式显示内容
本文出自 “波波爱问问笔记” 博客，请务必保留此出处http://zhaoyong08.blog.51cto.com/949231/206972
一、CSS样式的分类：
1、内部样式表:把代码统一写在当前页面的固定位置
写在<head>与</head>之间
例如：<style type="text/css">
写内部样式
</style>
2、外部样式表：把CSS样式代码放在一个单独的 CSS文件中
连接外部的样式表<link href="内部路径或者外部路径" rel="stylesheet" />
3、行间样式表：把CSS样式代码写在标记行内，作为标记的一个属性
例如：<span class="font-size:12px;" >CSS样式</span>
4、CSS代码的组成部分：
由选择器、属性和属性值三部分组成：
语法：
选择器{
属性：属性值；
属性：属性值;
……
}
二、CSS选择器的类型：
1、标记选择器：
同一个XHTML标记，当CSS属性相同时，用标记选择器
(当对同一种标记的所有对象进行相同样式设置时，用标记选择器)
语法：
标记名称{
属性：属性值；
……
}
p{
font-size:12px;
}
h2{
font-size:20px;
}
………………
常用的CSS属性：
字号： font-size:字号;
文字颜色： color:颜色值;
**********css的常用文本属性
属性 描述 可用值
color 用于设置文字的颜色 颜色值
font-size 用于设置文字的尺寸 字号大小
font-family 用于设置文字名称，可以使用多个名 字体名称
称使用逗号分隔，浏览器按照选后顺
序依次使用可用文字
font-style 用于设置文字倾斜样式 normal(正常)/italic(斜体)
font-weight 用于设置文字的加粗样式 normal/bold(粗体)
text-decoration 用于设置文本的修饰线 none(无)/underline(下划线)
2.类选择器
同一XHTML标记，当CSS属性完全相同时，用标记选择器；当CSS属性不同时，用类选择器
当某一个或某几个对象的样式和其他对象的样式不一样时，用类选择器
语法：
.类名称{
属性：属性值；
…………
}
注意一：类名称是我们自已起名，但最好起一个有意义的名称;并且类名称是由英文字母、数字、
下划线组成，必须以字母开头.
注意二：类必须应用才能生效：
注意三：不要忘记写点（这对初学者谨记）
应用类：
给哪一个标记应用类，就在该标记中加上一个class=“类名称”的属性
<标记 class="类名称" ………………>
**********CSS样式之段落样式属性：
含义 属性
行高（行间距） line-height
首行缩进 text-indent
段落对齐方式 text-align:left/right/center
字符间距 letter-spacing
3.ID选择器
ID选择器的用法和类选择器的使用情况相同：
也就是说，使用类选择器的情况下，也可以用ID选择器，
但是这也有优先级别的，看看先应用哪一个（一般使用一个选择器就可以）
在页面中，每一个标记都可以一个name名称和id名称
在同一个页面中，ID名称只能是唯一的，不能重名
name名称和id名称都是标记的属性，所以，写法如下：
<标记 id="id名称" name="name名称" …………>
注意一：ID名称也是我们自记起名，同样只能以英文字母开头，由字母、数字、下划线组成.
ID选择器的语法：
#id名称{
属性：属性值；
…………
}
注意二：ID选择器在同一页面中，只能应用一次
4.群组选择器
当多个选择器CSS属性相同时，用群组选择器
语法：
选择器1,选择器2,选择器3{
属性：属性值;
………………
}
例如：
body,h1,h2,p
{margin:5px;
padding:5px;
}
5.通配选择器
当页面中所有标记有相同样式时，用通配选择器
语法：
*{
属性：属性值;
…………
}
#############span 标记: <span>内容</span>
span标记是不会产生任何结构上的改变，只是为了单纯的应用样式，页添加的标记。
6. 包含选择器
当需要对某一对象中的子对象进行样式设置时，用包含选择器
语法： 父对象选择器 子对象选择器{
属性：属性值;
…………
}
例如：
#d{ font：14px；}
#d a
{font：12px；}
7.标记指定性选择器
语法：标记#id名称{ 标记#类名称{
属性：属性值; 属性：属性值;
………… ......
} }
指定性更强，增强代码的可读性.
8.伪类.伪对象 (对链接样式进行设置)
a:link{
属性：属性值; (正常显示的链接文本的状态)
…………
}
a:hover{
属性：属性值; (鼠标指针放在链接文本之上的状态)
…………
}
a:active{
属性：属性值; (鼠标指针按下链接文本但是没有松开的状态)
…………
}
a:visited{
属性：属性值; (访问后的链接文本的状态样式)
…………
}
把a:visited放在a:hover之前，才会显示下划线状态(a:hover)
**********css样式属性之边框属性
1.四周边框都相同：border：线条粗细(px) 线条样式 线条颜色；
线条样式：solid(实线) / dashed(虚线) / dotte(点状线)
2.四周边框不相同：
上边框：border-top ： 线条粗细 线条样式 线条颜色 ；
右边框：border-right ：线条粗细 线条样式 线条颜色 ；
下边框：border-bottom：线条粗细 线条样式 线条颜色 ；
左边框：border-left ：线条粗细 线条样式 线条颜色 ；
**********CSS属性之padding(边框)属性：
padding控制的是内容和边框之间的距离
1、四周padding都相同：
padding:值;
2、四周padding不相同：
padding-top:值; 上边距
padding-right:值; 右边距
padding-bottom:值; 下边距
padding-left:值; 左边距
3、padding的缩写：
（1）四周都相同：
padding:值;
(2)四周不相同：
padding:值1（上 top） 值2（右 right） 值3(下 bottom) 值4(左 left);
(3)上下相同，左右相同
padding:值1(上、下) 值2(左、右);
**********CSS属性之margin属性：
margin控制的是对象边框与对象边框之间的距离
1、四周margin都相同：
margin:值;
2、四周margin不相同：
margin-top:值;
margin-right:值;
margin-bottom:值;
margin-left:值;
3、margin属性的缩写：
1、四周都一样：
margin:值;
2、上下相同，左右相同：
margin:值1 值2;
3、四周都不相同：
margin:值1 值2 值3 值4;
注意：一个对象所占空间的位置由以下几个部分组成：
高度： 对象内容高度+上、下padding+上下border+上下margin
宽度： 对象内容宽度+左右padding+左右border+左右margin
**********CSS属性之背景属性：
1、背景颜色：
background-color:颜色值;
注意：背景是加在对象边框之内的.(也就是说padding区域可以添加背景，margin区域没有背景)
2、背景图像:
background-image:url(图片路径);
3、设置背景图像的平铺方式：
background-repeat:repeat / repeat-x (水平平铺) / repeat-y(垂直平铺) / no-repeat;
4、设置背景图像的位置：
background-position:水平位置 垂直位置;
水平方向：left right center 垂直方向: top bottom middle
5、把背景图象固定到屏幕的位置：
background-attachment:fixed;
6.背景的缩写：
background: blue url(bg7,jpg) no-repeat fixed 5px 10px ;
**********CSS属性之float属性：
float属性用于设置对象的浮动方式，使对象尽量靠其父对象的左边或右边对齐.
float:left / right ;
当对象浮动后，它不再支撑父对象的高度和宽度.
##########div标记: <div>内容</div> DIV称为区域.块
在CSS+DIV排版中，DIV的作用和表格作用一样，是进行定位排版.
一般把一块完整的对象放在一个DIV中，DIV也是一个块对象.
**********CSS样式之：list-style-type
设置项目符号的列表项的图标为无
list-style-type:none;
**********CSS样式属性之：宽度和高度：
width:值;
height:值;
**********CSS样式属性之：display属性
display属性：设置对象的显示方式：
把行间元素设置为块对象显示： display:block;
**********CSS属性之clear属性：
清除浮动方式的影响：
clear:left/right/both;
{一、一列版式：
1、一列固定列宽
2、一列自适应列宽
3、一列居中 :
margin:0px auto 二、两列： 三、三列：}
**********CSS属性之clear属性：
清除浮动方式的影响：
clear:left/right/both;
四、外部样式表：
（1）外表样式表就是把CSS样式单独的写在一个CSS样式文件中
(2)在当前页面链接外部CSS样式文件：
在<head>与</head>之间写：
<link href="CSS文件路径" rel="stylesheet" type="text/css" />
**********CSS属性之position属性：
position属性也是对象定位的一种方法：
(1)position:absolute; 对象的绝对定位
position属性一般情况结合top、bottom、left、right几个属性一起使用;
对象的绝对定位指的是对象相对页面的绝对定位;
(2)对象的相对定位：
position:relative;
对象的相对定位是相对于对象自身位置的改变
**********CSS属性之Z-index属性
z-index属性用来设置当两个对象叠加时的叠加次序
在默认情况下，每一个对象都有一个z-index值,默认值为0；
当两个对象叠加时，z-index值越大，次序越在上面；如果z-index的值相等，那么后面的对象在前面对象的上面
**********CSS属性之overflow属性：
设置当内容超出对象的边界时，如何显示内容的方式
overflow:visible; 设置当对象的内容超出对象边界，让内容可见显示(对象被支撑宽度或高度)
overflow:hidden; 设置超出对象边界的内容为隐藏不显示，对象的宽度和高度不被支撑
overflow:scroll; 当内容超出对象的边界时，以出现滚动条的方式显示内容
本文出自 “波波爱问问笔记” 博客，请务必保留此出处http://zhaoyong08.blog.51cto.com/949231/206972
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS.DIV网页样式与布局学习总结
- CSS.DIV网页样式与布局学习总结
- 用css定义一个div,如何用js取得样式的属性呢？
- 自己封装的一个纯div+css样式弹出泡泡消息框
- 精通CSS.DIV样式布局总结
- CSS.DIV网页样式与布局总结
- 一个CSS文件内如何设置多个body及多个DIV样式，并给出页面如何调用
- 网页Css+Div排版常见问题总结
- 【BS学习】精通CSS.DIV网页样式与布局总结
- jquery封装了一个简洁轻巧的可拖动可自定义样式的纯div+css带遮罩层的仿模态弹出框
- 【CSS+DIV网页样式与布局】——基础知识总结
- 精通 CSS+DIV 网页样式与布局 22
- 精通 CSS+DIV 网页样式与布局 29
- css设置div附带下拉条的样式
- CSS+DIV 设计一个简单的个人网页界面
- 精通 CSS+DIV 网页样式与布局 32
- 精通 CSS+DIV 网页样式与布局 40
- 精通 CSS+DIV 网页样式与布局 126
- 精通 CSS+DIV 网页样式与布局 135
- 精通 CSS+DIV 网页样式与布局 151