Teoria
Teoria

Inne sposoby łączenia CSS

Ustawianie stylów każdego znacznika za pomocą atrybutu style jest bardzo niewygodne. Prowadzi to również do zapychania kodu HTML powtarzającymi się fragmentami CSS.

Na szczęście istnieją inne sposoby łączenia stylów. Pierwszym z nich jest podłączenie zewnętrznego pliku za pomocą znacznika <link>, a drugim jest użycie specjalnego znacznika <style>.

Teraz zapoznasz się z drugą sekcją edytora - zakładką style.css. Kod z edytora CSS jest wstawiany do dokumentu HTML tak, jakbyś napisał go w znaczniku <style>. Tak wygląda ta zakładka:

index.htmlstyle.css

Najpierw wyczyścimy kod w edytorze HTML, a następnie zaczniemy stylizować naszą mini-treść krok po kroku, korzystając z innych funkcji CSS.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Inne sposoby łączenia CSS</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Zarys kursu</h1> <p style="color: green;">Sparowane znaczniki.</p> <p style="color: green;">Pojedyncze znaczniki.</p> <p style="color: green;">Atrybuty znaczników.</p> <p style="color: green;">Wbudowane style.</p> <p style="color: red;">Style zewnętrzne.</p> <p style="color: red;">Stylizacja według klasy.</p> </body> </html>

CSS

/* body { font-family: "Tahoma", serif; } p { color: green; } */

ObiettiviFatto

Usuwa wszystkie atrybuty style z akapitów,
następnie usuń znaki /* w pierwszym wierszu edytora CSS.