推荐教程--CSS+DIV教程范本

ITEducation&TrainingITEducation&TrainingCSS层叠样式表ITEducation&TrainingITEducation&TrainingCSS内容介绍•CSS概述•CSS设置方式•CSS语法•样式规则注释和样式规则优先级•CSS的属性分类介绍ITEducation&TrainingITEducation&TrainingCSS概述•CSS概念–CSS是CascadingStyleSheets的缩写，中文的意思是层叠样式表或级联样式表。•CSS功能简介–CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。ITEducation&TrainingITEducation&TrainingCSS设置方式设置方式举例特点内联样式bodyh1style=font-family:宋体;font-size:12pt;color:blue在这里使用了H1标记/h1/body灵活，简单方便。嵌入样式headstyletype=text/cssh1{font-family:宋体;font-size:12pt;color:blue}/style/headbodyh1在这里使用了H1标记/h1/body一个样式可以在一个页面多次应用。外部样式headlinkrel=stylesheethref=h1.csstype=text/css/headbodyh1在这里使用了H1标记/h1/bodyh1.cssh1{font-family:宋体;font-size:12pt;color:blue}需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。ITEducation&TrainingITEducation&TrainingCSS语句格式•css语句格式如下：–selector{property:value}(选择符{属性：值})–选择符的作用：限制样式作用的范围p{font-size:15}–当属性的值是多个单词组成时，必须在值上加引号h1{font-family:CourierNew}–如果需要对一个选择符指定多个属性时，使用分号隔开。p{font-size:15;color:red}•选择符主要包括：–html选择符–class选择符–id选择符ITEducation&TrainingITEducation&Traininghtml选择符•html选择符：就是以html标签作为选择符的情况。•其作用域为所有符合条件的html标签h1{text-align:center;color:red}p{font-size:15;color:red}ITEducation&TrainingITEducation&Trainingclass选择符•class选择符：使用html标签的class属性设置值的选择符就是class选择符。p.stop{color:red}p.warning{color:yellow}p.normal{color:green}•关联classselector:可以为同一个元素（html标签）定义不同的样式。•独立classselector:可以为多个不同的元素（html标签）定义相同的样式pclass=stop这是stop的样式/ppclass=warning这是warning的样式/ppclass=normal这是normal的样式/p演示效果pclass=title蓝色的段落/ph1class=title蓝色的标题/h1styletype=text/css.title{text-align:center;color:blue}/style演示效果ITEducation&TrainingITEducation&TrainingID选择符•ID属性用来定义某一特定html标签，一个网页文件只能有一个标签使用某一ID属性值，IDSelector就是用来设置这样具有ID属性html标签的样式。•经验总结：因为IDselector只能为单个的html标签设置样式，因此具有一定的局限性。•ID属性在JavaScript得到广泛的应用。styletype=text/css#title{text-align:center;color:blue}/styledivid=titlewelcometoneusoft/divITEducation&TrainingITEducation&Training包含选择符•包含选择符：是指用空格隔开的两个或多个单一选择符组成的字符串•使用：主要用来对某些具有包含关系的元素来单独定义样式，比如元素1里包含元素2，使用包含选择符定义的样式就只能对在元素1里的元素2起作用，而对单独的元素１和元素２不起作用。divp{color:red;font-size:12;}htmlheadstyletype=text/csstablea{color:green;text-decoration:none;}/style/headbodyahref=东软教育在线/atableborder=1trtdahref=东软教育在线/a/td/tr/table/body/html演示效果ITEducation&TrainingITEducation&Training包含选择符（续）•包含选择符的优先权要比单一选择符定义的样式规则的优先权要高。定义tablea{color:green;text-decoration:none;}同时定义a{color:yellow;}结果：表格中的超链接的文本是绿色的ITEducation&TrainingITEducation&Training组合选择符•组合选择符：为了减少样式表的重复声明可以在一条样式规则定义语句中组合若干个选择符，每个选择符之间用逗号隔开。htmlheadstyletype=text/cssh1{color:#CC66FF;}h2{color:#CC66FF;}h3{color:#CC66FF;}/style/headbodyh1这里使h1标签/h1h2这里使h2标签/h2h3这里使h3标签/h3/body/htmlhtmlheadstyletype=text/cssh1,h2,h3{color:#CC66FF;}/style/headbodyh1这里使h1标签/h1h2这里使h2标签/h2h3这里使h3标签/h3/body/htmlITEducation&TrainingITEducation&Training伪元素选择符•伪元素选择符：是指同一个html元素的各种状态和部分内容的一种定义方式。•伪元素选择符样式的格式：–html选择符:伪元素{属性:值}•例如超链接标签（a）的正常状态（没有做任何动作前）、访问过的状态、选中的状态、光标移到超链接上的文本状态，还有段落的首字母和首行都可以用伪元素选择符来定义样式。–a:active表示超链接选中的状态–a:hover表示鼠标移动到超链接上的状态–a:link表示超链接的正常状态–a:visited访问过的超链接的状态ITEducation&TrainingITEducation&Training注释、继承、优先级•样式中的注释：–/*注释内容*/注意:不能嵌套•样式的继承–所有嵌套在某个html标签中的html标签都会自动继承外层标签设置的样式规则。•样式规则的优先级：–ID选择器〉CLASS选择器〉HTML标签选择器–内联样式表〉嵌入样式表〉外部样式表htmlheadstyletype=text/cssP{text-align:right}/style/headbodypstyle=text-align:center中国/p/body/html效果演示htmlheadstyletype=text/css#title{color:blue;font-size:12;}.head{color:red;font-size:20;}div{color:green;font-size:30;}/style/headbodydivid=titleclass=head猜猜是什么样式在起作用/div/body/html效果演示ITEducation&TrainingITEducation&TrainingCSS+DIV网页设计与制作ITEducation&TrainingITEducation&Training课程目标•熟悉CSS层叠样式表•掌握DIV+CSS网页样式与布局ITEducation&TrainingITEducation&TrainingDreamweaver中的CSS样式•类型•背景•区块•方框•边框ITEducation&TrainingITEducation&Training类型•字体•字号•样式•行高•颜色•修饰font-family:Arial,sans-serif;font-size:12px;font-style:italic;line-height:1.5em;color:#FF0000;text-decoration:none;ITEducation&TrainingITEducation&Training背景•背景颜色•背景图片•背景重复•背景位置•是否固定background-color:#999999;background-image:url(11.jpg);background-repeat:repeat-x;background-attachment:fixed;background-position:lefttop;ITEducation&TrainingITEducation&Training区块•水平对齐•垂直对齐•缩进•空白•显示类型text-align:center;vertical-align:middle;text-indent:24px;white-space:normal;display:block;ITEducation&TrainingITEducation&Training方框•宽和高•填充•边界•浮动•清除width:400px;height:200px;padding:5px;margin:5px;float:left;clear:left;ITEducation&TrainingITEducation&Training边框•样式•大小•颜色border:1pxsolid#CC00FF;border-top:1pxsolid#CC00FF;border-right:1pxdashed#CC00FF;border-bottom:1pxsolid#CC00FF;border-left:1pxsolid#CC00FF;ITEducation&TrainingITEducation&Training盒子模型•盒子模型–Content–Padding–Border–Margin•单个div布局实例ITEducation&TrainingITEducation&Training定位•float–left–right•clear–left–right–both•position–relative–absolute•实例–多个div布局–嵌套div布局–图片签名ITE