Div+css 是一种目前比较流行的网页布局技术
div 来存放需要显示的数据（文字，图表），cSS 就是用来指定怎么样显示，从而做到数据和显示的效果
原理图如下：
有时候，我们也可能把CSS直接嵌入到html文件中，这种方式称为内联CSS。
基本语法：
<style>
选择器{
属性：属性值；
。。。。
}
<style>
我们可以简单的理解div+css:
div 是用于存放内容（文字，图片，元素）的容器。
css 是用于指定放在div 中的内容如何显示，包括这些内容的位置和外观。
入门体验案例（体验案例）
Demo.html
<html>
<head>
<title>css 入门小案例</title>
<!--引入我们的Css-->
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>
.style{
/*宽度*/
width：400px;
heifht: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：属性值；
。。。。
}
html 文件
<html>
<!--css 部分可以单写一个文件，然后引入，也可以直接嵌入到该html-->
<link rel=stylesheet" type="text/css" href="demo2.css"/>
<span class="s1">栏目一</span>
<span calss="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</html>css文件：
/*s1 用术语 类选择器*/
.s1{
color:blue;
font-style:30px;
font-style:italic;
text-decoration:underline;
}
.s2{
color:yellow;
font-size:12px;
}
.s3{
color:blue;
font-style:italic;
}
.s4{
color:green;
font-weight:bold;
}
.s5{
color:#9c3131;
}css必要性2 可以使用滤镜
<html>
<head>
<!--如何把css直接嵌入到html文件（内联css）-->
<style>
a:link img{
filter:gray;
}
a:hover img:"";
</style>
<body>
<a href="3"><img src="2.jpg"></a>
<a href="3"><img src="3.jpg"></a>
<a href="3"><img src="4.jpg"></a>
<a href="3"><img src="cat1.jpg"></a>
</body>
</head>
</html>css 中常用的四种选择器
1.类选择器（class 选择器）{
属性名：属性值；
}
2.id 选择器
基本使用
#id 选择器{
属性名：属性值；
}
案例：
/*id 选择器的使用*/
#id1{
background-color:silver;
font-size:40px;
}
3.html 元素选择器
某个html 元素{
属性名：属性值；
}
Table{
p{
}
Button{
}
}
//对html元素样式分类
P:cls{
}
<p class="cls"></p>
需求人员（技术+行业背景）
财务软件（php,c++）->用友[]
4.通配符选择器
cSS 文件可以使用在各种文件（php,html,jsp,asp...）
*{
}
案例：
再比如，我们希望所有的超链接
(1)默认样式是 黑色，24px,没有下划线
(2)当鼠标移动到超链接时，自动出现下划线。
(3)点击后，超链接变成红色。这又该怎么实现呢？
test.html
a:link{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
/*对同一中html元素分类*/
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}通配符选择器
该选择器可以用到所有的html元素，但是其优先权最低
*{
属性名：属性值；
}
四个选择器优先权
id选择器->细节->深入了解->应用项目
通过上面的总结：
①父子选择器可以有多级（但是在实际开发中不要三层）
②父子选择器有严格的层次关系
③父子选择器不局限于什么类型选择器
比如
#id span span
.s1 #id span
div #id .s2
2.一个元素可以同时又id选择器和class选择器
案例：<span class="s1" id="news_specail">新闻一</span>
3.一个元素最多有一个id选择器，但是可以有多个类选择器
使用方法如下：
<span class="cls1 s1">新闻三</span>
<元素 class="cls1 s1">新闻部分</元素>
Css部分：
/* 给新闻三 再配置一个class 选择器*/
.cls1{
font-style:italic;
text-decoration:underline;
color:blue;
background-color:silver;
}
.sl{
background-color:pink;
font-weight:bold;
font-size：16px；
color:black;
}
特别注意：当两个类选择器发生冲突了，则可以写在css文件中的那个类选择器为准；
4，我们可以把某个css文件中的 选择器共有的部分，独立出来写一份比如：
.ad_stu{
width:136px;
height:196px;
background-color:#FC7E8C;
margin:5px 0 0 6px;
float:left;
}
/*广告 2*/
.ad_2{
background:#7cf574;
height:196px;
width:457;
float:left;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
background:#7cf574;
height:196px;
width:152px;
float:left;
margin:5px 0 0 6px;
}
//上面的CSS可以写成：
/*招生广告*/
.ad_stu{
width:136px;
background-color:#fc7e8c;
}
/*广告 2*/
.ad_2{
background:7cf574;
width:457px;
}
/*房地产广告*/
.ad_house{
background:#7cf574;
width:152px;
}
.ad_stu,.ad_2,ad_house{
height:196px;
float:left;
margin:5px 0 0 6px;
}5.说明cSS文件本省也会儿被浏览器从服务器下载到本地，才能显示效果。
行内元素和块元素
快速入门案例：
从案例我们看出，行内元素它只占能显示自己内容的宽度，而且他不会儿占据整行块元素块元素它不管自己
的内容有多少，会而占据整行，而且会而换行显示。
常见的行内元素有<a><span><input type="xxx">
常见块元素有<div><p>
<html>
<head>
<link rel="stylesheet" type="text/css" href="element.css">
</head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text" name="username"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text" name="uesrname"/>
<p style="background-color.silver">这是一个段落</p>
</body>
</html>行内元素和块元素可以转换
使用
Display：inline 表示使用行内元素方式显示
Display：block 表示使用块元素方式显示
Css 文件之间的相互引用指令(mvc)
标准流和非标准流
流:html 元素在网页中显示的顺讯。
标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素Html元素在后面显示。
非标准流：在html文件中，当某个元素脱离的标准流，那么它就处于非标准流。
css 中的盒子模型
盒子模型的示意图
盒子模型的经典案例：
html 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html><head>
<title>盒子模型案例</tile>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/>
</div>
</body></html>Css文件：
body{
border:1px solid red;/*1px 表示边框的宽度 solid 实线 red 表示颜色*/
width：500px;
height:500px;
/*如果让body 自动居中*/
margin：0 auto；
/*第一个用于上—下，第二个用于左一右。auto 表示自动居中*/
}
/*盒子模型的概念：margin，padding，border content*/
.div1{
width:50px;
height:52px;
border:1px solid blue;
/*
margin-top:5px;
margin-left:5px;
*/
margin:5px 0px 0px 5px;
/*pading-top:35px*/
}
.div1 img{
width:40px;
height:40px;
margin-top:5px;
margin-5px;
}盒子模型的综合案例2
基本结构
<div>
<ul><lmg src=""/></ul>
</div>
html 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css">
</head>
<body>
<!--div 在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul 在布局中作用是可以控制显示内容多少-->
<ul class="faceul">
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
</body>
</html>Css 文件
.div1{
width:500px;
height:300px;
border:1px solid gray;
margin-left:200px;
}
.faceul{
width：400px;
height:250px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
lift-style-type:none;
folat:left;/*左浮动，这个知识点后面说*/
width：50px;
height:52px;
border:1px solid red;
padding-left:5px;
margin-left:10px;
}
.faceul li{
list-style-type:none;
float:left;/*左浮动，这个知识点后面说*/
width：50px;
height:52px;
border:1px solid red;
margin-right:15px;
margin-top:15px;
}
.faceul li img{
margin-left:5px;
margin-top:5px;
width:40px;
height:40px;
}
作业 ：
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
