Wrox Programmer Forums
|
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 15th, 2009, 04:31 AM
Registered User
 
Join Date: Mar 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Horonggo's questions

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.

 
Old September 12th, 2009, 12:10 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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!





Similar Threads
Thread Thread Starter Forum Replies Last Post
.NET Interview Questions, C# Interview Questions, dotnetuncle .NET Framework 2.0 4 June 22nd, 2019 07:03 AM
C++ questions jam93 C++ Programming 1 August 19th, 2007 10:39 PM
two questions reverand Excel VBA 2 December 5th, 2005 06:33 AM
C# questions zhenliu C# 1 April 15th, 2004 09:18 AM
many questions Frank1111 BOOK: ASP.NET Website Programming Problem-Design-Solution 1 December 22nd, 2003 09:59 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.