<?php
/*
* CSS+DIV课程笔记
1-1、什么是CSS和DIV
一、什么是CSS
CSS的全称是：Cascading Style Sheet（层叠样式表），利用它可以对页面当中的文本、段落、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。更为重要的是，CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格，大大减小了更新站点的工作量。
二、什么是DIV
DIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、……），,然后配合CSS，可以实现网页各个元素的精确定位。
三、CSS+DIV的优势
1、网页加载速度快
2、更容易被搜索引擎接受
3、能实现更多动态效果
4、后期维护方便
四、传统html的缺点：
（1）维护困难
（2）标记不足
（3）网页过“胖”
（4）定位困难
1-2、1-3、1-4、CSS样式的使用方法
一、CSS样式的使用方法:
1、行内样式：直接在html标记中使用style=”……”来设置属性，也就是直接将css代码嵌套在html标注中，像使用html标记一样使用。
2、内嵌式：只对本页面起作用。加在<head></head>之间<title></title>代码下面，
格式：<style type=”text/css”>
<!-- //防止低版本的浏览器不支持会直接将CSS显示出来。加这上这个相当于html的注释，如果显示就直接注释掉。
-->
</style>
3、链接式：引入外部一个css文件，加在<head></head>标签之间<title></title>下面
如：<link href=”1.css” type=”text/css” rel=”stylesheet”>
1-5、CSS样式的定义方法
一、CSS样式的定义方法：
1、自定义样式（类别选择器）
2、标记定义（标记选择器）
3、#号定义法（ID选择器）
（1）自定义样式方法：
.自定义名称｛
font-size:12px;
color:#FF0000;
｝
使用方法：<p class=”自定义名称”;> 效果 </p>
（2）标记定义方法：
p｛
font-size:12px;
color:#FF0000;
｝
注：通过标记定义好的CSS样式效果会自动应用给网页中所有使用此标记的元素或对象。
（3）#号定义的方法：
#自定义名称｛
font-size:12px;
color:#FF0000;
｝
使用方法：<p id=” 自定义名称”;> 效果 </p>
注：通过#号定义的CSS样式，在html代码中最好只使用一次，因为我们有的时候需要使用javascript脚本对应用此类CSS样式的对象进行控制，如果应用多次的话，javascript不知道该对哪个对象进行控制。
1-8、1-9、CSS样式的集体定义方法
一、集体定义
所谓集体定义是在多个标记使用同一个CSS效果，这时就可以同时对多个标记做一次性定义。
（1）集体定义的方法：
.自定义名称，标记，#自定义名称｛
font-size:12px;
color:#FF0000;
｝
二、CSS样式的继承
继承的原则是由外到内，先使用第一个样式，然后再使用第二个样式。
1-10、CSS样式定义的嵌套（选择器的嵌套）
一、选择器的嵌套
如：
p b｛
color:#FF0000;
font-size:12px;
｝
注：上面这种定义方法表示P标记里面包含的b标记的样式，也就是说只有当b标记被p标记包含的时候才会使用这个样式，没有被p标记包含b标记不会调用这个样式，同时p标记也不会使用这个样式。
2-1、文字样式的设置
一、文字样式
1、font-family：字体
2、font-size：文字大小
3、color：颜色
4、font-weight：文字粗细
5、font-style：斜体
6、text-decoration：加下划线、顶划线，删除线
7、text-transform：英文字母大小写
8、text-indent：首行文本缩进
9、letter-spacing：字间距
二、字体（font-family）
1、H2{Font-family:黑体，幼圆;}
表示采用黑体，如果系统没有黑体就采用幼圆，如果没有幼圆那么就采用浏览器默认字体。
2-2、文字大小和颜色
一、文字大小（字号）（font-size）
1、文字大小的单位：in：英寸，cm：厘米，mm：毫米，px：象素。
2、font-size在设置文字大小时分为绝对大小和相对大小。14px像这样表示绝对大小，large 像这种表示相对大小。
二、color：颜色
1、颜色的表示方法
（1）单词：red、green、blue
（2）RGB：RGB（255,255,255）
（3）十六进制：#FFFFFF
2-3、2-4、文字粗细、斜体和划线
1、font-weight：文字粗细
2、font-style：斜体
（1）italic：斜体
3、text-decoration：加下划线、顶划线，删除线
（1）overline：上划线
（2）underline：下划线
（3）line-through：删除线
4、text-transform：英文字母大小写
（1）capitalize：单词开头大写
（2）lowercase：全部小写
（3）uppercase：全部大写
5、text-indent：首行文本缩进
6、letter-spacing：字间距
2-5、练习
一、定义CSS的原则
相同属性定义在一起，不同属性分别定义。
2-6、2-7、文字的对齐
一、文字的对齐
1、水平方向对齐：text-align
（1）left：左对齐
（2）center：水平居中
（3）right：右对齐
2、垂直方向对齐：vertical-align
（1）top：顶对齐
（2）middle：垂直居中
（3）bottom：底对齐
二、行间距和字间距
1、行间距：line-height
2、字间距：letter-spacing
2-8、首字放大
一、首字放大
1、float：left
2、float：right
3-1、3-2、图片的边框效果1-2
一、图片的边框效果
边框：border
线型：style（solid：实线，dashed：虚线， dotted：点划线）
颜色：color
宽度：width
3-3、图片的大小与缩放
一、图片的大小与缩放
宽度：width
高度：height
注：宽度和高度可以设置绝对大小和相对大小。
3-4、图片的对齐
一、图片的对齐
1、水平方向对齐：text-align
（1）left：左
（2）right：右
（3）center：水平居中
2、垂直方向对齐：vertical-align
（1）top：顶对齐
（2）middle：垂直居中
（3）bottom：底对齐
3-5、图文混排效果
一、图文混排
1、float：left（将图片单独分离出来放在左边。）
2、float：right（将图片单独分离出来放在右边。）
3-6、图片与文字的间距
一、图片与文字的间距
1、margin：间距
（1）margin-left：左间距
（2）margin-right：右间距
（3）margin-top：上间距
（4）margin-bottom：下间距
4-1、网页背景颜色的设置
一、网页背景颜色
1、background-color:背景颜色
4-2、4-3、网页背景图片
1、background-image:背景图片
2、background-repeat:背景图片是否重复
3、background-position:背景图片的位置
4、background-attachment:背图图片是否固定
注：1、网页背景颜色和背景图片可以同时设置吗？
2、如果让背颜色和背景图片同时显示？
4-4、网页背景的综合设置
background
5-1、表格中的标记
1、表格中的标记
table：表格
tr：行
td：单元格
caption：表格的总标题
th：表格的行列标题
5-2、表格颜色的设置
5-3、表格的边框设置1
1、border-collapse:collapse：重叠边框
5-4、表格的边框设置2
5-5、隔行变色表格的制作
5-6、CSS设置表单样式1
5-7、CSS设置表单样式2
5-8、CSS设置表单样式3
6-1、6-2、超链接特效1-2
一、超链接指的是通过点击一个对象可以链接打开另外一个对象（网页、图片、程序等）。
二、超链接的各种状态
1、a:link：默认。
2、a:visited：点击过。
3、a:hover ：鼠标移上去。
4、a:active：点下去。
6-3、超链接特效3
1、.a1:link：默认。
2、.a1:visited：点击过。
3、.a1:hover ：鼠标移上去。
4、.a1:active：点下去。
6-4、6-5、按钮式超链接的制作1-2
1、padding：内容和边框的距离。
2、margin：边框外的距离。
6-6、按钮式超链接的制作3
1、padding：内容和边框的距离。
注：距离顺序为上、右、下、左。
6-7、浮雕式超链接效果的制作1
6-8、浮雕式超链接效果的制作2
6-9、不同鼠标形状的超链接
1、cursor：鼠标形状
（1）help：帮助形状
（2）move：移动形状
（3）wait：等待形状
（4）hand：手的形状
。。。。。。
7-1、项目列表1
项目列表是用于对数据按逻辑方式进行分组，常用的列表有两种：
1、无序列表<ul></ul>
2、有序列表<ol></ol>
无序列表：指各条列之间无顺序关系，只是利用条列方法呈现资料而已。
无序列表中的每个值用：<li></li>
circle：空心圆
disc：实心圆（默认）
square：方形
有序列表：指条列之间是有顺序的，从1，2，3，.......直延伸下去。
列表中的每一项值用:<li></li>
decimal、表示1，2，3，4，…..顺序
upper-alpha：表示A、B、C、顺序
lower-alpha：表示a、b、c、顺序
upper-roman：罗马（大写）
lower-roman：罗马（小写）
list-style-type：项目列表的类型
注：使用CSS控制项目列表，有序列表和无序列表没有本质的区别。
7-2、项目列表2
1、不同类型符号的定义
2、list-style-image：图片符号
7-3、定义块元素
1、display:block：定义为块元素
注：当超链接被定义为块元素后，鼠标进入该块的任何区域都会被激活。
7-4、7-5、纵向菜单效果的制作1-2
1、list-style-type：none不设置项目符号
7-6、横向菜单效果的制作
1、float：left：左对齐排列
7-7、什么是DIV
一、什么是DIV
DIV是层的标记，在DIV中可以放入网页中任何一种元素（如：文字、图片、……），,然后配合CSS，可以实现网页各个元素的精确定位。
7-8、Tab菜单效果的制作1
7-9、Tab菜单效果的制作2
7-10、Tab菜单效果的制作3
7-11、Tab菜单效果的制作4
7-12、Tab菜单效果的制作5
8-1、详细讲解DIV标记
一、详细讲解DIV标记
1、默认每个DIV单独占满整行
8-2、span标记
一、span标记
1、每个span标记不是单独占一行
注：div标记一般用于大区块，span标记一般用于小区块。
8-3、盒子模型
一、盒子模型（矩形区域）
1、border：边框
2、padding：内边距
3、margin：外边距
注：在利用CSS给对象设置属性时，任何一个对象都可以看成盒子模型。
8-4、盒子模型大小的计算方法
一、盒子模型（矩形区域）
1、width，height：宽度和高度指的是内容区域的大小。
盒子大小：
宽度：width+padding+border+margin
高度：height+padding+border+margin
8-5、盒子模型中各参数的设置
一、盒子模型（矩形区域）
1、border：边框
2、padding：内边距
3、margin：外边距
8-6、8-7、8-8、8-9元素的定位1-4
一、元素的定位
1、float：float定位
2、position：相对或绝对定位
（1）absolute：绝对定位
（2）relative：相对定位
3、z-index：前后定位
8-10、图片签名效果
8-11、Position定位
1、position：相对或绝对定位
（1）absolute：绝对定位
（2）relative：相对定位（相对父对象即相对原位置）
8-12、文字阴影
9-1、如何用DIV对网页进行分块
一、网页布局分类
（1）“同”字式
（2）“厂”字式或反“厂”字式
二、网页分块
（1）banner
（2）content
（3）links
（4）footer
9-2、9-3、固定宽度且居中的版式1-2
一、固定宽度且居中的方法
1、margin 0 auto。
2、position:relative;
left:50%;
800px;
margin-left:-400px;
9-4、CSS+DIV综合网页布局实例1
9-5、CSS+DIV综合网页布局实例2
9-6、CSS+DIV综合网页布局实例3
9-7、CSS+DIV综合网页布局实例4
9-8、CSS+DIV综合网页布局实例5
9-9、CSS+DIV综合网页布局实例6
clear：both
www.52zxw.com（我爱自学网）原创出品，版权所有，视频不得转播和录制
*/
?>