Lekcja 12: Układ graficzny elementów (CSS)
Czy nie było by wspaniale z łatwością manipulować układem graficznym stron na jaki zasługują?
Jasne, ale jak?
Aby dodać na swojej stronie układ graficzny wykorzystaj Kaskadowe Arkusze Styłów (Cascading Style Sheets - CSS). W tej lekcji wprowadze cię krótko w świat CSS. Póżniej możesz wszystkiego się nauczyć od początku do końca w naszym kursie CSS. Więc prosze potraktuj tą lekcję tylko jako przystawkę.
CSS jest lepszą połową języka HTML: HTML zajmuje się nieprzyjemną częścią (strukturą), podczas gdy CSS nadaje miły akcent (układ graficzny).
Jak pokazaliśmy w Lekcji 7, CSS może być dodany dzięki atrybutowi style. Na przykład, możesz ustawić czcionki i wielkość czcionki akapitu:
Przykład 1:
<p style="font-size:20px;">To jest czcionka wielkości 20</p>
<p style="font-family:courier;">To jest czcionka Courier</p>
<p style="font-size:20px; font-family:courier;">To jest czcionka Courier wielkości 20</p>
Będzie tak wyglądał w przeglądarce:
To jest czcionka wielkości 20
To jest czcionka Courier
To jest czcionka Courier wielkości 20
W powyższym przykładzie używamy atrybutu style do określenia typu czcionki (komenda font-family) i jej wielkości (komenda font-size). Zauważ jak w ostatnim akapicie ustawiliśmy typ czcionki i wielkość korzystając ze średnika.
Wygląda na mnóstwo pracy?
Jedną z inteligentnych cech CSS jest możliwość globalnego określenia wyglądu i układu graficznego elementów. Zamiast używania atrybutu style w każdym znaczniku, możesz powiedzieć przeglądarce by ten sam styl przypisała pewnej części elementów na stronie:
Przykład 2:
<html>
<head>
<title>Moja pierwsza strona CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Moja pierwsza strona CSS</h1>
<h2>Witam na mojej pierwszej stronie CSS</h2>
<p>Tutaj możesz zobaczyć jak działa CSS</p>
</body>
</html>
W powyższym przykładzie CSS został umieszczony w sekcji nagłówkowej więc ma zastosowanie na całej stronie. Aby to zrobić, wystarczy umieścić znacznik <style type="text/css">, który mówi przeglądarce że umieszczasz CSS.
W przykładzie wszystkie nagłówki na stronie będą miały czcionkę Arial wielkości 30px a podnagłówki Courier wielkości 15. Tekst w akapitach będzie posiadał czcionkę Times New Roman wielkości 8.
Kolejną opcją jest umieszczenie CSS w oddzielnym dokumencie. Dzięki oddzielnemu dokumentowi CSS możesz aplikować te same style dla wielu stron na raz. Bardzo mądrze jeżeli chcesz na przykład zmienić czcionkę dla strony internetowej z dużą ilością dokumentów HTML. Nie będziemy teraz wdawać się w szczegóły ale potem możesz zacząć się tego uczyć z naszego kursu CSS.
Co jeszczę mogę zrobić z CSS?
CSS może zostać użyty nie tylko do określania typu czcionki oraz rozmiarów. Daje on o wiele więcej możliwości. Na przykład, możesz dodać kolor i tło. Oto parę przykładów żebyś miał z czym poeksperymentować:
<p style="color:green;">Zielony napis</p>
<h1 style="background-color: blue;">Tytuł na niebieskim tle</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
Spróbuj umieścić przykład na paru swoich stronach - tak jak w przykładzie lub poprzez użycie CSS w sekcji nagłówka.
Czy CSS to tylko kolory i typy czcionek?
Poza dodawaniem kolorów, typów czcionkek itp., CSS portafi także kontrolować pozycjonowanie elementów na stronie (marginesy, otaczanie, wyrównanie, szerokość, wysokość itp.). Poprzez regulowanie różnych ustawień elementów, dzięki CSS jesteś w stanie elegancko i precyzyjnie rozmieścić elementy na stronie.
Przykład 3:
<p style="padding:25px;border:1px solid red;">Kocham CSS</p>
Będzie tak wyglądał w przeglądarce:
Dzięki właściwości float element może ułożyć się na prawo lub na lewo a kolejne elementy będą go otaczać. Następujący przykład ilustruje zasadę:
Przykład 4:
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
Będzie tak wyglądał w przeglądarce:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
W tym przykładzie, jeden element (obrazek) płynie na lewo a inne elementy (tekst) otaczają go.
Za pomocą właściwości position, możesz umieścić element na swojej stronie dokładnie tam gdzie chcesz:
Przykład 5:
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
W przykładzie obrazek jest umieszczony 50 pikseli od spodu i 10 pikseli od prawej w przeglądarce. Ale możesz umieścić go dokładnie tam gdzie sam zechcesz. Spróbuj. Bardzo fajne, prawda?
Fajne, jasne. Ale czy łatwe?
Nie nauczysz się CSS w 10 minut. Tak jak wspomniałem wcześniej, ta lekcja jest tylko krótkim wprowadzeniem. Później możesz nauczyć się więcej w kursie CSS.
Narazie, skoncentruj się na HTML, i ruszaj do następnej lekcji gdzie nauczysz się jak umieszczać swoją stronę w internecie tak by cały świat mógł ją oglądać!
