CSS美化网页

使用CSS技术美化网页

HTML存在很大的局限和不足。

3.1【案例4】数字变色Logo

1.认识CSS

实现结构与表现的分离。CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文档，如果是独立的文档，则必须以.css为后缀。

CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。

1
2
3
4
5
6
7
<style type="text/css">
	p{
		font-size:36px;
		color:red;
		text-align:center
	}
</style>

优势：节约成本、提高性能

2.CSS样式规则

具体语法规则如下

1
2
3
4
选择器{
		属性1：属性值1；
		属性2：属性值2；
	}

特点

  • 严格区分大小写。

  • 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是最好保留。

  • 如果属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

    1
    p {font-family:"Times New Roman";}

  • 可以使用“/注释语句/”来进行注释

    例如，上面样式代码可添加

    1
    2
    p {font-family:"Times New Roman";}
    /* 这是CSS注释文本，有便于查找代码，此文本不会显示在浏览器窗口中 */

  • CSS中空格是不会被解析的，花括号以及分号前后的空格可有可无。因此可以使用空格键、tab键对样式进行排版。

3.引入CSS样式表

要想使用CSS修饰网页，就需要在HTML文档中引入CSS样式表。CSS提供4种引入方式，分别为行内式、内嵌式、外链式、导入式。

(1)行内式

行内式也被称为内联样式，是通过标签的style属性来设置标签的样式，其基本语法格式如下。

1
<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容</标签名>

行内式也称内联样式，

内嵌式

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法如下。

1
2
3
4
5
<head>
<style type="text/css">
	选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>

外链式

外链式也称链入式，是将所有的样式放在一个或多个以”.css”为扩展名的外部样式表文件中，通过link/标签将外部样式表文件连接到HTML文档中，其基本语法格式如下。

1
2
3
<head>
<link herf= "CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

link/标签需要放在head头部标签中，并且必须指定link/标签的3个属性，具体如下。

导入式

导入式与外链式相同，都是将样式存放在外部样式表文件中。对HTML头部文档应用style标签，并在style标签内的开头处使用@import语句，即可导入外部样式表文件，其基本语法格式如下。

1
2
3
4
<style type="text/css">
	@import url(css文件路径)；或@import "css文件路径"；
	/*在此处还可以存放其他的CSS样式*/
</style>

4.CSS基础选择器

(1)标签选择器

(2)类选择器

(3)id选择器

(4)通配符选择器

3.2【案例5】美食专题栏目

image-20240427164652653