HTML => Używanie HTML z CSS

Wprowadzenie

CSS zapewnia style dla elementów HTML na stronie. Stylowanie wbudowane wymaga użycia atrybutu style w znacznikach i jest wysoce odradzane. Wewnętrzne arkusze stylów używają znacznika <style> i służą do deklarowania reguł dla ukierunkowanych części strony. Zewnętrznych arkuszy stylów można używać za pomocą <link> który pobiera zewnętrzny plik CSS i stosuje reguły do dokumentu. Ten temat obejmuje użycie wszystkich trzech metod przywiązania.

Składnia

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

Zastosowanie zewnętrznego arkusza stylów

Użyj atrybutu link w head dokumentu:

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

Możesz także używać arkuszy stylów dostarczanych ze stron internetowych za pośrednictwem sieci dostarczania treści lub w skrócie CDN. (na przykład Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Ogólnie rzecz biorąc, wsparcie CDN dla frameworka można znaleźć na jego stronie internetowej.

Wewnętrzny arkusz stylów

Możesz także dołączyć elementy CSS wewnętrznie za pomocą znacznika <style> :

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

Program może zawierać także wiele wewnętrznych arkuszy stylów.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Styl wbudowany

Możesz stylizować określony element za pomocą atrybutu style :

<span style="color: red">This text will appear in red.</span>

Uwaga: Staraj się tego unikać - CSS ma na celu oddzielenie treści od prezentacji.

Wiele arkuszy stylów

Możliwe jest załadowanie wielu arkuszy stylów:

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

Pamiętaj, że późniejsze pliki i deklaracje zastąpią wcześniejsze . Więc jeśli general.css zawiera:

body {
    background-color: red;
}

i specific.css zawiera:

body { 
    background-color: blue;
}

jeśli oba są używane, tło dokumentu będzie niebieskie.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

HTML
Używanie HTML z CSS

Szukaj…