走马观花记二--css

youshini

浏览: 210916 次
性别:
来自: 广州

最近访客更多访客>>

xiaguangme

chenglibang

jdzctais

horsehome

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

CSS HTML Ajax .net

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

Code:

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

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

Code:

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>css</title>
</head>
<bodystyle="background-color:'#0000FF'">
<ahref="http://student.csdn.net"
style="color:red;font-size:40px">csdn学生大本营</a>
<h3style="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>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>css</title>
<styletype="text/css">
.bg{ //==>对应class属性
background-color:'#0000FF'
}
h3{ //直接对h3标签修饰
font-size:50px
}
#link{ //--》对应id属性
color:red;
font-size:40px
}
</style>
</head>
<bodyclass="bg">
<ahref="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:

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

</h3>

//#####css 例子

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>css9.html</title>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8">
<styletype="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>
<ahref="#">有关Ajax的最新动态</a>
</body>
</html>

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

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

分享到：

java中的UDP编程【转】 | 第8章判断＆第7章练习

2010-04-28 00:52
浏览 760
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论