(css-01)

Wstęp do CSS - ćwiczenie

Przygotuj arkusz stylów kaskadowych dla załączonego dokumentu HTML (pobierz gotowy plik: kasprowicz.html lub archiwum z plikiem kasprowicz.html: kasprowicz.zip) i nadaj mu nazwę z rozszerzeniem .css (np. kasprowicz.css). Połącz go z dokumentem głównym za pomocą znacznika: <link href="nazwa_pliku.css" type="text/css" rel="stylesheet">.

1. Sformatuj znaczniki wg następującej specyfikacji:

Znacznik body:

• kolor czcionki: ciemnoczerwony;
• kolor tła: jasnobeżowy (np. beige).

W pliku css wpisz:

body {
color: darkred;
background-color: beige;
}

Z następnymi znacznikami postępuj analogicznie.

Znacznik p:

• wyrównanie tekstu (text-align): wyjustowanie;
• wcięcie akapitowe (przesunięcie pierwszego wiersza) (text-indent): 2em;
• margines zewnętrzny górny (margin-top): 0px;
• margines zewnętrzny dolny (margin-bottom): 0px.

Znacznik h3:

• krój czcionki (font-family): dowolny bezszeryfowy (np.: helvetica, sans-serif);
• kolor czcionki: ciemnopomarańczowy lub podobny;
• wyrównanie tekstu: do lewej strony.

Znacznik h2:

• krój czcionki: dowolny bezszeryfowy;
• kolor czcionki: ciemnoniebieski;
• wyrównanie tekstu: wyśrodkowanie;
• margines wewnętrzny górny (padding-top): 12px;
• kolor górnej części ramki (border-top-color): niebieski lub ciemnoniebieski;
• styl górnej części ramki (border-top-style): kreskowany lub kropkowany;
• szerokość górnej części ramki (border-top-width): 1px.

Znacznik h1:

• krój czcionki: dowolny bezszeryfowy;
• wielkość czcionki (font-size): 48px;
• odległość między literami: (letter-spacing): 2px;
• kolor czcionki: ciemnoniebieski;
• kolor tła: jasnoniebieski;
• wyrównanie tekstu: wyśrodkowanie;
• margines wewnętrzny górny (padding-top): 15px;
• margines wewnętrzny dolny (padding-bottom): 10px.

2. Formatowanie według identyfikatorów. Obszar <div>

Niektóre akapity oraz znacznik obszaru <div> (związane z cytowanymi wierszami) zaopatrzone są w dodatkową opcję identyfikatora: id="…", który je wyróżnia. Żeby określić styl dla tak nazwanego znacznika, w pliku css przed nazwą identyfikatora należy dodać znak # (np. #nazwa { … }). Sformatuj te akapity i obszary w następujący sposób:

Identyfikator cytat (obszar - ramka dla cytowanego wiersza):

• szerokość obszaru (width): 20%;
• kolor tła: jasnoniebieski (np.: aliceblue);
• styl całej ramki (border-style): linia ciągła;
• kolor ramki: jasnoszary;
• grubość ramki: cienka (thin);
• żeby umieścić obszar na środku ekranu należy ustawić wartość lewego i prawego marginesu zewnętrznego na „auto” (margin-left: auto; margin-right: auto;);
• margines zewnętrzny górny i dolny: 10px;

Identyfikator wiersz:

• kolor liter: ciemnozielony;
• wielkość liter: małe;
• wcięcie akapitowe (pierwszego wiersza): 0px;
• wszystkie marginesy zewnętrzne (wystarczy podać jedną wspólną własność „margin: …”): 10px.

Identyfikator tytul (tytuły wierszy)

• kolor liter: ciemnozielony;
• wielkość liter: małe;
• styl czcionki (font-style): italik;
• wyrównanie tekstu: prawa strona;
• margines zewnętrzny: 10px.

Identyfikator zrodlo (akapit z odsyłaczem do Wikipedii):

• parametry akapitu dobierz wg własnego uznania.

3. Formatowanie odsyłaczy. Pseudoklasy

Pseudoklasy najczęściej stosuje się, aby nadać własny format odsyłaczom. W tym celu do nazwy znacznika należy dodać znak : (dwukropek) i nazwę pseudoklasy, np. :hover, :link, :visited. Sformatuj odsyłacze wg specyfikacji:

Znacznik a:

• kolor tekstu: czerwony;
• „wyróżnienie” tekstu (text-decoration): none.

Pseudoklasa a:hover:

• kolor tekstu: szary;
• „wyróżnienie” tekstu (text-decoration): underline.

Źródło informacji

• Khan Academy: https://pl.khanacademy.org/computing/computer-programming/html-css#intro-to-css
• Książka Moja pierwsza strona internetowa w HTML5 i CSS3: http://ferrante.pl/books/html/chapter5.html

Odpowiednich własności css i ich wartości szukaj w podpowiedziach swojego edytora (np. Bluefish) lub w Internecie.