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>
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到该网页的组成标签。
