开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用两个不同的全局css为不同的页面下一个js？

在前端开发中，可以使用两个不同的全局CSS文件为不同的页面下一个JS文件。

首先，全局CSS文件是指应用于整个网站的样式文件，包含了网站的通用样式。而在不同的页面中，可能需要使用不同的全局CSS文件来定制页面的特定样式。

一种常见的做法是在HTML文件中引入全局CSS文件，并将其放置在页面的<head>标签中的<link>元素中。对于不同的页面，可以在HTML文件中分别引入不同的全局CSS文件。

例如，我们有两个全局CSS文件分别为"style1.css"和"style2.css"。在页面1中，我们想要使用"style1.css"作为全局CSS文件，可以在页面1的HTML文件中添加以下代码：

<head>
  <link rel="stylesheet" href="style1.css">
</head>

而在页面2中，我们想要使用"style2.css"作为全局CSS文件，可以在页面2的HTML文件中添加以下代码：

<head>
  <link rel="stylesheet" href="style2.css">
</head>

这样，在不同的页面中引入不同的全局CSS文件后，下一个JS文件将会自动应用对应页面的全局CSS样式。

需要注意的是，这种做法只会将全局CSS样式应用于当前页面，不会影响其他页面的样式。同时，确保全局CSS文件的路径正确，并且在引入JS文件之前引入对应的CSS文件。

关于腾讯云相关产品，我无法直接给出产品介绍链接地址，建议您访问腾讯云官方网站查询相关产品信息。

相关搜索:如何在不同页面上使用不同颜色的电信链接css 在网站的不同页面中应用不同的.css js判断不同的页面在不同的页面上为不同的用户角色创建两个不同的Woocommerce注册表单？如何将不同的HTML部分显示为网站的不同页面 Mikehaertl wkhtmltopdf为不同的页面设置不同的选项为站点中的不同页面设置不同的htpasswd CSS固定位置对不同的页面有不同的作用 Xamarin Forms -如何创建可以跨不同页面使用的全局list<object>？以不同的方法使用全局控件为不同的客户使用不同的主题 UTM参数显示为不同的页面如何通过不同的topOffset在页面的不同部分使用scrollIt.js？Cordova/Phonegap为不同的页面设置不同的设备方向为不同的数据图表js创建不同的标签如何在react Js中管理不同布局的不同css样式？在css中为两个不同的闪烁类创建两种不同的样式如何通过CSS根据页面方向显示不同的图片？使用css悬停不同的对象使用相同的页面模板在不同页面上加载不同的表单

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【面试题解】vue-router有几种钩子函数？具体是什么及执行流程是怎样的？

顾名思义，是要定义在全局的，也就是我们 index.js 中的 router 对象。

01

简说H5与App如何通讯

现在不管是「桌面客户端」还是「移动客户端」，都会夹杂着一部分H5页面，这种混合式的应用也是我们常说的「Hybrid App」。为什么会出现「Hybrid App」呢，早期是因为开发一个Android或iOS的客户端，需要的人力成本比较大，开发周期比较长，后来有些团队就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的Webview来展示。

03

web前端开发初学者十问集锦（4）

利用JS来控制页面控件的显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

02

全方位解析浏览器渲染原理

很久之前就想关于浏览器渲染原理做一份总结性文章。之前也看过网上不少这个方面的文章，关于浏览器渲染机制的原理文章非常多但是总是觉得差那么一点意思，没有串联整个流程。所以这里打算串联这两部分，从原理和实践出发讲解他们背后的含义。

04

逐帧分析youtube

接下来我会逐个请求分析youtube究竟使用那些国内大家不那么常用的技术，因为点会比较多我在正文中就不一一详细介绍了但都会配上相关阅读连接，我只会对与带来关键性能提升的部分做展开分析。

02

微信小程序面试题总结

大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

06

谈一谈|个人博客网站开发记录二

