CSS – omówienie i wstawianie

 w strony www  Tagi CSS / strony www przez

CSS – Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów)

jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych.

CSS nie istnieje samodzielnie i jest ściśle powiązany z HTML, pozwala na określenie wyglądu poszczególnych elementów na stronie.

Jak budujemy style:

selektor 
{
    deklaracja;
    deklaracja;
    ...
    deklaracja;
}

 

Teraz kilka słów na temat wstawiania stylów. Możemy to robić lokalnie lub z zewnętrznego pliku.

STYL LOKALNY

Wewnątrz znacznika <body> znajdują się elementy, które możemy formatować bezpośrednio w tagu, np:

 

 

<p style="color: #ff0000;">To jest jakiś tekst</p>

Po dowolnym znaczniku (<p>, <b>, <ul> i innych dostępnych w HTML) wstawiamy style=”…”, a wewnątrz wpisujemy cechę i jej wartość np. kolor akapitu to „color”, czcionka to „font”. Cecha to odpowiednik atrybutu w HTML. Zbiór cech dla arkuszy stylów znajdziecie w specyfikacji CSS. W powyższym przykładzie cecha to color, następnie występuje znak „:” oraz wartość, czyli #ff0000 całość zakończona znakiem „;„.

Jeżeli danemu elementowi chcemy nadać kilka cech, wpisujemy je po sobie tzn.:

<p style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
To jest jakiś tekst</p>

po nadaniu cechy color i po średniku wstawiamy kolejną cechę dla czcionki czyli font, a w środku font kilka wartości dla cechy oddzielane spacją. Zwróć uwagę, że część wartości została oddzielona przecinkiem, dzieje się tak w momencie podawania alternatywy dla danej wartości, czyli:

  • 12px – podajemy wielkość czcionki
  • bold – ma być pogrubiona
  • italic – oraz pochylona
  • Verdana, Arial, sans-serif; – i styl ma być Verdana, ale jeżeli użytkownik nie ma czcionki Verdana to zostanie użyty Arial o kroju sans-serif.

Styl możemy rozciągnąć na kilka elementów. Stosujemy do tego znacznik <span>

<span style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
    <b>To jest jakiś tekst</b>
    <p>to jest jakić akapit</p>
</span>

Alternatywą do <span> służącą do obejmowania formatowaniem większych zakresów jest <div>

<div style="background-color: yellow">
	<span style="color: red">
		<b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone 
                   na żółtym tle</b>,
		a to jest zwykły tekst - również wewnątrz DIV i SPAN.
	</span>
	To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony,  
        ale ma żółte tło.
	<p>A to jest akapit (element blokowy) w ramach DIV.</p>
</div>

element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN.

 

WEWNĘTRZNY ARKUSZ STYLÓW

 

 

<head>
	(...)
<style type="text/css">
/* <![CDATA[ */
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
/* ]]> */
</style>
	(...)
</head>

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

 

ZEWNĘTRZNY ARKUSZ STYLÓW

<head>
	(...)
	<link rel="Stylesheet" type="text/css" href="style.css" />
	(...)
</head>

Zewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy.

Należy stworzyć oddzielny plik „nazwa.css”, w którym określamy style, a w nagłówku dokumentu podajemy jedynie ścieżkę do tego pliku.

Przykładowy plik css:

p {text-align: center; color: red;}
h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}

 

Ćwiczenie:

Na podstawie ćwiczenia z tematu o znacznikach semantycznych (przykładowe rozwiązanie), sformatuj nagłówki dokumentu nadając im własności: text-align: center; color: green; oraz znaczniki semantyczne nadając im tło: background-color: lightblue;.

Wykonaj ćwiczenie tworząc styl liniowy, wewnętrzny i zewnętrzny.