przykład - Kurs HTML i CSS
Czcionki CSS / Wariant połączenia znaków czcionki {font-variant-ligatures}(CSS 3 - interpretuje Firefox 34, Opera 21, Chrome 34) selektor { font-variant-ligatures: warianty } 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 "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...
- Czcionki CSS / Wariant pozycji czcionki {font-variant-position}
(CSS 3 - interpretuje Firefox 34) selektor { font-variant-position: wariant } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, ale zaleca się stosować tutaj sub - indeks dolny albo sup - indeks górny [zobacz: Wstawianie stylów]. Natomiast jako "wariant" należy wpisać: normal - czcionka normalna (podstawowa) sub - indeks dolny super - indeks górny W języku HTML istnieją znaczniki <sub>...</sub> i <sup>...</sup> służące do tworzenia indeksów dolnych i górnych w...
- Kursory CSS / Kolor karetki tekstowej {caret-color}
(CSS 3 - interpretuje Firefox 53, Opera 44, Chrome 57) selektor { caret-color: kolor } Selektorem może być element interaktywny, w którym użytkownik może wpisywać tekst, np. textarea, input[type="text"]. Natomiast jako "kolor" należy podać definicję koloru albo wartość auto (zresetowanie karetki testowej do domyślnego koloru). W przypadku interaktywnych elementów strony, w których można wpisywać tekst, pojawia się tzw. karetka. Wskazuje ona miejsce, w którym pojawią nowe znaki tekstu, kiedy...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
(CSS 3 - interpretuje Internet Explorer * , Firefox, Opera, Chrome) selektor { text-overflow: sposób } Selektorem może być znacznik wyświetlany w bloku [zobacz: Wstawianie stylów]. Jako "sposób" należy podać: clip - niemieszczący się tekst i elementy inline zostaną przycięte (domyślnie) ellipsis - na końcu przyciętych linijek zostanie wstawiony wielokropek, tzn. pojedynczy znak: "…" albo w ostateczności trzy znaki kropki: "..." Normalnie w języku CSS nawet jeśli ustalimy szerokość...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
selektor { cecha: inherit } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Dziedziczenie stylów jest domyślnym zachowaniem w języku CSS. To znaczy nie trzeba nic robić, żeby z niego skorzystać - zostanie ono zastosowane automatycznie. Dopiero kiedy wybranemu elementowi przypiszemy jakiś styl, nie odziedziczy on go po swoich przodkach (czyli znacznikach, wewnątrz których się znajduje). A co...
- Dziedziczenie stylów CSS / Odwołanie wartości {...: unset}
(CSS 3 - interpretuje Firefox 27, Opera 28, Chrome 41) selektor { cecha: unset } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Nie wszystkie cechy CSS podlegają dziedziczeniu. Wydaje się logiczne, że jeśli ustawimy określony kolor tekstu, to chcemy, aby również każdy z elementów podrzędnych miał właśnie taki kolor. Ale gdybyśmy w ten sposób postąpili np. z obramowaniem, efekt byłby dziwaczny...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
...zmienione. Ale tak naprawdę zwykle w ogóle nie zaleca się ich używać w języku CSS, ponieważ mają one swoje odpowiedniki w języku HTML. Jednym z przykładowych zastosowań tej własności może być tworzenie widżetów, które często są dostarczane przez podmioty zewnętrzne do wstawienia na swojej stronie. Ponieważ elementy takie są osadzane w wielu różnych serwisach, nie ma możliwości efektywnie dopasować ich wyglądu do każdej strony. Dlatego ich twórcy najczęściej projektują jakiś jeden...
- Dziedziczenie stylów CSS / Przywrócenie wartości pierwotnej {...: revert}
(CSS 3 - interpretuje Firefox 67, Opera 73, Chrome 84) selektor { cecha: revert } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas...
Nagłówek i treść HTML / Strona kanoniczna <link "canonical">...czyli w dowolnym miejscu wewnątrz elementu <head>...</head> - następujący znacznik: <link rel="canonical" href="adres strony podstawowej">. Na przykład jeśli w naszej witrynie zarówno pod adresem https://www.example.com/ jak i https://www.example.com/index.html znajduje się identyczna treść, w tym drugim dokumencie możemy dodać znacznik: <link rel="canonical" href="https://www.example.com/">.
- Odsyłacze HTML / Blokada indeksowania odsyłaczy <a "nofollow, ugc, sponsored">
...robimy tego jednak poprzez dodanie kolejnego atrybutu rel="...", ale dopisujemy do już istniejącego kolejne wartości rozdzielając je spacjami. Na przykład: <a href="http://adres strony" rel="ugc nofollow">...</a> Linki sponsorowane <a "sponsored"> <a href="http://adres strony" rel="sponsored">...</a> <a href="https://adres strony" rel="sponsored">...</a> Wyszukiwarka Google w dużej mierze uzależnia pozycję strony w wynikach od liczby odnośników, które do niej prowadzą z innych serwisów...