Podstawy CSSa [KONKURS]

Dzisiejszy wpis jest uzu­pełnie­niem pod­staw HTM­La, które umieś­cil­iśmy jak­iś czas temu na naszym blogu. Warto doczy­tać go do koń­ca, bo mamy w nim dla Was konkurs.

Lekcja

Jeśli chce­cie sprawdz­ić naszą lekc­je HTM­La, to dostęp­na jest ona tutaj. Dziś pora na CSSa.

CSS (ang. Cas­cad­ing Style Sheet) czyli kaskad­owe arkusze stylów  to język służą­cy do opisu prezen­tacji treś­ci na stronach WWW. Arkusz stylów to nic innego jak lista wyty­cznych, która mówi nam jak dane treś­ci mają być wyświ­et­lane na stron­ie inter­ne­towej. W ten sposób może­my określić wielkość, krój, kolor czcionek, mar­gin­esy, odstępy między wier­sza­mi, kolor tła, czy w końcu pozy­cję na stron­ie. CSS daje nam znacznie więcej możli­woś­ci niż HTML czy XML.

Uwa­ga, ważne! Poniższy wpis nie jest w żad­nym wypad­ku kursem tworzenia stron WWW, czy nawet pisa­nia w CSSie. Chce­my jedynie, byś zrozu­mi­ała kon­cepcje języ­ka, potrafiła sko­rzys­tać z bard­zo pod­sta­wowego for­ma­towa­nia i ori­en­towała się co jest czym w kodzie CSSa. Ta wiedza może okazać się przy­datna również gdy tworzysz swo­jego blo­ga na Word­Pressie i cza­sem sia­da Ci formatowanie.

Głównym założe­niem CSSa jest odsep­a­rowanie struk­tu­ry doku­men­tu od formy prezen­tacji, a mówiąc bardziej po ludzku by zwięk­szyć czytel­ność kodu i ułatwić nam życie. Wyobraźmy sobie, że nie korzys­tam z plat­formy Word­Press do tworzenia blo­ga, a piszę je sama doda­jąc po pros­tu kole­jne pod­strony. Bez CSSa, każde­mu nagłówkowi w tym wpisie musi­ałabym za pomocą HTM­La określać rozmi­ar, kolor, krój czcion­ki czy odstęp od resz­ty tek­stu. I musi­ałabym robić to nie tylko zawsze w ramach całego wpisu, ale też w ramach każdego z wpisów. Brz­mi jak kupa robo­ty, praw­da? Co więcej łat­wo wtedy o pomyłkę. CSS wycią­ga to for­ma­towanie do swo­jego pliku, a my tworząc stronę korzys­tamy z tagów odpowiada­ją­cych odpowied­niemu formatowaniu.

Mod­el kaskadowy

Pewnie zas­tanaw­ia­cie się, czemu kaskad­owe arkusze stylów? To po pros­tu sposób określe­nia hier­ar­chii stylów w doku­men­cie. Same style moż­na zdefin­iować na kil­ka sposobów:

• bezpośred­nio w kodzie strony jako atry­but dowol­nego znacznika
• w nagłówku
• glob­al­nie dla danego dokumentu
• oraz przez dołącze­nie zewnętrznego arkusza (co jest najczęś­ciej stosowane, bo pozwala na spójność projektu).

Mieszanie zas­tosowanych stylów jest możli­we i częs­to spo­tykane, dlat­ego konieczne jest określe­nie ważnoś­ci poszczegól­nych metod.
Zasa­da kaskad­owoś­ci przyję­ta przez twór­ców wyglą­da następu­ją­co:  najpierw ład­owane i uwzględ­ni­ane są zewnętrze arkusze, potem te wpisane do nagłówka, a na samym końcu style wpisane bezpośred­nio do znaczni­ka. Umożli­wia to kon­trolę nad doku­mentem, a w przy­pad­ku sprzecznoś­ci zas­tosowanie te, które są najbliżej dokumentu.

Skład­nia arkuszy

CSS skła­da się z reguł dedykowanych konkret­nym imple­men­tacjom stylów np. tym dla HTM­La, SVG i innym. Taka reguła skła­da się z selek­to­ra, który określa grupę ele­men­tów, których ma doty­czyć dane for­ma­towanie, oraz z deklaracji, która defini­u­je formatowanie.

selektor { właściwość: wartość }

Przykład­owa deklarac­ja takiego selek­to­ra może wyglą­dać tak.

