<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="Content-Language" content="pl"> <link rel="stylesheet" href="../kurs.css" type="text/css"> </head> <body> <center><b>Cascading Style Sheet 1.</b></center>Poniżej znajduje się krótki opis wła¶ciwo¶ci CSS1.<br><br> <b>2.1. Czionka</b><br><br> <table rules="all" cellspacing="0" cellpadding="3" width="100%"> <tbody> <tr style="color: #FFFFFF; background: #A90605; text-align: center"> <td>Wła¶ciwo¶ć</td> <td>Opis</td> <td>Warto¶ć</td> <td>Odnosi się do</td> <td>Przykład</td> </tr> <tr> <td valign="top"> font-family </td> <td valign="top"> Okre¶la typ czcionki </td> <td valign="top"> nazwa czcionki </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font-family: Arial}<br> Przykład: Tekst </td> </tr> <tr> <td valign="top"> font-style </td> <td valign="top"> Okre¶la styl czcionki </td> <td valign="top"> <strong>normal,<br> italic,<br> oblique</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font-style: italic}<br> Przykład: <font style="FONT-STYLE: italic">Tekst</font> </td> </tr> <tr> <td valign="top"> font-variant </td> <td valign="top"> </td> <td valign="top"> <strong>normal,<br> small-caps</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font-variant: small-caps}<br> Przykład: <font style="FONT-VARIANT: small-caps">Tekst</font> </td> </tr> <tr> <td valign="top"> font-weight </td> <td valign="top"> Okre¶la grubo¶ć czcionki </td> <td valign="top"> <strong>normal,<br> bold,<br> bolder,<br> lighter,<br> 100, 200, 300, 400, 500, 600, 700, 800, 900</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font-weight: bolder}<br> Przykład: <font style="FONT-WEIGHT: bolder">Tekst</font> </td> </tr> <tr> <td valign="top"> font-size </td> <td valign="top"> Okre¶la rozmiar czcionki </td> <td valign="top"> <strong>xx-small, x-small, small, medium, large, x-large, xx-large,<br> larger, smaller</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font-size: 20px}<br> Przykład: Tekst </td> </tr> <tr> <td valign="top"> font </td> <td valign="top"> Zawiera w sobie wszystkie wła¶ciwo¶ci dotycz±ce czcionki </td> <td valign="top"> font-family,<br> font-size,<br> font-variant,<br> font-weight,<br> font-size </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {font: 12pt sans-serif bold italic}<br> Przykład: <font style="font-style: italic; font-variant: normal; font-weight: bold">Tekst</font> </td> </tr> </tbody> </table><br> <br> <b>2.2. Kolor i tło</b><br> <br> <table rules="all" cellspacing="0" cellpadding="3" width="100%"> <tbody> <tr style="color: #FFFFFF; background: #A90605; text-align: center"> <td>Wła¶ciwo¶ć</td> <td>Opis</td> <td>Warto¶ć</td> <td>Odnosi się do</td> <td>Przykład</td> </tr> <tr> <td valign="top"> color </td> <td valign="top"> Okre¶la kolor czcionki </td> <td valign="top"> nazwa koloru,<br> warto¶ć hex </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {color: red}<br> Przykład: <font style="COLOR: red">Tekst</font><br> {color: rgb(0,0,255)}<br> Przykład: <font style="COLOR: rgb(0,0,255)">Tekst</font> </td> </tr> <tr> <td valign="top"> background-color </td> <td valign="top"> Okre¶la kolor tła </td> <td valign="top"> nazwa koloru,<br> warto¶ć hex </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {background-color: #FF5500} </td> </tr> <tr> <td valign="top"> background-image </td> <td valign="top"> Okre¶la grafikę pełni±ca rolę tła </td> <td valign="top"> <strong>none</strong>,<br> adres URL </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {background-image: url(tlo.gif)} </td> </tr> <tr> <td valign="top"> background-repeat</font> </td> <td valign="top"> Okre¶la powtrzalno¶ć tła </td> <td valign="top"> <strong>repeat,<br> repeat-x,<br> repeat-y,<br> no-repeat</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {background-repeat: repeat-x} </td> </tr> <tr> <td valign="top"> background-attachment </td> <td valign="top"> Okre¶la czy tło ma się przesuwać wraz z zawarto¶ci± (<em>scroll</em>) czy ma być stałe (<em>fixed</em>) </td> <td valign="top"> <strong>scroll,<br> fixed</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {background-attachment: scroll} </td> </tr> <tr> <td valign="top"> background-position </td> <td valign="top"> Okre¶la pozycję pocz±tkow± tła </td> <td valign="top"> [<strong>top, center, bottom],<br> [left, center, right</strong>],<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> piksel (px) </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {background-position: 100% 30%} </td> </tr> <tr> <td valign="top"> background </td> <td valign="top"> Zawiera w sobie wszystkie wła¶ciwo¶ci dotycz±ce tła </td> <td valign="top"> background-color,<br> background-image,<br> background-repeat,<br> background-attachment,<br> background-position </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {background: red url(tlo.jpg) left top no-repeat} </td> </tr> </tbody> </table><br> <br> <b>2.3. Tekst</b><br> <br> <table rules="all" cellspacing="0" cellpadding="3" width="100%"> <tbody> <tr style="color: #FFFFFF; background: #A90605; text-align: center"> <td>Wła¶ciwo¶ć</td> <td>Opis</td> <td>Warto¶ć</td> <td>Odnosi się do</td> <td>Przykład</td> </tr> <tr> <td valign="top"> word-spacing </td> <td valign="top"> Okre¶la odległo¶ć między wyrazami </td> <td valign="top"> <strong>normal</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {word-spacing: 1.2em}<br> Przykład: <font style="WORD-SPACING: 1.2em">Tekst</font> </td> </tr> <tr> <td valign="top"> letter-spacing </td> <td valign="top"> Okre¶la odległo¶ć między literami </td> <td valign="top"> <strong>normal</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {letter-spacing: 0.2em}<br> Przykład: <font style="LETTER-SPACING: 0.2em">Tekst</font> </td> </tr> <tr> <td valign="top"> text-decoration </td> <td valign="top"> Okre¶la czy tekst ma być podkre¶lony, przekre¶lony, itd. </td> <td valign="top"> <strong>none,<br> underline,<br> overline,<br> line-through,<br> blink</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {text-decoration: line-through}<br> Przykład: <font style="TEXT-DECORATION: line-through">Tekst</font> </td> </tr> <tr> <td valign="top"> vertical-align </td> <td valign="top"> Okre¶la położenie tekstu w pionie względem elementu poprzedzaj±cego </td> <td valign="top"> <strong>baseline,<br> sub,<br> super,<br> top,<br> text-top,<br> middle,<br> bottom,<br> procent </td> <td valign="top"> elementy wewnętrzne </td> <td valign="top"> {vertical-align: top} </td> </tr> <tr> <td valign="top"> text-transform </td> <td valign="top"> Okre¶la sposób przemiany tekstu </td> <td valign="top"> <strong>capitalize,<br> uppercase,<br> lowercase,<br> none</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {text-transform: uppercase}<br> Przykład: <font style="TEXT-TRANSFORM: uppercase">Tekst</font> </td> </tr> <tr> <td valign="top"> text-align </td> <td valign="top"> Okre¶la położenie tekstu wewn±trz elementu </td> <td valign="top"> <strong>left,<br> right,<br> center,<br> justify</strong> </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {text-align: center} </td> </tr> <tr> <td valign="top"> text-indent </td> <td valign="top"> Okre¶la odległo¶ć od lewego marginesu </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {text-indent: 20%} </td> </tr> <tr> <td valign="top"> line-height </td> <td valign="top"> Okre¶la odległo¶ć między dwoma s±siednimi liniami </td> <td valign="top"> <strong>normal</strong>,<br> liczba,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {line-height: 120%} </td> </tr> </tbody> </table><br> <br> <b>2.4. Elementy kwadratowe</b><br> <br> <table rules="all" cellspacing="0" cellpadding="3" width="100%"> <tbody> <tr style="color: #FFFFFF; background: #A90605; text-align: center"> <td>Wła¶ciwo¶ć</td> <td>Opis</td> <td>Warto¶ć</td> <td>Odnosi się do</td> <td>Przykład</td> </tr> <tr> <td valign="top"> margin-top </td> <td valign="top"> Okre¶la odległo¶ć od górnej krawędzi strony </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {margin-top: 3em} </td> </tr> <tr> <td valign="top"> margin-right </td> <td valign="top"> Okre¶la odległo¶ć od prawej krawędzi strony </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {margin-right: 4px} </td> </tr> <tr> <td valign="top"> margin-bottom </td> <td valign="top"> Okre¶la odległo¶ć od dolnej krawędzi strony </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td class="LEFT" valign="top"> wszystkie elementy </td> <td valign="top"> {margin-bottom: 13%} </td> </tr> <tr> <td valign="top"> margin-left </td> <td valign="top"> Okre¶la odległo¶ć od lewej krawędzi strony </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {margin-left: 4em} </td> </tr> <tr> <td valign="top"> margin </td> <td valign="top"> Okre¶la odległo¶ć od krawędzi strony według kolejno¶ci: górna, prawa, dolna, lewa </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {margin: 2em 3em 1em 4em} </td> </tr> <tr> <td valign="top"> padding-top </td> <td valign="top"> Okre¶la górny odstęp elementu </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {padding-top: 0.2em} </td> </tr> <tr> <td valign="top"> padding-right </td> <td valign="top"> Okre¶la prawy odstęp elementu </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {padding-right: 12px} </td> </tr> <tr> <td valign="top"> padding-bottom </td> <td valign="top"> Okre¶la dolny odstęp elementu </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {padding-bottom: 0.4em} </td> </tr> <tr> <td valign="top"> padding-left </td> <td valign="top"> Okre¶la lewy odstęp elementu </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {padding-left: 7%} </td> </tr> <tr> <td valign="top"> padding </td> <td valign="top"> Okre¶la odstęp elementu według kolejno¶ci: górna, prawa, dolna, lewa </td> <td valign="top"> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {padding: 2em 1em 3em 4em} </td> </tr> <tr> <td valign="top"> border-top-width</font> </td> <td valign="top"> Okre¶la szeroko¶ć górnej granicy (ramki) elementu </td> <td valign="top"> <strong>thin,<br> medium,<br> thick</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-top-width: thin} </td> </tr> <tr> <td valign="top"> border-right-width </td> <td valign="top"> Okre¶la szeroko¶ć prawej granicy (ramki) elementu </td> <td valign="top"> <strong>thin,<br> medium,<br> thick</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-right-width: medium} </td> </tr> <tr> <td valign="top"> border-bottom-width </td> <td valign="top"> Okre¶la szeroko¶ć dolnej granicy (ramki) elementu </td> <td valign="top"> <strong>thin,<br> medium,<br> thick</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-bottom-width: thick} </td> </tr> <tr> <td valign="top"> border-left-width </td> <td valign="top"> Okre¶la szeroko¶ć lewej granicy (ramki) elementu </td> <td valign="top"> <strong>thin,<br> medium,<br> thick</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-left-width: 3px} </td> </tr> <tr> <td valign="top"> border-width </td> <td valign="top"> Okre¶la szeroko¶ć granicy (ramki) elementu według kolejno¶ci: górna, prawa, dolna, lewa </td> <td valign="top"> <strong>thin,<br> medium,<br> thick</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-width: thin thick medium thick} </td> </tr> <tr> <td valign="top"> border-color </td> <td valign="top"> Okre¶la kolor granicy (ramki) elementu </td> <td valign="top"> nazwa koloru,<br> warto¶ć hex </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-color: red} </td> </tr> <tr> <td valign="top"> border-style </td> <td valign="top"> Okre¶la styl granicy (ramki) elementu </td> <td valign="top"> <strong>none,<br> dotted,<br> dashed,<br> solid,<br> double,<br> groove,<br> ridge,<br> inset,<br> outset</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-style: double} </td> </tr> <tr> <td valign="top"> border-top </td> <td valign="top"> Okre¶la szeroko¶ć, kolor i styl górnej granicy (ramki) elementu </td> <td valign="top"> border-top-width,<br> border-style,<br> color </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-top: thin blue solid} </td> </tr> <tr> <td valign="top"> border-right </td> <td valign="top"> Okre¶la szeroko¶ć, kolor i styl prawej granicy (ramki) elementu </td> <td valign="top"> border-right-width,<br> border-style,<br> color </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-right: } </td> </tr> <tr> <td valign="top"> border-bottom </td> <td valign="top"> Okre¶la szeroko¶ć, kolor i styl dolnej granicy (ramki) elementu </td> <td valign="top"> border-bottom-width,<br> border-style,<br> color </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-bottom: } </td> </tr> <tr> <td valign="top"> border-left </td> <td valign="top"> Okre¶la szeroko¶ć, kolor i styl lewej granicy (ramki) elementu </td> <td valign="top"> border-left-width,<br> border-style,<br> color </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border-left:} </td> </tr> <tr> <td valign="top"> border </td> <td valign="top"> Okre¶la szeroko¶ć, kolor i styl granicy (ramki) elementu według kolejno¶ci: górna, prawa, dolna, lewa </td> <td valign="top"> border-width,<br> border-style,<br> color </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {border: } </td> </tr> <tr> <td valign="top"> width </td> <td valign="top"> Okre¶la szeroko¶ć elementu (np. grafiki) </td> <td valign="top"> <strong>auto</strong>,<br> procent,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {width: 80px} </td> </tr> <tr> <td valign="top"> height </td> <td valign="top"> Okre¶la wysoko¶ć elementu (np. grafiki) </td> <td valign="top"> <strong>auto</strong>,<br> punkt (pt),<br> inch (in),<br> centymetr (cm),<br> względem (em),<br> piksel (px) </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {height: 170px} </td> </tr> <tr> <td valign="top"> float </td> <td valign="top"> </td> <td valign="top"> <strong>left,<br> right,<br> none</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {float: left} </td> </tr> <tr> <td valign="top"> clear </td> <td valign="top"> </td> <td valign="top"> <strong>none,<br> left,<br> right,<br> <strong>both</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {clear: right} </td> </tr> </tbody> </table><br> <br> <b>2.5. Klasyfikacja</b><br> <br> <table rules="all" cellspacing="0" cellpadding="3" width="100%"> <tbody> <tr style="color: #FFFFFF; background: #A90605; text-align: center"> <td>Wła¶ciwo¶ć</td> <td>Opis</td> <td>Warto¶ć</td> <td>Odnosi się do</td> <td>Przykład</td> </tr> <tr> <td valign="top"> display </td> <td valign="top"> Okre¶la w jaki sposób dany element ma być wy¶wietlony </td> <td valign="top"> <strong>block,<br> inline,<br> list-item,<br> none</strong> </td> <td valign="top"> wszystkie elementy </td> <td valign="top"> {display: none} </td> </tr> <tr> <td valign="top"> white-space </td> <td valign="top"> Okre¶la w jaki sposób należy obchodzić się z odstępami wewn±trz elementu </td> <td valign="top"> <strong>normal,<br> pre,<br> nowarp</strong> </td> <td valign="top"> elementy będ±ce blokiem </td> <td valign="top"> {white-space: pre} </td> </tr> <tr> <td valign="top"> list-style-type </td> <td valign="top"> </td> <td valign="top"> <strong>disc,<br> circle,<br> square,<br> decimal,<br> lower-roman,<br> upper-roman,<br> lower-alpha,<br> upper-alpha,<br> none</strong> </td> <td valign="top"> elementy z display = list-item </td> <td valign="top"> {list-style-type: lower-roman} </td> </tr> <tr> <td valign="top"> list-style-image </td> <td valign="top"> </td> <td valign="top"> adres URL,<br> <strong>none</strong> </td> <td valign="top"> elementy z display = list-item </td> <td valign="top"> {list-style-image: url(rysunek.gif)} </td> </tr> <tr> <td valign="top"> list-style-position </td> <td valign="top"> </td> <td valign="top"> <strong>inside,<br> outside</strong> </td> <td valign="top"> elementy z display = list-item </td> <td valign="top"> {list-style-position: outside} </td> </tr> <tr> <td valign="top"> list-style </td> <td valign="top"> </td> <td valign="top"> <strong>disc,<br> circle,<br> square,<br> decimal,<br> lower-roman,<br> upper-roman,<br> lower-alpha,<br> upper-alpha,<br> none,<br> inside,<br> outside,<br> adres URL,<br> none</strong> </td> <td valign="top"> elementy z display = list-item </td> <td valign="top"> {list-style: circle outside} </td> </tr> </tbody> </table> </body> </html>
|