HTML与CSS组织静态网页

本文共1059个字,预计阅读时间需要3分钟。

如果说HTML是搭建房子的原材料,比如钢铁,水泥,木头,那么CSS则是房子的设计图纸,也就是房子的样式,是古典园林风格还是哥特式建筑。

因此HTML与CSS是相辅相成的,只有HTML没有CSS,那么做出来的网页可读性差,交互性也差,缺乏美。只有CSS而没有HTML那么网页根本就是空谈。

下面用HTML于CSS搭建一个静态网页。

注意以下的元素可以理解为标签。

合法的HTML5

  • ①一定要以<!doctype html>开头除非你在写HTML4和XHTML。
  • ②<html>元素不能没有它,这是Web页面最顶层元素或者叫根元素,其它所有元素都嵌套其中。
  • ③要使用head和bodyhead中要指出编码方式。
  • ④head中一定要有title 。

CSS嵌入HTML

CSS嵌入HTML有两种方式,一种是在head中用style标记。

另外一种使用link标记,CSS中的rel属性指定了HTML文件与所链接文件之间的关系,即我们要创建一个样式表。

注意点:

样式表的顺序很重要,下面的会覆盖上面的

元素的ID

可以为任意元素增加一个ID属性,这样可以利用CSS为每个元素做不同的设计。

例如我为div指定一个属性

<div id=”main”></div>

元素的类

可以为不同元素指定一个类

<span class=”slogan”></span>

这里的span的类就是slogan

元素的CSS

用CSS为每个元素做不同的设计可以有以下几种方法(给出最常用的几种)

①对指定的元素进行设计(不使用ID)

②根据ID进行设计

假设一个元素的ID是main

例如:<div id=”main”></div>

则CSS为:

③根据类进行设计

假设一个元素的类是slogan

例如:<span class=”slogan”></span>

则CSS为:

④可以用逗号为不同的元素指定相同的CSS。

实例

HTML

CSS

效果:(有点丑)

复制代码尝试一下

HTML/JS代码运行器

读者评分
[评分人数: 2 平均分: 5]

评论

OmegaXYZ