CSS

Opublikowano: 25 kwiecień 2022 | Super User |

| Odsłony: 103

Do tego, aby rozpocząć przygodę z kaskadowymi arkuszami stylów oraz świadomie z nich korzystać, niezbędne są podstawy. Musisz dowiedzieć się, w jaki sposób zbudowany jest styl, co to jest kaskadowość, dziedziczenie, selektor, z jakimi jednostkami miar będziesz miał styczność przy konstruowaniu swoich arkuszy. Bezwzględnie należy poznać, w jaki sposób umieszczać style w dokumencie XHTML/HTML.

Budowa stylu

Konstrukcja stylu nie należy do zbyt skomplikowanych i wygląda tak jak na poniższym przykładzie.

selektor {cecha:wartość; cecha:wartość; etc.;}

Selektor jest odpowiednikiem znacznika występującego w języku XHTML/HTML, np. może to być <p> lub <div>. Drugi człon stylu jest zamknięty w nawias klamrowy { } i zawiera polecenia formatujące. Polecenie formatujące — cecha — jest określane przez specyfikację, natomiast wartość jest zmienną określaną przez nas w zależności od aktualnych potrzeb. Przykładowy prosty styl definiujący kolor bloku tekstu jako czerwony o wysokości czcionki równej 14 punktów wygląda następująco:

{

color:red;

font-size:14pt;

}

Należy zwrócić uwagę na to, że cecha jest oddzielona od wartości za pomocą dwukropka, a po wartości zawsze występuje średnik. Stosowanie średnika po ostatniej parze cechy i wartości nie jest wymagane, ale zaoszczędzi wielu niespodzianek.

Zapis stylu może również przybierać inną postać, jednak jego działanie pozostaje niezmienne.

P {color:red; font-size:14pt;}

Jeżeli zapomnimy rozdzielić poszczególne pary cech i wartości za pomocą średników, to styl nie będzie działał poprawnie.

BODY

{

background-color:white;

color:green

font-size:20pt;

}

Zwróć uwagę na powyższy przykład, w którym chcemy określić biały kolor tła dokumentu oraz kolor czcionki jako zielony. Dodatkowo tekst powinien zostać wyświetlony za pomocą czcionki o wielkości 20pt. Niestety, „zapomniałem” wstawić średnik przy definicji koloru tekstu na końcu linii. W większym arkuszu błąd jest praktycznie niewidoczny, jednak strona zostanie błędnie wyświetlona.

Z trzech definicji stylów zadziała tylko pierwsza linijka odpowiedzialna za przypisanie białego koloru tła. Pozostałe dwa elementy zostaną błędnie rozpoznane przez przeglądarkę i nie zadziałają.

Osadzanie stylów na stronie

Kaskadowe arkusze stylów mogą być osadzone w dokumencie XHTML/HTML na kilka odmiennych sposobów. Specyfikacja przewiduje następujące rozwiązania:

Style wewnętrzne:
- lokalne,
- zagnieżdżone.
Style zewnętrzne:
- dołączone,
- importowane.

Style wewnętrzne

Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego.

<html>

<head>

</head>

<body>

<p style="color:green; font-size:15pt;">Treść dokumentu</p>

<p>Treść dokumentu</p>

<p style="color:green; font-size:15pt;">Treść dokumentu</p>

<p>Treść dokumentu</p>

</body>

</html>

Przykład stylu umieszczonego w znaczniku widoczny na powyższym listingu uzmysławia nam, że taka konstrukcja opiera się na stosowaniu atrybutu style dla znacznika <p>. Wadą tego rozwiązania jest konieczność powielania tego samego stylu wiele razy, ponieważ działa on tylko dla znacznika, w którym został umieszczony.

Weźmy na przykład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowiednie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększeniem objętości kodu XHTML/HTML. Do tego dochodzi kolejna ważna rzecz, jaką jest utrudniona możliwość poprawienia takiego kodu, gdy nie spodoba się on odbiorcy. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy kolejną możliwość umieszczania CSS w kodzie XHTML/HTML. Metoda ta polega na zdefiniowaniu odpowiednich wpisów bezpośrednio w nagłówku strony. Rozwiązanie takie nazywane jest stylem zagnieżdżonym.

<html>

<head>

{

color:green;

font-family:Arial;

}

</style>

</head>

<body>

<p>Tekst akapitu</p>

</body>

</html>

Styl umieszczony w nagłówku dokumentu XHTML/HTML jest rozwiązaniem bardzo wygodnym, gdyż działa na wszystkie elementy, które znajdują się w dokumencie. Przy takiej konstrukcji strony zmiany upodobań klienta prowadzące do modyfikacji wyglądu strony nie są już dużym problemem. Wystarczy wprowadzić drobne modyfikacje w samym nagłówku dokumentu, aby cały dokument zmienił się tak, by odpowiadał nowej wizji zleceniodawcy.

Kategoria: Bez kategorii