Podstawowe selektory

4.1 Selektory typu

Selektory w CSS służą do określania elementów, do których będą stosowane style. Podstawowe selektory obejmują selektory typu, klasy, identyfikatora i selektory uniwersalne. Każdy z tych selektorów ma swoje cechy i zastosowania.

Selektory typu (Type Selectors)

Selektory typu stosują style do wszystkich elementów określonego typu. Na przykład, można zastosować style do wszystkich akapitów (<p>), nagłówków (<h1>, <h2> itp.) lub innych tagów HTML.

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

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Ten selektor zastosuje style do wszystkich elementów <p> w dokumencie.

Właściwości:

• Stosuje się do wszystkich elementów określonego typu
• Wygodny do globalnych stylów, które powinny być stosowane do wszystkich elementów określonego typu

4.2 Selektory klasy

Selektory klasy pozwalają stosować style do jednego lub kilku elementów, które mają określoną klasę. Klasy są definiowane za pomocą atrybutu class w HTML i oznaczane kropką (.) w CSS.

Składnia:

    
      .classname {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Ten selektor zastosuje style do wszystkich elementów, które mają klasę button.

Właściwości:

• Można użyć tej samej klasy dla wielu elementów
• Pozwala łatwo stosować te same style do różnych elementów

4.3 Selektory identyfikatora

Selektory identyfikatora stosują style do elementu z unikalnym identyfikatorem. Identyfikatory są definiowane z pomocą atrybutu id w HTML i oznaczane symbolem krzyżyka (#) w CSS.

Składnia:

    
      #uniq-id {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

Ten selektor zastosuje style do elementu z identyfikatorem main.

    
      /* Wybiera element z identyfikatorem #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Ten element będzie mieć szerokość 800px.</div>
      <div>Ten element nie będzie stylizowany.</div>
    
  

Właściwości:

• Identyfikator musi być unikalny na stronie
• Używany do stylizacji unikalnych elementów, takich jak nagłówek lub główna zawartość

4.4 Selektory grupowe

Selektory grupowe pozwalają stosować tę samą regułę do kilku elementów. Skracają ilość kodu i upraszczają zarządzanie stylami.

Składnia:

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

Przykład:

    
      /* Wybiera wszystkie elementy h1, h2 i h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Nagłówek 1</h1>
      <h2>Nagłówek 2</h2>
      <h3>Nagłówek 3</h3>
      <p>Ten tekst nie będzie stylizowany tą regułą.</p>
    
  

4.5 Selektory uniwersalne

Selektory uniwersalne stosują style do wszystkich elementów na stronie. Oznaczane są gwiazdką (*) i mogą być użyteczne do resetowania stylów lub do stosowania ogólnych stylów do wszystkich elementów.

Składnia:

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

Przykład:

Ten selektor zastosuje style do wszystkich elementów na stronie, resetując ich marginesy i ustalając model pudełka.

    
      <div>Akapit 1</div>
      <div>Akapit 2</div>
    
  

    
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    
  

Właściwości:

• Stosuje się do wszystkich elementów na stronie
• Przydatny do globalnego resetowania stylów lub do stosowania podstawowych stylów do wszystkich elementów