在一个 html 文件中使用多个 CSS 样式表

发布于 2024-08-17 13:56:30 字数 305 浏览 5 评论 0原文

对于我的一项作业,我必须制作 2 个不同的 CSS 样式表,我已经做到了。现在作业中说,如果我愿意,我可以将两个样式表链接到一个 html 页面,所以我猜测会有两个选项可以在两种样式之间切换。 我的问题:我如何实现这一目标?我听说涉及到一些java,我是否还需要创建按钮或下拉菜单以便可以显示选项?

如果您不明白我想说的话,请看以下示例: http://adactio.com/。在底部,您可以选择更改主题,但我不介意只有两个按钮。

提前致谢。

For one of my assignments I have to make 2 different CSS style sheets and I have done that. Now in the assignment it says that if I want to I can link the two style sheets to just one html page, so I'm guessing that there will be two options to switch between the two styles.
My question: How do I achieve this? I heard that there is some java involved, and would I need to create buttons as well or a drop down menu so the options can be shown?

Here is an example if you don't understand what I am trying to say:
http://adactio.com/. At the bottom you have an option to change the theme, but I wouldn't mind just having two buttons.

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

傲娇萝莉攻 2024-08-24 13:56:30

您的示例不会在不请求服务器的情况下更改页面样式,因此这不是您想要的。我认为您的教授询问了“备用”样式表,可以从网络浏览器中选择。

<link rel="stylesheet" type="text/css" href="std.css" title="standard skin" />
<link rel="alternate stylesheet" type="text/css" href="alt.css" title="alternate skin" />

通过文档标题中的此代码,您可以选择使用哪个样式表进行样式设置,并且无需 php、cgi 或其他服务器端技术即可更改它。

http://www.w3.org/Style/Examples/007/alternatives了解更多信息。

笔记:

最初加载文档时,持久样式表和首选样式表将应用于该文档。然后用户可以选择替代样式表。 W3C 告诉我们,浏览器应该让我们选择要使用的样式表,并建议也许会提供一个下拉菜单或工具栏。

(来自 http://www.alistapart.com/articles/alternate/

Your example don't change page style without request to server, so it's not what you might want. I think that your professor asked about 'alternate' stylesheet, which can be chosen from web browser.

<link rel="stylesheet" type="text/css" href="std.css" title="standard skin" />
<link rel="alternate stylesheet" type="text/css" href="alt.css" title="alternate skin" />

With this code in your heade of document, you can chose which stylesheet to use for styling and it can be changed without php, cgi or other server-side technology.

http://www.w3.org/Style/Examples/007/alternatives for more informations.

Note:

When a document is initially loaded, the persistent and preferred style sheets are applied to the document. The alternate style sheets can then be selected by the user. The W3C tells us that the browser should give us a choice of the style sheet we want to use, and suggests that perhaps a drop–down menu or tool bar will be provided.

(from http://www.alistapart.com/articles/alternate/)

王权女流氓 2024-08-24 13:56:30

尝试在 Google 中查找“样式表切换器”。

他们在课堂上教过你这个吗?我想这个技术会出现在你的教科书中;教授不会只是期望你凭空获得知识......

Try looking up 'style sheet switcher' in Google.

Did they teach this to you in class? I assume this technique would be in your textbook; the professor wouldn't just expect you to have knowledge from thin air...

最近可好 2024-08-24 13:56:30

您显示的站点正在通过 URL 传递变量。然后根据 URL 的内容,确定加载哪个样式表。

http://adactio.com/?skin=hi-tech

您创建变量。然后你可以通过链接传递它。 :

<a href="?skin=hi-tech">Hi Tech Skin</a>

然后要确定加载哪个样式表,您将执行以下操作

<?php if(skin == 'hi-tech'){ ?>

<link rel="stylesheet" href="#" type="text/css" media="screen" />

<?php }else if( ...and so on...

The site you showed is passing a variable through the URL. Then based on what the URL says, it determines which style sheet is loaded.

"http://adactio.com/?skin=hi-tech"

You create the variable. Then you would pass it through a link. Something like:

<a href="?skin=hi-tech">Hi Tech Skin</a>

Then to determine which stylesheet is loaded you would do something like:

<?php if(skin == 'hi-tech'){ ?>

<link rel="stylesheet" href="#" type="text/css" media="screen" />

<?php }else if( ...and so on...
み格子的夏天 2024-08-24 13:56:30

它就像在页面加载时使用 JavaScript 一样简单,根据页面的查询字符串将“链接”元素添加到正确的样式表中。如果您没有查询字符串(第一次访问页面时就会出现这种情况),则通过 java 脚本添加默认查询字符串(或者已经在页面中,并且 javascript 编辑当前查询字符串)。

Its as simple as using javascript on page load to add a "link" element to the correct style sheet based on the query string of the page. If you don't have a query string (which would be the case on the first visit to the page), then have a default one added via java script (or already in the page and javascript edits the current one).

小ぇ时光︴ 2024-08-24 13:56:30

“所以我猜测会有两个选项可以在两种风格之间切换”

我认为这个猜测是错误的。从一个页面链接到多个 CSS 文件并同时使用它们并不罕见。使用较少的文件会更好,但使用多个文件也并不罕见。

"so I'm guessing that there will be two options to switch between the two styles"

I think this guess is wrong. Its not unusual to link to multiple CSS files from one page, using them both at the same time. Its better to use fewer files, but its not unusual to have more than one.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文