Bezbolesny wstęp do CSS

Wielkość: px

Rozpocząć pokaz od strony:

Download "Bezbolesny wstęp do CSS"

Małgorzata Nowakowska
8 lat temu
Przeglądów:

1 CZĘŚĆ 1 Bezbolesny wstęp do CSS HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i rozszerzenia...7 CSS rozwija się obok HTML... 8 Dlaczego CSS wygląda na trudny?... 9 Powody uczenia się CSS... 9 Przegląd terminów HTML oraz struktury strony...11 Projekt 1-1: Tworzymy stronę testową (próbkę) w HTML...14 HTML i CSS: skupiamy się na podobieństwach...17 Podstawowa terminologia CSS...17 Podstawowa składnia CSS...19 Dołączanie arkuszy stylów...20 Projekt 1-2: Tworzenie arkuszy stylów...22 Sprawdzian Rozumienie i używanie selektorów...27 Jak działają selektory...28 Rodzaje selektorów...28 Pojmowanie selektorów typu...29 Rozumienie selektorów potomka...29 Rozumienie selektorów atrybutów...31 Rozumienie pseudo-klas i pseudo-elementów...32 Projekt 2-1: Tworzymy bezstylową stronę Praca z selektorami typu...37 Lista selektorów typu...37 Podstawowa składnia selektora typu...38 Praca z selektorami potomka...40 Rozumienie drzewa dokumentu HTML...40 Używanie selektorów potomnych (kontekstowych)...42 Projekt 2-2: Zastosowanie selektorów typu i selektorów potomka...44 Praca z selektorami atrybutów...47 Selektory klasy...47 Selektory ID...48 Praca z pseudo-klasami i pseudo-elementami...51 Rozumienie pseudo-klas oraz pseudo-elementów...51 Rozpoznawanie pseudo-klas i pseudo-elementów...53 Projekt 2-3: Zastosuj selektory klasy, id, oraz "pseudo" do konstytucja.htm...54 Sprawdzian Przeglądanie własności CSS...61 Rozumienie własności i ich funkcji...62 Rozumienie własności...62 Pięć kategorii własności...63 Projekt 3-1: Konstruujemy ćwiczebną stronę HTML...70 Praca z własnościami...74 Sterowanie układem tekstu przy pomocy własności tekstu...74 Modyfikowanie czcionek przy pomocy własności czcionek...78 Dodaj kolor z pomocą własności koloru i tła...80 Pozycjonowanie elementów przy pomocy własności ramki...83 Sterowanie wyświetlaniem przy pomocy własności klasyfikacji...86 Projekt 3-2: Dodajmy więcej stylów do "Wypraw Freda"...88 Sprawdzian...93

..11 Projekt 1-1: Tworzymy stronę testową (próbkę) w HTML...14 HTML i CSS: skupiamy się na podobieństwach...17 Podstawowa terminologia CSS...17 Podstawowa składnia CSS...19 Dołączanie arkuszy stylów.

2 4 Stosowanie wartości...95 Rozumienie wartości i ich znaczenia...96 Różne rodzaje wartości...98 Wartości specyficzne...98 Wartości URL Wartości procentowe Wartości koloru Jednostki miar Jednostki bezwzględne a jednostki względne Upraszczanie wartości kolorów Rozumienie addytywnego mieszania kolorów Łatwe mieszanie kolorów Alternatywne wartości kolorów Upraszczanie jednostek miar Projekt 4-1: Tworzenie tabeli kolorów Sprawdzian Rozumienie kaskady i dziedziczenia Rozumienie dziedziczenia Jak działa dziedziczenie Własności nie dziedziczone Wymuszanie dziedziczenia Określanie specyficzności Jak rozumieć specyficzność Jak obliczyć specyficzność Jak używać specyficzności Deklaracja!important Rozumienie deklaracji!important Jak używać!important Rozumienie kaskady Konkurujące arkusze stylów Sortowanie arkuszy stylów Projekt 5-1: Eksperymenty ze sprzecznymi stylami oraz!important Sprawdzian CZĘŚĆ 2 Poznajemy skrzynkę narzędziową dla CSS Praca z własnościami czcionek CSS i zgodność z przeglądarkami Używaj "bezpiecznych" własności i wartości Testuj swoje strony Twórz alternatywne arkusze stylów Od maszynopisu do publikacji na biurku Web, <font> oraz HTML Problem z elementem <font> z HTML Zalety własności czcionek w CSS Własności czcionek w CSS Własność font-family Własność font-size Własność font-style Własność font-variant Własność font-weight Skrót - własność font Własności czcionki w CSS Własność font-stretch Własność font-size-adjust Projekt 6-1: Zastosowanie własności czcionki...173

..108 Alternatywne wartości kolorów...110 Upraszczanie jednostek miar...112 Projekt 4-1: Tworzenie tabeli kolorów...112 Sprawdzian...119 5 Rozumienie kaskady i dziedziczenia.

