javascript网页开发 第三章 CSS
来源：互联网 发布：新生报到管理系统源码 编辑：程序博客网 时间：2024/05/29 09:24
第三章 CSS
3.1 CSS的几种设置
3.1.1 内联样式表
3.1.2 嵌入样式表
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css" media="screen, projection">
<!--
P
{
FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY:宋体;LIST-STYLE-TYPE:circle;TEXT-DECORATION:underline；
}
-->
</style>
</head>
<body>
<p>sdfsdf</p>
</body>
</html>
3.1.3 外部样式表i
StyleSheet.css
P
{
FONT-SIZE:20pt;
COLOR:blue;
FONT-FAMILY:宋体;
LIST-STYLE-TYPE:circle;
TEXT-DECORATION:underline;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen" />
</head>
<body>
<p>This is a css test.</p>
</body>
</html>
3.1.4 输入样式表
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css" media="screen" >
<!--
@import url(http://www.it315.org/style.css);
@import url(/stylesheets/style.css);
P{ background-color:yellow;color:black;}
-->
</style>
</head>
<body>
<p>This is a css test.</p>
</body>
</html>
3.2 样式规则的选择器
3.2.1 HEML selector
就是HEML标签
3.2.2 class selector
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
p.stop{color:red;}
p.warning{color:yellow;}
p.normal{color:green;}
-->
</style>
</head>
<body>
<p class="stop">paragraph1</p>
<p class="warning">paragraph2</p>
<p class="normal">paragraph3</p>
</body>
</html>
3.3.3 ID selector
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
#yellowone{color:red;}
-->
</style>
</head>
<body>
<span id="yellowone">text here</span>
</body>
</html>
3.3.4 关联选择器
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>文本标签的综合例子</title>
<style type="text/css">
<!--
p i{backgrond-color:yellow;color:red;}
-->
</style>
</head>
<body>
<p><i>斜体字文本</i></p>
</body>
</html>
3.3.5 组合选择器
<head>
<title>无标题页</title>
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6{background-color:yellow;color:red;}
-->
</style>
</head>
<body>
<div>
<h1>H1</h1>
<h2>H2</h2>
</div>
</body>
</html>
3.3.6 伪元素选择器
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<style type="text/css">
<!--
A:link {color:red;}
A.active {color:red;font-size:125%;}
A.visited {color:red;font-size:80%;}
A.first-line {font-variant:small-caps;font-weight:bold;}
A.first-letter {font-size:300%;float:left}
-->
</style>
</head>
<body>
<p>
<a href="HTMLPage.htm">第一页</a>
</p>
</body>
</html>
- javascript网页开发 第三章 CSS
- Web开发网络课堂第三讲：DIV+CSS网页标准化布局
- javascript网页开发 第二章
- 网页设计与开发——HTML、CSS、JavaScript
- javascript网页开发 第四章 JavaScript语法
- 实用网页技术(javascript+CSS)
- 实用网页技术(javascript+CSS)
- javascript网页开发 第一章
- 网页开发基础知识 HTML + CSS
- Javascript 网页开发—体验式学习教程(1) html 和 CSS
- 使用HTML语言和CSS开发商业站点第三章
- javascript+css实现自定义网页右键菜单
- Javascript+css 实现网页换肤功能
- 用JavaScript修改网页css样式
- Javascript+css 实现网页换肤功能
- 网页换肤功能实现，Javascript+css
- Javascript+css 实现网页换肤功能
- JavaScript+CSS实现网页换肤功能
- 刚才先入为主到了令人发指的地步
- Thinking in life（1）
- 做互联网最重要的是希望！ 【水木周平】
- [翻译]-Windows CE 程序设计 (3rd 版)--5.2 公共控件(十二)
- linux学习初步－－网上内容摘抄
- javascript网页开发 第三章 CSS
- javascript网页开发 第四章 JavaScript语法
- 重定向与转发的差异
- Effective C++中的条款
- 学习自定义标签时老出错
- SIMD（SSE、）优化的数据对齐
- C码游戏
- ASP的第一天的结束，把自己看的视频内容草草的记了一下！若有高手谢谢指点！
- Servlet 线程安全
