23. Stylizacja strony głównej

> Dodaj do ulubionych

Znasz ju┼╝ wszystkie elementy HTML potrzebne do doko┼äczenia strony g┼é├│wnej, wi─Öc czas wykona─ç t─Ö prac─Ö. Dla przypomnienia pokazuj─Ö jeszcze raz, jak ma ona wygl─ůda─ç.

Ostateczna wersja strony index

Powy┼╝ej jest widoczna pomniejszona wersja, na kt├│rej nie wszystko dobrze wida─ç. Je┼Ťli chcesz dok┼éadnie zobaczy─ç, jak ta strona wygl─ůda w oknie przegl─ůdarki, kliknij obraz, aby wy┼Ťwietli─ç go w pe┼énym rozmiarze.

Poni┼╝ej znajduje si─Ö kod HTML, na bazie kt├│rego b─Ödziemy teraz pracowa─ç.

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ciekawi ludzie</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body id="home">
    <header id="main-header">
      <hgroup>
        <h1>Ciekawi ludzie</h1>
        <p>Poznaj ciekawe osoby ze ┼Ťwiata nauki i techniki</p>
      </hgroup>
      <nav>
        <a href="index.html">Główna</a>
        <a href="erdos.html">Paul Erd┼Ĺs</a>
        <a href="feynman.html">Richard Feynman</a>
        <a href="why-the-lucky-stiff.html">why the lucky stiff</a>
      </nav>
    </header>
    <main>
      <article>
        <img src="img/home-featured.png" alt="" class="featured">
        <p>W ┼Ťwiecie nauki i techniki mo┼╝na znale┼║─ç wiele nietuzinkowych i czasami genialnych postaci, kt├│re odcisn─Ö┼éy niezatarte pi─Ötno na swoich dziedzinach wiedzy.</p>
        <p>Niekt├│re z tych os├│b, jak na przyk┼éad s┼éynny matematyk Paul Erd┼Ĺs czy genialny fizyk teoretyczny Richard Feynman, mia┼éy usposobienie ekstrawertyczne i nie stroni┼éy od zainteresowania innych ludzi.</p>
        <p>Inni s─ů introwertykami, kt├│rych m─Öczy rozg┼éos. Nale┼╝y do nich na przyk┼éad znany programista o pseudonimie why the lucky stiff, a tak┼╝e nale┼╝a┼é nie┼╝yj─ůcy ju┼╝ s┼éynny fizyk teoretyczny Paul Dirac.</p>
        <p>Je┼Ťli lubisz poznawa─ç niezwyk┼ée osobowo┼Ťci, kt├│re ws┼éawi┼éy si─Ö ciekawymi dokonaniami w dziedzinie nauki lub techniki, to w naszej witrynie z pewno┼Ťci─ů znajdziesz co┼Ť dla siebie.</p>
      </article>
    </main>
    <footer id="main-footer">
      <p>Copyright &copy; Shebang 2023 || <a href="kontakt.html">Kontakt</a> | <a href="o-nas.html">O nas</a> | <a href="wspolpraca.html">Współpraca</a></p>
    </footer>
  </body>
</html>

Zwr├│─ç uwag─Ö na dodatek identyfikatora do elementu body. Strona g┼é├│wna w wi─Ökszo┼Ťci witryn internetowych jest wyj─ůtkowa i cz─Östo nie jest zbudowana wed┼éug szablonu obowi─ůzuj─ůcego na podstronach. Dlatego nadali┼Ťmy jej identyfikator home, aby m├│c odwo┼éywa─ç si─Ö specyficznie tylko do element├│w nale┼╝─ůcych wy┼é─ůcznie do tej strony.

Tak┼╝e elementy header i footer maj─ů identyfikatory, poniewa┼╝ mog─ů one wyst─Öpowa─ç w r├│┼╝nych miejscach na stronie (np. jako nag┼é├│wek i stopka sekcji albo artyku┼éu), wi─Öc chcemy mie─ç mo┼╝liwo┼Ť─ç wygodnego odnoszenia si─Ö tylko do tych podstawowych komponent├│w strukturalnych ca┼éego dokumentu.

Prac─Ö zaczniemy od zdefiniowania cech podstawowego kontenera naszej strony, czyli elementu body, oraz przypisania mu pewnych og├│lnych w┼éa┼Ťciwo┼Ťci, kt├│re zostan─ů odziedziczone przez wszystkie pozosta┼ée elementy.

Stylizacja elementu body

