block - Kurs HTML i CSS
Pozycjonowanie CSS / Wyświetlanie {display}selektor { display: sposób } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast jako "sposób" należy podać: block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) inline - element będzie wyświetlony w linii (sąsiadująco z innymi) list-item - element wykazu: <li>...</li> none - element nie będzie wyświetlany inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror) run-in - jeśli po...
- Menu w CSS / Poziome menu
...w linii. Oprócz tego, tak jak poprzednio, usuniemy zbędne domyślne formatowanie, które w tym przypadku tylko by przeszkadzało: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { display: inline; white-space: nowrap; } Efekt: Czcionki Tekst Tło Marginesy Obramowanie Dodatkowo blokujemy zawijanie tekstu (white-space: nowrap), aby w przypadku gdy linki nie zmieszczą się w jednej linii, przełamanie wiersza nastąpiło pomiędzy nimi, a nie wewnątrz nich...
- Komendy CSS3 / Przyciąganie przewijania CSS
Źródło: CSS Scroll Snap Module Level 1 Spis treści scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start...
- Menu w CSS / Pionowe menu
...co musimy zrobić, to usunąć wyróżniki punktów wykazu (tzw. markery) oraz zniwelować niepotrzebny margines z lewej strony: ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } W efekcie uzyskamy: Czcionki Tekst Tło Marginesy Obramowanie W niektórych przeglądarkach nie jest konieczne wstawienie wszystkich powyższych deklaracji, jednak tylko taki zestaw właściwie gwarantuje uzyskanie zamierzonego efektu w każdych warunkach. Teraz mamy już przygotowany teren do...
- Rozmiary CSS / Szerokość i marginesy automatyczne
...oblewaniem (float) zastępowane Elementy pozycjonowane absolutnie, nie-zastępowane Elementy pozycjonowane absolutnie, zastępowane Elementy inline-block, nie-zastępowane Elementy inline-block, zastępowane Wstęp Podanie wartości auto dla własności określającej szerokość elementu (width) lub jego marginesy (margin-left, margin-right) pozwala dopasować wybrany tą metodą wymiar w taki sposób, aby element poprawnie wyświetlił się w każdych warunkach. Poniżej znajdziesz opis wyznaczania...
- Menu w CSS / Menu z nagłówkami
...może zawierać więcej niż jeden nagłówek. Aby mieć możliwość swobodnego stylizowania, usuwamy domyślne formatowanie listy: dl, dt, dd { display: block; margin: 0; padding: 0; } W efekcie uzyskamy: CSS Czcionki Tekst Tło Marginesy Obramowanie CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; } dt { background-color: #ccc; color: #000; padding: 7px; font-weight: bold...
- Selektory pseudoklas CSS / Atrybut języka :lang
...paragraph with attribute <b>lang="en"</b>.</p> <p lang="en-US">2. This is paragraph with attribute <b>lang="en-US"</b>.</p> <div lang="en">This is block with attribute <b>lang="en"</b>... <p>3. This is paragraph inside block, but without attribute lang.</p> <p lang="pl">4. To jest akapit wewnątrz bloku, który posiada atrybut <b>lang="pl"</b> i dlatego jego wygląd nie zmieni się, pomimo że blok nadrzędny posiada atrybut lang="en".</p> ...and this is end of block.</div> Na ekranie...
- Oprawa graficzna / "Duszki" CSS
...<li><a href="marginesy.html">Marginesy</a></li> <li><a href="obramowanie.html">Obramowanie</a></li> </ul> ul, ul li { display: block; list-style: none; margin: 0; padding: 0; line-height: normal; font-size: 12px; } ul li { width: 200px; border-width: 1px; border-style: solid; border-color: #dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb...
Menu drzewiaste / Skrypt menu drzewiastego...Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed...
- Rozmiary CSS / Blok obejmujący CSS
Pozycja i rozmiar pudełka elementu są czasami obliczane względem pewnego prostokąta zwanego blokiem obejmującym (ang. "containing block"): Blok obejmujący w którym znajduje się element podstawowy (ang. "root") jest wyznaczany przez przeglądarkę (np. okno). Ten blok nazywany jest początkowym blokiem obejmującym. Dla innych elementów, które mają ustalone pozycjonowanie relatywne lub statyczne blok obejmujący jest tworzony przez najbliższy blok, komórkę tabeli lub inline-block będący przodkiem...