HTML/CSS/Style Basics/ID Selector

Материал из Web эксперт
Перейти к: навигация, поиск

An ID should be unique within a document. If it is not, ID will match all elements with the same IDs.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#paragraph3{
  margin-bottom:40px;
}
</style>
</head>
<body>
  <h2 class="double-space">This is a header
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  </h2>
  <p id ="paragraph3">This is a text.</p>
  <p>This is a text.</p>
</body>
</html>



Combine the style from ID and class

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .z {
  padding: 5px;
  border: 5px solid black;
}
#float {
  width: 150px;
  height: 50px;
}

</style>
</head>
<body>
<div>this is a test. 
  <div>this is a test. 
    <div id="float"  class="z">Sized Float</div> 
  </div> 
</div> 
</body>
</html>



id locator with #

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#banner {
 width: 550px;
 height: 561px;
 overflow: hidden;
}
</style>
</head>
<body>
  <div id="frame">
   <div id="banner">
    <h1>header 1<br /><span>span</span></h1>
   </div><!-- end #banner -->
   <p>...</p>
  </div><!-- end #frame -->
</body>
</html>



tagName#id: use id name plus tag name to mark a style

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
  h2#warning {
   background: red;
  }
  h2#questions {
   background: pink;
  }
  h2#comment {
   background: yellow;
  }
  h2#document {
   background: purple;
  }
  h2#print {
   background: gold;
  }
  h2#search {
   background: gray;
  }
</style>
</head>
<body>
<h2 id="warning">warning</h2> 
<h2 id="questions">question</h2> 
<h2 id="comment">comment</h2> 
  
<h2 id="document">document</h2> 
<h2 id="print">print</h2> 
<h2 id="search">search</h2> 
<p>this is a text.</p>

</body>
</html>



To style one paragraph with an extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom:40px;}.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#paragraph3{
  margin-bottom:40px;
}
</style>
</head>
<body>
  <h2 class="double-space">This is a header
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  this is a test. this is a test. 
  </h2>
  <p id ="paragraph3">This is a text.</p>
  <p>This is a text.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/ID_Selector&oldid=5925»