HTML/CSS/Style Basics/Class Selector

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

Add style to both ul and li

 
<!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">
ul, li {
 display: inline;
 margin: 0;
 padding: 0;
 font-weight: bold; 
 font-style: italic;
}
</style>
</head>
<body>
  <h3>
   Table of Contents
  </h3>
  <p>
   sections:
  </p>
  <ul>
   <li>D</li>
   <li>P</li>
   <li>B</li>
   <li>W</li>
   <li class="last">Make One</li>
  </ul>
  <p>
   If there are any objections to how these sections are divided, 
  please let <a href="n@h.ru">N</a> know about 
  it.
  </p>
  
</body>
</html>



Anchor with class name

 

<?xml version = "1.0"?>
<!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>
      <style type = "text/css">
         a.nodec  { text-decoration: none }

      </style>
   </head>
   <body>
      <h1>Shopping list for <em>Monday</em>:</h1>
      <ul>
         <li>M</li>
         <li>B
            <ul>
               <li>W</li>
               <li>R</li>
               <li>W</li>
            </ul>
         </li>
         <li>R</li>
         <li>P</li>
         <li>P<em>this is a test. </em></li>
      </ul>
      <p><a class = "nodec" href = "http://www.wbex.ru">
      this is a test. </a></p>
   </body>
</html>



assign multiple classes to an element by putting multiple class names in an element"s class attribute

 

<!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">
.paragraph2{
  margin-bottom:40px;
}
.colorSetting{
  color:#ccc
}
</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 class="paragraph2 colorSetting">This is a text.</p>
  <p>This is a text.</p>
</body>
</html>



Class assigns a user-defined semantic meaning to an element

 

<!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">
.paragraph2{
  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 class="paragraph2">This is a text.</p>
  <p>This is a text.</p>
</body>
</html>



class for a tag with dot operator

 
<!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">
p.normal {
 padding: 0;
 margin-left: 0;
 margin-right: 0;
}
p.large {
 margin-left: 33%;
 margin-right: 5%;
}
p.medium {
 margin-left: 15%;
 margin-right: 33%;
}
</style>
</head>
<body>
  <h1>The heading for this page</h1>
  <p class="normal">normal class.</p>
  <p class="large">large class.</p>
  <p class="medium ">medium class</p>
</body>
</html>



class name + nested tag names

 
<!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>Set text indent to 37%</title>
<style type="text/css">
p {
 text-indent: 37%;
 line-height: 1em;
}
p span.initcap {
 font-size: 6em;
 line-height: 0.6em;
 font-weight: bold;
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  This is test. This is test. This is test. This is test. This is test. 
  </p>
</body>
</html>



Combined 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">
* .button {
  width: 175px;
  padding: 3px 10px;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
  margin-left: 50px;
  line-height: normal;
}
* .button.rounded {
  color: darkblue;
  background-color: white;
  line-height: 45px;
  margin-top: 30px;
  background: url("http://www.wbex.ru/style/logo.png") no-repeat center
    center;
}

</style>
</head>
<body>
<h1>Subclass Selector</h1> 
<div> 
<p class="button rounded">Rounded</p> 
</div> 

</body> 
</html>



Combine style together

 

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.copytext1, .copytext2 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 11px;
}
.color1 {color:red}
.color2 {color:blue}
.color3 {color:green}
.color4 {color:pink}
.color5 {color:black}
.copytext2 {font-weight:bold;}
p {margin:10px 0;}
</style>
</head>
<body>
<h1>Multiple classes example</h1>
<p class="copytext1 color1">Some text that is red</p>
<p class="copytext2 color1">Some text that is bold red</p>
<p class="copytext1 color2">Some text that is blue</p>
<p class="copytext2 color2">Some text that is bold blue</p>
<p class="copytext1 color3">Some text that is green</p>
<p class="copytext2 color3">Some text that is bold green</p>
<p class="copytext1 color4">Some text that is pink</p>
<p class="copytext2 color4">Some text that is bold pink</p>
<p class="copytext1 color5">Some text that is black</p>
<p class="copytext2 color5">Some text that is bold black</p>
</body>
</html>



Create a class inside blockquote

 
<!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">
blockquote .source {
 text-align: right;
 font-style: normal;
 margin-right: 2em;
}
</style>
</head>
<body>
  <p>One</p>
  <blockquote>
    <p>Two</p>
    <div class="source">
      Three
    </div>
  </blockquote>
  <p>Four</p>
</body>
</html>



init capital

 
<!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>init capital</title>
<style type="text/css">
p .initcap {
 font-size: 1.2em;
 background-color: black;
 color: white; 
}
</style>
</head>
<body>
  <p><span class="initcap">O</span>nline. 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. </p>
</body>
</html>



Specify two attributes in class

 

<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul.rtl {
  direction: rtl;  
}
.t {text-align:left;}
</style>
</head>
<body>
<ul class="rtl t">
  <li>Hello</li>
  <li>Hello hello</li>
  <li>Hello Hi</li>
  <li>Hello Hello</li>
  <li>Hello HI</li>
  <li>Hello Hello</li>
  <li>Hello Hi</li>
  <li>Hello</li>
</ul>
</div>
</body>
</html>



Style for HTML tag in a DIV with class name

 
<!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">
p.hanging {
 text-indent: -5em;
 margin-left: 5em;
}
#content p.hanging {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
#content h3 {
 text-indent: -60px;
 margin: 0 0 0 60px;
 padding: 0;
}
</style>
</head>
<body>
  <div id="content">
       <h3>Once more time with feeling</h3>
       <p class="hanging">handing;</p>
  </div>
</body>
</html>



Subclass Selector

 

<!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">
* .button {
  width: 175px;
  padding: 3px 10px;
  margin: 20px 0;
  text-align: center;
  font-weight: bold;
  margin-left: 50px;
  line-height: normal;
}
* .button.square {
  color: darkblue;
  background-color: #ccc;
  border-left: 1px solid dimgray;
  border-right: 2px solid black;
  border-top: 1px solid dimgray;
  border-bottom: 2px solid black;
}

</style>
</head>
<body>
<h1>Subclass Selector</h1> 
<div> 
<p class="button square">Square</p> 

</div> 

</body> 
</html>



To style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}.

 


<!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">
*.double-space{
  margin-bottom:2em;
}
</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 class="double-space">This is a text.</p>
  <p>This is a text.</p>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Style_Basics/Class_Selector&oldid=5939»