怎样使用CSS技术美化网页？（知识点1）

怎样使用CSS技术美化网页？（知识点1）

案例1：文字Logo，如图1

图1

知识引入

一.认识CSS

1. 使用HTML标签属性对网页修饰的方式存在很大的局限和不足，因为所有的样式都写在标签中，这样不仅不利于阅读代码，维护代码还会变得很困难。要想使网页变得美观、大方、维护方便，就需要使用CSS实现结构与表现得分离。结构与表现分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设置。
2. CSS非常灵活，既可以嵌入HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，必须以“.css”为后缀名，如图2和图3

图2（嵌入HTML文档）

图3（单独的外部文件）

二.CSS样式规则

       1.语法规则如下：选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；····……}

        2.选择器用于指定需要修改样式的HTML标签。花括号内是一条或多条声明。每条声明由一个属性和一个属性值组成，以“键值对”的形式出现。

        3.其中，属性是对指定标签设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用“：”连接，多个声明之间用“；”进行分隔，如图4.

图4

三.CSS代码结构特点

       1.CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般选择器、声明都采用小写的方式。

       2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省4略，但是为了方便增添新样式最好还是要保留。

        3.如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性加上英文状态下的引号，例如：p{font-family:”Times  New Roman”;}

        4.在编写过程中，可以适当的添加一些注释，例如：p{font-family:”Times  New Roman”;}

/*这是CSS注释文本，有便于查找代码，注释不会在浏览器中显示*/

       5.CSS代码中空格是不会被解析的，花括号和分号前后的括号可有可无。因此可以使用”Space”键、”Tab” 键、”Enter” 键等对样式代码进行排版，即格式化CSS代码，例如：

代码1：p{font-size:35px; color:blue;text-align:center;}

代码2：p{

font-size:35px;  /*定义文本字体大小*/

         color:blue;     /*定义文本颜色*/

         text-align:center; /*定义文本居中*/

}

上述两段代码所呈现的效果是一样的，但是代码2中可读性更高。

      6.注意：属性和属性值之间不允许出现空格，否则浏览器解析时会出现错误，例如：

p{font-size:35  px;}    /*这段代码就是错的，因为属性和属性值之间有空格*/

四.以上就是使用CSS技术美化网页的知识点1内容了，下一篇文章我们接着讲知识点2，然后做一个小案例来演示。