(https://mp.weixin.qq.com/s/oCNcDHHw3ex8XB5-XmlbaA)

03

浏览器原理

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

02

VUE练习题【详解】

Vue实例对象通过_____ new _____ 方式来创建。 Vue初始数据在实例对象的_____data_____ 参数中进行定义。 Vue实例对象中el参数表示_____ 唯一根标签_____ 。 Vue中实现双向数据绑定的指令是_____ v-model_____ 。 Vue事件绑定指令是_____ v-on_____ 。

01

Web前端知识体系精简

Web前端技术由html、css和javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

03

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局（重要）4. 重绘与重排（重要）5. paint（绘制）6. composite（重要）7. 浏览器加载

身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。

04

零基础学习weex（三）weex工程及工具

本篇内容：

 Weex的项目结构
 npm
 webpack
 ESLint
 Devtools

02

CSS Modules入门教程

或者可以这么说，CSS Modules为我们解决了什么痛点。针对以往我写网页样式的经验，具体来说可以归纳为以下几点：

04

超详细的Web 前端知识体系，等你来挑战！

作为苦逼的IT行业，没日没夜的加班，妹纸也少的可怜，就算在一个班办公室或者一个部门，可能也只有一个妹纸，但估计也轮不到你来上，只能眼巴巴的放着光。可是程序猿一直以老实、踏实、多金等美名著称。只要你学的

07

前端优化带来的思考，浅谈前端工程化

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：

02

手把手教你写一个简易的微前端框架

最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。

04

webpack入门指南

1. 导语 github仓库 https://github.com/Rynxiao/webpack-test 1.1 什么叫做webpack webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. 简单的概括就是：webpack是一个模块打包工具，处理模块之间的依赖同时生成对应模块的静态资源。 1.2 web

04

以常见业务为中心的Vue面试题，真香！

如果你遇到h5页面这个问题，当输入框在最底部，点击软键盘后输入框会被遮挡，可以如下解决问题：

03

CSS的选择器

CSS基础选择器标签选择器就是用标签名来当做选择器。 1）所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2）不管这个标签藏的多深，都能够被选择上。 3）选择的是所有的，而不是某一个。所以是共性，而不是特性。 id选择器 #表示选择id 1 #lj1{ 2 font-size: 60px; 3 font-weight: bold; 4 color:black; 5 } 1）任何的标签都可以有

02

前端优化带来的思考，浅谈前端工程化

这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：

03

前端系列第5集-Vue系列

Vue是一款流行的前端JavaScript框架，它采用了MVVM（Model-View-ViewModel）设计模式。Vue具有易学易用、高效灵活等特点，可以帮助开发者构建交互性强、响应式、可维护的Web应用程序。

02

# 微信小程序开发之-初试

1、工具工具使用微信开发平台提供的微信web开发者工具：官方连接 2、初试创建微信小程序 image.png image.png 因目前为测试学习阶段，我们没有AppID,点击无AppID即可，无

03

2.2K Star开源专为程序员打造的记事本

01

浅析$nextTick和$forceUpdate

vue中提供了数十种api供我们开发者日常使用，而常用的其实也就十多种，比如setup, mount, forceupdate, nextTick, compute, ref等，这些参数有的是在生命周期中进行管理，有的是在页面执行过程中，更新参数，有些是可以用来检测页面数据，这些随着项目的推进或多或少都是会使用到。其中nextTick和forceUpdate都是用来更新参数的，那这两个参数有什么差异呢？这还真值得仔细琢磨。

00

SPA页面初试

之前一直很好奇，SPA应用到底是怎么实现的，昨天无意间看到了有一篇介绍的文章，就想着来试一下水(以下根据我的理解所写，可能会让你看的云里雾里，如果想加深了解，最好先了解下window.location.hash是什么东西) 其实，SPA的原理就是，一开始将一些必要的页面都加载进来，当你在页面输入别的路由的时候，其实还是待在当前的页面，只不过是他识别出你想要去的地址，然后将那个页面的内容获取到，替代掉当前页面的内容，并且相应的改变url地址，这样给人看起来就好像到了另一个页面，实际上你还是在这个页面里，没有离

02

从源码看微信小程序启动过程

接触小程序一年多，真实体验就是小程序开发门槛相对而言确实比较低。不过小程序的开发方式，一直是开发者吐槽的，如习惯了 Vue，React 开发的开发者经常会吐槽小程序一个 Page 必须由多个文件组成，组件化支持不完善或者说不能非常愉快的开发组件。在以前小项目中没太大感觉，从加入有赞，参与有赞微商城小程序的开发，是真切的体会到对于大型小程序项目开发的复杂性。

02

前端性能优化的七种方法是_web前端性能

前端性能优化主要有七种方法，包括减少请求数量、减少资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和webpack优化

01

Vue.js笔试题解决业务中常见问题

如果你遇到h5页面这个问题，当输入框在最底部，点击软键盘后输入框会被遮挡，可以如下解决问题：

01

WEB前端知识体系精简

Web前端技术由html、css和 javascript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

04

Vue（七）SPA 单页面及应用方式「建议收藏」

单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用。

02

Skyline 渲染引擎——更接近原生渲染的性能体验

小程序一直以来采用的都是 AppService 和 WebView 的双线程模型，基于 WebView 和原生控件混合渲染的方式，小程序优化扩展了 Web 的基础能力，保证了在移动端上有良好的性能和用户体验。Web 技术至今已有 30 多年历史，作为一款强大的渲染引擎，它有着良好的兼容性和丰富的特性。尽管各大厂商在不断优化 Web 性能，但由于其繁重的历史包袱和复杂的渲染流程，使得 Web 在移动端的表现与原生应用仍有一定差距。

05

那就讲讲所谓的vue-ssr（服务端渲染）的来龙去脉吧！

最近单位要为了seo改造 ssr，需要前期做个调研，作为股肱之臣的我（也可能是头号混子）身先士卒接受了这个任务，

01

浅谈移动端页面无刷新跳转问题的解决方案

浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘最近开发微信公众号，用的框架是一般的 UI，但是涉及到多页面之间的相互跳转的问题，降低了浏览器的性能，用户体验特别不好，卡顿，不流畅,因此不采用传统的页面跳转方式，看到不少手机网页开发的框架都都是在一个html文档中包涵多个页面的内容，每页放到不同的里面。于是采用当下流行的单页面模，在做pc网页的时候一般都直接给链接的。比起用链接来跳转页面，这样做也是有很多好处的（比如appjs,jquery Mobile) 这种web形式在如

