tytuł - Kurs HTML i CSS
Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}...Opera 15, Chrome) selektor { border-image-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością wymiaru obrazka...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...Opera 15, Chrome) selektor { border-image: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości obramowani obrazkowego: źródło, obcięcie, szerokość, nawis i powtarzanie. Polecenie pozwala w sposób skrócony wypełnić wszystkie atrybuty obramowania obrazkowego. Ważne jest przy tym zachowanie właściwej kolejności oraz odpowiednich znaków...
- Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}
...linear-gradient(kierunek, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Kierunek określa sposób rozłożenia barw. Można go podać na dwa sposoby: słowa kluczowe to top - przejście kolorów nastąpi pionowo z dołu do góry (odpowiednik 0deg) to right top - ukośnie z lewego-dolnego do prawego-górnego narożnika to right - poziomo z lewej do prawej strony...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...rozmiar at pozycja, kolor1 odległość1, kolor2 odległość2...) } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Jako kształ należy wpisać: circle - okrąg (domyślnie gdy jako rozmiar podano pojedynczy promień, określony w jednostkach długości, a nie w procentach) ellipse - elipsa Rozmiar można ustalić na trzy sposoby: słowa kluczowe: closest-side - gradient będzie się rozchodził do najbliższej...
Odsyłacze HTML / ĆwiczeniaOtwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Utwórz spis treści dodając etykiety do tytułów poszczególnych sekcji tematycznych na stronie głównej, a następnie umieszczając na początku wykaz z listą odsyłaczy do tych etykiet. Przygotuj po dwie wersje ilustracji z Twojej strony. Pierwsza powinna mieć rozmiary dokładnie takie jak widoczne bezpośrednio na stronie. Natomiast druga wersja może być zdjęciem w wysokiej rozdzielczości. W tym celu...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W...
- Czcionki CSS / Odległość między znakami czcionki {font-kerning}
...Opera 20, Chrome 33) selektor { font-kerning: tryb } 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 "tryb" 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...
- Czcionki CSS / Wariant wielkości liter czcionki {font-variant-caps}
...Chrome 52) selektor { font-variant-caps: wariant } 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 "wariant" należy wpisać: normal - czcionka normalna (podstawowa) small-caps - kapitaliki, czyli tekst napisany wielkimi literami, lecz czcionką o wysokości zbliżonej np. do małej litery "x" all-small-caps - kapitaliki zastosowane do całego tekstu bez względu, czy...
- Czcionki CSS / Wariant połączenia znaków czcionki {font-variant-ligatures}
...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 np. nieco przyspieszyć wyświetlanie tekstu...
- Czcionki CSS / Wariant liczb czcionki {font-variant-numeric}
...Chrome 25) selektor { font-variant-numeric: 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 formatowania liczb w tekście. Możliwe są tutaj dwa sposoby: normal - domyślne ustawienia Dowolna liczba poniższych wartości rozdzielonych spacjami: ordinal - liczba porządkowa, np. w języku angielskim wyraz first (co oznacza...