CSS

Klasa (.)

selektor.klasa {}

Identyfikator (#) – może wystąpić tylko raz w hierarchii drzewa dokumentu, nie może rozpoczynać się cyfrą ani myślnikiem.

selektor#identyfikator {}

Klasa i Indentyfikator to pojedynczy wyraz, który może zawierać litery z alfabetu angielskiego (A-Z, a-z), cyfry (0-9), myślniki („-„) i podkreślniki („_”).

Selektor uniwersalny – określa atrybuty dla wszystkich elementów strony.

* {}

Selektor potomka – nadaje atrybuty elementom, które leżą niżej w hierarchii drzewa dokumentu. Potomek nie musi leżeć bezpośrednio za przodkiem.

przodek1 przodek2 … potomek {}

Selektor dziecka – nadaje atrybuty elementom, które leżą o jeden rząd niżej w hierarchii drzewa dokumentu. Dziecko musi znajdować się bezpośrednio wewnątrz znacznika rodzica.

rodzic > dziecko {}

Selektor braci – nadaje określone atrybuty drugiemu z sąsiadujących ze sobą braci (brat2).

brat1 + brat2 {}

Ogólny selektor braci – nadaje określone atrybuty drugiemu z sąsiadujących ze sobą braci (brat2). Pomiędzy braćmi mogą znajdować się elementy innego typu, które zostaną pominięte.

brat1 ~ brat2 {}

CENTROWANIE W POZIOMIE
TEKST – wewnątrz bloku centruje się za pomocą text-align:center. Właściwość ta działa tylko na elementy typu inline — cały blok może mieć inne położenie.
Elementy mające display:inline, display:inline-block, display:inline-table są traktowane jak tekst, więc też zostaną wycentrowane (m.in.: obrazki, elementy formularza).

p.komunikat {text-align:center;}

Element text-align jest dziedziczony, więc jeśli nie chcesz, żeby działał na potomków elementu, musisz im nadać inną wartość tej właściwości.

STATYCZNE ELEMENTY BLOKOWE – najczęściej centruje się za pomocą margin:auto. Aby ta właściwość zadziałała, element musi mieć ustaloną szerokość albo ustawiony display:table (który spowoduje automatyczne wyliczenie szerokości).

div#content {
width:80%;
min-width:500px;
max-width:60em;
margin: 0 auto;
}

Wyśrodkowanie całej strony, owiniętej w div id=”content”, która zajmie 80% szerokości okna, ale nie mniej niż 500px (bo np. umieszczone obrazki się nie zmieszczą), ani nie więcej niż 60em (bo tak bardzo rozciągnięty tekst jest słabo czytelny).

CENTROWANIE W PIONIE
Strony internetowe z założenia są „ciągłe” i mają zajmować minimalną niezbędną wysokość. Również gdy się je drukuje na wielu kartkach, to nie jest jasne, gdzie jest środek strony. Z tego powodu centrowanie w pionie jest trudne w CSS.

TEKST
Tekst (i elementy inline, inline-block, inline-table) tylko w obrębie pojedynczej linii centruje się za pomocą vertical-align:middle.

CENTROWANIE WEWNĄTRZ KOMÓRKI TABELI
Dla elementów tabel najlepiej działa właściwość vertical-align:middle, która wyjątkowo centruje w pionie całą zawartość komórki (a nie tylko tekst).

p.komunikat {
height: 10em;
display:table;
vertical-align:middle;
}

ELEMENT BLOKOWY
Żeby wycentrować jeden element w pionie potrzebny jest element nadrzędny posiadający konkretną wysokość i niestety nie może to być po prostu height=100%.

CENTROWANIE ELEMENTÓW O STAŁEJ WYSOKOŚCI
Jeśli element do wycentrowania i element, w którym się on znajduje, mają stałą wysokość, to można ustawić odpowiednio duży margin i/lub padding, aby odsunąć element na odpowiednią wysokość.

CENTROWANIE ELEMENTÓW ABSOLUTNIE POZYJONOWANYCH
Ustawienie left:50% i top:50% centruje względem lewego górnego rogu elementu, a nie jego środka, przez co element nie będzie równo na środku. Można to skorygować za pomocą sztuczki — nadać elementowi ujemny lewy/górny margines na połowę jego wielkości.

#srodek {
width:200px; margin-left: -100px;
height:150px; margin-top: -75px;
position:absolute; top:50%; left:50%;
}

Jeśli element nie musi mieć stałej wielkości, to można go łatwo wycentrować ustalając równą odległość od krawędzi elementu go zawierającego:

#srodek {
position:absolute;
top:50px; left:50px;
bottom:50px; right:50px;
}

CENTROWANIE NA ŚRODKU EKRANU
Do wyśrodkowania elementu na ekranie potrzeba rozciągnąć na cały ekran i wtedy można użyć sposobu z pozycjonowaniem absolutnym wspomnianym wcześniej.

html {height:100%;}

 

LISTY LI
http://www.red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html
http://naradesign.net/css/ex/content.html

FLOAT, CLEAR, INLINE, BLOCK
Ramka do div zawierającego obraz i tekst by pokrywał cały div a nie tylko tekst

float:left; overflow:auto -> http://jsfiddle.net/rmwolinski/K5R8J/

Po float następny element w nowej linii

float:clear -> http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

Galeria zdjęć

float:left -> http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

Żródło:
http://www.quirksmode.org/css/clearing.html
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://complexspiral.com/publications/containing-floats/

TEXT-INTEND in IE6/IE7
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

All about CSS
http://www.positioniseverything.net/

Test in IE online
http://netrenderer.com/

Test elements in all browser (know how)
http://www.brunildo.org/test/

header, section, nav, footer in IE
http://code.google.com/p/html5shiv/

<head>
</head>

PNG in IE5.5 i IE6
Istnieje możliwość wyświetlenia pliku png z kanałem alpha, ale jedynie w tle a nie jako . Użyjemy do tego specialnego filtru.

background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”SCIEZKA_DO_OBRAZU_WZGLEDEM_DOK_XHTML”, sizingMethod=”crop”;

 

Można wykorzystać metodę „crop” lub „scale”.

Obrazki Musisz (czy to przy użyciu JS czy zmieniając strukturę XHTML) wstawić jako obraz plik GIF z przeźroczystm pikselem, a elementowi ustawić tło (jak powyżej).

Style, wyjątki dla IE
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/