1

我目前正在使用这个 ccs：

    /* A Free Design by Bryant Smith (bryantsmith.com) */

html, body {
text-align: center;
}
p {text-align: left;}


body {
    margin: 0;
    padding: 0;
    background: #333333 url(images/img01.gif) repeat-x;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #666666;
    background-color:#252F33;
}
*
{
  margin: 0 auto 0 auto;
 text-align:left;}

#header {
    position:relative;
    width: 680px;
    height:99px;
    margin-left:29px;
    margin-right:21px;
    background: url(header.png) no-repeat;
}

#page
{
  margin: 0 auto 0 auto; 
  display: table; 
  height: 100%;  
  position: relative; 
  overflow: hidden; 
  background: #252F33 url(background.png) repeat-y;
  width: 730px;
}


.title
{
position:relative;
left:30px;
top:22px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:32px;
font-weight:normal;
color:#252F33;
}

.subText
{
position:relative;
left:62px;
top:26px;
text-align:left;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-weight:bold;
color:#CEEAEE;
}


.articleTitle
{
text-align:left;
padding-left:25px;
padding-top:10px;
padding-bottom:10px;
color: #2C4969;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px;
font-weight:bold;
}

.articleContent
{
width:auto;
position:relative;
padding-left:50px;
padding-right:75px;
color:#101214;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
line-height:18px;
}

.rightLinks
{
width: 102px;
font-size:11px;
font-weight:bold;
line-height:21px;
height:auto;
margin-right:-3px;
background-image:url(links_branch.png);
background-repeat:no-repeat;
text-align:right;
float:right;
}

.rightLinks a:hover
{
color:#667765;
}



.rightLinks .linkTitle
{
font-size:13px;
font-weight:bold;
margin-top:27px;
margin-bottom:32px;
margin-right:5px;
}


#bar
{
    position:relative;
    width: 680px;
    height:57px;
    margin-left:29px;
    margin-right:21px;
    background: url(bar.png) no-repeat;
}

.menuLink
{
    height:36px;
    width: 120px;
    text-align:center;
    float:left;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#252F33;
    padding-top:19px;
}

.menuLink:hover
{
    background: url(bar2.png) repeat-x;
}

a
{
text-decoration:none;
color:#252F33;
}

#pageContent
{
width: 680px;
height:500px;
}

#footer {

    width: 730px;
    height:60px;
    background: url(footer.png) no-repeat;
text-align:center;
font-size:10px;
color:#667765;
padding-top:34px;
}

#footer a
{
font-size:10px;
color:#667765;
}

html, body {
text-align: center;
}
p {text-align: left;}

我想改变超链接的颜色。我在这里尝试了建议：http ://www.ssi-developer.net/css/link-colours.shtml包含此代码：

 <style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>

但包括代码改变了字体和边距。如何更改我正在使用的 css 以更改超链接颜色而不更改字体或边距？

4

1 回答 1

1

我可以为您提供的最好的答案是某种答案，因为所提供的材料中没有任何内容会以所描述的方式影响您的文本。但是，我可以提供一些清理后的 CSS。

/*BASIC STRUCTURE*/
* {
    margin: 0 auto;
    position:relative;
    padding: 0;
}

html, body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align:left;
    color: #666;
}

body {
    margin: 0;
    background: #333 url(images/img01.gif) repeat-x;
    background-color:#252F33;
}

/*TYPOGRAPHY*/
a {
    outline: none;
    color: #000;
}

a:active {
    color: #0000ff;
}

a:visited {
    color: #008000;
}

a:hover {
    color: #ff0000;
}

/*SECTIONS*/
#header {
    width: 680px;
    height:99px;
    margin: 0 21px 0 29px;
    background: url(header.png) no-repeat;
}

... etc

关于上面的 CSS 有一些需要注意的地方，我将通过假设您处于初学者级别（如果不是，请原谅！）。

首先，请注意，我已将您的第二个片段吸收到原始 CSS 文件中，这几乎是您的所有 CSS 文件所在的位置。您为链接样式提供的代码段看起来像是放置在<head>HTML 部分中的内容。虽然这确实有效，但它并不适合将来处理您的项目 - 将所有 CSS 规则保存在一个地方，并按照所需的具体顺序。

接下来，请注意text-align规则现在只被提及一次，作为html, body规则的一部分。同样，这归结为特殊性，但基本上一旦我声明我的 HTML 和页面正文中的所有内容都应该是，那么除非我希望更改它（ ）text-align: left，否则无需在任何其他规则中重复这一点。text-align: right这适用于所有 CSS，它是“级联”部分的来源。如果规则只是为了重复已经定义的样式（例如您的p规则），那么您可以摆脱它。

不需要提及默认样式 -text-decoration: underline大多数浏览器上的链接默认为，因此除非您更改它，否则不需要指定它。

通用选择器（*规则）是一个强大的野兽，应该小心处理。基本上，您在此处放置的任何规则都会尝试将其自身应用于屏幕上的每个元素。仅使用它来声明默认样式或规则。我已经包括position: relative了一个例子。使用它来删除所有内容都集中在其父元素 ( margin: 0 auto;)中可能是不明智的。

您还可以考虑在代码顶部放置一个浏览器重置。这将删除各种浏览器应用于元素的任何样式，并让您 100% 控制页面的外观。最受欢迎的之一是Eric Meyer的重置。

最后，看看我是如何将这么少量的 CSS 分解成块的？这为您的 CSS 提供了更多的结构，因此更易于阅读和编码。我通常使用基本结构、排版、页眉、元素、页脚等块，并@import用于我的重置。我还尽可能使用CSS 速记，也有助于提高可读性。

至于你的确切问题，清理你的 CSS 文件，把你所有的 CSS 放在一个地方，删除重复的规则，理解并准确地决定每个text-或规则应该做什么，你可能会得到解决方案font-。margin

并阅读特异性。

于 2012-11-14T10:13:03.860 回答