KSS Style Guide

2 #permalink Podstrona sklep - sklep

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

tutaj jest główna strona sklepu

Kod HTML w elemencie

zawiera galerię produktów, która skupia się na różnych ofertach komputerów i laptopów. Oto opis każdego głównego elementu wewnątrz main:

div class="gallery" id="gallery" - Jest to kontener głównej galerii produktów. Ma klasę CSS o nazwie "gallery" i identyfikator "gallery" (o id="gallery"), co oznacza, że można go styliować i odwoływać się do niego za pomocą CSS i JavaScript.

div class="oferta" (powtórzone wielokrotnie) - Są to poszczególne oferty produktów. Każda oferta zawiera:

img src="..." alt="..." - Obrazek produktu z atrybutami "src" określającym ścieżkę do obrazka i "alt" zawierającym alternatywny tekst obrazka. div class="tytulOferty" - Nazwa produktu lub tytuł oferty. div class="cena" - Cena produktu. button - Dwa przyciski: "Kup teraz" i "Dodaj do koszyka". Każda oferta jest identyfikowana przez klasę "oferta", co ułatwia stylizowanie i manipulowanie nimi za pomocą CSS lub JavaScript.

Ten kod HTML reprezentuje interaktywną galerię produktów, która zawiera różne oferty komputerów i laptopów, każda z własnym obrazkiem, nazwą, ceną i przyciskami, które można dostosować do konkretnej funkcjonalności strony internetowej.

:root:

Zdefiniowane są zmienne kolorów przy użyciu niestandardowych właściwości CSS (custom properties). --blue-ur to kolor niebieski (#282625), a --white-ur to kolor biały (#FEFEFE). Te zmienne można później wykorzystać w całym arkuszu stylów do ustawiania kolorów. body:

Dla całego ciała dokumentu (body) ustawiono wyśrodkowanie tekstu poziomo. Kolor tekstu jest ustawiony na biały, korzystając z wcześniej zdefiniowanej zmiennej --white-ur. Tło strony ma kolor niebieski, korzystając z wcześniej zdefiniowanej zmiennej --blue-ur. Margin i padding są ustawione na 0, eliminując domyślne marginesy i paddingi. h1:

Styl dla nagłówka pierwszego poziomu (h1). Jest odstęp 20 pikseli na górę (margin-top: 20px) i 20 pikseli na dole (margin-bottom: 20px). .cena i .tytulOferty:

Styl dla elementów o klasach "cena" i "tytulOferty". Zmieniają kolor tekstu na czarny. .gallery:

Styl dla elementu o klasie "gallery". Elementy wewnątrz "gallery" są rozmieszczone w siatce (grid). Siatka jest wyśrodkowana poziomo (justify-content: center). Między elementami jest odstęp 5 pikseli (gap: 5px). Grid-template-columns automatycznie dostosowuje liczbę kolumn w zależności od dostępnego miejsca, minimalna szerokość kolumny to 200 pikseli. img:

Styl dla obrazów na stronie. Obrazy mają szerokość 100% szerokości dostępnej przestrzeni, ale nie przekraczają 200 pikseli (max-width: 200px). .oferta:

Styl dla elementu o klasie "oferta". Elementy te są obramowane i wyśrodkowane zarówno w pionie, jak i poziomie. Mają białe tło. button:

Styl dla przycisków na stronie. Przyciski mają zaokrąglone rogi (border-radius: 10px). Są dostosowane pod względem wyglądu i rozmiaru, a ich tło jest koloru lightblue. Media Queries:

W przypadku szerokości ekranu do 600 pikseli, obrazy wewnątrz klasy "gallery" zajmują 100% szerokości dostępnego miejsca (max-width: none), aby dostosować się do małych ekranów. W przypadku szerokości ekranu do 400 pikseli, obrazy wewnątrz klasy "gallery" również zajmują 100% szerokości dostępnego miejsca (max-width: none), dostosowując się do jeszcze mniejszych ekranów.

Example
Markup 
<main>
<div class="gallery" id="gallery">
  <div class="oferta">
    <img src="zdjecia/komputer1.png" alt="Nowy Komputer">
    <div class="tytulOferty">
      Komputer
    </div>
    <div class="cena">200.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/komputer2.png" alt="Kolejny Komputer">
    <div class="tytulOferty">
      Komputer2
    </div>
    <div class="cena">1200.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/komputer3.png" alt="Komputer przyszłościowy">
    <div class="tytulOferty">
      Jedyny taki komputer
    </div>
    <div class="cena">12300.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/komputerPrzyszlosic.png" alt="Najnowszy komputer">
    <div class="tytulOferty">
      Musisz go mieć
    </div>
    <div class="cena">23200.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/laptop.png" alt="laptop">
    <div class="tytulOferty">
      laptop
    </div>
    <div class="cena">100.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/komputer1.png" alt="laptop">
    <div class="tytulOferty">
      laptop
    </div>
    <div class="cena">100.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/laptop2.png" alt="laptop kolejny">
    <div class="tytulOferty">
      laptop
    </div>
    <div class="cena">120.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/laptop3.png" alt="laptop nowy">
    <div class="tytulOferty">
      nowy laptop
    </div>
    <div class="cena">1000.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/laptop3.png" alt="laptop">
    <div class="tytulOferty">
      laptop
    </div>
    <div class="cena">100.99</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
  <div class="oferta">
    <img src="zdjecia/laptop5.png" alt="laptop nowej generacji">
    <div class="tytulOferty">
      laptop
    </div>
    <div class="cena">105.00</div>
    <button>Kup teraz</button><button>Dodaj do koszyka</button>
  </div>
</div>
</main>
Source: sklep.css, line 1