Latest web development tutorials

Tworzenie CSS

Podczas czytania arkusza stylów, przeglądarka będzie oparta na jego sformatowanego dokumentu HTML.

Jak wstawić stylów

Włóż arkusz stylów na trzy sposoby:

  • Zewnętrzny arkusz stylów
  • Wewnętrzny arkusz stylów
  • inline stylu

Zewnętrzny arkusz stylów

Gdy styl jest stosowany do wielu stron to wymagane, zewnętrzny arkusz stylów będzie idealnym wyborem. W przypadku zewnętrznego arkusza stylów, można zmienić plik, aby zmienić wygląd całej witryny. Każda strona wykorzystuje tag <link> link do arkusza stylów. <Link> tag w (document) Kierownik:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Przeglądarka będzie odczytywana z deklaracją stylu mystyle.css plików zgodnie z nim do formatowania dokumentu.

Zewnętrzny arkusz stylów można edytować w dowolnym edytorze tekstowym. Pliki nie mogą zawierać żadnych tagów HTML. Arkusz stylów powinny być zapisywane z rozszerzeniem .css. Oto przykład pliku arkusza stylów:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

uwaga Nie należy pozostawiać spacji między wartością nieruchomości i urządzeń. Jeśli używasz "margin-left: 20 px" zamiast "margin-left: 20px", jest ważna tylko w IE 6, ale to nie działa w przeglądarce Mozilla / Firefox lub Netscape.

Wewnętrzny arkusz stylów

Gdy pojedynczy dokument wymaga specjalnego stylu, należy zastosować arkusz stylów wewnętrznych. Można użyć znacznika <style> w nagłówku dokumentu, aby zdefiniować arkusz stylów wewnętrznych, jak poniżej:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

inline stylu

Ze względu na wydajność i zawartość miesza się ze sobą, style inline stracą wiele zalet arkuszy stylów. Należy ostrożnie ten sposób, na przykład, gdy styl musi być zastosowane tylko jeden raz w jednym elemencie.

Aby korzystać z wbudowanych stylów, należy użyć atrybutu stylu (Style) w odpowiednim tagiem. atrybut styl może zawierać żadnych właściwości CSS. Ten przykład pokazuje, jak zmienić kolor ust i lewego marginesu:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Wiele stylów

Jeśli niektóre atrybuty są zdefiniowane tego samego selektora w różnych arkuszy stylów, to wartość nieruchomości od bardziej konkretnego arkusza stylów jest dziedziczona.

Na przykład, zewnętrzny arkusz stylów ma trzy właściwości selektora H3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Arkusz stylów wewnętrzna posiada dwie właściwości selektora H3:

h3
{
text-align:right;
font-size:20pt;
}

Jeśli styl ma arkusze stylów wewnętrznych i zewnętrznych arkuszy stylów link do tej strony w tym samym czasie, a następnie h3 pojawia się:

color:red;
text-align:right;
font-size:20pt;

To jest właściwość kolor będzie dziedziczona z zewnętrznego arkusza stylów i układem tekstu (text-wyrównania) oraz rozmiar czcionki (font-size) zostaną zastąpione przez wewnętrzne przepisy arkuszy stylów.

Wiele stylów są laminowane jeden

Arkusze stylów pozwalają informacji stylem określonym w różny sposób. Style można określić w jednym elemencie HTML, pierwszy element strony HTML lub w zewnętrznym pliku CSS. Nawet wielokrotne zewnętrzne arkusze stylów można odwoływać się wewnątrz jednego dokumentu HTML.

kolejność układania

Gdy ten sam element HTML jest określone przez więcej niż jednej postaci, jaki styl będzie używać?

Ogólnie rzecz biorąc, wszystkie style będą układane w nowym arkuszu wirtualny stylu według następujących zasad, gdzie numer 4 ma najwyższy priorytet.

  1. domyślna przeglądarka
  2. Zewnętrzny arkusz stylów
  3. Wewnętrzny arkusz stylów (w sekcji <head> tag wewnątrz)
  4. Jazda w stylu (elementy HTML wewnątrz)

Więc stylu inline (wewnątrz elementu HTML) ma najwyższy priorytet, co oznacza, że ​​ma pierwszeństwo przed następującymi deklaracją stylu: etykieta styl oświadczenie, zewnętrzny arkusz stylów styl oświadczenie lub przeglądarki styl oświadczenie (wartość domyślna).

uwagaWskazówka: W przypadku korzystania z zewnętrznego pliku stylu w sekcji <head> jest zdefiniowany styl, arkusz stylów zastąpi styl wewnętrzny plików zewnętrznych.