Question

我目前正在使用此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以便在不改变字体或边距的情况下改变超链接颜色？

Answer 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。您为链接样式设置的代码段看起来像放在HTML的<head>部分中的内容。虽然这确实有效，但是将来处理项目并不理想 - 将所有CSS规则保存在一个地方，并且需要specificity。

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

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

通用选择器（text-decoration: underline规则）是一个强大的野兽，应该小心处理。基本上，您放在此处的任何规则都会尝试将自身应用于屏幕上的每个元素。用它来declare default styles or rules only。我以*为例。使用它来delcare一切都在其父元素（position: relative）中居中可能是不明智的。

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

最后，看看我是如何把这么少量的CSS分解成块的？这使您的CSS 更多更多结构，因此更容易阅读和编码。我通常使用基本结构，排版，标题，元素，页脚等块，并使用margin: 0 auto;进行重置。我也尽可能使用CSS shorthand，也有助于提高可读性。

至于您的确切问题，请清理您的CSS文件，将所有CSS放在一个位置，删除重复的规则，理解并确切确定每个@import或text-或font-规则应该是这样做的，你可能会找到解决方案。

阅读特异性。

更改超链接颜色而不覆盖字体

1 个答案: