《Head First HTML与CSS 》笔记-0x5

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/funkstill/article/details/84727337

目录

使用<div>标记逻辑区

子孙选择器

使用<span>创建内联字符和元素的逻辑分组

<a>元素状态样式设置

伪类（Pseudo-class）

层叠

---

• 使用&ltdiv&gt标记逻辑区

    <div id="elixirs">
		<h2>Weekly Elixir Specials</h2>
		<p>
		  <img src="images/yellow.gif" alt="Lemon Breeze Elixir">
		</p>
		<h3>Lemon Breeze</h3>
		<p>
		  The ultimate healthy drink, this elixir combines
		  herbal botanicals, minerals, and vitamins with
		  a twist of lemon into a smooth citrus wonder
		  that will keep your immune system going all
		  day and all night.
		</p>

		<p>
		  <img src="images/chai.gif" alt="Chai Chiller Elixir">
		</p>
		<h3>Chai Chiller</h3>
		<p>
		  Not your traditional chai, this elixir mixes mat&eacute;
		  with chai spices and adds an extra chocolate kick for
		  a caffeinated taste sensation on ice.
		</p>

		<p>
		  <img src="images/black.gif" alt="Black Brain Brew Elixir">
		</p>
		<h3>Black Brain Brew</h3>
		<p>
		  Want to boost your memory?  Try our Black Brain Brew
		  elixir, made with black oolong tea and just a touch
		  of espresso.  Your brain will thank you for the boost.
		</p>

		<p>
		  Join us any evening for these and all our 
		  other wonderful 
		  <a href="beverages/elixir.html" 
			 title="Head First Lounge Elixirs">elixirs</a>.
		</p>
	</div>

• 子孙选择器

#elixirs {
	border-width:thin;
	border-style:solid;
	border-color:#007e7e;
	width:200px;
	
	padding-right:20px;
	padding-bottom:20px;
	padding-left:20px;
	
	margin-left:20px;
	
	text-align:center;
	
	background-color:white;
	background-image:url(images/cocktail.gif);
	background-repeat:repeat-x;
	
	line-height:1;
}
#elixirs h2 {
	color:black;
}
#elixirs h3 {
	color:#d12c47;
}

• 使用&ltspan&gt创建内联字符和元素的逻辑分组

<ul>
	  <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
	  <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
	  <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
	  <li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>, <span class="artist">Enigma</span></li>
	  <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>

.cd {
	font-style:italic;
}
.artist {
	font-weight:bold;
}

• &lta&gt元素状态样式设置

a:link {
	color:green;
}
a:visited {
	color:red;
}
a:hover {
	color:yellow;
}

• 伪类（Pseudo-class）

#elixirs a:link {
	color:#007e7e;
}
#elixirs a:visited {
	color:#333333;
}
#elixirs a:hover {
	background:#f88396;
	color:#0d5353;
}

• 层叠