牛腩之CSS简介 - 技术教程

在没有接触CSS之前，我们使用Html写网页是这样写的：

<span style="font-size:18px;"><!DOCTYPE html>
<html >
<head>
   <title>CSS测试</title>
</head>
<body>
   <center>                                    <!--内容居中显示  -->
   <font size="20px" color="red" >             <!--设置字体的大小和颜色  -->
       <strong>                                <!--字体加粗  -->
           <u>                                 <!--加下划线  -->
                HTML是一种标记语言             <!--主体内容 -->
           </u>
       </strong>
   </font>
   </center>
</body>
</html></span>

运行结果如下：

这样写出来的网页灵活性几乎没有，如果我们要更改网页的显示效果，那么我们就要找到网页源码相应的地方进行修改，如果这样的网页有成千上万个，难道我们就这样一个一个滴慢慢滴去修改吗？NO！

传统的写法将内容与样式写在了一起，用我们的俗话说就是写死了，可维护性实在是太差了。我们应该想办法让文字内容与其显示的效果的定义分开，这时候CSS来了，它的最大特点就是将Web页面的内容和样式进行分离，从而能够灵活的修改页面显示效果，这个类似于我们之前接触过的配置文件config。具体如何做呢？往下看

首先要添加一个样式表，如下图所示

然后在StyleSheet1.css里面写如下代码：

<span style="font-size:18px;">body {
    font-size :40px;                /*设置字体大小*/
    color :blue ;                   /*设置字体颜色*/
    text-decoration :underline ;    /*设置字体加下划线*/
    font-weight :bold ;             /*设置字体加粗*/
    text-align :center ;            /*设置字体居中显示*/
}</span>

之后我们对html文件里的代码进行修改:

运行结果如下：

类选择器和ID选择器的定义如下图所示：

相关文章：

你感兴趣的文章：

标签云：