CSS问题链接(a) 控制文本颜色的属性
我的 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 © 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
更新:
该错误是由 .header
结束标记中的拼写错误引起的 - 应该是
>。
这是一个实时链接: http://jsfiddle.net/RF9cC/1/< /a>
上一个:
听起来好像颜色是从其他地方继承的,或者您没有正确关闭
标签?你可以这样做:
这应该将 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: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.
从你发布的内容来看,我看不出 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.