Sekcja szósta
W lekcji pierwszej przeczytałem sobie dokumencik na temat tego czym jest CSS, a także stworzyłem pierwszy plik .css i napisałem fragment kodu, który pozwala na powiązanie go z plikiem .html.
W lekcji drugiej utrwaliłem wiedzę z dokumenciku, oglądając filmik, a także stworzyłem styl używając <style> który sprawił, że poniższe teksty (czyli wszystkie akapity) są koloru zielonego. Zabawa się zaczyna.
Ten tekst jest paragrafem.
Ten tekst również jest paragrafem.
Ten tekst także jest paragrafem.
Ten tekst jest paragrafem, ale zmieniłem jego kolor atrybutem style="color: red;".
W lekcji trzeciej i czwartej dowiedziałem się co to Class i Id, jak się je używa oraz jakie są między nimi róznice. Mam coś takiego:
To jest kursywa.
To też jest kursywa.
To jest specjalna kursywa (class special).
Tu mam specjalne pogrubienie (również class special).
Ostatnie dwa zdania są koloru czerwonego, gdyż przypisałem im specjalną klasę "special". Dla wszystkich elementów klasy special dodałem styl - zmiana koloru na czerwony.
Okey okey, ten CSS jest coraz ciekawszy, a co najlepsze - pojmuję wszystko od razu.
W lekcji piątej poznałem zastosowanie tagów div i span. Span jest tagiem "pustym", czyli nie ma żadnego stylu. Można go edytować dowolnie. Div natomiast jest tagiem wyświetlanym w formie bloku, a dodatkowo, w przeciwieństwie do paragrafu, nie oddziela tekstu linijką przerwy. Nie napiszę tu żadnego przykładu użycia spana i diva, gdyż będę to pewnie robić w kolejnych lekcjach.
W lekcji szóstej usystematyzowłem wiedzę o linkach. Wykorzystuje się następujące elementy do edycji: a:link, a:visited, a:hover i a:active. Poniżej zamieszczę link powrotu do strony głównej oraz do wyszukiwarki google, który nie będzie klikany, z wybranymi stylami. Różni się on od tego u góry strony tym, że został wstawiony w tag <div>.
W lekcji siódmej było sporo o formatowaniu tekstu. Na pewno przyda się to przy tworzeniu stron.
W lekcji ósmej poznałem możliwości formatowania czcionek, co widzisz czytając ten tekst. Jest on z rodziny Verdana, ... itp., 2-krotnie większy względem tego w <head> (2em), pogrubiony i pochylony.
W lekcji dziewiątej poznałem możliwości tworzenia tła.
W lekcji dziesiatej dowiedziałem się jak tworzyć ramki. Widzisz ją wokół tego tekstu. Wykonuje się osobne style dla górnej, dolnej, prawe i lewej części ramki.
W lekcji jedenastej dowiedziałem się jak tworzyć ramki przy użyciu CSS. Poniżej znajduje się taka tabelka.
| 1 | 2 |
| 3 | 4 |
W lekcji dwunastej poćwiczyłem tworzenie list ul i ol. Generalnie, stosuje się 3 własności: list-style-type/position/image, czyli jaki wyróznik, gdzie umiejscowiony i ewentualnie obrazek jakim będzie wyróznik.
W lekcji trzynastej nauczyłem się jak zmienić kursor. Wystarczy dodać własność cursor: .
W lekcji czternastej mówiono o przezroczystości. Służy ku temu opacity: .
W tej sekcji nauczyłem się FUNDAMENTÓW CSS. Kolejna sekcja dotyczy POZYCJONOWANIA ELEMENTÓW NA STRONIE W CSS.