Zapewne wielu z Was obiło się o uszy słowo CSS w kontekście stron internetowych. Dzisiejszy wpis będzie właśnie o kaskadowych arkuszach stylów (ang. Cascading Style Sheets), dzięki którym możecie zmieniać wygląd swojej strony bez zmian w HTML-u!
Przejdę od razu do konkretów, czyli przykładu. Weźmy pod uwagę HTML-ową listę TODO:
<div> <ul> <li>wytrzeć kurze</li> <li>znieść graty do piwnicy</li> <li>odkurzyć</li> <li>umyć podłogę</li> <li>nastawić pralkę</li> </ul> </div>
Jest to prosta lista, która będzie wyglądać mniej więcej tak:
- wytrzeć kurze
- znieść graty do piwnicy
- odkurzyć
- umyć podłogę
- nastawić pralkę
Jeśli jednak zachce nam się zmian, nie trzeba niczego modyfikować w HTML-u. Wystarczy odpowiednio „ostylować” listę.
- wytrzeć kurze
- znieść graty do piwnicy
- odkurzyć
- umyć podłogę
- nastawić pralkę
Za pomocą prostego CSS-a uzyskaliśmy kompletnie inny wygląd listy.
<style> div {text-align: center;} ul li { display: inline; box-shadow: 0 .5rem 1rem #00ccff; white-space: nowrap; padding: 10px; margin: 10px;} ul { padding: 0; list-style-type: none; line-height: 60px; font-weight: 300;} </style>
Kto jest spostrzegawczy, ten zauważy, że w pierwszej liście pojawiły się przecinki po każdym elemencie, a po ostatnim nawet kropka, choć w HTML-u ich nie było. Oczywiście i tu nie obyło się bez styli:
<style> li::after {content: ',';} li:last-child::after {content: '.';} </style>
Za pomocą stylów można zmieniać nie tylko kolory, ale również położenie elementu na stronie, zachowanie elementu po najechaniu na niego myszką (tzw. hover), a nawet dodawać animacje.
Polecam tutorial CSS na stronie www.w3schools.com.
Pozdrawiam i życzę odkrywania wspaniałego świata CSS!