wstawianie tekstu - Kurs HTML i CSS
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...
- Tło CSS / Tło obrazkowe {background-image}
...tło przyjmie podany kolor. Ponadto jeżeli obrazek posiada przezroczystość (np. format *.gif), zostanie ona zastąpiona podanym kolorem. Jeśli kolor tekstu elementu z tłem obrazkowym jest zbliżony do domyślnego koloru tła strony, wskazane jest podanie dodatkowo takiego koloru tła dla tego elementu, aby tekst był na nim czytelny. Jeżeli tego nie zrobimy, a obrazek nie zostanie wyświetlony, może wystąpić sytuacja typu: "biały tekst na białym tle". Może się to zdarzyć np. gdy obrazek w tle...
- 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...
- 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...
- Selektory pseudoelementów CSS / Przed... :before
...rozpoczynający się wyrazem "POCZĄTEK", pomimo że nie został on umieszczony w treści akapitu. 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
...To jest akapit, kończący się wyrazem "KONIEC", pomimo że nie został on umieszczony w treści akapitu. 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...
- Czcionki CSS / Wariant połączenia znaków czcionki {font-variant-ligatures}
...Wstawianie stylów]. Natomiast jako "warianty" należy podać konkretne ustawienia ligatur, czyli połączeń pomiędzy niektórymi sąsiadującymi literami tekstu. Możliwe są tutaj trzy sposoby: normal - domyślne ustawienia none - zablokowanie ligatur, dzięki czemu możemy np. nieco przyspieszyć wyświetlanie tekstu na ekranie Dowolna liczba poniższych wartości rozdzielonych spacjami: common-ligatures albo no-common-ligatures - włącza lub wyłącza standardowe ligatury discretionary-ligatures albo...
- 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.
- 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...