Horonggo's questions

horonggo · #1 (**permalink**) July 15th, 2009, 04:31 AM

Hi, Everyone, I'm new. I have some questions, please look at the code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body {
 margin:0px;
 padding:0px;
}
div {
 width:200px;
 height:200px;
 border:#000000 dotted 1px;
 margin:5px;
}
p {
 font:larger Arial, Helvetica, sans-serif;
 padding:100px;
 color:#000000;
}
.a {
 background-color:#FF0000;
 position:absolute;
 top:10px;
 left:10px;
}
.b {
 background-color:#00FF00;
 position:absolute;
 top:10px;
 left:40%;
}
.c{
 color:#FFFFFF;
 background-color:#0000FF;
 position:absolute;
 top:10px;
 right:10px;
}
.d {
 background-color:#FFFF00;
 position:absolute;
 bottom:10px;
 left:10px;
}
.e {
 background-color:#00FFFF;
 position:absolute;
 bottom:10px;
 right:10px;
}
.f {
 background-color:#FF00FF;
 position:absolute;
 bottom:10px;
 left:400px;
}
</style>
</head>
<body>
<div class="a">
  <p>a</p>
</div>
<div class="b">
  <p>b</p>
</div>
<div class="c">
  <p>c</p>
</div>
<div class="d">
  <p>d</p>
</div>
<div class="e">
  <p>e</p>
</div>
<div class="f">
  <p>f</p>
</div>
</body>
</html>

I wanted to make the letters in "class c" white, and others black. But why didn't the code work?

What's more,when i tried to change the 34th line to ".c p",the border of div dispeared,and moved. Why?

Wait for your answer. Thanks.

richard.york · #2 (**permalink**) September 12th, 2009, 12:10 PM

The first part of your question deals with cascading style sheet rules and specificity. The letter doesn't become white, because you have a previous rule that overrides it.

Code:

p {
  font:larger Arial, Helvetica, sans-serif;
  padding:100px;
  color:#000000;
}

The preceding rule applies to all <p> elements.

Code:

.c {
  color:#FFFFFF;
  background-color:#0000FF;
  position:absolute;
  top:10px;
  right:10px;
}

This rule applies to the parent <div> element. color is an inherited property, so text inside that <div> (but not inside a <p>) will be white. But text inside a <p> will be black, because you have a specific rule applying to <p> elements that takes precedence over inheritance.

With regards to the second question, when you change the rule to:

Code:

.c  p {
  color:#FFFFFF;
  background-color:#0000FF;
  position:absolute;
  top:10px;
  right:10px;
}

The rule now applies to the <p> element instead of the parent <div> element. The <div> element is no longer absolutely positioned, so it appears in the normal flow of the document, which places it in the upper left hand corner of the screen. The <p> element is now absolutely positioned, so it appears roughly where the <div> element appeared before, but it has default margin applied to it by the browser, so it's shifted down a bit. The border in question is applied to the <div> element, not the <p> element, which is why you see the border in the upper left hand corner instead of applied to the <p> element.

HTH!

Need to download code?

Navigation