04

进阶 | JS运行机制最全面的一次梳理！

前端爱好者的聚集地最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍，欢迎转发！展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系，重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。内容是：从浏览器进程，再到浏览器内核运行，再到JS引擎单线程，再到JS事件循

03

Gulp开发教程（翻译）

对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用正确的工具自动完成，从而使效率大大提高，这是让很多开发者觉得有趣的地方。

04

浏览器渲染原理

浏览器收到的其实就是HTML文件，只有HTML格式浏览器才能正确解析。接下来就是浏览器的渲染过程。

02

【腾讯云前端性能优化大赛】秒开的艺术：Hexo 博客首屏耗时优化实践

Hexo 是一款基于 Node.js 的静态博客生成器。有别于传统的 WordPress、Typecho 等由服务端渲染的动态博客程序，Hexo 可以遍历博客的各个页面，将博客文章等内容渲染到主题（即页面模板）之中，生成全部页面的 HTML 文件及其引用的 CSS、JS 等静态资源。这些静态资源文件常常通过托管到 Pages、托管到对象存储或者自建 Nginx 服务器的方式来对外提供访问。

impress.js 源码分析

之前做展示用幻灯片，我一直热衷于使用PPT，刚开始学习PPT时总是强行使用各种页面特效，越做越复杂。现在看来，学技术大概都要经历一个从简到繁再到简的过程吧。后来，无意间接触到prezi，被它强大的展示逻辑所折服，但用了段时间，发现使用prezi破解版有诸多不便，最关键的是，除了很炫的转场特效，单页的设计感不及PPT，总感觉不尽如人意。总结下，PPT的单页设计感强，普及率高；prezi的展示思路清晰，变现力强，跨平台，但制作流程稍显不便。最近，学习H5+CSS3时我突发奇想，为何不用H5来做幻灯片展示呢？刚开始两天，纯靠自己手写页面和转场，不是一般累。我试图去抽取常用的公共方法，尝试做成框架组件的形式，发现工作量巨大，而且以自己目前水平，写出来的代码通用性很差。在Google上搜索时，我发现了impress.js的存在，与我的设想不谋而合，于是乎……不再自己造轮子，又花了两天时间熟悉使用impress.js来设计幻灯片，效果完全超越了我的预期。 impress.js简单来说仅仅是实现了幻灯片的转场特效的框架，虽说将单页限制在框架之内，但所有单页还是需要自己用代码设计。虽然花费的时间远远超过了PPT和prezi，但是能够完全使用代码来定制幻灯片，能够使用几乎每台电脑必备的浏览器放幻灯片，何尝不是一种幸福！花了一天探索了下impress.js源码，其实并不复杂，个人感觉收获颇丰，以下阐述我的收获。

