wtorek,
Podstawowe style CSS na stonie HTML
Materiał to kontynuacja poprzednich odcinków kursu „Webmaster Starter Kit”, właściwy kod HTML znajdziesz w artykule „Przykładowa struktura strony HTML”. Po zapoznaniu się z tekstem „Jak dodać obraz do strony HTML?” nie powinieneś mieć problemu z samodzielnym dodaniem obrazu do wykonywanej strony internetowej.
Dodawanie stylów CSS
Za wygląd strony, w tym kolory, czcionki, marginesy, paddingi, układy i inne właściwości, odpowiadają kaskadowe arkusze stylów (CSS). Jednym ze sposobów dodania deklaracji CSS do dokumentu jest dołączenie arkusza stylów w oddzielnym pliku. Aby dodać zewnętrzny arkusz stylów, umieść tag <link> w sekcji <head> dokumentu HTML, wskazując atrybut href na ścieżkę do pliku CSS. W omawianym przykładzie modyfikacja wygląda jak poniżej.
<head>
<meta charset="UTF-8">
<title>Przykładowa strona</title>
<link rel="stylesheet" href="style.css">
</head>
W kolejnym kroku w katalogu projektu musisz utworzyć pusty plik o nazwie style.css i wkleić do niego proponowane deklaracje wybranych wartości. Dzięki temu uzyskasz m.in. podstawowy układ strony i jej kolorystykę. Teksty zawarte między /* oraz */ to ignorowane przez przeglądarkę komentarze. Zawartość pliku style.css:
/* Resetowanie podstawowych stylów */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
/* Odstępy od ramek przeglądarki */
body {
padding: 30px;
}
/* Styl dla kontenera */
.container {
max-width: 1080px;
margin: auto;
}
/* Styl dla głównej części strony */
main {
display: flex;
align-items: stretch; /* Rozciąganie elementów do wyższego */
}
/* Stosowanie złotej proporcji dla menu i artykułu */
nav {
width: 38.2%; /* Węższy element (menu) */
background-color: #f0f0f0; /* Jasny odcień szarości */
}
article {
width: 61.8%; /* Szeroki element (artykuł) */
background-color: #e0e0e0; /* Jasny odcień szarości */
}
/* Styl dla nagłówka i stopki */
header, footer {
background-color: #d0d0d0; /* Jeszcze jaśniejszy odcień szarości */
}
/* Wymiary obrazu */
img {width: 100%; height: auto;
}
Wygląd strony po modyfikacjach
Strona uzyskała dwupanelową formę, jednak sporo elementów nie wygląda zbyt dobrze, przykłady kolejnych modyfikacji znajdziesz w następnych materiałach.
Skrótowe omówienie zastosowanych stylów
Prezentowane style to jedynie proponowane rozwiązanie, które możesz zmodyfikować według gustu, zwłaszcza pod względem kolorystyki. W dalszej części materiału znajdziesz trochę obszerniejsze omówienie najważniejszych aspektów.
- Resetowanie stylów – ustawienie
marginipaddingna 0 orazbox-sizingnaborder-boxdla wszystkich elementów zapewnia spójność wyglądu na różnych przeglądarkach. Ustawieniefont-familynasans-serifzapewnia czytelność i nowoczesny wygląd. - Wewnętrzne dopełnienie (
padding) dlabody– kontener nie styka się ramkami okna przeglądarki. - Styl dla
.container– ustawieniemax-widthna 1080px sprawia, że strona nie będzie szersza niż ta wartość, co jest korzystne na większych ekranach. Automatyczne marginesy (margin: auto) centrują kontener na stronie. - Styl dla
<main>– użyciedisplay: flexialign-items: stretchsprawia, że elementy wewnątrz (naviarticle) będą miały tę samą wysokość i będą rozłożone poziomo. - Zastosowanie złotej proporcji – szerokości
naviarticlesą ustalone zgodnie ze złotą proporcją (około 1:1.618), co jest powszechnie uznawane za estetycznie przyjemne proporcje.navjest węższy, aarticleszerszy. Podano wartości przybliżone w procentach. - Styl dla
<img>– obraz rozciągnie się, aby wypełnić całą dostępną (100%) szerokość (width) kontenera, w którym się znajduje, wysokość (height) jest automatycznie (auto) dostosowywana. - Kolory tła – różne jasne odcienie szarości dla
header,nav,articleifootertworzą wizualne rozróżnienie między różnymi sekcjami strony, jednocześnie utrzymując subtelny i profesjonalny wygląd.
Selektory CSS
Selektor CSS to wzorzec używany do wybrania elementów HTML, do których mają być zastosowane określone style. Wybrane selektory:
- selektor uniwersalny (
*) – wybiera wszystkie elementy na stronie; przykład:* { color: #000; }; - selektory znacznika – wybierają elementy na podstawie nazwy znacznika, przykład:
p { font-size: 1em; }wybiera wszystkie paragrafy; - selektory klasy – wybierają elementy, które mają określoną klasę, przykład:
.klasa { margin: 10em; }wybiera wszystkie elementy z klasąklasa.
Kontener div.container
Zapis znacznika z wyrażeniem dodanym po kropce oznacza że ma on klasę równą „wyrażenie”. Klasa w HTML jest sposobem na identyfikację jednego lub więcej elementów na stronie internetowej. Aby określić klasę, używa się atrybutu class. Aby zastosować style CSS do elementów o określonej klasie, używa się selektora klasy, który rozpoczyna się od kropki (.), po której następuje nazwa klasy:
.klasa {
color: #000;
}
Stosowanie pojemnika (kontenera) z określoną maksymalną szerokością (max-width) na stronach internetowych jest popularną praktyką z kilku powodów, głównie związanych z czytelnością, estetyką i responsywnością designu. Badania nad użytecznością wykazały, że istnieje optymalna szerokość linii tekstu dla komfortu czytania. Zbyt szerokie linie tekstu mogą utrudniać śledzenie kolejnych linijek, podczas gdy zbyt wąskie linie mogą być irytujące z powodu częstych przerw. Ustawienie max-width pozwala na kontrolowanie szerokości linii tekstu, co zwiększa czytelność.
Ustawienie maksymalnej szerokości kontenera pozwala projektantom na lepszą kontrolę nad układem strony. Bez tego ograniczenia, elementy na bardzo szerokich ekranach mogą rozciągać się do niepożądanych rozmiarów, co może zaburzać zamierzony design i balans elementów na stronie. Ustawienie max-width wspiera responsywny design, ponieważ pojemnik będzie się rozszerzał lub kurczył w zależności od rozmiaru ekranu, ale nie przekroczy zdefiniowanej maksymalnej szerokości. To zapewnia, że strona będzie dobrze wyglądać zarówno na małych, jak i dużych ekranach.
Często w połączeniu z max-width, stosuje się również margin: auto;, co pozwala na automatyczne wyśrodkowanie kontenera w poziomie. To sprawia, że strona wygląda estetycznie na różnych rozdzielczościach ekranu. Używanie standardowego kontenera na różnych stronach i w różnych projektach pomaga w utrzymaniu spójności i przewidywalności w designie, co jest ważne dla doświadczeń użytkownika. Ustawienie max-width pozwala na lepszą optymalizację strony pod kątem różnych urządzeń, od telefonów komórkowych po duże monitory, zapewniając, że treść jest zawsze prezentowana w sposób przystępny i estetyczny.
Jednostki px, em i procent
W CSS px oznacza piksele, jednostkę stałą, natomiast em jest jednostką względną, zależną od rozmiaru czcionki elementu nadrzędnego. Wartość wyrażona w procentach odnosi się do wymiaru elementu nadrzędnego. Istnieje dużo więcej jednostek, na początek wystarczą te trzy.
Kolory w notacji heksadecymalnej
Deklarowanie kolorów w CSS przy użyciu notacji heksadecymalnej (hex) jest popularną metodą określania kolorów w projektowaniu stron internetowych. Notacja hex składa się z symbolu hash (#), po którym następuje sześciocyfrowy lub trzycyfrowy kod. Każda para cyfr reprezentuje wartość koloru w systemie RGB (czerwony, zielony, niebieski). CSS pozwala również na skróconą, trzycyfrową notację hex, gdzie każda cyfra jest powtarzana, co jest użyteczne dla kolorów, które mają takie same wartości dla każdej pary. Istnieje jeszcze wiele innych możliwości określania kolorów w kaskadowych arkuszach stylów.
Przykłady
#FF0000reprezentuje czerwony (maksymalna wartość czerwieni, brak zieleni i niebieskiego).#00FF00reprezentuje zielony.#0000FFreprezentuje niebieski.#000000reprezentuje czarny (brak czerwieni, zieleni i niebieskiego).#FFFFFFreprezentuje biały (maksymalna wartość wszystkich trzech kolorów).#F00jest skrótem dla#FF0000(czerwony).#0F0dla#00FF00(zielony).#00Fdla#0000FF(niebieski).
Skąd wziąć kod koloru?
Jest wiele możliwości znalezienia kodu hex dla wybranego koloru, m.in. są to strony internetowe oferujące palety kolorów i narzędzia do wyboru kolorów, programy do edycji grafiki, rozszerzenia do przeglądarek internetowych, czy aplikacje mobilne.
Własność display: flex
Własność display w CSS jest używana do określenia sposobu wyświetlania elementu na stronie internetowej. Jedną z możliwych wartości tej właściwości jest flex. Taką wartość stosuje się do elementu, aby uczynić go elastycznym (flex) kontenerem. Pozwala to na elastyczne zarządzanie układem, rozmiarem i odstępami jego elementów potomnych, m.in. umożliwia łatwe wyrównanie i justowanie za pomocą właściwości takich jak align-items, justify-content, align-self i align-content.
Własności padding, margin i box-sizing
Własności padding i margin w CSS służą do kontrolowania przestrzeni wokół elementów HTML. Padding to wewnętrzna przestrzeń między zawartością elementu a jego granicą (border). Margin oznacza zewnętrzną przestrzeń między granicą elementu a innymi elementami. Własność box-sizing w CSS określa, jak powinny być obliczane szerokość i wysokość elementu: czy mają zawierać padding i border (border-box) czy nie (content-box).
