HTML/CSS/Style Basics/ID Selector
Содержание
- 1 An ID should be unique within a document. If it is not, ID will match all elements with the same IDs.
- 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 Combine the style from ID and class
- 4 id locator with #
- 5 header 1span
- 5.1 tagName#id: use id name plus tag name to mark a style
- 5.2 warning
- 5.3 question
- 5.4 comment
- 5.5 document
- 5.6 print
- 5.7 search
- 5.8 To style one paragraph with an extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom:40px;}.
- 5.9 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.
An ID should be unique within a document. If it is not, ID will match all elements with the same IDs.
<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">
- paragraph3{
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>
Combine the style from ID and 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">
- .z {
padding: 5px; border: 5px solid black;
}
- float {
width: 150px; height: 50px;
}
</style> </head> <body>
</body> </html>
</source>
id locator with #
<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">
- banner {
width: 550px; height: 561px; overflow: hidden;
} </style> </head> <body>
...
</body> </html>
</source>
tagName#id: use id name plus tag name to mark a style
<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">
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>
warning
question
comment
document
search
this is a text.
</body> </html>
</source>
To style one paragraph with an extra-large bottom margin of 40 pixels using #paragraph3{margin-bottom:40px;}.
<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">
- paragraph3{
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>
