| Style CSS |
|---|
| Napisany Sat 25 Mar 2006 przez red_Slider (5292 ods艂on) |
|
Pliki CSS 2. style.css Plik style.css Cascading Style Sheet jest podstawowym stylem sk贸rki. Jest on 艂adowany po stronie u偶ytkownika, jest u偶ywany we wszystkich stronach ca艂ej sk贸rki. Linie 1-17: body {color: black; background: white; margin: 0; padding: 0;} table {width: 100%; margin: 5; padding: 5; font-size: small} table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;} a {color: #666666; text-decoration: none; font-weight: bold; background-color: transparent;} a:hover {color: #ff6600;} h1 {} h2 {} h3 {} h4 {} h5 {} ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;} li { margin-left: 2px; list-style: square inside; color: #2F5376} input.formButton {} 艁aduj膮 one style podstawowych element贸w strony. Jak wida膰, sa tutaj sekcja BODY i styl linku jaki u偶ywamy na stronie. Linie 19-31: .item {border: 1px solid #cccccc;} .itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;} .itemInfo {text-align: right; padding: 3px; background-color: #efefef} .itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;} .itemPoster {font-size: 90%; font-style:italic;} .itemPostDate {font-size: 90%; font-style:italic;} .itemStats {font-size: 90%; font-style:italic;} .itemBody {padding-left: 5px;} .itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;} .itemText:first-letter {font-size: 133%; font-weight: bold;} 膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮膮 .itemFoot {text-align: right; padding: 3px; background-color: #efefef} .itemAdminLink {font-size: 90%;} .itemPermaLink {font-size: 90%;} Te definiuj膮 klasy dla modu艂贸w NEWS oraz wskazuj膮 w jaki spos贸b newsy (artyku艂y) na naszej stronie s膮 zrenderowane (nie tylko czcionka, ale te偶 t艂o, “border”, odst臋p od kraw臋dzi). Linie 33: th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;} Jest to podstawowy styl tabeli nag艂贸wk贸w. Jest to wa偶na zawarto艣膰 dla tabel u偶ywanych w blokach i modu艂ach, jak forum, ostatnie posty, czy „kontakt z nami” (contact us). Linie 35-36: td#headerbanner {width: 100%; background-color: #2F5376; vertical-align: middle; text-align:center;} td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);} Style te odnosz膮 si臋 do Tabeli nag艂贸wka (Header Table). Zapami臋taj, 偶e obrazek t艂a nag艂贸wka (header bar image - hbar.gif) jest wywo艂ywany w艂a艣nie za pomoc? style.css jako t艂o, a nie bezpo藕rednio z pliku theme.html. Linie 38-41: td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;} td#leftcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;} td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;} Te klasy i style (id!) definiuj膮 wy艣wietlanie Lewej Kolumny. Zwr贸膰 uwag臋 na to, 偶e osobno definiuje si臋 tytu艂y bloku lewego oraz zawarto艣膰 tych blok贸w. Linie 44-57: td#centercolumn {font-size: 12px;} td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} td#centerCcolumn {padding: 0px 3px 1px 3px;} td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px;} td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom: 2px; line-height: 120%;} td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;} td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;} td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;} td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;} td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; margin-top: 0px;} td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;} Te style odwo艂uj膮 si臋 do wy艣wiwtlania bloku center-center (centerCcolumn), centralnego lewego (centerLcolumn) i centralnego prawego bloku (centerRcolumn). Zauwa偶, 偶e rozmiar czcionki (font-size) bloku centralnego I zawartosci modu艂贸w jest wskazany w艂a艣nie tutaj (centercolumn). Linia 59: div#content {text-align: left; padding: 8px;} okre艣lenie te definiuje nam tag wartswy w zawarto艣ci modu艂贸w (div). Po艂o偶enie tekstu (text-align) i odst臋p s膮 zdefiniowane w艂a艣nie tutaj. Linie 61-64: td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;} td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;} td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; font-weight: bold;} td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;} Te identyfikatory (id) okre艣laja nam praw膮 kolumn臋, Je艣li jest wy艣wietlana. Zwr贸c uwag臋, na u偶yte atrybuty dla tytu艂贸w I zawarto艣ci blok贸w prawej kolumny. Linia 66: tr#footerbar {text-align:center; background-image: url(hbar.gif);} Jest uzyta w tabeli stopki. Zwr贸c uwag臋, 偶e u偶yty jest tu ten sam obrazek, jak w tle nag艂贸wka. Linie 68-72: td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;} td#mainmenu a:hover {background-color: #ffffff;} td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} Style te u偶yte s膮 dla bloku Menu G艂贸wnego (Main Menu). Jak wida膰 style wskazuja na r贸偶nice pomi臋dzy pierwszym (najbardziej na g贸rze) linkiem, linkami g艂贸wnymi I linkami submenu. Linie 74-77: td#usermenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;} td#usermenu a:hover {background-color: #ffffff;} td#usermenu a.menuTop {border-top: 1px solid silver;} td#usermenu a.highlight {background-color: #fcc;} Style te uzyte s膮 w bloku Menu U偶ytkownik (User Menu). Ostatnia linia (a.highlight) okre艣la nam lini臋 Wiadomo艣ci, gdzie wy艣wietlane s膮 wiadomo艣ci z powiadomie艅 i Prywatnych Wiadomo艣ci dla u偶ytkownika. Linie 81-87: .outer {border: 1px solid silver;} .head {background-color: #c2cdd6; padding: 5px; font-weight: bold;} .even {background-color: #dee3e7; padding: 5px;} .odd {background-color: #E9E9E9; padding: 5px;} .foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;} tr.even td {background-color: #dee3e7; padding: 5px;} tr.odd td {background-color: #E9E9E9; padding: 5px;} s膮 to style u偶yte w tabelach. “Odd” I “even” uzywane s膮 w艂a艣ciwie we wszystkich tabelach jako r贸偶ne kolumny i wiersze. Linie 89-91: div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;} div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;} div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;} Te style okre艣laj膮 nam wy艣wietlanie si臋 b艂臋d贸w o komunikat贸w generowanych przez system. Nie ma wi臋kszego powodu by je zmienia膰. Linie 93-94: div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;} div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;} Te zn贸w u偶ywane s膮 w forum (NewBB) oraz w komentarzach do modu艂贸w. Linie 97-108: .comTitle {font-weight: bold; margin-bottom: 2px;} .comText {padding: 2px;} .comUserStat {font-size: 10px; color: #2F5376; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;} .comUserStatCaption {font-weight: normal;} .comUserStatus {margin-left: 2px; margin-top: 10px; color: #2F5376; font-weight:bold; font-size: 10px;} .comUserRank {margin: 2px;} .comUserRankText {font-size: 10px;font-weight:bold;} .comUserRankImg {border: 0;} .comUserName {} .comUserImg {margin: 2px;} .comDate {font-weight: normal; font-style: italic; font-size: smaller} .comDateCaption {font-weight: bold; font-style: normal;} Tutaj mamy okre艣lenie u偶ytych w modu艂ach element贸w wskazuj艣cych na informacje o u偶ytkowniku. 3. styleMAC.css Linie 1-3: @import url(style.css); /* Very short Mac-specific additions/changes here (if any) */ Ten plik u偶ywany jest dla randerowania r贸偶nic pomi臋dzy r贸偶nymi przegl膮darkami. Plik pozawala nie tylko na import pliku style.css, ale r贸wnie偶 na pozbycie si臋 r贸偶nic w wy艣wietlaniu sk贸rki dla u偶ytkownik贸w przegl膮darek Mac’owskich. 4. styleNN.css Linie 1-3: @import url(style.css); /* Very short Gecko-specific additions/changes here (if any) */ Ten plik u偶ywany jest dla randerowania r贸偶nic pomi臋dzy r贸偶nymi przegl膮darkami. Plik pozawala nie tylko na import pliku style.css, ale r贸wnie偶 na pozbycie si臋 r贸偶nic w wy艣wietlaniu sk贸rki dla u偶ytkownik贸w przegl膮darek Netscape, w szczeg贸lno艣ci Mozilla, Mozilla Firebird oraz Mozilla Firefox. |
| Powr贸t :: Drukuj :: E-mail |
Komentarze s膮 w艂asno艣ci膮 ich autor贸w. Nie ponosimy odpowiedzialno艣ci za ich tre艣膰.
