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

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

html

Html 更改超链接颜色而不覆盖字体,html,Html,我目前正在使用此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;

我目前正在使用此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;}

我想改变超链接的颜色。我尝试了以下建议：包括以下代码：

 <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，以便在不更改字体或边距的情况下更改超链接颜色？

我能为您提供的最好答案是一种回答，因为所提供的材料中没有任何内容会以所述方式影响您的文本。不过，我可以提供一些经过清理的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的

部分中的内容。虽然这确实有效，但它并不适合在将来处理您的项目-将所有CSS规则放在一个位置，并按要求的顺序排列

接下来，请注意

text align

规则现在仅作为

html，body

规则的一部分提到一次。同样，这归结为特殊性，但基本上，一旦我声明HTML和页面正文中的所有内容都应该是

text align:left

，那么就没有必要在任何其他规则中重复这一点，除非我希望更改它（

text align:right

）。这适用于所有CSS，这是“级联”部分的来源。如果有一条规则只是为了重复已经定义好的样式（例如，你的

规则），那么你就可以摆脱它

默认样式不必提及-在大多数浏览器上，链接默认为

文本装饰：下划线

，因此不需要指定它，除非您正在更改它

通用选择器（

规则）是一种强大的野兽，应小心操作。基本上，您在这里输入的任何规则都将尝试将其自身应用于屏幕上的每个元素。用它来。我以

position:relative

为例。使用它将所有内容都放在其父元素的中心（

margin:0auto；

）可能是不明智的

您还可以考虑在代码顶部放置浏览器重置。这将删除由各种浏览器应用于元素的任何样式，并使您能够100%控制页面的外观。其中最流行的是重置方式

最后，看看我是如何将这么少量的CSS分解成块的？这给了CSS更多的结构，因此更容易阅读和编码。我通常使用基本结构、排版、页眉、元素、页脚等块，并使用

@import

进行重置。在可能的情况下，我也会使用，这也有助于提高可读性

至于您的确切问题，请清理CSS文件，将所有CSS放在一个位置，删除重复的规则，准确理解并决定每个

文本-

或

字体-

或

边距

规则应该做什么，您可能会找到解决方案

请仔细阅读具体内容。

我能给您的最好答案是一种回答，因为所提供的材料中没有任何内容会以所述方式影响您的文本。不过，我可以提供一些经过清理的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