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