html - 将一个 css 文件连接到多个 html 页面

标签 html css

我正在为我的主页创建一个外部 CSS 文件。唯一的问题是我知道如何修复一个 HTML 页面的问题,但不知道如何修复其余页面。

在“联系”页面上,我脑子里有这个。

<link rel="stylesheet" type="text/css" href="test.css"/>

但我想将其他页面也连接到这个 CSS 文件。 你是怎么做到的?

最佳答案

完全一样。 <head></head>之间每个页面的标签,放:

<link rel="stylesheet" type="text/css" href="test.css" />

我经常会使用 CSS 注释将 CSS 文件分成多个部分,如下所示:

/*   General  */
    .header{ width:50px;etc.}
    .nav {width:50px;etc}

/*  Home Page Only  */
    #mainPic {width:50px;etc}
    #somethingElse {width:50px;etc}

/*  Page 2  */
    .img {width:50px;etc}
    #menu {width:50px;etc}

请记住,如果您在两个页面(同一 CSS 文件的两个不同区域)上有同名的元素,第二个将覆盖第一个:

/*  Home Page Only  */
    #mainPic {width:50px;}
    #somethingElse {width:50px;etc}

/*  Page 2  */
    .img {width:50px;etc}
    #mainPic {width:333px;}

在上面的示例中,两个页面上的#mainPic 元素的宽度均为 333 像素。因此,只对具有相同 CSS 的元素使用相同的 ID 或类名。如果 CSS 发生变化,请更改其中一个名称:

    #mainPic2 {width:333px;}

关于html - 将一个 css 文件连接到多个 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37669732/

相关文章:

javascript - 输入类型范围内的进度条

javascript - 通过 2 个下拉菜单获取对象数据 + 更新问题

html - 表格列宽和溢出设置不起作用

html - 在 div 内垂直居中图像不起作用

php - 无法在 MySQL 表中插入图像记录

css - 图片在移动设备上没有变化

javascript - 如何在 null 上设置颜色输入的值

css - Angular Material 垫网格瓷砖高度

css - 是否有 CSS 父级选择器?

javascript - 如何隐藏 javascript window.open 地址栏/位置栏?