Lekcja 2 - Jak połączyć CSS z HTML
- Szczegóły
- Odsłony: 183699
Lekcja 2 - Łączenie CSS i HTML
Jak połączyć CSS z HTML?
Kaskadowe style CSS definiują wygląd strony i muszą być dołączone do dokumentu tworzącego strukturę strony, np. HTML czy XHTML.
Jest kilka sposobów dołączania stylów CSS:
1. Styl lokalny – ustawia wygląd pojedynczego elementu strony
Przykład:
'<p style="color: red">To jest jakiś tekst</p>
2. Wewnętrzny arkusz stylów – wstawiany jest zawsze w nagłówku dokumentu pomiędzy znacznikami <head>...</head>
Przykład:
'<head>
'...
'<style type="text/css">
'p {
'color: red;
'font-size:10pt;
'}
'</style>
'…
'</head>
3. Zewnętrzny arkusz stylów – deklarację stylów wstawia się w nagłówku dokumentu pomiędzy znacznikami <head>...</head>. Wszystkie elementy odpowiedzialne za wygląd strony znajdują się w osobnym pliku *.css. Zewnętrzny arkusz stylów ma tę zaletę, że można go stosować do wielu stron jednocześnie. Tym samym ułatwia to modyfikację wyglądu strony. Jeśli chcemy zmienić kolor tła na wszystkich podstronach serwisu wystarczy zmodyfikować tylko jeden plik ze stylem.
Przykład:
'<head>
...
'<link rel="stylesheet" type="text/css" href="/style.css"/>
…
'</head>
Jak to zrobić?
Pierwszym krokiem będzie stworzenie pilku o dowolnej nazwie z końcówką .css, w moim przypadku to będzie stylarkusza.css, następnie wrzucamy plik css do tej samej lokalizacji gdzie mamy nasz index.html (plik główny html).
Kolejnym krokiem będzie wpisanie tej linijki kodu w sekcję <head> naszego kodu
<link rel="stylesheet" type="text/css" href=stylarkusza.css">
