div+css教学课程ppt
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
类别选择器和id选择器
类别选择器
Id选择器
Css选择器
集体声明如果一些标签属性相同可以一起 声明。 Htm,body,div,li{margin:0px;pading:0px;} 选择器嵌套：一个标签下还有其他标签可以 这样使用。 例如<ul class=‘a1’><li></li></ul> .a1{样式} .ai li{样式}
Div+css课程
Div和css的概念
Div是htm语言中一个标签，代表的是层的意思。在htm语 言中成对出现。<div> </div> Css是cascading style sheet 的缩写中文名字 “层叠样式 表”，也是就是控制htm标签的样式。1996年由w3c认证 通过并推荐使用的，使html更好的适应美工的设计要求。 Css样式可以写在代码中，也可以写在网页的头部，也可 以采取外部调用的方式。 在<head></head>中间插入<style></style>或者<link src=“” rel=“stylesheet”/>
Dl相当于描述内容的一个主题，这里边有标题和内容，一般标题用dt表 示 ，内容用dd表示。
Css的概念
Css是英文 casanding stylesheet的缩写。是1996年由w3c 审核通过并推荐使用，css的引进使html能够更适应美工 的网页设计。Div+css的引进使修改网页属性便利了很多。
文字大小
In 英寸 Mm 毫米 Cm 厘米 Pt 点数 一般1pt等于1/79in 1pt 1/79in Pc 1pc=12pt Px 像素（现实大小和分辨率、显示器 大小有关系。）
文字样式
Color Font-weight 斜体：font-style 删除线：text-decoration:line-through； 顶划线:text-decoration:overline; 下划线：text-decoration:underline; 闪烁:text-decoration:blink;(火狐浏览器里边有效) 可以两个属性用一个标签中中间用空格分开。 字母大小写：text-transform:capitalize;首字母大写, lowercase小写，uppercase全部大写
图片的对齐
Text-align:left,center,right.水平位置的移动 Vertical-align 竖直位置的移动（仅用于表格 中）
背景设置
Background-color背景颜色 Background-image背景图片 Background-repeat背景图片的重复 Background-position背景图片的位置 Background-position Background-attachment 图片的固定 fixed
Css的选择器
我们可以直接用htm中标记名作为css的选择器： 例如
但是由于一个页面中不可能只使用一个 h1或者一个P所以我们又引进 一个类别选择器class=‘xxx’，用于区别每个标签之间的属性，这个 选择器的名称可以由用户自己取。 还有一种就是标记名后边直接跟类别选择器。 P .a1 还有一种id选择器 ：id=‘xxx’css写的时候用#xxx{ 样式}表示。但是一 个id选择器只能赋予一个htm标签。
块标签和行内标签
Div ul li 自己占一行的标签称为块标签 行内标签 span b a标签自己不能占据一行， 也就是说一行内可以放 多个这样子的标签。
Css样式中用到的标签
控制左右间距：padding，margin 控制左右排序：float{left，right} 控制字体：font 字体颜色：color 控制背景颜色级图片：background 控制高度和宽度：height，width。 位置浮动：position:absolute绝对位置，relative相对位置{top， left ，right，bottom} 清除 ：clear 值有left，right，both Z-index 控制重叠图片的位置 超链接：a:link 点击前 a:visited 点击后 a:hover鼠标放上去的 样式。 鼠标样式：cursor； 边框：border；
超链接和鼠标样式
超链接 a:link{} 没有点击之前超链接的样式 wenku.baidu.com:visited{}点击之后超链接的样式 a:hover{}鼠标移动到超链接上边的样式 a:hover{} 鼠标样式 Cursor：
浮动
Float：left ,right Position:绝对浮动absolute 相对浮动relative； Z-index:重叠块模型之间的排序。
图片的边框
边框border Border-color Border-style（dashed虚线，dotted以圆点代 表边框，solid实线） Border-left，border-right，border-top， border-botomm
图片的大小
可以用绝对值定义图片的大小 例如：img{ width:100px; height:100px;} 也可以用相对大小来定义图片的大小 例如：img{ width:50%; height:30%;} img{
Css的层叠样式
类别选择器的优先度高于标记选择器 Id选择器的优先度高于类别选择器 行内样式优先度高于id选择器 选择器优先度相同的时候先来者居上。
Css样式控制字体
控制文字字体 控制字体大小 控制文字颜色 文字粗细 斜体 下划线、定短线、删除线 英文字母的大小
控制文字字体
Font-family P {font-family:黑体,宋体,楷体,sans-seirf;} 在浏览者网页中寻找先找黑体，如果没有就 找宋体，黑体宋体都没有找楷体，如果都没 有就用浏览器默认字体。
Div中常用到的标签
Ul ol li dl dt dd div 块模型 Ul 是一个无序列表 ol是一个有序列表 li代表的是一列 使用方法： <ul> <li>………..</li> <li>………..</li> <li>………..</li> <li>………..</li> </ul>
<ol> <li>………..</li> <li>………..</li> <li>………..</li> <li>………..</li> </ol> <dl> <dd> <dt>
段落的对齐方式
Text-align:left right center justify 两端对齐。 Vertical-align上下居中只能用于表格中。 Vertical-align可以写正数和负数。 行间距:line-height 可以是绝对数值，也可以 :line-height 是相对数值。 letter-spacing 控制文字之间的距离。