<!-- Doctype:文档类型,用于指定dtd(说明当前这个html的版本) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<!-- 告诉搜索引擎,搜索关键字,其实写的多没用,因为他就看前几个 -->
<meta http-equiv="keywords" content="CSS,HTML,OBIEE">
<meta http-equiv="description" content="this is my page">
<!-- 告诉浏览器文件是什么编码 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入CSS文件 -->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- css类选择器,需要点开头-->
<!--
.style1{
font-weight:bold;
font-size:20px;
background-color:pink;
}
<span style="style1">类选择器</span>
-->
<!-- ID选择器,需要#开头,html中要引用id选择器,则 -->
<!--
#style2{
font-size:30px;
background-color:silver;
}
<span id="style2">id选择器</span>
-->
<!-- html选择器 -->
<!--
body{
color:orange;
}
-->
<!-- 内部CSS ,将span中单独设置的很多style=“”更改为style统一格式。-->
<style type="text/css">
.style1{
font-size:30px;
color:maroon;
font-style:oblique;
font-weight:bolder;
}
/*使用滤镜*/
img{
filter:gray;
width:500px;
}
/*超链接,默认图片给灰色*/
a:link img{
filter:gray;
}
/*超链接,鼠标到达的时候显示原来的颜色*/
a:hover img{
filter:""
}
</style>
</head>
<body>
<!-- <br/>*****DIV加CSS******<br/>
div元素是用来为HTML文档内大块block-level的内容提供结构和背景的元素<br/>
CSS层叠样式表单cascading style sheets,一种用来表现HTML或XML等文件式样的计算机语言<br/>
div+css是web标准中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。<br/>
简单理解:<br/>
div是用来存放内容(文字、图片、元素)的容器;<br/>
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观<br/>
使用ide来开发css(myeclipse),集成开发环境,因为有提示功能<br/>
使用span来编写<br/>
-->
<!-- 注释在window-preference下,content assist的快捷键为alt+/ -->
<span class="style1">栏目一</span><br/>
<span class="style1">栏目二</span><br/>
<span class="style1">栏目三</span><br/>
<span style="font-size:30px;color:green;">栏目四</span><br/>
<span style="font-size:30px;color:fuchsia;">栏目五</span><br/>
<a href="#"><img src="images/1.jpg"/></a><br/>
<a href="#"><img src="images/2.jpg"/></a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css1.html</title>
<!-- 告诉搜索引擎,搜索关键字,其实写的多没用,因为他就看前几个 -->
<meta http-equiv="keywords" content="CSS,HTML,OBIEE">
<meta http-equiv="description" content="this is my page">
<!-- 告诉浏览器文件是什么编码 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入CSS文件 -->
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- css类选择器,需要点开头-->
<!--
.style1{
font-weight:bold;
font-size:20px;
background-color:pink;
}
<span style="style1">类选择器</span>
-->
<!-- ID选择器,需要#开头,html中要引用id选择器,则 -->
<!--
#style2{
font-size:30px;
background-color:silver;
}
<span id="style2">id选择器</span>
-->
<!-- html选择器 -->
<!--
body{
color:orange;
}
-->
<!-- 内部CSS ,将span中单独设置的很多style=“”更改为style统一格式。-->
<style type="text/css">
.style1{
font-size:30px;
color:maroon;
font-style:oblique;
font-weight:bolder;
}
/*使用滤镜*/
img{
filter:gray;
width:500px;
}
/*超链接,默认图片给灰色*/
a:link img{
filter:gray;
}
/*超链接,鼠标到达的时候显示原来的颜色*/
a:hover img{
filter:""
}
</style>
</head>
<body>
<!-- <br/>*****DIV加CSS******<br/>
div元素是用来为HTML文档内大块block-level的内容提供结构和背景的元素<br/>
CSS层叠样式表单cascading style sheets,一种用来表现HTML或XML等文件式样的计算机语言<br/>
div+css是web标准中常用术语之一,通常为了说明与html网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。<br/>
简单理解:<br/>
div是用来存放内容(文字、图片、元素)的容器;<br/>
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观<br/>
使用ide来开发css(myeclipse),集成开发环境,因为有提示功能<br/>
使用span来编写<br/>
-->
<!-- 注释在window-preference下,content assist的快捷键为alt+/ -->
<span class="style1">栏目一</span><br/>
<span class="style1">栏目二</span><br/>
<span class="style1">栏目三</span><br/>
<span style="font-size:30px;color:green;">栏目四</span><br/>
<span style="font-size:30px;color:fuchsia;">栏目五</span><br/>
<a href="#"><img src="images/1.jpg"/></a><br/>
<a href="#"><img src="images/2.jpg"/></a>
</body>
</html>