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>
