在一个 html 文件中使用多个 CSS 样式表
对于我的一项作业,我必须制作 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您的示例不会在不请求服务器的情况下更改页面样式,因此这不是您想要的。我认为您的教授询问了“备用”样式表,可以从网络浏览器中选择。
通过文档标题中的此代码,您可以选择使用哪个样式表进行样式设置,并且无需 php、cgi 或其他服务器端技术即可更改它。
http://www.w3.org/Style/Examples/007/alternatives了解更多信息。
笔记:
(来自 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.
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:
(from http://www.alistapart.com/articles/alternate/)
尝试在 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...
您显示的站点正在通过 URL 传递变量。然后根据 URL 的内容,确定加载哪个样式表。
“http://adactio.com/?skin=hi-tech”
您创建变量。然后你可以通过链接传递它。 :
然后要确定加载哪个样式表,您将执行以下操作
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:
Then to determine which stylesheet is loaded you would do something like:
它就像在页面加载时使用 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).
“所以我猜测会有两个选项可以在两种风格之间切换”
我认为这个猜测是错误的。从一个页面链接到多个 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.