1. Komenda CSS

 

Witajcie kochani, czas zacząć przygodę z CSS. Oczywiście zaczynamy od poznania podstaw.

Wstęp by Wikipedia

Kaskadowe arkusze stylów (ang. Cascading Style Sheets ; w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie.
Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

  

Wstęp by Raion

Jako, że zapewne większość was nie zrozumiała czym jest CSS, ja to omówię po swojemu, bez zbędnych szczegółów. Style służą do definiowania tego, co zostało stworzone wcześniej za pomocą HTML. Tak, kochani. Nie wpłyniemy na coś co nie istnieje, na przykład: Nie pojedziemy samochodem, którego nie mamy albo nie pofarbujemy włosów na łysej głowie. Komendy nakazują po prostu pewne rzeczy przeglądarce. Wystarczy znać odpowiedni selektor i dobrać deklaracje. Czym one są dowiecie się za chwile. Proszę jednak pamiętać, że kodu nigdy nie może być za mało, ale i za dużo też nie. W tym wypadku przeglądarka zacznie wariować, nie wiedząc na co wpłynąć.

Do dzieła. Poznajmy podstawową komendę:

selektor {cecha: wartość;}

To po kolei, wyjaśnienie nazw jest pod spodem. A teraz gdzie jest ukryta deklaracja? Jest ona zawsze w nawiasie klamrowym i składa się z dwóch elementów: cechy i wartości. 

Selektor - element, na którego chcemy wpłynąć. Każdy ma swoją nazwę, Na przykład środkowa kolumna - .column-center-inner.  

Cecha -  Odpowiada ona za to, na co chcemy wpłynąć w danym elemencie/selektorze. Jeśli chcemy zmienić obramowanie, to jest to - border. Ogólnie cecha ma kilka nazw, ale zostańmy przy dwóch - cecha lub właściwość.

Wartość - Ostatni element podstawowej komendy. Jest on dopełnieniem cechy. Idąc tropem poprzedniej części, dokończmy ramkę, wartość wygląda na przykład tak - 1px solid white.

Poznaliśmy podstawę budowy stylu, a jak to wygląda w praktyce? Żeby ramka nam wyszła komenda wygląda tak:

.column-center-inner {border: 1px solid white;}

Zaznaczmy tu, że zarówno HTML jak i CSS pisane są jedynie za pomocą języka angielskiego. Jak ta komendę przeczyta nasza przeglądarka? Oczywiście zrobi to po kolei. "Zrozumie", że wpływa na środkową kolumnę, potem, że musi przygotować ramkę, a na końcu czyta jej wytyczne. W naszym wypadku ma ona grubość jednego piksela,  składa się z linii ciągłej i jest biała. 

Czy trzeba kilka razy to samo powtarzać? Jasne, że nie. Komenda może składać się z kilku selektorów i deklaracji. Wygląda to następująco:

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

W tym wypadku jest kilka zasad. Przed nawiasem klamrowym nie może wystąpić przecinek. Jeśli chodzi o deklaracje, to każda musi być oddzielona średnikiem. 

A co się stanie gdy komenda nie działa? Oczywiście, mówimy o przypadku, w którym jest dobrze zapisana. Dodajemy wówczas !important. W wielu sytuacjach pomaga, lecz nie ma 100% pewności. Komenda wygląda wtedy następująco:

 selektor {właściwość: wartość !important;}

Pamiętajcie, że !important zawsze występuje przed średnikiem zamykającym daną deklarację. A i nie zawsze komenda w każdej przeglądarce działa. Dlatego najlepiej mieć wgląd do kilku najpopularniejszych.

~*~

To już wszystko jeśli chodzi o podstawy. A teraz pytanie. Co chcecie potem? Jedziemy dalej z CSS czy zaczynamy grafikę?

Pozdrawiam, Raion