wstawianie tekstu - Kurs HTML i CSS
Pozycjonowanie CSS / Pozycja relatywna {position: relative}...oczywiście łączyć parametry, np. left: 1cm; top: -10px. Należy jednak pamiętać o tym, że parametr left ma pierwszeństwo przed right (jeśli kierunek tekstu jest "ltr" - od lewej do prawej), natomiast top ma pierwszeństwo przed bottom. To znaczy jeśli np. podamy: left: 1cm; top: 2cm; right: 3cm; bottom: 4cm, to wartości right oraz bottom zostaną zignorowane. Polecenie pozycjonowania relatywnego (względnego) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia...
- Czcionki CSS / Odległość między znakami czcionki {font-kerning}
...należy wpisać: auto - przeglądarka sama zdecyduje, jaki tryb zastosować (domyślnie) - np. aby poprawić czytelność, może wyłączyć kerning dla małego tekstu normal - wymuszenie kerningu none - zablokowanie kerningu Aby tekst wyglądał estetycznie, odległości między wszystkimi sąsiadującymi znakami powinny być podobne. Kształt niektórych par liter powoduje jednak, że kiedy występują obok siebie, stwarzają wrażenie, jakby odstęp pomiędzy nimi był większy niż w rzeczywistości. Typowym...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
...i <sup>...</sup> służące do tworzenia indeksów dolnych i górnych w tekście. Co więcej w języku CSS mamy dodatkowo możliwość ustalania pozycji tekstu w pionie formatując nawet zwykły tekst w taki sposób, aby wyglądał jak indeks dolny lub górny: "vertical-align: sub" i "vertical-align: super". Jest jednak pewna wada obu tych metod. Aby indeks dolny czy górny zmieścił się w tekście i nie zachodził na sąsiadujące wiersze, wysokość linii musi zostać nieco powiększona. Powoduje to...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...przeglądarek. Jeśli zaznaczymy myszką tak skrócony tekst, a następnie skopiujemy go do schowka systemowego, to znajdzie się tam pełna postać tekstu - ze wszystkimi wyrazami, ale bez wstawionych automatycznie wielokropków. Trzeba jednak również pamiętać o kilku ograniczeniach. Wielokropek nie zostanie automatycznie wstawiony w następujących przypadkach: kiedy wewnątrz elementu znajdują się inne elementy blokowe jeśli ustalimy wysokość elementu, a tekstu nawet po zawinięciu będzie za...
- Selektory pseudoelementów CSS / Przed... :before
...powyższy akapit będzie się rozpoczynał normalnie ("To jest akapit...") - nie zobaczysz efektu. Obrazek przed... :before {content: url} Zamiast tekstu generowanego przed wybranym elementem, w analogiczny sposób można tam dodać grafikę: selektor:before { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :before {content: url} To jest akapit, rozpoczynający się obrazkiem, pomimo że nie został on umieszczony w treści akapitu...
- Selektory pseudoelementów CSS / Po... :after
...powyższy akapit będzie się kończył normalnie ("...w treści akapitu.") - nie zobaczysz efektu. Obrazek po... :after {content: url} Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę: selektor:after { content: url(ścieżka dostępu do obrazka) } Ścieżkę dostępu należy konstruować względem arkusza CSS! Przykład :after {content: url} To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu. Można nawet...
- Czcionki CSS / Styl czcionki {font-style}
...styl italic styl oblique Pytania i odpowiedzi {font-style} Czym jest styl czcionki? W języku CSS styl czcionki określa wyłącznie pochylenie tekstu za pomocą właściwości font-style. Jak zmienić styl czcionki w CSS? Aby zmienić styl czcionki w CSS, można użyć właściwości font-style i przypisać jej wartość italic dla kursywy lub normal dla standardowego stylu. Jak zrobić kursywę w CSS? Aby zastosować kursywę w CSS, użyj właściwości font-style i ustaw wartość italic dla...
- Tekst CSS / Odstęp między literami tekstu {letter-spacing}
...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 efekt rozstrzelonego tekstu.
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
Spis treści {border} Atrybuty mieszane obramowania {border} Podkreślenie tekstu Zagnieżdżanie obramowania Atrybuty mieszane obramowania {border} Atrybuty mieszane górnego obramowania: selektor { border-top: wartości atrybutów } Atrybuty mieszane dolnego obramowania: selektor { border-bottom: wartości atrybutów } Atrybuty mieszane lewego obramowania: selektor { border-left: wartości atrybutów } Atrybuty mieszane prawego obramowania: selektor { border-right: wartości atrybutów }...
- Wykazy CSS / Atrybuty mieszane wykazu {list-style}
...atrybutów" należy wpisać kolejne wartości (oddzielone spacjami), jakie mają przyjąć poszczególne atrybuty wykazu. Są to: typ stylu zawijanie tekstu wyróżnik obrazkowy Tak jak przy wielu innych elementach, także i tutaj możliwe jest użycie atrybutów mieszanych. Jak zawsze zaoszczędzają one nam pisania. Zamiast wpisywać: list-style-type: disc; list-style-position: inside, wystarczy podać: list-style: disc inside. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych...