Kiedy przeglądarka czyta arkusza stylów, to sformatowanie dokumentu HTML zgodnie z informacjami w arkuszu stylów.
Trzy sposoby, aby wstawić CSS
Istnieją trzy sposoby wstawiania arkusza stylów:
Zewnętrzny arkusz stylów
Z zewnętrznego arkusza stylów, można zmienić wygląd całej strony internetowej, zmieniając tylko jeden plik!
Każda strona musi zawierać odwołanie do zewnętrznego pliku arkusza stylów wewnątrz <link> elementu. <link> Element idzie wewnątrz <head> sekcji:
Zewnętrzny arkusz stylów może być napisany w dowolnym edytorze tekstowym. Plik nie powinien zawierać żadnych tagów HTML. Plik arkusza stylów musi być zapisana z .css przedłużenia.
Oto jak "myStyle.css" wygląda:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | Nie dodawaj spacji pomiędzy wartością nieruchomości i urządzenia (takie jak margin-left:20 px; ). Poprawny sposób to: margin-left:20px; |
|---|
Wewnętrzny arkusz stylów
Arkusz stylu wewnętrzne mogą być stosowane, jeżeli jedna strona ma unikalny styl.
Style wewnętrzne są zdefiniowane w <style> elementu wewnątrz <head> sekcji na stronie HTML:
Przykład
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Spróbuj sam " Style Inline
Stylu rolki mogą być wykorzystywane do nakładania unikalny styl jeden element.
Aby korzystać z wbudowanych stylów, należy dodać atrybut stylu do odpowiedniego elementu. Atrybut ten styl może zawierać żadnych właściwości CSS.
Poniższy przykład pokazuje, jak zmienić kolor i lewego marginesu <h1> element:
| Stylu inline traci wiele zalet arkusza stylów (przez zmieszanie zawartości z prezentacji). Za pomocą tej metody z umiarem! |
|---|
Wiele Style Sheets
Jeśli niektóre właściwości zostały zdefiniowane dla tego samego selektora (element) w różnych arkuszy stylów, zostanie użyta wartość z ostatniego arkusza stylów odczytu.
Przykład
Załóżmy, że zewnętrzny arkusz stylów posiada następujące stylu dla <h1> element:
h1
{
color: navy;
}Następnie załóżmy, że arkusz stylów wewnętrznych posiada również następujące stylu dla <h1> element:
h1
{
color: orange;
}Jeśli styl wewnętrzną definiuje się po odnośnik do zewnętrznego arkusza stylów, to <h1> elementy będą "orange" :
Przykład
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Spróbuj sam " Jednakże, jeśli styl wewnętrzną definiuje się przed odnośnik do zewnętrznego arkusza stylów, to <h1> elementy będą "navy" :
Przykład
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Spróbuj sam " Kaskadowe Zamówienie
Jaki styl będzie stosowany, gdy istnieje więcej niż jeden styl określony dla danego elementu HTML?
Ogólnie rzecz biorąc można powiedzieć, że wszystkie style będzie "Kaskada" w nowym stylu "wirtualnej" arkusz według następujących zasad, gdzie jeden numer ma najwyższy priorytet:
- style inline (wewnątrz elementu HTML)
- Arkusze stylów zewnętrznego i wewnętrznego (w sekcji head)
- domyślna przeglądarka
Więc stylu inline (wewnątrz określonego elementu HTML) ma najwyższy priorytet, co oznacza, że będzie on zastąpić styl zdefiniowany wewnątrz <head> tag lub w zewnętrznym arkuszu stylów, lub wartość domyślną przeglądarką.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»