h1 {color:green;}

Co oznacza, że każdy ele­ment, który jest oznac­zony jako h1 będzie wyświ­et­lany na zielono.

Poniżej kole­jny przykład, spróbuj sama opisać, jak sfor­ma­towany będzie tekst.

.Tesla {
   display:block;
   margin: 10px auto 20 px 30 px;
   padding: 0.75em 2em;
   width: 400 px;
   border-style: solid;
   border-width: 5px;
   border-color: red;
   background-color: yellow;
}

Widzi­cie tutaj charak­terysty­czne ele­men­ty takie jak : block, mar­gin, padding, bor­der. Są one ele­men­ta­mi mod­elu blokowego. CSS zakła­da, że wszys­tkie ele­men­ty umieszczane są w dodatkowej przestrzeni o ksz­tał­cie pros­tokątów. I każdą z tych przestrzeni może­my kontrolować:

• Mar­gin­esy (ang. mar­gins) — odstępy dzielące poszczególne ele­men­ty — bloki.
• Obramowanie (ang. bor­der) — lin­ie rozdziela­jące mar­gin­esy i dopełnienie.
• Dopełnienia (ang. padding) — odstępy pomiędzy ele­mentem a otacza­jącą go ramką — nazy­wane również mar­gin­e­sa­mi wewnętrznymi.
• Zawartość (ang. con­tent) — właś­ci­wa zawartość.

Źródło: http://www.codeproject.com

Pod­sumowu­jąc, arkusze CSS są bard­zo przy­datne jeśli chodzi na pracę z for­marowaniem wyświ­et­lanych treś­ci. To właśnie ich, a nie for­ma­towa­nia za pomocą HTML uży­wa się ter­az najczęś­ciej. Zami­ast określać wszys­tkie cechy naszego nagłówka za pomocą HTML, defini­u­je­my w nim tylko tag np. <h1>, który ma zadeklarowane for­ma­towanie w CSSie.

For­ma­towanie w HTML poprzez deklarac­je konkret­nych cech — kolory, kro­je fontów, czy odstępy, powin­niśmy trak­tować jako sytu­acje nadzwycza­jne, to CSS powinien być  głown­ie za nie odpowiedzial­ny. Dzię­ki temu znacznie ułatwiamy sobie pracę, a nasz kod będzie o wiele bardziej prze­jrzysty. Zain­tere­sowanych tem­atem odsyłam do mate­ri­ałów dodatkowych, bo od CSSa, podob­nie jak od HTM­La nie uciekniecie w swo­jej codzi­en­nej pracy :)

Materiały dodatkowe / dokumentacja

1. Kurs CSS w przykładach (PL)
2. Kurs CSSa na Codecad­e­my (EN)

KONKURS

Tak jak zapowiedzieliśmy mamy dla Was konkurs. Dzię­ki wspani­ałe­mu Coder’s Lab — pier­wsza w Polsce Szkoła Pro­gramowa­nia, mamy dla Was bilet oraz dwie 25% zniż­ki na najbliższe szkole­nie pod­staw HTM­La i CSSa. To dwa dni pełne nau­ki i prak­ty­ki ( o tym, jak wyglą­da takie szkole­nie może­cie przeczy­tać na blogu Troy­an­na). Ze swo­jej strony mogę dodać dwie rzeczy: nie da się uciec od HTM­La i CSSa i nawet, jeśli nie lubisz front-endu, jeśli wiesz, że będziesz robić back­end to i tak cza­sem będziesz musi­ała coś tam pozmieni­ać, a po drugie to świet­na opc­ja dla ludzi, którzy dopiero co zaczy­na­ją przy­godę z programowaniem.

Konkurs doty­czy najbliższego ter­minu czyli 21–22.02.2015 r., a szkole­nie odby­wa się w Warsza­w­ie. Szczegóły kur­su dostęp­ne są tutaj.

Zasady konkur­su są bard­zo proste:

Prosimy Cię o odpowiedź dlaczego to właśnie Ty powinnaś/powinieneś wygrać nasz konkurs. Odpowiedzi należy umieszczać w komen­tarzach. For­ma dowolna. 

Komis­ja konkur­sowa w składzie Ania, Kuba, Tes­la wybierze zwycięzców i opub­liku­je ich nazwiska w tym wpisie. Konkurs trwa od dzisi­aj do środy, 11.02 do północy.