Podstawy HTML

Wstawianie stylów

Wstawianie Stylów

Super User
Odsłony: 277

WSTAWIANIE STYLÓW Z ZEWNĘTRZNEGO PLIKU

To najczęściej stosowana metoda, dzięki której my jako osoby zarządzające stroną internetową możemy aktualizować ją zdecydowanie sprawniej i wygodniej.

<head>

<link rel="stylesheet" href="/styl.css" type="text/css" />

</head>

W powyższym zapisie plik styl.css jest zewnętrznym arkuszem stylów.

W zewnętrznym arkuszu stylów możemy zdefiniować wygląd globalnie - dla wszystkich akapitów z dokumentu HTML, przy pomocy deklaracji zapisanej w jednej linii.

Jak zatem przygotować formatowanie akapitu z dokumentu HTML w CSS?

W pliku HTML wstawiamy akapit:

<p>Tekst będzie koloru czerwonego, pogrubiony.</p>

Dla pliku CSS przygotujemy następującą deklarację:

p { color: red; font-weight: bold; }

W przeglądarce internetowej otrzymamy taki efekt:

Przykład

Tekst będzie koloru czerwonego, pogrubiony.

STYL LOKALNY

Wygląd poszczególnych elementów definiujemy bezpośrednio w pliku HTML.

<p style="color: red; font-weight: bold;">Tekst będzie pogrubiony, 

w kolorze czerwonym.</p>
Przykład

Tekst będzie pogrubiony, w kolorze czerwonym.

Kaskadowość stylu CSS oznacza, że występuje kolejność ważności czytania stylu. Im styl bliżej znacznika tym ma on pierwszeństwo nad kolejnym. W naszym przypadku styl zdefiniowany w pliku zewnętrznym będzie nadpisany przez styl lokalny.

Dodatkowo style są dziedziczone co oznacza, że styl zadeklarowany dla "rodzica" ma wpływ także na "potomków".

<div style="text-align: center;"><p>Tekst będzie wyśrodkowany.</p></div>
Przykład

Tekst będzie wyśrodkowany.

 

ŻRÓDŁO

Kategoria: Bez kategorii