当前位置: 老葡京网站娱乐 > 网页设计 > Html教程 > 正文

HTML及CSS基础课(七) CSS: An Overview

时间:2014-11-07

老葡京网站娱乐 www.sdguanhua.com What CSS is(什么是CSS)

CSS(Cascading Style Sheets级联样式表)是一种描述你html的外观和格式的语言。

一个样式表(style sheet)是一个描述html页面看起来怎么样的文件。

我们说这些样式表是级联(cascading)的是因为这些表格可以应用超过一种的样式。例如,你想让所有的段落<p>的字都是蓝色的,但是只有其中某一个单词是红色的,CSS也可以做到这点。

只要这样子设置css文件:

p {  
    color: red;  
}  
      
span {  
    /*Write your CSS here!*/  
    color: blue;  
}

然后html文件中连接css文件后,直接使用<span>即可,就会自动设置css的样式:

<!DOCTYPE html>  
<html>  
    <head>  
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />  
        <title>Fancy Fonts</title>  
    </head>  
          
    <body>  
        <p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>  
    </body>  
          
</html>

效果图:

Why sparate from function?(为什么要把功能分开?)

有两个主要原因要把form/formating(css)和content/strutrue(HTML)分开来:

1. 可以给一种标签定制格式,以后使用这个标签就再也不需要在重写代码。

2. 可以把同一种样式表应用在多个html文件中,而不要重写代码

If it's in, it's out!(引用css文件)

在之前的课程中学习了html内联样式(inline styling),例如:

<p style="color:red">Red font!</p>

如果用这种方法制作网页,那么将会很可怕:你必须要写非常多相同的代码,这样会让html文件变得很大!而且如果要改变风格,那么就需要改变所有的代码!而如果使用css文件的话,只需要修改这个文件就可以了,多么轻松!

有两种方法给html文件设置css:

1.  内置在html中,即放在在html文件的<head>标签内,把css内容放在<style>标签内。

例如:

<span style="font-size:14px"><!DOCTYPE html>  
<html>  
    <head>  
        <style>  
            p {  
                color: purple;  
            }  
        </style>  
        <title>Result</title>  
    </head>  
    <body>  
        <p>Check it out! I'm purple!</p>  
    </body>  
</html></span>

更多精彩内容:http://www.sdguanhua.com/web/Html/