The Realm Welcome to The Realm ~ Provehito In Altum |
| | Advanced CSS | |
| | Author | Message |
---|
Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Advanced CSS Mon Nov 05, 2007 6:02 pm | |
| Part 1 These or some advanced CSS stuff. Please read the basic CSS topic before you start this one. CSS Dimension Properties The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). - Code:
-
Property Description Values IE F N W3C height Sets the height of an element auto length % 4 1 6 1 line-height Sets the distance between lines normal number length % 4 1 4 1 max-height Sets the maximum height of an element none length % - 1 6 2 max-width Sets the maximum width of an element none length % - 1 6 2 min-height Sets the minimum height of an element length % - 1 6 2 min-width Sets the minimum width of an element length % - 1 6 2 width Sets the width of an element auto % length 4 1 4 1
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Tue Nov 06, 2007 5:00 am | |
| Part 2 SS Classification Properties The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). - Code:
-
Property Description Values IE F N W3C clear Sets the sides of an element where other floating elements are not allowed left right both none 4 1 4 1 cursor Specifies the type of cursor to be displayed url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 4 1 6 2 display Sets how/if an element is displayed none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption 4 1 4 1 float Sets where an image or a text will appear in another element left right none 4 1 4 1 position Places an element in a static, relative, absolute or fixed position static relative absolute fixed 4 1 4 2 visibility Sets if an element should be visible or invisible visible hidden collapse 4 1 6 2
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Tue Nov 06, 2007 6:41 am | |
| Part 3 CSS Positioning Properties The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). - Code:
-
Property Description Values IE F N W3C bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto % length 5 1 6 2 clip Sets the shape of an element. The element is clipped into this shape, and displayed shape auto 4 1 6 2 left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto % length 4 1 4 2 overflow Sets what happens if the content of an element overflow its area visible hidden scroll auto 4 1 6 2 position Places an element in a static, relative, absolute or fixed position static relative absolute fixed 4 1 4 2 right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto % length 5 1 6 2 top Sets how far the top edge of an element is above/below the top edge of the parent element auto % length 4 1 4 2 vertical-align Sets the vertical alignment of an element baseline sub super top text-top middle bottom text-bottom length % 4 1 4 1 z-index Sets the stack order of an element auto number 4 1 6 2
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Tue Nov 06, 2007 1:29 pm | |
| Part 4 Syntax The syntax of pseudo-classes: - Code:
-
selector:pseudo-class {property: value}
CSS classes can also be used with pseudo-classes: - Code:
-
selector.class:pseudo-class {property: value}
Anchor Pseudo-classes A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser: - Code:
-
a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link *
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! Note: a:active MUST come after a:hover in the CSS definition in order to be effective!! Note: Pseudo-class names are not case-sensitive. Pseudo-classes and CSS Classes Pseudo-classes can be combined with CSS classes: - Code:
-
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
CSS2 - The :first-child Pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element. - Code:
-
In this example, the selector matches any p element that is the first child of a div element, and indents the first paragraph inside a div element:
div > p:first-child { text-indent:25px }
This selector will match the first paragraph inside the div in the following HTML:
<div> <p> First paragraph in div. This paragraph will be indented. </p> <p> Second paragraph in div. This paragraph will not be indented. </p> </div>
but it will not match the paragraph in this HTML:
<div> <h1>Header</h1> <p> The first paragraph inside the div. This paragraph will not be indented. </p> </div>
- Code:
-
n this example, the selector matches any em element that is the first child of a p element, and sets the font-weight to bold for the first em inside a p element:
p:first-child em { font-weight:bold }
For example, the em in the HTML below is the first child of the paragraph:
<p>I am a <em>strong</em> man.</p>
- Code:
-
In this example, the selector matches any a element that is the first child of any element, and sets the text-decoration to none:
a:first-child { text-decoration:none }
For example, the first a in the HTML below is the first child of the paragraph and will not be underlined. But the second a in the paragraph is not the first child of the paragraph and will be underlined:
<p> Visit <a href="http://www.google.com">Google</a> and learn CSS! Visit <a href="http://www.google.com">Google</a> and learn HTML! </p>
CSS2 - The :lang Pseudo-class The :lang pseudo-class allows you to define special rules for different languages. In the example below, the :lang class defines the type of quotation marks for q elements with a lang attribute with a value of "no": - Code:
-
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head>
<body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body>
</html>
Pseudo-classes Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). - Code:
-
Pseudo-class Purpose IE F N W3C :active Adds special style to an activated element 4 1 8 1 :focus Adds special style to an element while the element has focus - 1.5 8 2 :hover Adds special style to an element when you mouse over it 4 1 7 1 :link Adds special style to an unvisited link 3 1 4 1 :visited Adds special style to a visited link 3 1 4 1 :first-child Adds special style to an element that is the first child of some other element 7 1 7 2 :lang Allows the author to specify a language to use in a specified element - 1 8 2
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Tue Nov 06, 2007 4:50 pm | |
| Part 5 Syntax The syntax of pseudo-elements: - Code:
-
selector:pseudo-element {property: value}
CSS classes can also be used with pseudo-elements: - Code:
-
selector.class:pseudo-element {property: value}
The :first-line Pseudo-element The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector: - Code:
-
p:first-line {color:#0000ff;font-variant:small-caps}
<p>Some text that ends up on two or more lines</p>
In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window. Note: The "first-line" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-line" pseudo-element: * font properties * color properties * background properties * word-spacing * letter-spacing * text-decoration * vertical-align * text-transform * line-height * clear The :first-letter Pseudo-element The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector: - Code:
-
p:first-letter {color:#ff0000;font-size:xx-large}
<p>The first words of an article...</p>
Note: The "first-letter" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-letter" pseudo- element: * font properties * color properties * background properties * margin properties * padding properties * border properties * text-decoration * vertical-align (only if 'float' is 'none') * text-transform * line-height * float * clear Pseudo-elements and CSS Classes Pseudo-elements can be combined with CSS classes: - Code:
-
p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p>
The example above will make the first letter of all paragraphs with class="article" red. Multiple Pseudo-elements Several pseudo-elements can be combined: - Code:
-
p:first-letter {color:#ff0000;font-size:xx-large} p:first-line {color:#0000ff}
<p>The first words of an article...</p>
In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line would be blue while the rest of the paragraph would be the default color. CSS2 - The :before Pseudo-element The ":before" pseudo-element can be used to insert some content before an element. The style below will play a sound before each occurrence of an element:
- Code:
-
h1:before { content: url(beep.wav) }
CSS2 - The :after Pseudo-element
The ":after" pseudo-element can be used to insert some content after an element.
The style below will play a sound after each occurrence of an element:
- Code:
-
h1:after { content: url(beep.wav) }
Pseudo-elements
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
- Code:
-
Pseudo-element Purpose IE F N W3C :first-letter Adds special style to the first letter of a text 5 1 8 1 :first-line Adds special style to the first line of a text 5 1 8 1 :before Inserts some content before an element 1.5 8 2 :after Inserts some content after an element 1.5 8 2
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Wed Nov 07, 2007 4:13 am | |
| Part 6 Image Gallery The source code for an CSS image gallery looks like this: - Code:
-
<html> <head> <style type="text/css"> div.img { margin: 2px; border: 1px solid #0000ff; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 3px; border: 1px solid #ffffff; } div.img a:hover img { border: 1px solid #0000ff; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 2px; } </style> </head> <body>
<div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div> <div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div> </div>
</body> </html>
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Wed Nov 07, 2007 6:44 am | |
| Part 7 Example 1 - Creating a Transparent Image Look at the following source code: - Code:
-
<img src="klematis.jpg" width="150" height="113" alt="klematis" style="-moz-opacity:0.4;filter:alpha(opacity=40) />
Mozilla uses the property -moz-opacity:x for transparency, while IE uses filter:alpha(opacity=x). Tip: The CSS3 syntax for transparency is opacity:x. However, this syntax is currently only supported by the Safari browser. In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent. In Mozilla (-moz-opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (The same things goes for the CSS3-valid syntax opacity:x). Example 2 - Image Transparency - Mouseover Effect The source code looks like this: - Code:
-
<img src="klematis.jpg" width="150" height="113" alt="klematis" style="-moz-opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />
<img src="klematis2.jpg" width="150" height="113" alt="klematis" style="-moz-opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.4;this.filters.alpha.opacity=40" />
We see that the first two lines of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it. The syntax for this in Mozilla is: this.style.MozOpacity=1 and the syntax in IE is: this.filters.alpha.opacity=100. When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute. Example 3 - Text in Transparent Box The source code looks like this: - Code:
-
<html> <head> <style type="text/css"> div.background { width: 500px; height: 250px; background: url(klematis.jpg) repeat; border: 2px solid black; } div.transbox { width: 400px; height: 180px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; /* for Mozilla */ -moz-opacity:0.6; } div.transbox p { margin: 30px 40px; font-weight: bold; color: #000000; } </style> </head>
<body>
<div class="background"> <div class="transbox"> <p>This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. </p> </div> </div>
</body> </html>
First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background image, and a border. In addition we make this div transparent. Notice that we have added three different syntaxes for the transparency. Inside the transparent div, we add some text inside a p element. | |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Wed Nov 07, 2007 8:40 am | |
| Part 8 Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. Media Types Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper. The @media Rule The @media rule allows different style rules for different media in the same style sheet. The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper: - Code:
-
<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} }
@media print { p.test {font-family:times,serif; font-size:10px} }
@media screen,print { p.test {font-weight:bold} } </style> </head>
<body>
....
</body> </html>
Different Media Types Note: The media type names are not case-sensitive. - Code:
-
Media Type Description all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices
| |
| | | Luky Admin
Number of posts : 4090 Age : 35 Location : Bucharest, Romania Life : Points : Mood : Registration date : 2007-08-01
| Subject: Re: Advanced CSS Wed Nov 07, 2007 6:27 pm | |
| Part 9
CSS Summary
This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.
You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.
You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.
Now You Know CSS, What's Next?
The next step is to learn JavaScript.
JavaScript
JavaScript can make your web site more dynamic.
A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.
JavaScript is the most popular scripting language on the internet and it works with all major browsers. | |
| | | Sponsored content
| Subject: Re: Advanced CSS | |
| |
| | | | Advanced CSS | |
|
| Permissions in this forum: | You cannot reply to topics in this forum
| |
| |
| |
|