• 即将更新图形学,编译原理,机器学习等文章,谢谢关注~
  • 由于算法限制,搜索时注意简化关键字,谢谢支持~
  • 网站不兼容IE5.0及以下,请使用主流浏览器访问.
  • HTML与CSS组织静态网页

    如果说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代码运行器

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

    评论

    OmegaXYZ