CSS问题链接(a) 控制文本颜色的属性

发布于 2024-11-02 13:28:06 字数 2488 浏览 1 评论 0原文

我的 CSS 有问题。这是:

Div main 的 CSS: .main {背景:#E6E6E6;填充:2em;高度:100%;} 链接的 CSS: a { 颜色:#8D0D19; :

main 的 HTML

欢迎光临


> ...更多内容在这里...

新建

链接的颜色是酒红色。当页面上存在链接时,页面上的整个文本将变为酒红色。

我还向 .main 添加了颜色属性,但它不起作用。我还尝试制作 a, .main a 但这也不起作用。

那么我应该怎么做才能将文本保持为黑色,而仅将链接保持为酒红色?

顺便说一句,我不太了解 CSS。如果你能给我推荐一些关于 CSS 入门的网站、培训或书籍,那就太好了。

谢谢。

更新: 这是整个 CSS 代码:

* {    margin: 0; }

html { height: 100%; width: 100%; }

body {    height: 100%;    width: 100%;    margin: 0;    padding: 0;    border: 0;    background: #E6E6E6;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif;  }

.wrapper {    min-height: 100%;    height: auto !important;    height: 100%;    margin: 0 auto -42px; }

.header { height: 70px;   text-align: left; background: #1A446C; color: #D4E6F4; }

.header h1 { padding: 1em; margin: 0;} .header a {position: absolute; right:0; top: 0px; text-align: right; padding: 1.25em; margin: 0; color: >#D4E6F4; text-decoration:none;}

.main {color: #000000; background: #E6E6E6; padding: 2em; heigh:100%;} .main a {color: #8D0D19;}

.footer {    height:10px; text-align: center; padding: 7px;    background: #1A446C; color: #D4E6F4;    position:absolute; bottom:0; right:0; left:0; }

img { border: none; }

table, tr, td, tr {    border-collapse: collapse;    vertical-align: top;    text-align: left;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }

table.bordered tr th, table.bordered tr td { border: 1px solid #000000; }

这是 HTML 代码:

<html>    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />    </head>    <body>
       <div class="wrapper">
        <div class="header">
            <h1>Header</h1><h2><a href="login.php?logout=1">Logout<a/></h2>
                </div>
          <div class="main"><h3>HTML Text Here....</h3><br /><br /> <h3><a href="new.php" >New</a></h3> </div> </div>    <div class="footer">
           <p>Copyright &copy; 2011</p>
       </div>    </body> </html>

更新:在这里测试: http://jsfiddle.net/hhgGE/

I have a problem with my CSS. Here it is:

The CSS for Div main:
.main {background: #E6E6E6; padding: 2em; heigh:100%;}
The CSS for links:
a { color: #8D0D19; }

The HTML for main:
<div class="main">
<h3>Welcome</h3><br /> ...More Content Here....
<h3><a href="new.php">New</a></h3>

The color for the link is burgundy. When a link is present on the page, the whole text on the page becomes burgundy.

I also added color attribute to .main but it didn't work. Also I tried making a, .main a but that also didn't work.

So what should i do to keep my text black and only the links burgundy?

BTW I dont know CSS very well. If you can reccomend me some website, training or book for beginning CSS, that would be great.

Thanks.

Update:
Heres the whole CSS code:

* {    margin: 0; }

html { height: 100%; width: 100%; }

body {    height: 100%;    width: 100%;    margin: 0;    padding: 0;    border: 0;    background: #E6E6E6;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif;  }

.wrapper {    min-height: 100%;    height: auto !important;    height: 100%;    margin: 0 auto -42px; }

.header { height: 70px;   text-align: left; background: #1A446C; color: #D4E6F4; }

.header h1 { padding: 1em; margin: 0;} .header a {position: absolute; right:0; top: 0px; text-align: right; padding: 1.25em; margin: 0; color: >#D4E6F4; text-decoration:none;}

.main {color: #000000; background: #E6E6E6; padding: 2em; heigh:100%;} .main a {color: #8D0D19;}

.footer {    height:10px; text-align: center; padding: 7px;    background: #1A446C; color: #D4E6F4;    position:absolute; bottom:0; right:0; left:0; }

img { border: none; }

table, tr, td, tr {    border-collapse: collapse;    vertical-align: top;    text-align: left;    font: 13px/15px Verdana,Arial,Helvetica,sans-serif; }

table.bordered tr th, table.bordered tr td { border: 1px solid #000000; }

And Here's the HTML Code:

<html>    <head>
    <link href="style.css" rel="stylesheet" type="text/css" />    </head>    <body>
       <div class="wrapper">
        <div class="header">
            <h1>Header</h1><h2><a href="login.php?logout=1">Logout<a/></h2>
                </div>
          <div class="main"><h3>HTML Text Here....</h3><br /><br /> <h3><a href="new.php" >New</a></h3> </div> </div>    <div class="footer">
           <p>Copyright © 2011</p>
       </div>    </body> </html>

Update: Test it here: http://jsfiddle.net/hhgGE/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

少钕鈤記 2024-11-09 13:28:06

更新:

该错误是由 .header 结束标记中的拼写错误引起的 - 应该是 >。

这是一个实时链接: http://jsfiddle.net/RF9cC/1/< /a>

上一个:

听起来好像颜色是从其他地方继承的,或者您没有正确关闭 标签?你可以这样做:

.main{
color:#000;
}

.main a:link{
color:#8D0D19;
}

这应该将 DIV .main 中的所有文本设置为黑色,但将任何链接设置为勃艮第。

Robert Schifreen 撰写的这本电子书是关于构建网站的一个很好(且深入)的参考:
http://www.the-web-book.com/browse/index.html

它提供了有关网页设计的几乎所有知识的详细信息。

Update:

The bug was caused by a typo in the .header <a/> closing tag - should have been </a>.

Here is a live link: http://jsfiddle.net/RF9cC/1/

Previous:

Sounds like the color is being inherited from somewhere else or your not closing the </a> tag properly? You could do something like:

.main{
color:#000;
}

.main a:link{
color:#8D0D19;
}

That should style all the text in the DIV .main as black but any link as the burgundy.

A good (and in-depth) reference to building websites is this e-book by Robert Schifreen:
http://www.the-web-book.com/browse/index.html

It has detailed information on pretty much all there is to know regarding web design.

作业与我同在 2024-11-09 13:28:06

从你发布的内容来看,我看不出 css 有什么问题。我会仔细检查 html 以确保您正确关闭标签。
编辑:查看您的更新,其中有一个结束 a 标记,看起来像 (第 5 行,注销关联)。它应该是。这解决了问题。

至于学习CSS,我不能错过W3 Schools。基本上告诉您每个 CSS 元素的所有功能、它们具有哪些属性、适用于哪些浏览器等。还有一些不错的教程。

From what little you've posted, I cant see anything that could be wrong with the css. I'd double check the html to make sure you're properly closing your tags.
EDIT : looking at your update, there's a closing a tag in there that looks like <a/> (line 5, the logout link). it should be </a>. This fixes the problem.

As for learning CSS, I can't go past W3 Schools. Basically tells you everything every CSS element does, what attributes they have, what browsers it works with, etc. And some nice tutorials, too.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文