02

一统江湖的大前端（5）editorconfig + eslint——你的代码里藏着你的优雅

各种命名风格，各种冗余代码，各种缩进风格，各种奇葩注释和各种没有注释，眼中有码，心中无码，只有心累两个字，项目的整洁度会受到很多客观因素的影响，为了自己的身心健康，我们应该试图将这种影响降到最低。简单地说，统一格式和风格的代码让人更加赏心悦目，更不容易让你产生想摔键盘的冲动;用一个B格更高的词语，叫做“熵减”，也就是降低团队产出代码的无序性，如果你想在未来成为一名合格的前端架构师，这将是你的工作目标。

03

利用 Web Animation API 制作一个切换英语单词的交互动画

https://github.com/comehope/front-end-daily-challenges

04

express新手入门指南

Node.js 已经成为 Web 后台开发圈一股不容忽视的力量，凭借其良好的异步性能、丰富的 npm 库以及 JavaScript 语言方面的优势，已经成为了很多大公司开发其后台架构的重要技术之一，而 Express 框架则是其中知名度最高、也是最受欢迎的后端开发框架。在这篇教程中，你将了解 Express 在 Node 内置 http 模块的基础上做了怎样的封装，并掌握路由和中间件这两个关键概念，学习和使用模板引擎、静态文件服务、错误处理和 JSON API，最终开发出一个简单的个人简历网站。

02

现代浏览器的渲染流程

当浏览器的网络线程收到html文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

【微前端】qiankun 到底是个什么鬼

在上一篇文章【微前端】single-spa 到底是个什么鬼[1] 聊到了 single-spa 这个框架仅仅实现了子应用的生命周期的调度以及 url 变化的监听。微前端的一个特点都没有实现，严格来说算不上微前端框架。

02

js基础

一个html页面由那几部分组成的？ html(超文本标记语言)、css(层叠样式表)、js(动态脚本语言)(操作页面上所有元素，让元素具有动态的效果) 前端工程师工作的内容：拿到UI设计图：切图---->html+css静态布局----->用js写一些动态效果----->ajax和后台进行交互，把数据绑定到页面上---->用nodejs服务平台做源代码的管理---->用nodejs做后台用到的开发工具有： Dw、sublime、webstrom、hbuild、eclipse...... 将css引

03

webpack（4.8.3）总结

前言：webpack4从入门到高阶配置，本文先讲述webpack4的安装、基础配置、进阶配置，高阶配置放置下篇讲述。

04

前端基础精简总结

ES5: String、Number、Boolean、Null、Undefined、Object ES6增: Symbol 其中，object为引用，其他为基本类型

04

微信小程序底层框架实现原理｜万字长文

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

01

React Native开发之调试

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。 Developer Menu Android模拟器：可以通过Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。 iOS模拟器：可以通过Command⌘ + D快捷键来快速打开Developer Menu。在真机上开启Developer Menu：在真机上你可以通过摇动手机来开启

08

React Native程序调试

在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。 Developer Menu Android模拟器：可以通过Command⌘ + M 快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。 iOS模拟器：可以通过Command⌘ + D快捷键来快速打开Developer Menu。在真机上开启Developer Menu：在真机上你可以通过摇动手机来开启

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