CSS (Cascading Style Sheets - Kaskadowe Arkusze Stylów) służą do formatowania elementów HTML.
Patrz! Style i kolory
Czcionka Verdana kolor czerwony
Czcionka Times kolor niebieski
Tekst o wysokości 30 pikseli |
Spróbuj sam
Przykłady
Jak dodać informacje o stylach wewnątrz sekcji <head>
Link bez podkreślenia
Jak za pomocą atrybutu stylów stworzyć link, który nie jest podkreślony.
Link do zewnętrznego arkuszu stylów
Jak użyć znacznika <link> do połączenia z zewnętrznym arkuszem stylów.
Formatowanie HTML za pomocą CSS
CSS został wprowadzony razem z HTML4, dla zapewnienia lepszego sposobu formatowania elementów HTML.
CSS może być dodany do HTML na kilka sposobów:
- Wbudowane - za pomocą atrybutu style wewnątrz elementu HTML
- Wewnętrzny - używając elementu <style> w sekcji <head>
- Zewnętrzny - używając zewnętrznego pliku CSS
Preferowanym sposobem na dodanie CSS do HTML, jest wprowadzenie składni CSS w oddzielnych plikach CS. Jednakże, w tym tutorialu przedstawimy CSS używając atrybutu style.
Ma to na celu uproszczenie przykładów. To również sprawia, że łatwiej jest edytować kod.
Style wbudowane
Style wbudowane mają zastosowanie, kiedy chcemy użyć unikalnego stylu do konkretnego elementu HTML w jednym z wielu jego wystąpień.
Aby korzystać z wbudowanych stylów, użyj atrybutu stylu w odpowiednim znaczniku. Atrybut style może zawierać każdą właściwość CSS. Poniższy przykład pokazuje, jak zmienić kolor tekstu i lewego marginesu akapitu:
<p style="color:blue;margin-left:20px;">To jest akapit.</p>
Przykład - Kolor tła
Właściwość background-color definiuje kolor tła dla elementu:
Przykład
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">To jest nagłówek</h2>
<p style="background-color:green;">To jest akapit.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">To jest nagłówek</h2>
<p style="background-color:green;">To jest akapit.</p>
</body>
</html>
Spróbuj sam »
Właściwość sprawia, że "stary" atrybut bgcolor jest nieaktualny.
Przykład - Czcionka, Kolor i Wielkość
Właściwości font-family, color i font-size definiują czcionkę, kolor i wielkość tekstu wewnątrz elementu:
Przykład
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Nagłówek</h1>
<p style="font-family:arial;color:red;font-size:20px;">Akapit.</p>
</body>
</html>
<html>
<body>
<h1 style="font-family:verdana;">Nagłówek</h1>
<p style="font-family:arial;color:red;font-size:20px;">Akapit.</p>
</body>
</html>
Spróbuj sam »
Właściwości font-family, color i font-size zastępują "stary" znacznik <font>
Przykład - Wyrównanie tekstu
Właściwość text-align określa poziome wyrównanie tekstu w elemencie:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Nagłówek wyrównany do środka</h1>
<p>To jest akapit.</p>
</body>
</html>
<html>
<body>
<h1 style="text-align:center;">Nagłówek wyrównany do środka</h1>
<p>To jest akapit.</p>
</body>
</html>
Spróbuj sam »
Właściwość text-align zastępuje "stary" znacznik <center> - oczywiście dla tekstu.
Wewnętrzny arkusz stylów
Wewnętrzny arkusz stylów może być użyty, jezeli chcemy aby pojedynczy dokument posiadał unikalny styl. Wewnętrzne style są definiowane w sekcji <head> strony HTML, poprzez użycie znacznika <style>, tak jak poniżej:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
Zewnętrzny arkusz stylów
Zewnętrzny arkusz stylów jest idealny, kiedy ten sam styl jest przyporządkowany do wielu stron. Z zewnętrznym arkuszem stylów, możesz zmienić wygląd całej strony internetowej, poprzez zmiany w pojedynczym pliku. Każda strona musi być połączona z arkuszem stylów za pomocą znacznika <link>. Znacznik <link> powinien znajdować się w sekcji <head>:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Znacznik Style
| Znacznik | Opis |
|---|---|
| <style> | Definiuje informacje o stylach dla dokumentu |
| <link> | Określa związek pomiędzy dokumentem a zasobem zewnętrznym |
Przestarzałe znaczniki i atrybuty
Niektóre znaczniki i atrybuty były używane do formatowania dokumentów w HTML4. Te znaczniki nie są wspierane przez nowe wersje HTML.Należy unikać stosowania elementów: <font>, <center> i <strike>, oraz atrybutów: color i bgcolor.
To nie są moje artykuły, tylko tłumaczenie tutoriala z W3Schools z angielskiego na polski.
OdpowiedzUsuńJeśli umiesz czytać po angielsku to cały tutorial jest tu:https://www.w3schools.com/
W3shools to świetna strona, dlatego postanowiłem przetłumaczyć ich tutoriale na język polski. Niestety obecna praca nie pozwala mi się już tym zajmować (brak czasu).