CSS层叠样式表—style—type
1.css
一般情况在总的CSS中使用import将其他CSS导入，在html中将这个总的CSS使用link导入。
id选择器
组合关联选择器
小练习
CSS的四种方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<!--CSS第一种方式：每一个html都有一个style属性-->
<body>
<h1 style="font-size:16px; color:#00FFCC">景天小志</h1>
<h2 style="font-size:18px; color:#663399">哈哈</h2>
<h2 style="font-size:18px; color:#663399">哈哈</h2>
<h2 style="font-size:18px; color:#663399">哈哈</h2>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--CSS第二种方式：
<head>
<style type="text/css">
CSS代码：选择器{属性名:属性值;属性名:属性值}// 属性值有font-size:16px;color:#0000ff
</style>
</head>
-->
<!--简单点来说就是:style type 选择器 { }-->
<title>无标题文档</title>
<style type="text/css">
h1{font-size:28px; color:#FF66CC}
h2{font-size:36px; color:#66CCFF}
</style>
</head>
<body>
<h1>景天小志</h1>
<h2>紧张高效学习</h2>
<h2>淡定思考</h2>
<h2>功能实现</h2>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" href="1.css" type="text/css" />
</head>
<!--CSS第三种方式:建立一个css文件，然后使用link标签：link rel href type-->
<body>
<h1>hello css</h1>
<h2>HELLO CSS</h2>
</body>
</html>
1.css
h1{font-size:28px; color:#FF00FF}
h2{font-size:36px; color:#66CCFF}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
@import url("1.css");
</style>
</head>
<!--CSS第四种方式:建立一个css文件，然后
<style>
@import url("1.css");
</style>
-->
<body>
<h1>hello world</h1>
</body>
</html>
一般情况在总的CSS中使用import将其他CSS导入，在html中将这个总的CSS使用link导入。
类选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p.comment{font-size:42px; color:#ff6699}
p.code{font-size:39px; color:#00ff00}
</style>
</head>
<body>
<p class="comment">这是一个java程序</p>
<pre>
<p class="code">
public class Hello
{
public static void main(String args[])
{
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
<!--
<html>
<head>
<style type="text/css">
.code{font-size:16pt;color:red}
</style>
</head>
<body>
<h1 class="code">//第一个Java程序</h1>
<pre>
<P class="code">
public class Hello {
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
</P>
</pre>
</body>
</html>
-->
id选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#code{font-size:36px; color:#00CC00}
#comment{font-size:24px; color:#0000FF}
</style>
</head>
<body>
<p id="code">这是一个java程序</p>
<pre>
<p id="comment">
public class Hello
{
public static void main(String args[])
{
System.out.println("Hello World!");
}
}
</p>
</pre>
</body>
</html>
组合关联选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
h1,p{font-size:30;color:red}<!--逗号,组合选择器-->
p a{font-size:45;color:yellow}<!--空格，关联选择器-->
</style>
</head>
<body>
<h1>//第一个Java程序</h1>
<pre>
<P>
public class Hello {
public static void main(String args[]) {
System.out.println("Hello World!");
}
}
</P>
</pre>
<p>
<a name="test">hello</a>
</p>
</body>
</html>小练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<!--组合选择器，类选择器，关联选择器,伪标签-->
<style type="text/css">
h1{font-size:16px; color:#3300CC}
h2,h3,h4,h5{font-size:26px; color:#CC33FF}
p.a{font-size:36px; color:#FF00CC}
p.b{font-size:36px; color:#FFCC00}
div b{font-size:36px; color:#CC33FF}
div i{font-size:36px; color:#33FFCC}
a:link;a:visited{
color:#00FF00;
text-decoration:none
}
</style>
</head>
<h1>天涯 </h1>
<h2>风到这里就停</h2>
<h3>风到这里就停</h3>
<h4>风到这里就停</h4>
<h5>风到这里就停</h5>
<hr/>
<p class="a">因为爱情</p>
<p class="b">怎么会有沧桑</p>
<hr/>
<div>
因为<b>爱情</b> 断<i>桥</i>残<i>雪</i>
</div>
<br/>
<a href="#" οnclick="alert('hahaha')">点点看啊</a>
<body>
</body>
</html>
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
