Jak dodać CSS

Kiedy przeglądarka czyta arkusz stylów, formatuje dokument HTML na podstawie informacji w arkuszu stylów.

Trzy metody użycia CSS

Istnieją trzy metody wstawiania arkuszy stylów:

  • Zewnętrzny CSS
  • wewnętrzny CSS
  • wewnętrzny CSS

Zewnętrzny CSS

Dzięki użyciu arkuszy stylów zewnętrznych, wystarczy zmodyfikować jeden plik, aby zmienić wygląd całej witryny!

Każda strona HTML musi zawierać odniesienie do pliku arkusza stylów zewnętrznego w elemencie <link> w sekcji <head>.

przykład

Wewnętrzny styl jest definiowany w elemencie <link> w sekcji <head> strony HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>To jest nagłówek</h1>
<p>To jest akapit.</p>
</body>
</html>

Spróbuj sam

zewnętrzne arkusze stylów mogą być napisane w dowolnym edytorze tekstowym i muszą być zapisane z rozszerzeniem .css.

zewnętrzne pliki .css nie powinny zawierać żadnych tagów HTML.

"mystyle.css" wygląda tak:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

uwaga:nie dodawaj spacji między wartością a jednostką (np. margin-left: 20 px;）。Poprawne zapisanie to:margin-left: 20px;

wewnętrzny CSS

jeśli strona HTML ma unikalny styl, można użyć wewnętrznego arkusza stylów.

wewnętrzne style są definiowane w elemencie <style> w sekcji <head>.

przykład

wewnętrzne style są definiowane w elemencie <style> w sekcji <head> strony HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>To jest nagłówek</h1>
<p>To jest akapit.</p>
</body>
</html>

Spróbuj sam

wewnętrzny CSS

wewnętrzne style (również znane jako wewnętrzne style) mogą być używane do zastosowania unikalnych stylów do pojedynczych elementów.

aby użyć wewnętrznych stylów, dodaj atrybut style do odpowiedniego elementu. Atrybut style może zawierać dowolne atrybuty CSS.

przykład

wewnętrzne style są definiowane w atrybucie "style" elementu związane z:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">To jest nagłówek</h1>
<p style="color:red;">To jest akapit.</p>
</body>
</html>

Spróbuj sam

podpowiedź:wewnętrzne style utraciły wiele zalet arkuszy stylów (przez mieszanie treści z prezentacją). Używaj tego metody z ostrożnością.

wiele arkuszy stylów

jeśli dla tego samego selektora (elementu) zdefiniowano pewne atrybuty w różnych arkuszach stylów, to użyje się wartości z ostatnio odczytanego arkusza stylów.

załóżmy, że istniejezewnętrzny arkusz stylówustawione dla elementu <h1> są następujące style:

h1 {
  color: navy;
}

załóżmy, że istniejewewnętrzny arkusz stylówtakże dla elementu <h1> ustawiono następujące style:

h1 {
  color: orange;    
}

przykład

jeśli wewnętrzny styl jest połączony z zewnętrznym arkuszem stylówpo tymjeśli jest zdefiniowane, to element <h1> będzie pomarańczowy:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

Spróbuj sam

przykład

ale jeśli jest połączony z zewnętrznym arkuszem stylówpoprzednioZdefiniowane wewnętrzne style, więc element <h1> będzie ciemnoniebieski:

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Spróbuj sam

Kolejność kumulacji

Kiedy dla jednego elementu HTML jest określonych wiele stylów, który styl zostanie użyty?

Wszystkie style na stronie będą "kumulowane" zgodnie z następującymi zasadami w nowy "wirtualny" arkusz stylów, gdzie najwyższy priorytet ma pierwszy:

  1. Wewnętrzne style (w elementach HTML)
  2. Zewnętrzne i wewnętrzne arkusze stylów (w sekcji head)
  3. Domyślne style przeglądarki

Zatem, wewnętrzne style mają najwyższy priorytet i będą zakrywać zewnętrzne i wewnętrzne style oraz domyślne style przeglądarki.

Spróbuj sam