Kiedy spojrzymy na zrzut ekranu naszej strony, to zauwa┼╝ymy, ┼╝e jest wy┼Ťrodkowana w poziomie w oknie przegl─ůdarki, ma okre┼Ťlon─ů szeroko┼Ť─ç oraz ma szare, do┼Ť─ç grube, obramowanie.

Wszystkie te ustawienia zosta┼éy zdefiniowane w regule CSS dotycz─ůcej elementu body.

Aby element mo┼╝na by┼éo wy┼Ťrodkowa─ç w poziomie, musi on spe┼énia─ç dwa warunki. Po pierwsze musi by─ç blokowy (element body jest), a po drugie musi mie─ç okre┼Ťlon─ů szeroko┼Ť─ç (tym ustawieniem si─Ö teraz zajmiemy).

Ustawianie szeroko┼Ťci elementu

Kwestia ustawienia szeroko┼Ťci strony internetowej jest bardzo wa┼╝na, poniewa┼╝ mog─ů j─ů ogl─ůda─ç zar├│wno osoby korzystaj─ůce z du┼╝ych monitor├│w, jak i u┼╝ytkowniczki pos┼éuguj─ůce si─Ö iPhone’ami.

Je┼Ťli ustawimy zbyt du┼╝─ů szeroko┼Ť─ç, to strona mo┼╝e b─Ödzie dobrze si─Ö prezentowa─ç na du┼╝ych monitorach, ale b─Ödzie wygl─ůda─ç fatalnie na telefonach kom├│rkowych.

Z drugiej strony, je┼Ťli zdefiniujemy bardzo w─ůsk─ů stron─Ö, to b─Ödzie ona ┼éadnie si─Ö prezentowa┼éa na telefonach, ale b─Ödzie fatalnie wygl─ůda┼éa na szerokim ekranie monitora.

Rozwi─ůzaniem tego problemu s─ů tzw. techniki projektowania responsywnych stron internetowych, czyli takich, kt├│re zmieniaj─ů uk┼éad, rozmiar, rozmieszczenie element├│w i inne cechy w zale┼╝no┼Ťci od rozmiaru ekranu, na jakim s─ů ogl─ůdane.

My zaczniemy prac─Ö od stworzenia wersji dla szerokich monitor├│w, a kiedy ju┼╝ j─ů uko┼äczymy, dostosujemy j─ů za pomoc─ů tzw. zapyta┼ä o media CSS tak┼╝e do innych urz─ůdze┼ä.

W zwi─ůzku z tym na razie ustawiamy maksymaln─ů szeroko┼Ť─ç elementu body na 1200 pikseli oraz dodajemy szare obramowanie o grubo┼Ťci 6 pikseli.

body {
  max-width: 1200px;
  border: 6px solid #eaeaea;
}

Dzi─Öki zdefiniowaniu maksymalnej szeroko┼Ťci mamy pewno┼Ť─ç, ┼╝e strona nie rozci─ůgnie si─Ö na ca┼é─ů szeroko┼Ť─ç ekranu nawet na bardzo du┼╝ych monitorach, przez co wygl─ůda┼éaby niezbyt atrakcyjnie.

Gdyby┼Ťmy jednak teraz zmierzyli szeroko┼Ť─ç naszej strony, okaza┼éoby si─Ö, ┼╝e wynosi ona 1212 pikseli, a nie 1200 pikseli. Jest to spowodowane tym, ┼╝e przegl─ůdarka doda┼éaby do 1200 po 6 pikseli obramowania z ka┼╝dej strony. Odpowiada za to tzw. model polowy CSS (znany te┼╝ pod nazw─ů model pude┼ékowy CSS) ÔÇô ang. box model.

Model polowy CSS

W opisywanym przypadku zwi─Ökszenie szeroko┼Ťci elementu przez obramowanie nie sprawia┼éoby nam wielkiego problemu, poniewa┼╝ zawsze mogliby┼Ťmy zmniejszy─ç warto┼Ť─ç w┼éasno┼Ťci max-width, aby uzyska─ç po┼╝─ůdan─ů sumaryczn─ů szeroko┼Ť─ç i by┼éoby po k┼éopocie.

Wyobra┼║ sobie jednak, ┼╝e musisz wykonywa─ç takie obliczenia dla wszystkich element├│w, kt├│rym okre┼Ťlasz szeroko┼Ť─ç na swoich stronach. Mog┼éoby to by─ç bardzo uci─ů┼╝liwe. Dlatego warto wiedzie─ç, czym jest model polowy CSS i jak go okie┼ézna─ç, aby ta┼äczy┼é tak, jak mu zagramy.

Znasz ju┼╝ poj─Öcia element├│w blokowych (ang. block-level element) i element├│w ┼Ťr├│dliniowych (ang. inline element). M├│wi─ůc w uproszczeniu, elementy blokowe dodaj─ů z┼éamanie wiersza oraz obs┼éuguj─ů w pe┼éni ustawienia margines├│w, dope┼énienia, obramowania, szeroko┼Ťci i wysoko┼Ťci.

Natomiast elementy ┼Ťr├│dliniowe nie dodaj─ů z┼éamania wiersza, nie obs┼éuguj─ů ustawie┼ä szeroko┼Ťci i wysoko┼Ťci oraz obs┼éuguj─ů dope┼énienie, marginesy i obramowanie tylko w taki spos├│b, ┼╝e g├│rne i dolne ustawienia tych w┼éasno┼Ťci nie powoduj─ů odsuni─Öcia element├│w znajduj─ůcych si─Ö powy┼╝ej lub poni┼╝ej.

Model polowy CSS okre┼Ťla, w jaki spos├│b s─ů traktowane obramowanie i dope┼énienie przy obliczaniu ich szeroko┼Ťci i wysoko┼Ťci.

W CSS ka┼╝dy element tworzy na stronie tzw. pole (ang. box) sk┼éadaj─ůce si─Ö z tre┼Ťci (ang. content box), dope┼énienia (ang. padding box), obramowania (ang. border box) i marginesu (ang. margin box), jak na poni┼╝szej ilustracji.

Pole elementu CSS

W standardowym modelu polowym (ang. standard box model) ca┼ékowita szeroko┼Ť─ç pola elementu sk┼éada si─Ö z szeroko┼Ťci pola tre┼Ťci, lewego i prawego pola dope┼énienia oraz lewego i prawego pola obramowania. Natomiast ca┼ékowita wysoko┼Ť─ç elementu sk┼éada si─Ö z wysoko┼Ťci pola tre┼Ťci, g├│rnego i dolnego pola dope┼énienia oraz g├│rnego i dolnego pola obramowania. Na przyk┼éad:

div {
  height: 200px;
  width: 600px;
  margin: 20px;
  padding: 15px;
  border: 10px solid black;
}

Temu elementowi div ustawili┼Ťmy wysoko┼Ť─ç na 200 pikseli i szeroko┼Ť─ç na 600 pikseli, ale jego rzeczywiste wymiary w standardowym modelu polowym b─Öd─ů inne.

Wysoko┼Ť─ç tego elementu div wyniesie: 200 (w┼éasno┼Ť─ç height) + 15 (dope┼énienie g├│rne) +15 (dope┼énienie dolne) + 10 (g├│rna kraw─Öd┼║ obramowania) + 10 (dolna kraw─Öd┼║ obramowania) = 250 pikseli.

Szeroko┼Ť─ç tego elementu div wyniesie: 600 (w┼éasno┼Ť─ç width) + 15 (dope┼énienie lewe) +15 (dope┼énienie prawe) + 10 (lewa kraw─Öd┼║ obramowania) + 10 (prawa kraw─Öd┼║ obramowania) = 650 pikseli.

Kr├│tko m├│wi─ůc, czasami mo┼╝na si─Ö zdziwi─ç, poniewa┼╝ mimo ustawienia konkretnej wysoko┼Ťci i szeroko┼Ťci otrzymujemy element o innych wymiarach.

Dlatego stworzono tak┼╝e alternatywny model polowy (ang. alternative box model), w kt├│rym szeroko┼Ť─ç i wysoko┼Ť─ç dope┼énienia i obramowania s─ů wliczane w szeroko┼Ť─ç i wysoko┼Ť─ç ca┼ékowit─ů elementu.

Do wyboru modelu polowego s┼éu┼╝y w┼éasno┼Ť─ç CSS box-sizing, kt├│ra przyjmuje dwie warto┼Ťci: content-box (domy┼Ťlna, odpowiadaj─ůca modelowi standardowemu) i border-box (w┼é─ůczaj─ůca model alternatywny).

Powiedzmy, że do powyższej reguły CSS dodajemy deklarację box-sizing: border-box:

div {
  box-sizing: border-box;
  height: 200px;
  width: 600px;
  margin: 20px;
  padding: 15px;
  border: 10px solid black;
}

Teraz elementy div na naszej stronie b─Öd─ů mia┼éy wysoko┼Ť─ç 200 pikseli i szeroko┼Ť─ç 600 pikseli bez wzgl─Ödu na ustawienie obramowania i dope┼énienia. Ich zmiana b─Ödzie po prostu powodowa┼éa modyfikacj─Ö rozmiaru tre┼Ťci.

Przy obecnych ustawieniach na tre┼Ť─ç zostaje nam: 130 (200 Ôłĺ 20 Ôłĺ 20 Ôłĺ 15 Ôłĺ 15) pikseli wysoko┼Ťci i 530 (600 Ôłĺ 20 Ôłĺ 20 Ôłĺ 15 Ôłĺ 15) pikseli szeroko┼Ťci.

Gdyby┼Ťmy zmienili szeroko┼Ť─ç dope┼énienia na 10 pikseli, a szeroko┼Ť─ç obramowania na 5 pikseli, to na tre┼Ť─ç zostawa┼éoby nam: 170 pikseli wysoko┼Ťci i 570 pikseli szeroko┼Ťci. Ca┼ékowita wysoko┼Ť─ç i szeroko┼Ť─ç elementu nadal jednak wynosi┼éaby 200 i 600 pikseli.

Wi─Ökszo┼Ť─ç projektant├│w stron internetowych woli pracowa─ç z alternatywnym modelem polowym, poniewa┼╝ jest bardziej intuicyjny i uwalnia ich od konieczno┼Ťci wykonywania oblicze┼ä.

My te┼╝ b─Ödziemy korzysta─ç z alternatywnego modelu polowego i ustawimy go dla wszystkich element├│w w naszej witrynie. Do wszystkich element├│w pozwala odnie┼Ť─ç si─Ö selektor uniwersalny *, wi─Öc u┼╝yjemy go w nast─Öpuj─ůcy spos├│b:

* {
  box-sizing: border-box;
}

Od tej pory wszystkie elementy blokowe w naszej witrynie b─Öd─ů ÔÇ×dzia┼éa┼éyÔÇŁ w trybie alternatywnego modelu polowego. Podsumujemy napisane do tej pory arkusze styl├│w:

* {
  box-sizing: border-box;
}
body {
  max-width: 1200px;
  border: 6px solid #eaeaea;
}

Zosta┼éo nam jeszcze kilka ustawie┼ä ÔÇ×kosmetycznychÔÇŁ, nad kt├│rymi nie b─Ödziemy si─Ö ju┼╝ zbytnio rozwodzi─ç. Powiedzmy, ┼╝e opr├│cz om├│wionych kwestii dostali┼Ťmy od zespo┼éu projektowego nast─Öpuj─ůce wytyczne dotycz─ůce elementu body:

  • g├│rny margines ma mie─ç 20 pikseli
  • dolny margines ma wynosi─ç 0
  • strona ma by─ç wy┼Ťrodkowana
  • dope┼énienie: 20 pikseli z lewej i prawej oraz 30 pikseli na g├│rze i na dole
  • obramowanie: 6 pikseli, jednolite w kolorze eaeaea
  • kolor tekstu: 646363
  • czcionka: Poppins (trzeba do┼é─ůczy─ç do stron za pomoc─ů elementu link z serwisu Google Fonts)
  • wysoko┼Ť─ç wiersza ma wynosi─ç 1.5

Poni┼╝ej znajduje si─Ö arkusz styl├│w spe┼éniaj─ůcy wszystkie opisane wymagania naszych projektant├│w:

* {
  box-sizing: border-box;
}
body {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 20px auto 0 auto;
  padding: 20px 30px;
  border: 6px solid #eaeaea;
  color: #646363;
  font-family: Poppins, sans-serif;
  line-height: 1.5;
}

Font Poppins do┼é─ůczamy do ka┼╝dej strony za pomoc─ů poni┼╝szego elementu link:

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

Ustawienia w┼éasno┼Ťci font-family s─ů dziedziczone, wi─Öc wystarczy zdefiniowa─ç odpowiedni kr├│j pisma dla elementu body, aby zosta┼é zastosowany we wszystkich elementach na stronie.

Teraz nasza strona wygl─ůda tak:

Gotowy element body

Już jest lepiej, ale nadal mamy sporo do zrobienia. Teraz zajmiemy się nagłówkiem strony.

Stylizacja nag┼é├│wka strony ÔÇô header

Nasz nag┼é├│wek dzieli si─Ö na dwie g┼é├│wne cz─Ö┼Ťci. Pierwsza zawiera nazw─Ö witryny i podtytu┼é, a druga zawiera nawigacj─Ö.

Je┼Ťli chodzi o nazw─Ö witryny i podtytu┼é, to wymagania naszych projektant├│w s─ů proste:

  • tekst ca┼éego elementu nag┼é├│wka strony ma by─ç wyr├│wnany do ┼Ťrodka
  • rozmiar tekstu nag┼é├│wka ma wynosi─ç 32 piksele
  • podtytu┼é ma znajdowa─ç si─Ö blisko tytu┼éu i ma mie─ç pismo pochylone

Poni┼╝ej znajduj─ů si─Ö regu┼éy CSS, kt├│re realizuj─ů te za┼éo┼╝enia. Zastosowali┼Ťmy w nich selektor identyfikatora #main-header, poniewa┼╝ element header mo┼╝e wyst─Öpowa─ç w kilku miejscach na stronie, a my w tym przypadku chcemy odnie┼Ť─ç si─Ö tylko do jego konkretnego egzemplarza, kt├│ry b─Ödzie umieszczony w niezmienionej formie na ka┼╝dej stronie naszej witryny. Sp├│jrz na poni┼╝szy kod:

#main-header {text-align: center;}
#main-header h1 {font-size: 2rem}
#main-header hgroup p {margin-top: 0; font-style: italic;}

Praktycznie wszystko tutaj jest Ci ju┼╝ dobrze znaneÔÇŽ mo┼╝e z wyj─ůtkiem jednostki rem, kt├│ra zosta┼éa u┼╝yta do ustawienia rozmiaru pisma elementu h1.

Jednostka rem odnosi si─Ö do rozmiaru pisma elementu g┼é├│wnego, czyli html. Zazwyczaj wynosi ono 16 pikseli, wi─Öc je┼Ťli chcemy uzyska─ç 32-pilselowy rozmiar pisma, mo┼╝emy napisa─ç 2rem. Je┼Ťli jednak chcesz mie─ç absolutn─ů pewno┼Ť─ç, ┼╝e otrzymasz dok┼éadnie tak─ů warto┼Ť─ç (gdyby jaka┼Ť przegl─ůdarka mia┼éa inne ustawienie domy┼Ťlne), mo┼╝esz ustawi─ç rozmiar pisma elementu html na 16 pikseli: html {font-size: 16px;}.

A po co w og├│le bawi─ç si─Ö w jakie┼Ť obliczenia, skoro mo┼╝na po prostu napisa─ç 32px? U┼╝ycie jednostki rem lub em (odnosz─ůcej si─Ö do rozmiaru pisma elementu nadrz─Ödnego, jakikolwiek jest) zwi─Öksza elastyczno┼Ť─ç strony i u┼éatwia zmian─Ö wszystkich ustawie┼ä na raz. Kiedy np. zmienimy rozmiar pisma elementu html na 14 pikseli, to automatycznie zostan─ů pomniejszone wszystkie pozosta┼ée warto┼Ťci innych element├│w.

Teraz przyjrzymy si─Ö wymaganiom projektowym dotycz─ůcym nawigacji:

  • od do┼éu i od g├│ry nawigacj─Ö ma zdobi─ç jednopikselowa linia ci─ůg┼éa o kolorze dddddd.
  • marginesy g├│rny i dolny maj─ů mie─ç warto┼Ť─ç 40 pikseli, a marginesy lewy i prawy ÔÇô 0
  • dope┼énienie z wszystkich stron ma wynosi─ç 15 pikseli

Napisanie regu┼éy spe┼éniaj─ůcej te wymagania to dla nas b┼éahostka:

#main-header nav {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  margin: 40px 0;
  padding: 15px;
}

Ta regu┼éa dotyczy samego elementu nav, ale mo┼╝e pami─Ötasz z rozdzia┼éu Struktura strony HTML5, ┼╝e do budowy nawigacji zwyczajowo u┼╝ywa si─Ö list nieuporz─ůdkowanych. Wtedy jeszcze nie umieli┼Ťmy ich tworzy─ç, dlatego zostawili┼Ťmy to na p├│┼║niej. Teraz ju┼╝ mo┼╝emy doko┼äczy─ç budow─Ö naszej nawigacji od strony konstrukcyjnej:


<nav>
  <ul>
    <li><a href="index.html">Główna</a></li>
    <li><a href="erdos.html">Paul Erd┼Ĺs</a></li>
    <li><a href="feynman.html">Richard Feynman</a></li>
    <li><a href="why-the-lucky-stiff.html">why the lucky stiff</a></li>
  </ul>
</nav>

Wklej ten kod w miejsce obecnej nawigacji i sprawd┼║, jak teraz wygl─ůda strona (oczywi┼Ťcie wklej te┼╝ do arkusza styl├│w wszystkie napisane do tej pory regu┼éy CSS). Cz─Ö┼Ť─ç nag┼é├│wkowa powinna wygl─ůda─ç tak:

Nawigacja z listy nieuporz─ůdkowanej

Dodanie listy nieuporz─ůdkowanej spowodowa┼éo pojawienie si─Ö punktor├│w oraz u┼éo┼╝enie element├│w menu jeden nad drugim (nic w tym dziwnego, poniewa┼╝ s─ů to elementy blokowe). Za pomoc─ů odpowiednich regu┼é CSS bez problemu pozb─Ödziemy si─Ö tych problem├│w:

#main-header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#main-header nav ul li {
  display: inline-block;
  margin: 0 15px;
}

Najpierw wy┼é─ůczyli┼Ťmy punktory element├│w listy, a nast─Öpnie zlikwidowali┼Ťmy wszelkie odst─Öpy dodawane przez element ul.

Nast─Öpnie za pomoc─ů w┼éasno┼Ťci display zmienili┼Ťmy charakterystyk─Ö zachowania element├│w li znajduj─ůcych si─Ö w nawigacji na tzw. bloki ┼Ťr├│dliniowe (inline-block).

Za pomoc─ů w┼éasno┼Ťci CSS display mo┼╝na wybra─ç, czy dany element ma mie─ç w┼éa┼Ťciwo┼Ťci elementu blokowego (warto┼Ť─ç block), ┼Ťr├│dliniowego (warto┼Ť─ç inline), bloku ┼Ťr├│dliniowego (warto┼Ť─ç inline-block), elementu listy (warto┼Ť─ç list-item), a nawet mo┼╝na sprawi─ç, aby w og├│le nie by┼é uwzgl─Ödniany w┼Ťr├│d element├│w pokazywanych na stronie (warto┼Ť─ç none). Tych ustawie┼ä jest du┼╝o wi─Öcej, ale w tej chwili nie wszystkie nas interesuj─ů.

Warto natomiast wiedzie─ç, ┼╝e o tym, czy domy┼Ťlnie element jest blokowy (np. p, div, li), czy ┼Ťr├│dliniowy (np. abbr, em, del, strong), decyduj─ů standardowe arkusze styl├│w przegl─ůdarek, kt├│rych ustawienia mo┼╝emy dowolnie zmienia─ç za pomoc─ů w┼éasnych regu┼é CSS.

W zwi─ůzku z tym ka┼╝dy element blokowy mo┼╝emy zamieni─ç na ┼Ťr├│dliniowy za pomoc─ů deklaracji display: inline, ka┼╝dy element ┼Ťr├│dliniowy mo┼╝emy zamieni─ç na blokowy za pomoc─ů deklaracji display: block, dowolny element mo┼╝emy zamieni─ç na element listy za pomoc─ů deklaracji display: list-item itd.

W przyk┼éadzie u┼╝yli┼Ťmy warto┼Ťci inline-block. Dzi─Öki temu elementy listy reprezentuj─ůcej nasze menu b─Öd─ů zachowywa┼éy si─Ö, jak elementy ┼Ťr├│dliniowe, tzn. nie b─Öd─ů tworzy┼éy z┼éamania wiersza, a jednocze┼Ťnie b─Öd─ů obs┼éugiwa┼éy wszystkie ustawienia margines├│w, szeroko┼Ťci itd., jak elementy blokowe.

Dodatkowo do element├│w li zastosowali┼Ťmy 15-pikselowy margines lewy i prawy, aby odpowiednio rozstawi─ç poszczeg├│lne elementy menu.

Nag┼é├│wkowa cz─Ö┼Ť─ç naszej strony nabra┼éa ju┼╝ rumie┼äc├│w:

Nawigacja z listy nieuporz─ůdkowanej bez styl├│w

┼ü─ůcza s─ů fioletowe, poniewa┼╝ takie jest domy┼Ťlne ustawienie przegl─ůdarki dla odwiedzonych link├│w. Nied┼éugo zmienimy je na co┼Ť bardziej pasuj─ůcego do naszej witryny. Teraz jednak przechodzimy do cz─Ö┼Ťci g┼é├│wnej, czyli elementu main.

Stylizacja tre┼Ťci g┼é├│wnej ÔÇô main

Tre┼Ť─ç w┼éa┼Ťciwa naszej strony g┼é├│wnej jest prosta i wymaga zaj─Öcia si─Ö tylko dwiema sprawami ÔÇô odpowiednim ustawieniem grafiki wzgl─Ödem tekstu oraz zw─Ö┼╝eniem obszaru, aby nie rozchodzi┼é si─Ö zbyt szeroko, co nieatrakcyjnie wygl─ůda.

Najprostszym sposobem na umieszczenie obrazu po lewej stronie tekstu jest u┼╝ycie znanej nam ju┼╝ w┼éasno┼Ťci CSS o nazwie float. Za jej pomoc─ů mo┼╝na sprawi─ç, aby wybrany element, np. obraz, przesun─ů┼é si─Ö na lew─ů (warto┼Ť─ç left) lub praw─ů (warto┼Ť─ç right) stron─Ö s─ůsiedniej tre┼Ťci.

My przesuniemy nasz obraz na lew─ů stron─Ö. Ponadto nadamy mu 20-pikselowy margines g├│rny, prawy i dolny, aby odsun─ů─ç od niego op┼éywaj─ůcy go tekst, oraz zlikwidujemy lewy, aby element przylega┼é do kraw─Ödzi swojego kontenera.

.featured {
  float: left;
  margin: 20px 20px 20px 0;
}

Zwr├│─ç te┼╝ uwag─Ö, ┼╝e obrazowi przypisali┼Ťmy klas─Ö featured. Dzi─Öki temu mo┼╝emy odnosi─ç si─Ö tylko do ÔÇ×promocyjnegoÔÇŁ obrazu na stronie g┼é├│wnej ÔÇô na podstronach te┼╝ b─Ödziemy u┼╝ywa─ç obraz├│w i nie zawsze b─Ödziemy chcieli stosowa─ç do nich takie same ustawienia.

Je┼Ťli chodzi o zw─Ö┼╝enie tre┼Ťci elementu main, to zastosujemy proste dope┼énienie:

#home main {
  padding: 0 90px
}

Tutaj u┼╝yli┼Ťmy dodatkowo identyfikatora home, aby zaznaczy─ç, ┼╝e to ustawienie dotyczy tylko elementu main na stronie g┼é├│wnej. Na podstronach b─Ödzie on inaczej sformatowany.

Strona coraz bardziej zaczyna przypominać to, o co nam chodziło. Spójrz na poniższy zrzut ekranu:

Indeks z niesformatowan─ů stopk─ů

Pozostały nam jeszcze dwie sprawy: stylizacja stopki i linków.

Stylizacja stopki ÔÇô footer

Oto wymagania naszych projektant├│w odno┼Ťnie do wygl─ůdu samej stopki:

  • ma by─ç odsuni─Öta od tre┼Ťci znajduj─ůcej si─Ö nad ni─ů o 60 pikseli
  • nad ni─ů ma biec jednopikselowa jednolita linia w kolorze dddddd odsuni─Öta od tre┼Ťci na 20 pikseli
  • tre┼Ť─ç ma by─ç wy┼Ťrodkowana
  • odno┼Ťniki standardowo maj─ů by─ç podkre┼Ťlone
  • po najechaniu na odno┼Ťnik podkre┼Ťlenie ma znika─ç

Z takimi wymaganiami poradzimy sobie b┼éyskawicznie. Poni┼╝ej znajduj─ů si─Ö odpowiednie regu┼éy CSS:

#main-footer {
  margin-top: 60px;
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid #dddddd;
}
#main-footer a {
  text-decoration: underline;
}
#main-footer a:hover {
  text-decoration: none;
}

Ponadto otrzymali┼Ťmy dodatkowe informacje na temat wygl─ůdu odno┼Ťnik├│w dla ca┼éej witryny i dla nag┼é├│wka:

  • odno┼Ťnik nieodwiedzony i odwiedzony ÔÇô w ca┼éej witrynie kolor: 646363 (w tre┼Ťci artyku┼é├│w kolor odno┼Ťnika odwiedzonego b─Ödzie inny, zostanie podany p├│┼║niej), podkre┼Ťlenie: brak
  • odno┼Ťnik najechany kursorem ÔÇô kolor granatowy (w tre┼Ťci artyku┼é├│w b─Ödzie si─Ö pojawia─ç podkre┼Ťlenie)

Realizacja tych wymagań jest bardzo prosta:

