为网站的不同页面制作CSS样式表
为网站的不同页面制作CSS样式表
提问于 2014-01-11 09:20:20
我正在制作一个网站只有两个主要页面，这是“索引”和“关于我”的页面。在制作了模板和所有内容之后，我遇到了一个令人困惑的问题，我无法真正编辑about页面的Css样式。
基本上，我的About和Index页面从我的主Html (从头开始制作的那个)中获得了相同的模板，我认为它在那里很好。但我希望我的About页面与索引页面有不同的外观，每次我对可编辑区域进行更改时，我希望使其从About页面消失，这也会影响Index页面。样式表也是一样，我想在about页面上使用不同的颜色，但似乎每次我做某件事都会影响整个网站。
这是我到目前为止制作的网站的图片。Homepage and about page
这两个页面有相同的模板，相同的可编辑区域和相同的css和看起来完全相同的方式，但我想从关于页的div class:"notes"和扩展他的div id="main-content"的宽度几乎完全改变几乎每一个颜色我的意思是关于页的整个风格，而不影响主页和离开它。我该怎么办？请
谢谢
注:我使用的是Dreamweaver cs6。
用于about和index页面的main dwt html/ same html唯一的区别是for index和about是不可编辑的
<code>
<!doctype html>
<html>
<head>
<!--JavaScript that enables Internet Explorer (version 8 and below) to recognise HTML5 elements -->
<script type="text/javascript">
document.createElement ('article')
document.createElement ('nav')
document.createElement ('aside')
document.createElement ('header')
document.createElement ('footer')
document.createElement ('main')
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/timothy.js"></script>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>My Uni Website</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<!--Write web page content and markup within the 'body' tags -->
<div id="outer">
<div class="frame">
<div class="fade"></div>
<img src="../images/huxley.jpg"/>
</div>
<div id="wrapper">
<!--The 'wrapper' div contains all the page content and can be styled -->
<div id="icon">
<ul>
<li><a href="http://www.twitter.com/justcallmebigdi"><img src="../images/twitter.png" width="20" /></a></li>
<li><a href="http://www.behance.net/justcallmebigdi"><img src="../images/behance.png" width="20" /></a></li>
</ul>
</div>
<div id="logo"><a href><img src="../images/logo2.png" width="209" height="207"/></a></div>
<!--The main heading for the page -->
<header>
<!-- <h1>CI135 Learning journal</h1> -->
<h2> How I mastered web standards in 10 weeks</h2>
</header>
<!--The primary navigation for the page -->
<nav>
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT ME</a></li>
</ul>
</nav>
<!--Secondary sidebar navigation -->
<aside>
<div class="image"><img src="../images/information.png" width="100"/></div>
<div class="aside">
<!-- TemplateBeginEditable name="aside" -->
<h3> The Weekly posts </h3>
<ol>
<li><a href="../index.html">Getting started</a></li>
<li><a href="../index.html">Learning more about tags</a></li>
<li><a href="../index.html">Learning about lists and tables</a></li>
</ol>
<h3> Favourites</h3>
<ul>
<li> <a href="../index.html"> W3C markup validation service </a></li>
<li> <a href="../index.html"> Web platform Docs - Web development for beginners </a> </li>
<li> <a href="../index.html"> Html5 Doctor - Helping you implement HTML5 today </a></li>
</ul>
<h3> Basic Definitions </h3>
<dl>
<dt><strong>HTML</strong></dt>
<dd>Hyper-text markup language - markup language used to structure content</dd>
<dt><strong>CSS</strong></dt>
<dd>Cascading stylesheets - used to tell browsers how to present HTML elements</dd>
<dt><strong>JavaScript</strong></dt>
<dd>Scripting language for adding interactive behaviour to web pages</dd>
</dl>
<!-- TemplateEndEditable -->
<h3> My time table </h3>
<table width="523" height="81" border="1">
<tr>
<td width="71" height="23" bgcolor="#FFFFFF">Day/Time</td>
<td width="215" bgcolor="#FFFFFF">Monday</td>
<td width="215" bgcolor="#FFFFFF">Tuesday</td>
</tr>
<tr>
<td height="25" bgcolor="#FFFFFF">9-10 am</td>
<td> </td>
<td>Lecture</td>
</tr>
<tr>
<td height="23" bgcolor="#FFFFFF">10-11 am</td>
<td>lecture</td>
<td>Lab</td>
</tr>
</table>
</div>
</aside>
<!--The main page content -->
<main><!-- TemplateBeginEditable name="mainContent" -->
<article>
<!--Content node -->
<div class="header">
<h1>Week 3: Tables, link images, quoting text </h1>
</div>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3. </p>
</article>
<article>
<div class="header">
<h1>Week 2</h1>
</div>
<p>PS: ADD COMMENTS ABOUT WEEK 2.</p>
</article>
<article>
<div class="header">
<h1>Week 1</h1>
</div>
<p>ADD COMMENTS ABOUT WEEK 1. </p>
<p>In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3In the first 3 lab tutorials I learned some of the most frequently used HTML tags and how to use them to structure text in a web page. <br>
PS: ADD MORE COMMENTS ABOUT WEEK 3</p>
</article>
<!-- TemplateEndEditable --></main>
<div id="right_side_note">
<div class="post"><!-- TemplateBeginEditable name="SideNotes" -->
<h2>Notes</h2>
<p class="date">March 22, 2011</p>
<p>The W3C defines HTML and CSS as follows:</p>
<blockquote>
<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages. <br>
<cite>W3C standards for web </cite></p>
</blockquote>
<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<!--Footer content -->
<p class="footer-text">© 2013 Daniel Biakath / University of Brighton.</p>
</div>
</div>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<code>回答 1
Stack Overflow用户
发布于 2014-01-11 09:25:10
您应该创建两个单独的CSS文件，并将每个页面的样式放入单独的文件中，例如about.css和home.css。从about页面链接到about.css，从主页链接到home.css。
CSS链接应如下所示：
<link rel="stylesheet" type="text/css" href="home.css">CSS文件是按顺序加载的，所以如果样式要相互覆盖，就需要考虑到这一点。如果在head中声明了以下内容，并且两个文件具有相同名称的样式，则将使用home.css文件中的样式。如果是这种情况，您可能看不到对about.css所做的更改。最重要的CSS文件应该列在最后。
<link rel="stylesheet" type="text/css" href="about.css">
<link rel="stylesheet" type="text/css" href="home.css">如果您的样式当前为内联样式，如下所示：
<style type="text/css">
/*YOUR STYLES HERE*/
</style>您可以直接在每个文件中进行更改，或者如果您希望从标签中剪切所有内容并将其放入适当的css文件中。
如果在对CSS进行更改后什么也没有发生，根据您使用的系统的不同，缓存也有可能发挥作用。即使您进行了更改，web服务器提供的版本也是相同的。如果我不小心的话，CSS文件似乎对我做了很多这样的事情。如果是这样的话，重置网站并清除浏览器缓存，你就可以开始工作了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21057356
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号