Podstawowa składnia CSS

3.1 Reguły (Rules)

Główne elementy CSS obejmują reguły (rules), właściwości (properties) i wartości (values). Zrozumienie podstawowej składni CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Główne elementy CSS:

• Reguły (Rules)
• Selektory (Selectors)
• Właściwości (Properties)
• Wartości (Values)

Reguły (Rules)

Reguły CSS składają się z selektora i bloku deklaracji. Selektor wskazuje, do których elementów HTML będą stosowane style, a blok deklaracji zawiera jedną lub więcej właściwości i ich wartości. Zazwyczaj składa się z jednej lub kilku właściwości i wartości, zamkniętych w klamrach {}.

Przykład:

    
      selektor {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład dla nagłówka:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

W tym przykładzie h1 to selektor, color i font-size to właściwości, a blue i 24px to wartości tych właściwości.

3.2 Właściwości i wartości

CSS oferuje szeroki zestaw właściwości, które można wykorzystać do zarządzania wyglądem elementów. Każda właściwość ma jedną lub więcej wartości, które określają, jak dana właściwość będzie stosowana.

Główne właściwości i ich wartości:

Kolor i tło:

• color: ustawia kolor tekstu
• background-color: ustawia kolor tła elementu

Przykład:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Czcionka:

• font-family: określa rodzinę czcionek
• font-size: ustawia rozmiar czcionki
• font-weight: określa grubość czcionki

Przykład:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Tekst:

• text-align: wyrównuje tekst wewnątrz elementu
• text-decoration: dodaje efekty do tekstu, takie jak podkreślenie

Przykład:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Marginesy i obramowania:

• margin: ustawia zewnętrzne marginesy wokół elementu
• padding: ustawia wewnętrzne marginesy wewnątrz elementu
• border: określa obramowanie elementu

Przykład:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Rozmiary i pozycja:

• width i height: ustawiają szerokość i wysokość elementu
• position: określa sposób pozycjonowania elementu

Przykład:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Musisz pamiętać:

• zapamiętaj standardowe właściwości elementów
• zapamiętaj standardowe wartości tych właściwości
• zapamiętaj unikalne właściwości różnych elementów
• zapamiętaj, jak te właściwości działają w praktyce
• zapamiętaj, jak te właściwości wpływają na siebie nawzajem.

Najlepiej zrobić to poprzez praktykę – pisać dużo CSS i obserwować, jak działa.