Style HTML - CSS
CSS oznacza kaskadowe arkusze stylów.
CSS oszczędza dużo pracy. Może kontrolować układ wielu stron internetowych jednocześnie.
CSS = Style i kolory
Co to jest CSS?
Kaskadowe arkusze stylów (CSS) służą do formatowania układu strony internetowej.
Dzięki CSS możesz kontrolować kolor, czcionkę, rozmiar tekstu, odstępy między elementami, rozmieszczenie i rozmieszczenie elementów, jakie obrazy tła lub kolory tła mają być używane, różne wyświetlacze dla różnych urządzeń i rozmiarów ekranu oraz wiele więcej!
Wskazówka: słowo kaskadowe oznacza, że styl zastosowany do elementu nadrzędnego będzie również stosowany do wszystkich elementów potomnych w obrębie rodzica. Tak więc, jeśli ustawisz kolor tekstu podstawowego na „niebieski”, wszystkie nagłówki, akapity i inne elementy tekstowe w treści również otrzymają ten sam kolor (chyba że określisz coś innego)!
Korzystanie z CSS
CSS można dodać do dokumentów HTML na 3 sposoby:
- Inline - za pomocą
styleatrybutu wewnątrz elementów HTML - Wewnętrzne - za pomocą
<style>elementu w<head>sekcji - Zewnętrzny - za pomocą
<link>elementu do linku do zewnętrznego pliku CSS
Najpopularniejszym sposobem dodawania CSS jest przechowywanie stylów w zewnętrznych plikach CSS. Jednak w tym samouczku użyjemy stylów wbudowanych i wewnętrznych, ponieważ jest to łatwiejsze do zademonstrowania i łatwiejsze do wypróbowania samodzielnie.
Wbudowany CSS
Wbudowany CSS służy do zastosowania unikalnego stylu do pojedynczego elementu HTML.
Wbudowany CSS używa styleatrybutu elementu HTML.
Poniższy przykład ustawia kolor tekstu <h1>elementu na niebieski, a kolor tekstu <p>elementu na czerwony:
Przykład
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
Wewnętrzny CSS
Wewnętrzny CSS służy do definiowania stylu dla pojedynczej strony HTML.
Wewnętrzny CSS jest zdefiniowany w <head>sekcji strony HTML w <style>elemencie.
Poniższy przykład ustawia kolor tekstu WSZYSTKICH <h1>elementów (na tej stronie) na niebieski, a kolor tekstu WSZYSTKICH <p>elementów na czerwony. Dodatkowo strona będzie wyświetlana z tłem w kolorze „powderblue”:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Zewnętrzny CSS
Zewnętrzny arkusz stylów służy do definiowania stylu dla wielu stron HTML.
Aby użyć zewnętrznego arkusza stylów, dodaj do niego łącze w <head>sekcji każdej strony HTML:
Przykład
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Zewnętrzny arkusz stylów można napisać w dowolnym edytorze tekstu. Plik nie może zawierać kodu HTML i musi być zapisany z rozszerzeniem .css.
Oto jak wygląda plik „styles.css”:
"style.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Wskazówka: Za pomocą zewnętrznego arkusza stylów możesz zmienić wygląd całej witryny internetowej, zmieniając jeden plik!
Kolory, czcionki i rozmiary CSS
Tutaj zademonstrujemy niektóre powszechnie używane właściwości CSS. Więcej o nich dowiesz się później.
Właściwość CSS colordefiniuje używany kolor tekstu.
Właściwość CSS font-familydefiniuje czcionkę, która ma być użyta.
Właściwość CSS font-sizedefiniuje używany rozmiar tekstu.
Przykład
Korzystanie z właściwości CSS color, font-family i font-size:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Obramowanie CSS
Właściwość CSS borderdefiniuje obramowanie wokół elementu HTML.
Wskazówka: możesz zdefiniować obramowanie dla prawie wszystkich elementów HTML.
Przykład
Korzystanie z właściwości granicy CSS:
p {
border: 2px
solid powderblue;
}
Dopełnienie CSS
Właściwość CSS paddingdefiniuje dopełnienie (spację) między tekstem a obramowaniem.
Przykład
Wykorzystanie właściwości obramowania i dopełnienia CSS:
p {
border: 2px
solid powderblue;
padding: 30px;
}
Margines CSS
Właściwość CSS margindefiniuje margines (spację) poza obramowaniem.
Przykład
Wykorzystanie właściwości obramowania i marginesów CSS:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Link do zewnętrznego CSS
Do zewnętrznych arkuszy stylów można odwoływać się za pomocą pełnego adresu URL lub ścieżki odnoszącej się do bieżącej strony internetowej.
Przykład
W tym przykładzie wykorzystano pełny adres URL do linku do arkusza stylów:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Przykład
Ten przykład łączy się z arkuszem stylów znajdującym się w folderze html w bieżącej witrynie internetowej:
<link rel="stylesheet" href="/html/styles.css">
Przykład
Ten przykład łączy się z arkuszem stylów znajdującym się w tym samym folderze co bieżąca strona:
<link rel="stylesheet" href="styles.css">
Możesz przeczytać więcej o ścieżkach plików w rozdziale Ścieżki plików HTML .
Podsumowanie rozdziału
- Użyj atrybutu HTML
styledo stylizacji w tekście - Użyj
<style>elementu HTML do zdefiniowania wewnętrznego CSS - Użyj
<link>elementu HTML, aby odwołać się do zewnętrznego pliku CSS - Użyj
<head>elementu HTML do przechowywania elementów <style> i <link> - Użyj
colorwłaściwości CSS dla kolorów tekstu - Użyj właściwości CSS
font-familydla czcionek tekstowych - Użyj właściwości CSS
font-sizedla rozmiarów tekstu - Użyj
borderwłaściwości CSS dla obramowań - Użyj
paddingwłaściwości CSS dla spacji wewnątrz obramowania - Użyj
marginwłaściwości CSS dla przestrzeni poza obramowaniem
Wskazówka: Więcej informacji o CSS znajdziesz w naszym samouczku CSS .
Ćwiczenia HTML
Tagi stylu HTML
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .