iprogramista.pl
  • HTML 5
  • CSS 3
  • Javascript
  • SQL
  • Kolory
    • Kolory HTML - konwerter
    • Kolory HTML - odcienie
  • Narzędzia
    • Edytor HTML
    • Licznik znaków
    • Sprawdź IP
    • Lorem Ipsum generator
    • Enkoder Base64
    • Dekoder Base64
    • Guid generator
    • Kalkulator dni
    • Ile do wakacji
  • Plug-ins
    • Przelewy 24 SDK (C#)
    • BS5 Intro Tour
  • Co to jest CSS
  • Jaka jest składnia języka CSS?
  • Co to są selektory CSS?
  • Kolor tekstu i tła w CSS
  • Obramowanie CSS
  • Marginesy CSS
  • Padding / margines wewnętrzny
  • Height/Width
  • Box Model
  • CSS Outline
  • Tekst / czcionka
  • Czionki (font)
  • Wygląd linku
  • Stylizacja list
  • Style tabel HTML
  • CSS Display - wyświetlania elementów
  • CSS pozycjonowanie elementów
  • CSS Overflow
  • CSS float - elementy pływające

Jaka jest składnia języka CSS? kurs CSS 3

Poprzednia Następna

Na początku tego kursu, przypomnisz sobie, z jakich elementów składują się arkusze stylów. 

Składnia języka CSS

Na definicję elementu w CSS składa się tak zwany selektor oraz bloku deklaracji.

Selektor może wskazywać na dowolne elementy HTML. Jak korzystać z selektorów dowiesz się za chwilę.

Blok deklaracji może zawierać jedną lub wiele deklaracji. Deklaracja jest to nazwa właściwości oraz wartość. Właściwość i wartość jest oddzielona dwukropkiem. Ponadto każda deklaracja powinna być zakończona średnikiem.

Poniższa definicja może wyglądać odrobinę zawile, ale w rzeczywistości jest to bardzo proste i przyjemne w użyciu. Aby wszystko rozjaśnić, spójrz na poniższy obrazek.

Składnia CSS
W przykładach będziemy wykorzystaywać osadzone arkusze stylów. Pamiętaj jednak, że podczas tworzenia witryn, na które składa się wiele dokumentów HTML, lepiej wykorzystać zewnętrzne arkusze stylów.

Przykładowe wykorzystanie składni CSS

Pierwszy przykład obrazuje, jak za pomocą stylów CSS można wyśrodkować i pokolorować tekst.

Pamiętaj, że każdy przykład możesz dowolnie edytować i testować w naszym edytorze online. Aby to uczynić, kliknij przycisk Przetestuj pod dowolnym przykladem.
xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        p {
6
            color: blue;
7
            text-align: center;
8
        }
9
    </style>
10
</head>
11
<body>
12
    <p>
13
        Testujemy składnię języka CSS - kolorowanie i wyśrodkowanie tekstu.
14
    </p>
15
</body>
16
</html>
Przetestuj

Jak nadać ten sam styl kilku elementom?

Aby wyśrodkować nagłówk i paragraf, możesz stworzyć dwie osobne reguły CSS. Czasami jednak nie ma sensu kopiować bądź przepisywać kodu, ponieważ selektory można oddzielać przecinkami.

xxxxxxxxxx
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <style>
5
        h1, p {
6
            text-align: center;
7
        }
8
    </style>
9
</head>
10
<body>
11
<h1>
12
    Wyśrodkowany nagłówek
13
</h1>
14
<p>
15
    Wyśrodkowany paragraf
16
</p>
17
</body>
18
</html>
Przetestuj

Komentarze

Na koniec warto wspomnieć, że w składni CSS, możesz się również spotkać z komentarzami. Komentarz, nie ma wpływu na wyśietlanie stylów, jest to jedynie tekst pomocniczy. Komentarz rozpoczyna się /* i kończy się */. Komentarz może być umieszony w jednej linii, jak również może się ciągnąć przez wiele linijek kodu.

Poprzednia Następna

Kursy programistyczne

Oferujemy darmowe kursy programowania od podstaw.


Lista kursów

HTML 5

CSS 3

Javascript

SQL


Kontakt

info@iprogramista.pl


©2019-©2025 Copyright: iprogramista.pl