笔记(div+css).doc
文本预览下载声明
Div+Css 开山篇
Div+css 是什么？
Div+css是一种目前比较流行的网页布局技术
Div存放需要显示的数据（文字，图表），css就是用来指定怎样显示，从而做到数据和
显示相互分离的效果
原理图如下：
我们可以简单的这样理解div+css
Div是用于存放内容（文字、图片、元素）的容器。
Css是用于指定放在Div中的内容如何显示，包括这些内容的位置和外观
快速入门案例(体验案例)：
Demo1.html
html
head
titlecss入门小案例/title
!--引入我们的css--
link rel=stylesheet type=text/css href=my.css/
/head
body
div class=style1
img src=andy.jpg/
/div
/body
/html
My.css
.style1{
/*宽度*/
width:400px;
height:300px;/*一定要写一个分号*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left:40px;
}
? 网页设计的三个时期
table 网页设计
table+css网页设计
div+css网页设计
? css 使用必要
Css使用的基本语法
选择器｛
属性1:属性值;
属性2:属性值;
｝
Demo2.html
html
!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--
link rel=stylesheet type=text/css href=demo2.css/
body
!--span元素通常用于存放小块内容--
span class=s1栏目一/spanbr/
span class=s2栏目二/spanbr/
span class=s3栏目三/spanbr/
span class=s4栏目四/spanbr/
span class=s5栏目五/span
/body
/html
Demo2.css
/*.s1 用术语 类选择器*/
.s1{
color:green;
font-size:30px;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#A26161;
}
字体统一案例
Demo2.html
html
!--css部分可以单写一个文件，然后引入，也可以直接嵌入到该html文件--
link rel=stylesheet type=text/css href=demo2.css/
body
!--span元素通常用于存放小块内容--
span class=s1栏目一/spanbr/
span class=s1栏目二/spanbr/
span class=s1栏目三/spanbr/
span class=s1栏目四/spanbr/
span class=s1栏目五/span
/body
/html
Demo2.css
/*.s1 用术语 类选择器*/
.s1{
color:blue;
font-size:30px;
font-style:italic;
text-decoration:underline;
}
Css必要性2 可以使用滤镜
滤镜的使用
内嵌代码：
html
head
!--如何把css直接嵌入到html文件（内联css）--
style type=text/css
a:link img{
filter:gray;
}
a:hover img{
filter:;
}
/style
/head
body
a href=3img src=jack.gif/a
a href=3img src=andy.jpg/a
a href=3img src=psue.jpg/a
/body
/html
? Css中常用的四种选择器：
1. 类选择器（class选择器）
基本使用：
类选择器{
属性名:属性值;
……
}
2. id选择器
基本使用
#id选择器{
属性名:属性值;
……
}
案例
#id1{
background-color:
显示全部