层叠样式表CSS

2020-06-23 作者: 硬汉无敌

HTML语言只能搭起网页的基本结构。如果希望网页能够美观、大方,并且升级和维护轻松方便,单单靠HTML是不够的。这样CSS就应运而生了,它在这中间扮演着非常重要的角色。

CSS是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS通常在网页制作中起重要作用,它不仅可以减少网页代码量,还可以提高网页的访问速度。

CSS有三种使用方式:

1、直接在HTML标记的【style属性】上定义,如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Keywords" content="">
  6. <meta name="Description" content="">
  7. <title>sample01</title>
  8. </head>
  9. <body>
  10. <h2 style="color:red;">Hello world!</h2>
  11. </body>
  12. </html>

2、定义在HTML的【style标记】里,如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Keywords" content="">
  6. <meta name="Description" content="">
  7. <title>sample01</title>
  8. </head>
  9. <style>
  10. h2{
  11. color:red;
  12. }
  13. </style>
  14. <body>
  15. <h2>Hello world!</h2>
  16. </body>
  17. </html>

3、定义一个【css文件】,然后引入,如下:

写一个style.css文件

  1. /**
  2. * style.css
  3. **/
  4. h2{
  5. color:red;
  6. }

将它引入HTML文档

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="Keywords" content="">
  6. <meta name="Description" content="">
  7. <title>sample01</title>
  8. </head>
  9. <link type="text/css" href="style.css" rel="stylesheet">
  10. <body>
  11. <h2>Hello world!</h2>
  12. </body>
  13. </html>