div+css学习笔记
DIV+CSS的介绍
1、div+css是什么
div元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。
css（Cascading style Sheets层叠祥式表单）它是一种用来表现HTML或XML等文件式样的计算机语言.
div+css是网站标准（或称WEB标准"）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定值技术，而是采用DIV+css的方式实现各种定位。
我们可以简单的这样理解div+css:
div是用于存放内容(文字,图片,元素）的容器，
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观。
原理图：
案例：
建立test1.html文件和my.css文件
test1.html源码：
<html>
<!--引入my.css文件-->
<head>
<link href="my.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
</body>
</html>
my.css源码:
/*类选择器*/
.style1{
width:300px;
height:200px;
border:1px solid red;
margin:150px 0px 0px 200px;/*决定table的位置*/
}
/*父子选择器*/
.style1 table{
width:298px;
height:180px;
border:1px solid black;
}
.style1 table td{
border:1px solid black;
text-align:center;/*使table内的文字居中*/
}
案例：
使用<span>元素来编写：
使用ide开发css(myeclipse),因为它能给我们提示。
css1.html源码：
<html>
<body>
<span style="font-size:50px;colcor:blue;">栏目一</span></br>
<span style="font-size:40px;colcor:red;font-style:italic;">栏目二</span></br>
<span style="font-size:30px;colcor:green;font-weight:lighter;">栏目三</span></br>
<span style="font-size:20px;colcor:pink;font-weight:lighter;">栏目四</span></br>
<span style="font-size:10px;colcor:black;font-weight:lighter;">栏目五</span></br>
</body>
</html>
从使用span元素我们可以看到，css的基本语法
<元素名 style="属性名1:属性值1;属性名2:属性值2；" />
元素可以是html的任意元素，属性名：属性值 要参考w3c组织给出的文档
css分类：内部css 外部css
css有统一格式的作用
案例：
<style type="text/css">
.style1{
font-size:20px;
font-weight:bold;
font-style:normal;
color:red;
text-decoration:underline;
}
</style>
<body>
<span class="style1">栏目一</span></br>
<span class="style1">栏目二</span></br>
<span class="style1">栏目三</span></br>
<span class="style1">栏目四</span></br>
<span class="style1">栏目五</span></br>
</body>
案例：
如何实现网站的图片全变为黑白色？（使用css的滤镜技术）
<style type="text/css">
/*使用滤镜*/
img{
filter:grag;
}
</style>
<body>
<img src="images/2.jpg" />
<img src="images/3.jpg" />
<img src="images/4.jpg" />
</body>
实现当鼠标放在图片上时图片显示原来的颜色
<style type="text/css">
/*使用滤镜*/
a:link img{
filter:grag;
}
a:hover img{ /*鼠标停在图片上不显示颜色，即原来的颜色*/
filter:"";
}
</style>
<body>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
</body>
css的三种选择器
- 类选择器，又叫class选择器
- id选择器
- html元素选择器
- 通配符选择器
选择器是在css中创建，而在网页页面（html,jsp,php,asp.net）中使用。
类选择器
.类选择器名{
属性名：属性值；
...
}
id选择器
#id选择器名{
属性名：属性值；
}
test.css源码：
#style1{
font-size:20px;
font-weight:bold;
font-style:normal;
color:red;
text-decoration:underline;
}
test.html源码：
<body>
<span id="style1">栏目一</span></br>
</body>
/*html的选择器*/
text.css源码：
body{
color:orange;
}
text.html源码：
<body>
北京，你好！
</body>
注意：当一个元素同时被id选择器、类选择器和html选择器修饰，优先级是：id选择器>类选择器>html选择器>通配符选择器。
【练习题】
我们希望所有的超链接
(1)默认样式是黑色，24px,没有下划线
(2)当鼠标移动到超链接特，自动出现下划线
(3)点击后,超链接变成红色。这又该怎么实现呢?
test.html源码：
<html>
<body>
<a href="#">goto sohu</a><br/>
<a href="#">goto sina</a><br/>
</body>
</html>
test.html源码：
a:link{
color:blank;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:visited{
color:red;
}
通配符选择器
如果希望所有的元素都符合某一样式，可以使用通配符选择器。
*{
/*margin:0px;*/
/*margin-top:10px;
margin-left:10px;
margin-right:0px;
margin-bottom:0px;*/
margin:10px 0px 0px 10px;/*top开始，顺时针方向，即（top right bottom left）*/
margin:10px 0px 0px;/*如果给三个值，第一个用于上，第二个用于左右，第三个用于下*/
padding:0px；
}
可以让所有html元素的外边距和内边距都默认为0，又是特别有用。
父子选择器
注意：①子选择器标签是html可以识别的标记；②父子选择器可以有多级；③父子选择器可以适用于id选择器和类(class)选择器;④一个元素最多有一个id选择器，可以有多个class选择器。
html文件中如何使用多个class选择器
<span class="style4 style1">新闻3</span>
①在引用多个class选择器的时候，用空格隔开。②当class选择器发生冲突时，以在css文件中，最后出现的class选择器样式为准。
※在css文件中，如果有多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。
案例说明：
my.css源码：
/*招生广告*/
.ad_stu{
width:136px;
height:196px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
float:left;
}
/*广告2*/
.ad_2{
background:#7CF574;
height:196px;
width:457px;
float:left;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
background:#7CF574;
height:196px;
width:152px;
float:left;
margin:5px 0 0 6px;
上面的my.css可以写成：
/*招生广告*/
.ad_stu{
width:136px;
height:196px;
background-color:#FC7E8C;
margin:5px 0 0 5px;
}
/*广告2*/
.ad_2{
background:#7CF574;
height:196px;
width:457px;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
background:#7CF574;
width:152px;
margin:5px 0 0 6px;
}
.ad_stu,.ad_2,.ad_house{
height:196px;
float:left;
}
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到该网页的组成标签。
