Notatnik Webmastera : CSS ...



Obserwuj zmiany wprowadzane na tej stronie | Wersja do druku | Zaloguj się:   Hasło:  

Strony na temat CSS

Klasy i Identyfikatory

Uwagi

  • identyfikator ma pierwszenstwo nad klasa: jezeli zdefiniujecie jakis #id w pliku i usatwicie mu jakies parametry to nie bedzie mozna tych parametrow zmienic za pomoca klasy
  • takie zastosowanie klas i identyfikatorow jest wykorzystane w wp.pl

Zastosowanie


  • jak tworzycie stale elementy na stronie, ktore czesto sie powtarzaja a nie roznia sie zbyt duzo miedzy soba poza pewnymi tylko szczegolami
  • skraca sie kod w css-ie po uzywacie juz zadeklarowanych wczesniej elementow, a wiec szybciej sie laduje, nie ma potrzeby pisac podobnych identyfikatorow czy klas dla b podobnyc elementow na sronie
  • myslalem nad stworzeniem standardowego css-a zawierajacego zadeklarowanych kilkanascie podstawowych klas najczesciej uzywanych podczas budowania layoutu strony
#glowny {width: 300px; height: 300px; font-size: 11px; font-family: Arial;}

//kilka klas pomocniczych
.lft { float: left;}
.rht { float: right;}
.obr { border-width: 1px; border-color: red; border-style: solid;}
.tlo1 { background-image: url();}
.tlo2 { background-image: url();}
.txt_lft { text-align: left;}
.txt_rht { text-align: right;}

<div id="glowny" class="lft obr tlo1 txt_lft"></div>
<div id="glowny" class="rht tlo2 txt_rht"></div>

oczywisice z powyzszego przykladu wynika ze jak zadeklaruje sie klase, ktora ma zmieniac np. kroj trzcionki to nie zadziala ona z id=glowny bo to co zostalo ustawione w id=glowny jest wazniejsze od tego co jest w klasie

Roznice w przegladarkach

Uwagi

Tricki CSS


Żeby wyłączyć możliwość zaznaczenia tekstu przez użytkownika można użyć stylu -moz-user-select: none;

Wszystkie przeglądarki oprócz IE działają tak że jeżeli ustawi się div-owi szerokość lub wysokość a rzeczy wewnątrz div się w nim nie mieszczą to wyłażą za div-a. Żeby div się dopasował do zawartości można zrobić tak:
html>body .box
{

 width: auto;
  min-width: 40px
} 

Mozilla natomiast nie jest w stanie rozciągnąć elementu body do rozmiaru najbardziej rozciągniętego div'a (IE sobie z tym radzi o dziwo). Szczepionką na to jest wstawienie w styl elementu body linijki:

body 
{
  float:left;
} 

inne tricki obchodzące błędy IE można znaleźć tu: http://www.codeproject.com/useritems/css-internet-explorer.asp

W IE można używać w stylach Java Script-u

W taki sposób:
<div style="height:expression(document.body.parentNode.offsetHeight-4)">
</div>

 
Nie ma plików na tej stronie. [Wyświetl pliki/formularz]
Komentarze (0). [Dodaj/Wyświetl komentarze]

Informacje zanotowane na tej stronie sa publicznie dostępne. Każdy kto ma ochote może je wykorzystaż w dowolnym celu. Notujac tu coś godzisz sie z tym faktem.

Jeżeli widzisz na tej stronie treść lub kod Twojego autorstwa, na których upublicznianie przeze mnie sie nie godzisz daj mi znać.

Jeżeli uważasz informacje zamieszczone na tej stronie za użyteczne umieść linka do tej strony na własnych stronach. Dzięki temu większa ilość ludzi będzie mogła na tą stronę trafić.

Internetowy katalog stron internetowych