Css+div,适合初学.docVIP

Css+div介绍 一个概念 标记（tag）： 如 h2css标记实例/h2 查看方法：浏览器中 “查看”-“源文件”选项 Css优势 没有引入css：( 引入css 比较 例1.1 使用css控制页面的方法 例1.2 行内样式 对标记使用style属性 p style=color:#ff0000; font-size:20px; text-decoration:underline;正文内容1/p p style=color:#000000; font-style:italic;正文内容2/p p style=color:#ff00ff; font-size:25px; font-weight:bold;正文内容3/p 内嵌样式 用style/style声明，写在head/head中 style p{ color:#ff00ff; text-decoration:underline; font-weight:bold; font-size:25px; } /style p紫色、粗体、下划线、25px的效果1/p p紫色、粗体、下划线、25px的效果2/p 链接样式 独立css代码文件 页面： h2css标题1/h2 p紫色、粗体、下划线、25px的效果1/p h2css标题2/h2 p紫色、粗体、下划线、25px的效果2/p Css文件： h2{ color:#0000ff; } p{ color:#ff00ff; text-decoration:underline; font-weight:bold; font-size:20px; } 导入样式 style type=text/css @import url(1.2.css); /style 注意：几种方式的优先级问题 从高到低：行内样式、链接式、内嵌式、导入式 （建议只使用1-2种。） 体验css 例 1.3 基本语法 几种选择器 标记选择器： h1 { color: red; font-size: 25px; } 选择器 属性 值 属性 值 类别选择器： .class { color: red; font-size: 25px; } 类别选择器 属性 值 属性 值 例2.1 ID选择器： # id { color: red; font-size: 25px; } ID选择器 属性 值 属性 值 例 2.2 注意：一个id最多只能赋予一个HTML标记。 2、选择器声明 集体声明： 例2.3 嵌套选择器： 例2.4 3、CSS的继承 例2.5 CSS文字效果： 文字样式 字体：p{ font-family: 黑体,Arial,Times New Roman,Helvetica, sans-serif} 文字大小：font-size 文字颜色：color 文字粗细：HTML:bstrong ; 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; (注：对块级元素pdiv等不起作用) 行间距：line-height: 8pt;(绝对数值) 1.5em; (相对数值） 字间距：letter-spacing:2pt; 1.5em; p79 作业 例3.3-练习 CSS图片效果 图片样式 1、图片边框 HTML: img src=hehua.gif border=0 例4.1 img{ border-style:dotted;dashed;solid;double;groove;ridge;…… border-color:#ff9900; border-width:5px;} 图片缩放 例4.2 图片的对齐 横向对齐： 不能直接设置图片的text-align，而是通过设置其父元素的该属性实现。 竖直对齐： Vertical-align属性 例4.3 4、图文混排 例4.4 八仙过海 设置网页中的背景 5.1 用背景色给页面分块 例5.1 5.2 背景图片重复 background-repeat 例5.2 5.3 背景图片位置 background-position: 30px (em %) 例5.3 5.4 固定背景图片 backgr