CSS to kaskadowy arkusz stylów, który jest językiem opisującym wygląd stron internetowych. Jedną z głównych zalet CSS jest możliwość zastąpienia układu tabeli układem blokowym.
Czy to jest to konieczne
Edytor kodu HTML
Instrukcje
Krok 1
Utwórz pierwszy blok. W formie HTML będzie wyglądać jak tag div o identyfikatorze 'block01'. W tym przypadku identyfikator block01 wskazuje, że w opisie CSS wszystkie właściwości tego bloku są określone dla selektora # block01.
Krok 2
Opisz blok w CSS. W stylach CSS podaj nazwę identyfikatora (# block01) a w nawiasach klamrowych opisz jego parametry – szerokość, położenie, przesunięcie, kolor tła itp. Na przykład może to wyglądać tak: # block01 {width: 150px; wysokość: 150px; pozycja: bezwzględna; góra: 0px; lewy: 0px; kolor tła: różowy}. Opis ten zakłada, że pudełko będzie miało 150 pikseli długości i 150 pikseli szerokości, będzie sztywno umieszczone w lewym górnym rogu dokumentu, a jego tło będzie koloru różowego.
Krok 3
Nadaj blokowi względne pozycjonowanie. Jeśli używasz nie bezwzględnego, ale względnego pozycjonowania w opisie CSS, możesz umieszczać bloki nie ze sztywnym przyciąganiem do siatki współrzędnych, ale względem innych już istniejących bloków. Aby to zrobić, zmień pozycję kodu: absolute; góra: 0px; lewo: 0px według pozycji: względne; góra: 200px; po lewej: 100px.
Krok 4
Zaokrąglij blok. W CSS odpowiada za to instrukcja border-radius. Dodaj następujący kod do arkusza stylów: border-radius: 8px. Blok będzie miał teraz zaokrąglone rogi. Jeśli chcesz tylko zaokrąglić niektóre rogi, opisz promień osobno dla każdego z nich: border-radius: 8px 8px 0px 0px.
Krok 5
Daj blokowi uderzenie. Aby wyróżnić kontur bloku cienką linią, dodaj następujący kod do jego opisu CSS: border-top: 1px kreskowana czarna. Ta instrukcja oznacza, że obramowanie bloku będzie czarne i będzie miało grubość jednego piksela. W takim przypadku sama linia konturu zostanie wyświetlona jako linia przerywana (przerywana - linia przerywana, kropkowana - kropki, ciągła - linia ciągła).
Krok 6
Ustaw pozostałe właściwości bloku. Określ w opisie CSS jaki krój powinien być użyty do tekstu wewnątrz bloku, jaki powinien być rozmiar czcionki, wyrównanie i wcięcie od krawędzi bloku. Te właściwości są opisane w definicjach font-family, font-size, text-align i padding.
Krok 7
Możesz użyć właściwości float, aby dostosować przepływ jednego bloku nad drugim. Jeśli ustawisz go na „w lewo”, reszta elementów opłynie blok po lewej, a „w prawo” - po prawej. Jeśli ustawisz wartość zmiennoprzecinkową na „brak”, wyrównanie bloku nie zostanie ustawione. Właściwość clear w CSS zapobiega przepływowi bloku w prawo, w lewo lub w obie strony i zastępuje instrukcję float.
