css是Cascading Style Sheet(层叠样式化表单)的简称,是一种格式化网页的语言。
以前在做网页时,网页的内容和样式都混在一起,这将使网页很难维护,而css的出现解决了这个问题,它专门用于网页的样式设置,使网页和样式分开。
1.css的基本语法
- H3{color:red} //指定所有在<H3>标签中的内容都显示为红色。
如果多个样式规则,中间用分号隔开。
其格式分为两部分:选择器(Selector)和样式规则(Rule).
在上例中,H3为选择器,{}中的内容为样式规则。前者用来指定哪些HTML元素采用该样式规则,后者用于设置样式内容。
2.在Style属性中定义样式
- <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元素的标签名
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>css</title>
- <!-- 1.在选择器前加实心点(.)表示这个选择器的名可以放在HTML元素的class属性中-->
- <!-- 2.选择器名一样即可-->
- <!-- 3.在选择器前加井号(#)表示这个选择器就是一个id属性值,任何一个Html元素只要他的id属性值为选择器名,就会应用这个样式-->
- <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元素未设置某些样式,但在其父元素中设置了,在子元素中就会继承父元素中的样式,代码如下:
- <h3 style="font-size:50px">
- <a href="#" style="color:red">#</a>
<!--a标签为设置font-size样式,而其父元素<h3>设置了font-size样式,因此,<a>也会应用font-size样式-->
</h3>
//#####css 例子
- <!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>
效果:文字超级链接点击前和点击后的颜色的改变。
【注意】在样式规则中使用伪类时,不能用圆点,而应该在伪元素和伪类之间使用冒号。