Jak używać CSS w tworzeniu strony internetowej?

Nie na wszystkie aspekty swojego życia możesz mieć wpływ, natomiast na wygląd swojej strony internetowej jak najbardziej.

Jeżeli chcesz swobodnie i bez problemów ustawiać formę prezentacji strony internetowej, koniecznie musisz zapoznać się ze specyfiką CSS.

css

Czym jest CSS?

Kaskadowe arkusze stylów, bo tak właśnie brzmi pełne rozwinięcie CSS służą do kompleksowego formatowania treści Twojej strony internetowej przy użyciu reguł/dyrektyw, które sam stworzysz. CSS oferuje wiele właściwości, wszystkie można znaleźć po prostu w internecie.

Jak umieścić CSS w swojej stronie?

Masz trzy możliwości, które pozwolą na szybkie wstawienie CSS do strony.

Pierwszy z nich, używany coraz rzadziej, ale oczywiście nadal aktualny polega na wpisaniu danych stylów do odpowiedniego znacznika. Wyobraźmy sobie, że masz znacznik paragraf. Zamiast otwierać go i od razu zamykać dokonujesz jego rozszerzenia.

Piszesz zatem < p style=”wpisujesz element”, wpisujesz następnie tekst który chcesz uzyskać i...> zamykasz znacznik. Jednak musisz wiedzieć iż ten sposób jest nie przydatny jeżeli chodzi o definiowanie stylów.

Możesz również skorzystać ze znacznika style w sekcji head, czyli tam gdzie umieszczasz tytuł czy też kodowanie naszej strony. To rozwiązanie jest idealne w momencie gdy nie masz zbyt dożo stylów. Pomyśl, jeżeli występuje tysiąc linii skryptów i ktoś zobaczy Twój skrypt to pierwszą rzeczą na którą zwróci uwagę będzie ogromna liczba tych właśnie linii. Twój HTML zejdzie na dalszy plan, a przecież nie takiego efektu oczekujesz, prawda?

Najlepszą opcją ze jest umieszczenie wszystkich swoich stylów w osobnym pliku CSS.

Jak wygląda budowa takiego CSSa?

Konstrukcja jest bardzo prosta, wygląda następująco:

Selektor{

color: red;

font – size: 20px;

}

Na schemacie występuje SELECTOR czyli znacznik który chcesz ostylować. Otwierasz go nawiasem klamrowym wpisujesz atrybut jaki chcesz zmienić, nadajesz mu wartość, zamykasz średnikiem. I to wszystko, prawda że proste? Spójrzmy jak to wygląda na przykładzie paragrafu:

p{

color: green;

font-size: 25px;|

}

Prawda jest taka, że prawie wszystkie tagi HTML możemy oscylować zgodnie z naszymi potrzebami.

Jest jednak jedna rzecz o której musisz pamiętać.

Na pewno zdarzy się tak, że stworzysz genialnego CSSa, oczywiście od razu będziesz chciał wejść na stronę i podziwiać swoje cudo, a tu niespodzianka...nic się nie zmieniło. I weź tu teraz szukaj przyczyny...jest ona bardzo prosta i właśnie o tym musisz pamiętać.

Każdą z wartości powinieneś zakończyć średnikiem!

Dlaczego?

Ponieważ Twoja przeglądarka może nie rozpoznać stylów i nie zareaguje na Twoje polecenie.

Na to musisz koniecznie zwrócić uwagę.

Możesz jednocześnie używać wiele selektorów i nadawać im taką samą wartość.

p, h1, h3, strong{

color: green;

font – size: 25px;

}

W ten sposób możesz urozmaicić stylowanie. Po przecinku wymieniasz znaczniki które chcesz w jakiś sposób zmodyfikować, otwierasz nawias, wpisujesz właściwości Twoich atrybutów zamykasz i...pozostaje Ci tylko cieszyć się że udało nam się wykonać wszystko za jednym zamachem.

Jeżeli chodzi o zagnieżdżenie stylów, jest ono bliźniaczo podobne do zagnieżdżania znaczników czyli...nic trudnego.

Za przykład może Ci posłużyć nagłówek h1, który w środku ma znacznik span :

< h1 > Test H1 < span > test span < /span > < /h1 >

Rzeczą, której nie wolno Ci pominąć są identyfikatory CSS.

Identyfikatory to bardzo pożyteczna rzecz, pozwalają bowiem zidentyfikować styl dla konkretnego elementu. Wyobraźmy sobie, że masz stronę, ale brakuje Ci w niej jakiegoś efektu wow, chcesz aby sprawiała jeszcze lepsze wrażenie. Musisz zatem dodać do niej coś co zrobi z danego znacznika coś unikatowego. Musisz to jakoś wyszczególnić.

< p id =”pierwszy” > < /p > - naszym przykładem jest paragraf o id, w pliku CSS ten sam przykład zapiszemy już w następujący sposób:

p#pierwszy{

text-decoration: underline;

}

W tym momencie przeglądarka automatycznie przegląda CSSa, od razu odnajduje paragraf o id „pierwszy” i decyduje o nadaniu mu jakiejś właściwości, którą sam ustawiłeś, patrząc na powyższy przykład będzie to: text-decoration: underline;. Ten sposób z powodzeniem możesz wykorzystać właśnie do jakichś konkretnych elementów.

Chcesz działać płynniej? korzystaj z klas CSS.

Klasy CSS są podobne do identyfikatorów z tym wyjątkiem, że są one zazwyczaj używane w wielu znacznikach. Sama ich konstrukcja jest równie prosta co konstrukcja identyfikatorów.

< p class =”drugi” > < /p >- otwieramy paragraf i zamiast id piszemy class= i w cudzysłowie wpisujemy nazwę tej klasy.

Natomiast w samych plikach CSS, klasy wyglądają trochę inaczej niż identyfikatory. W przypadku klas, zamiast # powinieneś wpisać po prostu kropkę. Wygląda to właśnie tak:

p.drugi{

font-size: 40px;

}

Jedyne co teraz musisz zrobić to zdefiniować ich właściwości, ale to jest już dla Ciebie czystą formalnością.

Ostatnią rzeczą na którą musisz zwrócić uwagę są dodatki do znaczników czyli pseudoklasy.

Pseudoklasy nadają pewnej dynamiki wszystkim selectorom, które są wykorzystywane. Za przykład niech nam posłuży link. Na pewno zauważyłeś,że często na tych prostych stronach, po najechaniu na link może on zmieniać np. czcionkę czy też kolor. Tak właśnie działają pseudoklasy.

a{

color: red;

font – size: 10px;

}

a: hover {

color: pink;

font – size: 40px;

}

Załóżmy, że masz w pliku CSS ostylowany znacznik a standardowo ma on kolor czerwony wielkość ma 10 px, czyli dokładnie tak jak na przykładzie wyżej.

Powyższy przykład pokazuje nam, że jeżeli chcesz nadać dynamikę swojej stronie wystarczy, że zmienisz kolor, font czy też dodasz ciekawy border czyli obramowanie, a strona od razu wygląda na ciekawszą.

Jak widzisz samo stworzenie strony i pozostawienie jej bez odpowiedniej edycji nie zapewni Ci wyraźnego efektu na który liczyłeś. Również w przypadku strony oczywistym jest, że wygląd ma znaczenie. Ważne jest aby zwracać uwagę na to jak nasza treść prezentuje się podczas wyświetlenia strony WWW. Właśnie CSS pomoże Ci zadbać o te bardzo ważne detale.