3 7 Praca z własnościami tekstu Jak działają własności czcionki Jak działają własności tekstu Własności tekstu w CSS Projekt 7-1: Eksperymentuj z własnościami tekstu Praca z własnościami tekstu Własność word-spacing Własność letter-spacing Własność text-decoration Własność vertical-align Własność text-align Własność text-transform Własność text-indent Własność line-height Własność text-shadow (CSS 2) Projekt 7-2: Tworzymy wzornik czcionek Sprawdzian Stosowanie własności koloru i tła Dodawanie obrazów i kolorów CSS pokonuje ograniczenia HTML Własność color Własność background-color Własność background-image Projekt 8-1: Dodawania kolorów i obrazu w tle Sterowanie położeniem obrazu i przypisaniem Własność background-repeat Własność background-attachment Własność background-position Własność background (skrót) Projekt 8-2: Zastosowanie własności tła Sprawdzian Używanie własności ramki Rozumienie modelu opartego na ramkach Tabele HTML i model oparty na ramkach Podstawa modelu opartego na ramkach Projekt 9-1: Praca z modelem opartym na ramkach Własności ramki Własności marginesu Własności wypełnienia Własności krawędzi Projekt 9-2: Zabawa z własnościami ramki Sprawdzian Stosowanie własności opisowych Rozumienie własności opisowych Własności opisowe i HTML Własności opisowe a XML Własności opisowe oraz zgodność przeglądarek Własność display Własność display w CSS 1: kontrola zachowania się elementu Własność display w CSS 2: wartości związane z nagłówkiem Wartości odnoszące się do tabel Projekt 10-1: Eksperymentujemy z display...283

..196 Własność text-transform...197 Własność text-indent...198 Własność line-height...201 Własność text-shadow (CSS 2)...203 Projekt 7-2: Tworzymy wzornik czcionek...204 Sprawdzian.

4 Inne własności opisowe Własność white-space Własność list-style-type Własność list-style-image Własność list-style-position Własność list-style Projekt 10-2: Tworzenie zagnieżdżonej listy Sprawdzian CZĘŚĆ 3 Projektowanie w CSS Model wizualny Rozumienie modelu wizualnego Generacja ramki Rozmiary ramki Własności width oraz height Własności min-width oraz max-width (CSS 2) Własności min-height oraz max-height (CSS 2) Prosta makieta za pomocą float oraz clear Własność float Własność clear Projekt 11-1: Tworzymy prosty układ strony (makietę) za pomocą float i clear Pozycjonowanie elementów (CSS 1) Schematy pozycjonowania Własność position Własności top, right, bottom oraz left Projekt 11-2: Zabawa z blokami Sprawdzian Wizualne efekty CSS Rozumienie overflow i clip Własność overflow Własność clip Kontrolowanie widoczności i warstw Własność visibility Własność z-index Rozumienie dynamicznego HTML Projekt 12-1: Tworzymy dynamiczną stronę Web Sprawdzian CSS i projektowanie witryny Rozumienie dobrego projektowania Web Planowanie witryny Web Projektowanie witryny Web Projekt 13-1: Planujemy witrynę Web Projektowanie za pomocą arkuszy stylów Tworzenie "chudych" arkuszy stylów Tworzenie "przejrzystych" arkuszy stylów Projekt 13-2: eksperymentujemy z układami strony w CSS Tworzenie stron "odpornych na upadki" Dobrze uformowane dokumenty HTML Poprawne dokumenty HTML Poprawny CSS Projektowanie dla zgodności z różnymi przeglądarkami Opcje zgodności Sprawdzian...395

..306 Rozmiary ramki...311 Własności width oraz height...315 Własności min-width oraz max-width (CSS 2)...317 Własności min-height oraz max-height (CSS 2).

5 14 Zaawansowany CSS Rozumienie CSS Kategorie własności CSS Modele CSS 2 oraz kategorie własności Zaawansowany CSS i początkujący Rozumienie zaawansowanych selektorów Selektor uniwersalny Zaawansowany selektor potomka Selektory atrybutów (attribute selectors) Pseudo-klasy i pseudo-elementy Projekt 14-1: Eksperymentujemy z zaawansowanymi selektorami Własności zaawansowane Akustyczne arkusze stylów Własności interfejsu użytkownika Media stronicowane Własności specyfikacji czcionki Zasoby CSS Sprawdzian CZĘŚĆ 3 Dodatki A Odpowiedzi do sprawdzianów Rozdział 1: HTML i CSS: skupmy się na podobieństwach Rozdział 2: Rozumienie i używanie selektorów Rozdział 3: Przeglądanie własności CSS Rozdział 4: Stosowanie wartości Rozdział 5: Rozumienie kaskady i dziedziczenia Rozdział 6: Praca z własnościami czcionek Rozdział 7: Praca z własnościami tekstu Rozdział 8: Stosowanie własności koloru i tła Rozdział 9: Używanie własności ramki Rozdział 10: Stosowanie własności opisowych Rozdział 11: Model wizualny Rozdział 12: Wizualne efekty CSS Rozdział 13: CSS i projektowanie witryny Rozdział 14: Zaawansowany CSS B CSS 1 Ściągawka Selektory HTML Selektory pseudo-klas Selektory pseudo-elementów Własności czcionki Własności tekstu Własności marginesu Własności wypełnienia Własności stylu krawędzi Własności szerokości krawędzi Własności kolorów krawędzi Własności krawędzi Własności koloru i tła Własności opisowe Własności pozycjonowania i efektów wizualnych...442

..406 Projekt 14-1: Eksperymentujemy z zaawansowanymi selektorami...410 Własności zaawansowane...414 Akustyczne arkusze stylów...414 Własności interfejsu użytkownika...415 Media stronicowane.

Podobne dokumenty

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości