marginesy - Kurs HTML i CSS

Szablon strony na DIV-ach / Płynny szablon
...fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon. Ustalamy stałą szerokość kolumny menu nawigacyjnego, aby nie rozszerzała się przy zmianie rozmiarów okna przeglądarki ani rozdzielczości ekranu. Menu nawigacyjne zwykle zawiera elementy o ustalonej szerokości, dlatego jego rozszerzanie mogłoby być niewskazane. Ustalenie oblewania...
Szablon strony na DIV-ach / Responsywny szablon
...w zbyt długich linijkach. W związku z tym użyliśmy stałego szablonu. Jeśli użytkownik będzie dysponował np. ekranem full HD, zobaczy dodatkowe marginesy po lewej i prawej stronie ekranu. Oprócz tego poszerzyliśmy kolumnę menu do 300px, ponieważ teraz mamy wystarczająco dużo miejsca, aby to zrobić. Zwróć uwagę, że definiując ten punkt przeskoku nie musieliśmy ustawiać wszystkich deklaracji od podstaw, ponieważ mogliśmy skorzystać tutaj z kaskadowości stylów. Trzeba było tylko wyzerować...
Oprawa graficzna / Zamiennik obrazkowy
...na zawartość którego nie można wpływać za pomocą CSS - obrazki. Można co prawda zmieniać rozmiary grafiki, dodawać obramowanie, ustalać pozycję i marginesy, ale nie da się wyświetlić innego zdjęcia bez modyfikacji kodu HTML. Jednak czy to stanowi jakiś problem? W pewnych sytuacjach tak: Przygotowując kilka alternatywnych arkuszy CSS, możesz udostępnić użytkownikom możliwość wyboru skórki, która najbardziej im odpowiada. Problem w tym, że w ten sposób nie uda Ci się podmienić statycznie...
Marginesy CSS / Górny margines wewnętrzny {padding-top}
...np. w połączeniu z tłem pod tekstem, obramowaniem, czy też tabelami. W przeglądarce Opera każda strona posiada domyślnie ustalone niezerowe marginesy wewnętrzne. Jeżeli chcemy je zlikwidować, należy do selektora BODY przypisać następujący styl: body { padding: 0 } Przykład {padding-top} Tekst w tej komórce tabeli jest oddalony od górnego brzegu obramowania o 1cm (padding-top: 1cm) Rzeczywiście w wielu przypadkach, praktycznie nie można ich odróżnić, np.: Dla tego akapitu...
Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
...brzegu obramowania o 2cm, od lewego i prawego - o 1cm, a od dolnego - o 3cm (padding: 2cm 1cm 3cm) Tekst w tej komórce tabeli ma następujące marginesy wewnętrzne: górny 2cm, prawy 5mm, dolny 3cm, lewy 1cm (padding: 2cm 5mm 3cm 1cm) Pytania i odpowiedzi {padding} Co to jest "padding"? padding to właściwość w CSS, która określa odstęp pomiędzy zawartością elementu a jego obramowaniem. Oznacza to przestrzeń wewnątrz elementu, pomiędzy treścią a jego obramowaniem. Na przykład...
Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...Do czego służy "box-sizing"? Właściwość CSS box-sizing pozwala kontrolować sposób obliczania całkowitego rozmiaru elementu, uwzględniając marginesy, padding i obramowanie. Dzięki temu można precyzyjnie zarządzać wymiarami elementów w modelu pudełkowym. Domyślnie wartość box-sizing to content-box, gdzie szerokość i wysokość elementu obejmują tylko treść. Co to jest "box-sizing: border-box"? "box-sizing: border-box" to wartość właściwości CSS box-sizing, która definiuje, że...
CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
Praktycznym zastosowaniem klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
Jeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...

« 1 2 3