tekst - Kurs HTML i CSS
Selektory elementów CSS / Grupowanie selektorów...w arkuszu stylów strony została umieszczona następująca reguła: b, i { color: red } to po wpisaniu: <b>pogrubienie</b> <i>pochylenie</i> otrzymamy tekst, napisany w całości czcionką koloru czerwonego: pogrubienie pochylenie Przykład ten działa tak samo jak: b { color: red } i { color: red } jednak jak widać, dzięki użyciu znaku przecinka, oszczędzamy sobie pisania. Dodatkowo jeśli kiedyś musielibyśmy zmienić ustalony wcześniej dla tych selektorów kolor tekstu, będzie wystarczyło zrobić...
- Selektory pseudoelementów CSS / Co to są pseudoelementy CSS?
...generować pewną zawartość w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym. Chodzi tutaj o specjalny tekst poprzedzający lub następujący np. po akapicie.
- Selektory pseudoelementów CSS / Przed... :before
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance. Przykład :before Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:before { content...
- Selektory specjalne CSS / Klasy selektorów <... class>
...p.przyklad_klasa { color: red } to jeśli teraz w dowolnym miejscu wpiszemy: <p class="przyklad_klasa">To jest akapit.</p> na ekranie zobaczymy tekst napisany czcionką koloru czerwonego: To jest akapit. Dla porównania, to też jest akapit, ale bez podania klasy i dlatego nie jest czerwony. W przypadku stosowanie klas, często podczas ich definiowania, nie wiemy jeszcze, w stosunku do jakich znaczników będziemy chcieli je później użyć. Wtedy przydatny okazuje się selektor uniwersalny...
- Selektory pseudoelementów CSS / Po... :after
...znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne [zobacz: Wstawianie stylów]. Natomiast jako wyraz "treść" można wpisać dowolny tekst. Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor. UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance. Przykład :after Jeżeli w arkuszu stylów została umieszczona następująca reguła: p:after { content...
- Selektory pseudoklas CSS / Zogniskowanie :focus
...white; background-color: black } Kliknij tutaj lub przenieś kursor za pomocą klawisza tabulatora, a tło w tym polu stanie się czarne natomiast tekst biały.
- Czcionki CSS / Styl czcionki {font-style}
selektor { font-style: styl } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio) Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna...
- Tekst CSS / Wysokość linii tekstu {line-height}
selektor { line-height: wysokość } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "wysokość" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku - tzw. interlinia. Dzięki temu linijki mogą być...
- Tekst CSS / Odstęp między wyrazami tekstu {word-spacing}
selektor { word-spacing: odstęp } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
...należy podać konkretną wartość w jednostkach długości. Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne 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...