Css+div,适合初学.doc

Css+div介绍一、 一个概念标记（tag）： 如 css标记实例 查看方法：浏览器中 “查看”-“源文件”选项二、 Css优势没有引入css： 引入css 比较 例1.1三、 使用css控制页面的方法 例1.21、 行内样式对标记使用style属性正文内容1正文内容2正文内容32、 内嵌样式用声明，写在中pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:25px;紫色、粗体、下划线、25px的效果1紫色、粗体、下划线、25px的效果23、 链接样式独立css代码文件页面：css标题1 紫色、粗体、下划线、25px的效果1 css标题2 紫色、粗体、下划线、25px的效果2Css文件：h2color:#0000ff;pcolor:#ff00ff;text-decoration:underline;font-weight:bold;font-size:20px;4、 导入样式 import url(1.2.css);注意：几种方式的优先级问题从高到低：行内样式、链接式、内嵌式、导入式 （建议只使用1-2种。）四、 体验css例 1.3五、 基本语法1、 几种选择器标记选择器：h1 color: red; font-size: 25px; 选择器 属性 值 属性 值类别选择器：.class color: red; font-size: 25px; 类别选择器 属性 值 属性 值例2.1ID选择器：# id color: red; font-size: 25px; ID选择器 属性 值 属性 值例 2.2注意：一个id最多只能赋予一个HTML标记。2、选择器声明集体声明：例2.3嵌套选择器：例2.43、CSS的继承例2.5CSS文字效果：六、 文字样式字体：p font-family: 黑体,Arial,Times New Roman,Helvetica, sans-serif文字大小：font-size文字颜色：color文字粗细：HTML: ; CSS: font-weight 斜体：font-style: italic；下划线、顶划线、删除线：text-decoration:line-through英文字母大小写：text-transform:capitalize例3.1例3.2七、 段落文字水平对齐：text-align: left; right; center; justify;垂直对齐：vertical-align: top; bottom; middle; (注：对块级元素等不起作用)行间距：line-height: 8pt;(绝对数值) 1.5em; (相对数值）字间距：letter-spacing:2pt; 1.5em;例3.3 p79作业 例3.3-练习CSS图片效果八、 图片样式1、图片边框HTML: 例4.1imgborder-style:dotted;dashed;solid;double;groove;ridge;border-color:#ff9900;border-width:5px;2、 图片缩放例4.23、 图片的对齐横向对齐：不能直接设置图片的text-align，而是通过设置其父元素的该属性实现。竖直对齐：Vertical-align属性例4.34、图文混排例4.4 八仙过海设置网页中的背景5.1 用背景色给页面分块 例5.15.2 背景图片重复 background-repeat 例5.25.3 背景图片位置 background-position: 30px (em %) 例5.35.4 固定背景图片 background-attachment:fixed 例5.45.5 综合练习 例5.5 例5.6注：writing-mode属性有两个值lr-tb和tb-rl，前者是默认的左-右、上-下，后者是上-下、右-左。设置表格和表单6.1 控制表格例6.16.2 隔行变色例6.26.3 日历例6.46.4 CSS与表单例6.36.5 文字一样的按钮例6.56.6 七彩的下拉菜单例6.6综合实例例6.7 直接输入的excel例6.8 模仿调查问卷Css+div 美化和布局篇一、与标记块级元素，其包围元素自动换行。中间可包含行内元素，他的前后不会换行。中间不能包含例10.1二、盒子模型盒子模型例10.2例10.31、Padding属性：定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。注释：不允许使用负值。例子 1padding:10px 5px 15px 20px; 上内边距是 10px 右内边距是 5px 下内边距是 15px 左内边距是 20px 例子 2padding:10px 5px 15px; 上内边距是 10px 右内边距和左内边距是 5px 下内边距是 15px 例子 3padding:10px 5px; 上内边距和下内边距是 10px 右内边距和左内边距是 5px 例子 4padding:10px;2、margin属性：同padding属性三、元素的定位1、float定位Float:left; right; none设置元素向左、右浮动，元素即向其父元素的左侧或右侧靠紧。例10.4（1）Son1设置float：left后，块son1宽度：内容本身+自己的padding 块son1左端位置：父块的padding-left+自己的margin-left 注：son1块内容不属于父块了；且son2块效果上是环绕着son1块的。（2）Son1和son2均设置float：left后，两者将并排向父块左侧靠近，son2不再环绕son1.如例10.4-1（3）Clear属性：Clear:left;right;both; 消除对float的影响。例10.5常用于网页最下端的“脚注”部分。2、 position定位position:static;absolute;relative;fixed;分别表示：原位；绝对位置；相对位置（相对于父块）；（1） position:absolute;例10.6 定义后脱离父块其中top、right、bottom、left 均是配合position属性使用的，表示块的上、右、下、左边界离页面边框的距离。可用绝对像素或者用百分比。注：为避免冲突，建议设置块的width、height定义宽度和高度；left、right只用其一，top、bottom只用其一。（2） position:relative;例10.7 定义后隶属于父块其中top、right、bottom、left是配合position属性使用的，表示块的上、右、下、左边界在父块内的位置。（到父块边框要加上父块padding值）注：定义后的位置是相对于定义前的原位置的变化。如例10.7-13、z-index空间位置当块设置了position属性时，便可设置z-index属性。z-index属性值越大的块越在上方。4、综合实例：例10.8 图片签名例10.9 文字阴影效果CSS+div布局方法步骤：标记分块-对各块进行css定位-添加相应内容一、 对页面用div分块a、 首先，要有一个整体的框架规划（有哪些部分组成，各部分之间的父子关系等）b、 在最外面要定义一个父div，便于对页面进行调整c、 用css的id表示各个块；用class表示各个子内容部分 #container #banner #content #links #footer代码如 例11.1二、 设计各块的位置1、非固定宽度页面： #container #banner #content 主体内容 #links导航条 #footer 脚注Css定位：Content宽度不指定，随浏览器变化，links指定宽度200px，则links被挤到下方；解决方法是将links的左边距设为负数（如-200px），content右补白设为200px。如果links内容过长与footer重合，则将conte