HTML/CSS/Style Basics/Element Selector
Содержание
- 1 Group style in different css sections
- 2 Heading 1
- 3 Heading 1
- 4 Heading 1
- 5 This is the heading
- 6 header 1
- 7 Widgets and What"s-its
- 8 This is a heading
- 8.1 To style all elements in a document with no bottom margin using * {margin-bottom:0;}
- 8.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.
- 8.3 To style all paragraphs in a document with a bottom margin of 10 pixels using p{margin-bottom:10px;}.
- 8.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.
Group style in different css sections
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /> <meta http-equiv="content-language" content="en-us" /> <title>Exercise 1</title> <style type="text/css" media="all"> /* Paragraph text is black and in 12pt font */ p { font-size: 12pt; color: black; } /* h1, h2 and p are in Times New Roman font */ h1, h2, p { font-family: "Times New Roman"; } /* h1 and h2 have green text and 22pt font */ h1, h2 { color: green; font-size: 22pt; } </style> </head> <body>
Heading 1
Heading 2
Some paragraph text.
</body>
</html>
</source>
h1 and h2 have green text and 22pt font
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /> <meta http-equiv="content-language" content="en-us" /> <style type="text/css" media="all"> h1, h2 { color: green; font-size: 22pt; } </style> </head> <body>
Heading 1
Heading 2
Some paragraph text.
</body>
</html>
</source>
Mix group selector and element selector
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div.page {
border: 1px solid #000000; margin: 10px; padding: 10px; width: 250px;
} span.explanation {
font-size: 10px; border: 1px solid #000000;
} strong {
font-weight: bold; font-size: 18px; line-height: 22px; border: 1px solid #000000;
} code {
font-size: 12px; font-weight: bold; border: 1px solid #000000;
} </style> </head> <body>
The
span
inline
</body> </html>
</source>
Selectors choose the element to apply formatting to.These may also be grouped together.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /> <meta http-equiv="content-language" content="en-us" /> <title>Selectors and Grouping</title> <style rel="stylesheet" type="text/css"> p { font-family: Arial; font-size: 14pt; } h1 { color: black; border: 5px solid black; } h2 { color: orange; border: 4px solid orange; } h3 { color: blue; border: 3px solid blue; } h1, h2, h3 { letter-spacing: 5px; padding: 10px; } </style> </head> <body>
Heading 1
Heading 2
Heading 3
Selectors choose the element to apply formatting to. These may also be grouped together.
</body>
</html>
</source>
Separate the style
<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"xml: lang="en"lang="en"> <head> <title></title> <style type="text/css"> body, p {
font-family: verdana, arial, helvetica, sans-serif; color: #000;
} body {
margin: 0px; padding: 0px; background-color: #ccc;
} p {
font-size: 0.7em; line-height: 1.4em;
}
- MainText {
padding: 10px; margin: 5px; background-color: #fff;
} </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. .
</body> </html>
</source>
Set style for div, h1 and p together
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div,h1,p {
font-family: arial, verdana, sans-serif; border: 1px solid #000000; margin: 5px;
} </style> </head> <body>
This is the heading
Here is paragraph one.
Here is paragraph two.
Here is paragraph three.
</body> </html>
</source>
Set style for more than one tags
<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" lang="en" xml:lang="en"> <head> <title></title> <style type="text/css"> h1, h2, h3 {
font-size: 200%; background-image: url(bkgd2.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; padding: 1.5em; text-align: center; color: white;
} </style> </head> <body>
header 1
This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text.
</body> </html>
</source>
Style reuse across tags
<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"xml: lang="en"lang="en"> <head> <title></title> <style type="text/css">
body, div, p, td, ol, ul, li, h1, h2, h3 {
font-family: verdana, arial, helvetica, sans-serif; color: #000;
} p {
font-size: 0.7em; line-height: 1.4em;
}
- MainText {
padding: 10px; margin: 5px; background-color: #fff;
} </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. .
</body> </html>
</source>
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <style type="text/css"> form h2, form label { font-size: 15px; padding: 3px; } </style> <title>Feedback Form - Widgets and What"s-its</title> </head> <body>
Widgets and What"s-its
<form>
Tell us what"s on your mind..
<label for="feedback[name]">Name:</label> <input type="text" size="25" name="feedback[name]" />
<label for="feedback[email]">Email:</label> <input type="text" size="25" name="feedback[email]" />
<label for="feedback[address]">Address:</label> <textarea name="feedback[address]" cols="40" rows="3" wrap="virtual"></textarea>
<label for="feedback[message]">Comments:</label> <textarea name="feedback[message]" cols="40" rows="6" wrap="virtual"></textarea>
<label for="feedback[heard]">How"d you hear about us?</label> <select name="feedback[heard]"> <option value="">Choose...</option> <option value="newspaper">Newspaper</option> <option value="magazine">Magazine</option> <option value="television">Television</option> <option value="radio">Radio</option> <option value="other">Other</option> </select>
</form> </body>
</html>
</source>
Table in a DIV tag
<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"> .center {
text-align: center;
} .center table {
width: 50%; margin: 0 auto; text-align: left;
} </style> </head> <body>
Lorem ipsum dolor sit amet
This is the first cell | This is the second cell |
This is the third cell, it"s under the first cell | This is the fourth cell, it"s under the second cell. |
</body> </html>
</source>
Tag style 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>
<head> <title> exercise 4-1 </title> <style type="text/css" media="all"> body { font-size: 12px; } h1 { font-size: 2.1em; background: pink; padding: 1em; border: thin solid black; } p { font-size: 0.9em; padding: 1em; border: thin solid black; background: gray; color: white; } </style> </head> <body>
This is a heading
This is a paragraph of text.
</body>
</html>
</source>
To style all elements in a document with no bottom margin using * {margin-bottom:0;}
<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">
- {
margin-bottom:0;
} </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.
</body> </html>
</source>
To style all paragraphs in a document with a bottom margin of 10 pixels using p{margin-bottom:10px;}.
<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 {
margin-bottom:10px;
} </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.
</body> </html>
</source>