Materiały edukacyjne z informatyki
CSS (Cascading Style Sheets), czyli kaskadowe arkusze stylów, służą definiowaniu wyglądu elementów stron WWW napisanych w HTML-u. Polecaną formą korzystania ze stylów jest umieszczenie definicji w osobnym pliku i dołączanie go w nagłówku stron HTML (<head>...</head>) za pomocą tagu:
<link href="style.css" rel="stylesheet" type="text/css" />
Każda definicja CSS składa się z selektora oraz listy właściwości i wartości określających jego wygląd. Każdy wpis umieszczony w nawiasach sześciennych po selektorze ma postać: nazwa właściwości, dwukropek, wartości i średnik. Poniżej podajemy najprostsze przykłady.
body {
width: 960px;
margin: 10px auto;
background: #efefef url('images/tlo.gif');
}
Ustalamy szerokość znacznika body, czyli całej strony HTML na 960 pikseli; ustawiamy marginesy górny i dolny na 10 pikseli, lewy i prawy będą wyliczane automatycznie; jako tło ma zostać użyty obrazek tlo.gif z katalogu images, a jeżeli obrazek nie będzie dostępny tło będzie odcieniem szarego (kolory podajemy słownie lub za pomocą kodu szesnastkowego po znaku #).
p {
font-family: Arial,Tahoma,sans-serif;
font-size: 12pt;
line-height: 1.4em;
background-color: #cccccc;
border-radius: 5px;
color: black;
padding: 8px;
}
Określamy czcionkę na Arial, jeżeli będzie niedostępna, użyta zostanie następna na liście; podajemy rozmiar czcionki w punktach (można też w pikselach, procentach lub jednostakach em); określamy interlinię jako 1.4 wielkości czcionki; ustalamy kolor tła; ustawiamy zaokrąglenie rogów na 5 pikseli; ustalamy kolor tekstu na czarny; definiujemy 8-pikselowy odstęp treści akapitu od obramowania.
a { text-decoration: none; color: green; }
a:hover { text-decoration: underline; }
Definiujemy wygląd odnośników: likwidujemy podkreślenie i ustalamy kolor na zielony; definiujemy wygląd odnośnika, na który najechano myszką (:hover); wyświetlamy podkreślenie.
img.toright {
float: right;
margin-left: 10px;
border: 1px solid green;
}
Selektor dotyczy obrazków z klasą toright, czyli np. <img class="toright" src="..." />; ustalamy wyrównanie do prawej; lewy margines na 10 pikseli; 1-pikselowe zielone obramowanie linią ciągłą.
ul li {
margin-left: 30px;
}
Definicja lewego marginesu dla elementów (li) listy wypunktowanej (ul).
Warto zwrócić uwagę, że komentarze w pliku CSS możemy umieszczać między znakami /* */.
Zasoby w sieci: