Jak dodać CSS
Kiedy przeglądarka odczytuje arkusz stylów, sformatuje dokument HTML zgodnie z informacjami w arkuszu stylów.
Trzy sposoby na wstawienie CSS
Istnieją trzy sposoby wstawiania arkusza stylów:
- Zewnętrzny CSS
- Wewnętrzny CSS
- Wbudowany CSS
Zewnętrzny CSS
Dzięki zewnętrznemu arkuszowi stylów możesz zmienić wygląd całej witryny, zmieniając tylko jeden plik!
Każda strona HTML musi zawierać odniesienie do zewnętrznego pliku arkusza stylów w elemencie <link> w sekcji head.
Przykład
Style zewnętrzne są zdefiniowane w elemencie <link>, wewnątrz sekcji <head> strony HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Zewnętrzny arkusz stylów można napisać w dowolnym edytorze tekstu i należy go zapisać z rozszerzeniem .css.
Zewnętrzny plik .css nie powinien zawierać żadnych tagów HTML.
Oto jak wygląda plik „mystyle.css”:
„mojstyl.css”
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Uwaga: Nie dodawaj spacji między wartością właściwości a jednostką:
Nieprawidłowo (spacja): margin-left: 20 px;
Prawidłowo (bez spacji):margin-left: 20px;
Wewnętrzny CSS
Wewnętrzny arkusz stylów może być użyty, jeśli jedna strona HTML ma unikalny styl.
Styl wewnętrzny jest zdefiniowany wewnątrz elementu <style>, wewnątrz sekcji head.
Przykład
Style wewnętrzne są zdefiniowane w elemencie <style>, wewnątrz sekcji <head> strony HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Wbudowany CSS
Styl wbudowany może służyć do zastosowania unikalnego stylu dla pojedynczego elementu.
Aby użyć stylów wbudowanych, dodaj atrybut style do odpowiedniego elementu. Atrybut style może zawierać dowolną właściwość CSS.
Przykład
Style wbudowane są zdefiniowane w atrybucie „style” odpowiedniego elementu:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Wskazówka: styl wbudowany traci wiele zalet arkusza stylów (poprzez mieszanie treści z prezentacją). Używaj tej metody oszczędnie.
Wiele arkuszy stylów
Jeśli niektóre właściwości zostały zdefiniowane dla tego samego selektora (elementu) w różnych arkuszach stylów, zostanie użyta wartość z ostatnio odczytanego arkusza stylów.
Załóżmy, że zewnętrzny arkusz stylów ma następujący styl dla elementu <h1>:
h1
{
color: navy;
}Następnie załóżmy, że wewnętrzny arkusz stylów ma również następujący styl dla elementu <h1>:
h1
{
color: orange;
}Przykład
Jeśli styl wewnętrzny jest zdefiniowany po odnośniku do zewnętrznego arkusza stylów, elementy <h1> będą miały kolor „pomarańczowy”:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Przykład
Jednakże, jeśli styl wewnętrzny jest zdefiniowany przed łączem do zewnętrznego arkusza stylów, elementy <h1> będą „granatowe”:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Kaskadowy porządek
Jaki styl zostanie użyty, gdy dla elementu HTML określono więcej niż jeden styl?
Wszystkie style na stronie będą „kaskadowo” tworzyć nowy „wirtualny” arkusz stylów zgodnie z następującymi regułami, gdzie numer jeden ma najwyższy priorytet:
- Styl wbudowany (wewnątrz elementu HTML)
- Zewnętrzne i wewnętrzne arkusze stylów (w sekcji head)
- Domyślna przeglądarka
Dlatego styl wbudowany ma najwyższy priorytet i zastępuje zewnętrzne i wewnętrzne style oraz domyślne ustawienia przeglądarki.
Słyszałeś kiedyś o W3Schools Spaces ? Tutaj możesz bezpłatnie utworzyć własną stronę internetową lub zapisać fragmenty kodu do późniejszego wykorzystania.
Rozpocznij za darmo ❯* Nie wymagamy karty kredytowej