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!
