== Deklaracja XMLa: ==
== Deklaracja zawartości: ==
== Zamykanie każdego tagu ==
Aby być zgodnym z XHTML ten tag musi zostać zamknięty.
oraz
== Wszystkie tagi muszą być poprawnie zagnieżdżone ==
Myślę, ergo jestem.
== Tagi wbudowane nie mogą zawierać tagów blokowych ==
Tagi wbudowane (inline) to przykładowo a lub em. Tagi blokowe to p i div.
== Wszystkie tagi piszemy małymi literami ==
== Atrybuty muszą mieć wartości i muszą być w cudzysłowiu ==
== Używaj kodowych odpowiedników znaków specjalnych ==
Przykładowo < to odpowiednik <. & to &
==== Dodawanie CSSa ====
Są trzy sposoby użycia stylów na stronie: wewnętrzne (inline), osadzone i znajdujące się w osobnym pliku.
== Wewnętrznie: ==
...
== Osadzone: ==
wstawiając go w nagłówku pliku HTML:
== W osobnym pliku: ==
wstawiając style w pliku CSS i linkując go ze stroną HTML:
selector {property:value;}
i wtedy w pliku HTML:
== Priorytety przekazywania: ==
inline > wewnętrzny (w dokumencie) > wewnętrzny (zaimportowany) > zewnętrzny (w pliku css) > zewnętrzny zaimportowany > wartości domyślne
==== Klasy ====
Klasy definiujemy w CSS przez:
p.right {text-align: right;}
a w pliku HTML:
...
Zapis:
.right {text-align: right;}
odnosić się będzie do wszystkich selektorów o klasie right.
==== Identyfikatory ID ====
#green {color: green;}
a w pliku HTML:
...
==== Inne ====
Komentarze:
/* komentarz */
Importowanie innych plików CSS:
@import url(style.css);
Grupowanie:
h1,h2,h3,h4,h5 {color:navy;}
Nadawanie stylu elementom HTML o danym typie:
input[type="text"] {background-color:blue}
====== Linki ======
* http://www.smashingmagazine.com/2009/11/23/6-useful-coding-solutions-for-designers-and-developers/
* http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/
* http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
* http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/
===== CSS3 =====
* http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/
* http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/
* http://www.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/
* http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/
* http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
* http://www.zenelements.com/blog/css3-hsl-hsla-color-opacity/
* http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
* http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
* http://24ways.org/2009/cleaner-code-with-css3-selectors
* http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/
* http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/
* http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/
* http://www.viget.com/inspire/practical-uses-of-css3/
* http://inspectelement.com/tutorials/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3/
* http://www.netmag.co.uk/zine/develop-css/get-the-best-out-of-css3
* http://net.tutsplus.com/tutorials/html-css-techniques/design-a-prettier-web-form-with-css-3/
* http://www.smashingmagazine.com/2010/05/06/modern-css-layouts-part-2-the-essential-techniques/