a {
    color: #646363;
    text-decoration: none;
}
#main-header a:visited {
    color: #646363;
}
a:hover {
    color: navy !important;
}

W ten spos├│b uko┼äczyli┼Ťmy prace nad nasz─ů stron─ů g┼é├│wn─ů. Pos┼éu┼╝y nam ona jako punkt wyj┼Ťcia do stworzenia szablonu podstrony, dzi─Öki czemu do uko┼äczenia stylizacji ca┼éej witryny pozostaje nam ju┼╝ niewiele pracy.

Poni┼╝ej znajduje si─Ö kompletny arkusz styl├│w utworzony w tym rozdziale.

* {
  box-sizing: border-box;
}
html {
    font-size: 16px;
}
body {
  max-width: 1200px;
  margin: 20px auto 0 auto;
  padding: 20px 30px;
  border: 6px solid #eaeaea;
  color: #646363;
  font-family: Poppins, sans-serif;
  line-height: 1.5;
}
#main-header {
  text-align: center;
}
#main-header h1 {
  font-size: 2rem;
}
#main-header hgroup p {
  margin-top: 0;
  font-style: italic;
}
#main-header nav {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  margin: 40px 0;
  padding: 15px;
}
#main-header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#main-header nav ul li {
  display: inline-block;
  margin: 0 15px;
}
#home main {
  padding: 0 90px;
}
.featured {
  float: left;
  margin: 20px 20px 20px 0;
}
#main-footer {
  margin-top: 60px;
  padding-top: 20px;
  text-align: center;
  border-top: 1px solid #dddddd;
}
#main-footer a {
  text-decoration: underline;
}
#main-footer a:hover {
  text-decoration: none;
}
a {
  color: #646363;
  text-decoration: none;
}
a:visited {
  color: #646363;
}
a:hover {
  color: navy;
}

Menu g┼é├│wne to bardzo wa┼╝ny element ka┼╝dej witryny, wi─Öc warto mu po┼Ťwi─Öci─ç odrobin─Ö wi─Öcej czasu ni┼╝ niekt├│rym innym elementom. Na wielu stronach w internecie mo┼╝na spotka─ç menu, kt├│re rozwijaj─ů si─Ö po najechaniu kursorem, ukazuj─ůc zestaw opcji do wyboru.

W nast─Öpnym rozdziale nauczysz si─Ö tworzy─ç w┼éa┼Ťnie takie menu za pomoc─ů HTML i CSS i jak zwykle poznasz now─ů ciekaw─ů w┼éasno┼Ť─ç CSS.

Podsumowanie

Sum
  • Model polowy CSS okre┼Ťla wzajemne relacje mi─Ödzy ustawieniami szeroko┼Ťci i wysoko┼Ťci element├│w blokowych a ich dope┼énieniem i obramowaniem.
  • Wielu projektant├│w lubi ujednolica─ç model polowy wszystkich element├│w na swoich stronach przez zastosowanie deklaracji box-sizing: border-box w parze z selektorem uniwersalnym *.
  • W standardowym modelu polowym obramowanie i dope┼énienie nie wliczaj─ů si─Ö w szeroko┼Ť─ç element├│w blokowych.
  • W alternatywnym modelu polowym obramowanie i dope┼énienie wliczaj─ů si─Ö w szeroko┼Ť─ç i wysoko┼Ť─ç element├│w.
  • G┼é├│wne menu nawigacyjne zazwyczaj buduje si─Ö na bazie listy nieuporz─ůdkowanej.
  • W┼éasno┼Ť─ç CSS display umo┼╝liwia zmian─Ö charakterystyki zachowania element├│w na stronie.
Ilustracje ćwiczeń

─ćwiczenia

  1. Utw├│rz testowy plik HTML o dowolnej nazwie i napisz regu┼é─Ö CSS dla elementu body wg nast─Öpuj─ůcych wytycznych:
    1. lewy margines: 20 pikseli
    2. prawy margines: 15 pikseli
    3. dolny margines: 20 pikseli
    4. g├│rny margines: 30 pikseli
    5. dopełnienie: 15 pikseli z lewej i prawej oraz 20 pikseli u góry i u dołu
    6. obramowanie g├│rne: 1 piksel, jednolite w kolorze zielonym
    7. obramowanie dolne: 2 piksele, kropkowane w kolorze 43dfab
    8. obramowanie lewe: 3 piksele, kreskowane w kolorze fioletowym
    9. kolor tekstu: żółty
    10. czcionka: Roboto z Google Fonts
    11. wysoko┼Ť─ç wiersza: 1.75