style - Kurs HTML i CSS
Tekst CSS / Wcięcie w tekście {text-indent}...zrobić wcięcie pierwszego wiersza akapitu, możesz użyć właściwości text-indent i ustawić wartość np. w pikselach albo w procentach. Na przykład: <p style="text-indent: 20px">...</p> wcięcie o 20 pikseli. Natomiast jeśli chcesz wciąć wszystkie wiersze tekstu w całym akapicie, zastosuj właściwość margin-left.
- Tekst CSS / Wysokość linii tekstu {line-height}
...Jak zmienić interlinię w CSS? Aby zmienić interlinię w CSS, użyj właściwości line-height i ustaw wartość zgodnie z potrzebami. Przykładowo: <p style="line-height: 1.5>...</p> dla odstępu 1.5 razy większego niż wysokość czcionki. Możesz również użyć jednostek (np. piksele) lub procentów. Jaki powinien być odstęp między wierszami? Odpowiedni odstęp między wierszami zależy od wielkości czcionki, stylu tekstu i preferencji projektowych. Zazwyczaj wartość odstępu mieści się w zakresie...
- Tekst CSS / Odstęp między literami tekstu {letter-spacing}
...odstępy między poszczególnymi literami w tekście. Może być używana do tworzenia efektu, gdzie litery są od siebie nieco rozsunięte. Przykład: <p style="letter-spacing: 1px;">Lorem ipsum...</p>. Jak rozstrzelić tekst? Aby rozstrzelić tekst w CSS, użyj właściwości letter-spacing i ustaw wartość dodatnią, np. "letter-spacing: 1px" dla odstępów między literami. Im większa wartość, tym większy efekt rozstrzelenia tekstu. To spowoduje, że litery będą od siebie bardziej oddzielone, tworząc...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...czerwonego. Ale jeśli chcemy zrezygnować z tła dla wybranych elementów, wystarczy wpisać background-color: transparent w definicji inline: <h4 style="background-color: transparent">To również jest tytuł rzędu czwartego, lecz mimo to nie ma już tła</h4>
- Tło CSS / Atrybuty mieszane tła {background}
...wartość background-color (red) do zbiorczej deklaracji background: p { background: red url(tlo.gif) } Przykład {background} Po wpisaniu: <p style="color: red; background: url(obrazek.jpg) no-repeat left"> To jest akapit z obrazkiem w tle. obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest powtarzany (jest tylko jeden egzemplarz) oraz jest ustawiony po lewej stronie. </p> otrzymamy na ekranie: To jest akapit z obrazkiem w tle. Obrazek ma podaną w nawiasie ścieżkę dostępu, nie jest...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...to szczególnie użyteczne, gdy chcesz wyśrodkować elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto; background-color: lightgray">Treść</div> wyśrodkuje poziomo element <div> o szerokości 300 pikseli w jego rodzicu.
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...zwykły margines (margin). Aby zrozumieć, jaka jest różnica pomiędzy zwykłym a wewnętrznym marginesem, spójrz na poniższy przykład: Po wpisaniu: <p style="background-color: silver; margin: 1cm; padding: 5mm">...</p> Otrzymamy: To jest akapit z określonym marginesem zewnętrznym - 1cm (to ta odległość między brzegami strony (także sąsiadującymi elementami) a zewnętrznymi krawędziami szarego prostokąta). Natomiast margines wewnętrzny wynosi 5mm (to ta odległość między krawędziami szarego...
- Wykazy CSS / Odstęp wyróżnika wykazu {marker-offset}
...oczywisty, sposób zastąpienia nieobsługiwanej własności marker-offset przez zespół reguł CSS interpretowanych praktycznie wszędzie: ul, li { list-style-type: none; display: block; margin: 0; padding: 0; } ul li { background: url(marker.gif) no-repeat left top; padding-left: 20px; } Pierwsza z reguł stylów powyżej usuwa domyślne formatowanie wykazu oraz jego punktów. Trzeba tutaj nadmienić, że z uwagi na różnice w interpretacji nie wszystkie z wymienionych poleceń formatujących w tej...
- Selektory pseudoelementów CSS / Cudzysłowy {quotes}
Spis treści {quotes} Cudzysłowy {quotes} Znaki cudzysłowów {content: open-quote close-quote} Wyłączenie znaków cudzysłowu {content: no-open-quote no-close-quote} Cudzysłowy {quotes} (interpretuje Internet Explorer 8.0, Firefox, Opera) W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami...
- Rozmiary CSS / Szerokość {width}
...lub elementu. Jak ustawić szerokość w CSS? Aby ustawić szerokość w CSS, użyj właściwości width i przypisz jej wartość, na przykład: <div style="width: 300px">Ten DIV ma szerokość 300 pikseli.</div>. Możesz również stosować jednostki innych niż piksele, takie jak procenty lub em.