Co to jest CSS?
CSS to skrót od C ascading S tyl Sheets
CSS opisuje sposób wyświetlania elementów HTML
Przykład CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Kliknij przycisk „Wypróbuj sam”, aby zobaczyć, jak to działa.
Składnia CSS
Reguła CSS składa się z selektora i bloku deklaracji :
Selektor wskazuje element HTML do stylu (h1).
Blok deklaracji (w nawiasach klamrowych) zawiera jedną lub więcej deklaracji oddzielonych średnikami.
Każda deklaracja zawiera nazwę właściwości CSS i wartość oddzielone dwukropkiem.
W poniższym przykładzie wszystkie elementy <p> będą wyrównane do środka, czerwone i będą miały czcionkę o rozmiarze 32 pikseli:
Przykład
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Ten sam przykład można również napisać tak:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Zewnętrzny arkusz stylów
Arkusz stylów CSS można przechowywać w zewnętrznym pliku:
mojstyl.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Zewnętrzne arkusze stylów są połączone ze stronami HTML za pomocą tagów <link> :
Przykład
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Styl wbudowany
Przykład
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Kaskadowy porządek
Jeśli dla elementów HTML określone są różne style, style będą kaskadowo przechodzić w nowe style o następującym priorytecie:
- Priorytet 1: Style wbudowane
- Priorytet 2: Zewnętrzne i wewnętrzne arkusze stylów
- Priorytet 3: Domyślna przeglądarka
- Jeśli różne style są zdefiniowane na tym samym poziomie priorytetu, ostatni ma najwyższy priorytet.
Przykład
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
Demo CSS - Jedna strona HTML - Wiele stylów!
Tutaj pokażemy jedną stronę HTML wyświetlaną z 4 różnymi arkuszami stylów.
Kliknij przyciski arkusza stylów (1-4), aby wyświetlić stronę wyświetlaną z różnymi stylami.
Pełny samouczek CSS
To był krótki opis CSS.
Aby zapoznać się z pełnym samouczkiem CSS, przejdź do W3Schools CSS Tutorial .
Aby uzyskać pełne informacje o CSS, przejdź do W3Schools CSS Reference .