走马观花记二--css

来源：互联网发布：js获取第三方物流信息编辑：程序博客网时间：2024/06/13 03:29

css是Cascading Style Sheet(层叠样式化表单)的简称，是一种格式化网页的语言。
以前在做网页时，网页的内容和样式都混在一起，这将使网页很难维护，而css的出现解决了这个问题，它专门用于网页的样式设置，使网页和样式分开。
1.css的基本语法

Code:

H3{color:red} //指定所有在<H3>标签中的内容都显示为红色。

如果多个样式规则，中间用分号隔开。
其格式分为两部分：选择器(Selector)和样式规则(Rule).
在上例中，H3为选择器，{}中的内容为样式规则。前者用来指定哪些HTML元素采用该样式规则，后者用于设置样式内容。
2.在Style属性中定义样式

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css</title>
</head>
<body style="background-color: '#0000FF'">
<a href="http://student.csdn.net"
style="color: red; font-size: 40px"> csdn学生大本营</a>
<h3 style="font-size: 50px">
h3标题
</h3>
</body>
</html>

小结：如果代码很多的话，修改起来就不太方便了，而且如果多个HTML元素使用了相同的样式，那就会产生大量的重复代码。为解决这个问题就需要将要经常用到的样式集中写在一起，就像函数一样，在需要的地方只要引用这些事先定义好的样式就可以了。
3.在HTML中定义样式
在HTML中通过<style>标签可以将HTML元素中的样式提炼出来，并且可以通过3中方式指定哪些HTML元素可以使用这些样式，这3中方式如下：
1)指定HTML元素的id
2)通过HTML元素的class属性
3)指定HTML元素的标签名

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css</title>
<style type="text/css">
.bg { //==>对应class属性
background-color: '#0000FF'
}
h3 { //直接对h3标签修饰
font-size: 50px
}
#link { //--》对应id属性
color: red;
font-size: 40px
}
</style>
</head>
<body class="bg">
<a href="http://student.csdn.net" id="link"> csdn学生大本营</a>
<h3>
h3标题
</h3>
</body>
</html>

4.在外部文件中定义样式
虽然在html中定义样式可以在一定范围上(实际就是当前页面)重用，但在不同的html页面之间，却无法共享样式，因此，css标准将样式单独写在一个.css文件中，然后通过<link>标签引用这个文件，从而达到多个html页面共享样式的目的。
引用style.css <link type="text/css" rel="stylesheet" href="style.css"/>
5.样式的继承
所谓继承，就是如果html元素未设置某些样式，但在其父元素中设置了，在子元素中就会继承父元素中的样式，代码如下：

Code:

<h3 style="font-size:50px">
<a href="#" style="color:red">#</a>

</h3>

//#####css 例子

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css9.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
a:link {font-size: 10pt; color:red; text-decoration: none}
a:visited{font-size: 9pt; color:green; text-decoration: none}
a:hover{font-size: 15pt; color:brown; text-decoration: underline}
</style>
</head>
<body>
<a href="#">有关Ajax的最新动态</a>
</body>
</html>

效果：文字超级链接点击前和点击后的颜色的改变。

【注意】在样式规则中使用伪类时，不能用圆点，而应该在伪元素和伪类之间使用冒号。