HTML/CSS/Style Basics/Class Selector
Содержание
- 1 Add style to both ul and li
- 2 Anchor with class name
- 3 Shopping list for Monday:
- 3.1 assign multiple classes to an element by putting multiple class names in an element"s class attribute
- 3.2 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.
- 3.3 Class assigns a user-defined semantic meaning to an element
- 3.4 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.
- 3.5 class for a tag with dot operator
- 4 The heading for this page
- 5 Subclass Selector
- 6 Multiple classes example
- 7 Subclass Selector
- 7.1 To style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}.
- 7.2 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.
Add style to both ul and li
<source lang="html4strict">
<!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>
Table of Contents
sections:
- D
- P
- B
- W
- Make One
If there are any objections to how these sections are divided, please let <a href="n@h.ru">N</a> know about it.
</body> </html>
</source>
Anchor with class name
<source lang="html4strict">
<?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>
Shopping list for Monday:
- M
- B
- W
- R
- W
- R
- P
- Pthis is a test.
<a class = "nodec" href = "http://www.wbex.ru"> this is a test. </a>
</body>
</html>
</source>
assign multiple classes to an element by putting multiple class names in an element"s class attribute
<source lang="html4strict">
<!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>
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.
This is a text.
This is a text.
</body> </html>
</source>
Class assigns a user-defined semantic meaning to an element
<source lang="html4strict">
<!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>
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.
This is a text.
This is a text.
</body> </html>
</source>
class for a tag with dot operator
<source lang="html4strict">
<!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>
The heading for this page
normal class.
large class.
medium class
</body> </html>
</source>
class name + nested tag names
<source lang="html4strict">
<!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>
Online. 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.
</body> </html>
</source>
Combined class
<source lang="html4strict">
<!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>
Subclass Selector
</body> </html>
</source>
Combine style together
<source lang="html4strict">
<!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>
Multiple classes example
Some text that is red
Some text that is bold red
Some text that is blue
Some text that is bold blue
Some text that is green
Some text that is bold green
Some text that is pink
Some text that is bold pink
Some text that is black
Some text that is bold black
</body> </html>
</source>
Create a class inside blockquote
<source lang="html4strict">
<!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>
One
Two
Three
Four
</body> </html>
</source>
init capital
<source lang="html4strict">
<!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>
Online. 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.
</body> </html>
</source>
Specify two attributes in class
<source lang="html4strict">
<!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>
- Hello
- Hello hello
- Hello Hi
- Hello Hello
- Hello HI
- Hello Hello
- Hello Hi
- Hello
</div> </body> </html>
</source>
Style for HTML tag in a DIV with class name
<source lang="html4strict">
<!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>
Once more time with feeling
handing;
</body> </html>
</source>
Subclass Selector
<source lang="html4strict">
<!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>
Subclass Selector
</body> </html>
</source>
To style the few paragraphs belonging to the double-space class with a bottom margin of 2 ems using *.double-space{margin-bottom:2em;}.
<source lang="html4strict">
<!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>
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.
This is a text.
This is a text.
</body> </html>
</source>
