akapit - Kurs HTML i CSS
Tło CSS / Gradient liniowy {background: linear-gradient repeating-linear-gradient}...{ background: 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...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...radial-gradient(kształt 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...
- Marginesy CSS / Atrybuty mieszane marginesu wewnętrznego {padding}
selektor { padding: wartości atrybutów } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast zasady wpisywania "wartości atrybutów" są takie same jak przy atrybutach mieszanych zwykłego marginesu. Pozwala wprowadzić jednocześnie kilka wartości marginesów wewnętrznych. Możliwe jest przy tym podanie: jednej wartości - dla wszystkich marginesów wewnętrznych naraz dwóch wartości - osobno kolejno dla...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...Internet Explorer 8, Firefox 29, Opera, Chrome) selektor { box-sizing: rodzaj } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rodzaj" należy podać: content-box Wymiarowanie zgodne z modelem pudełkowym border-box Wymiarowanie zgodne z trybem Quirks Bardzo stare przeglądarki (w zamierzchłych czasach MSIE 5) nie potrafiły wymiarować bloków zgodnie ze specyfikacją CSS. Sytuacja ta już dawno uległa...
- Obramowanie CSS / Styl obramowania {border-...-style}
...styl } Styl prawego obramowania: selektor { border-right-style: styl } We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "styl" należy wpisać: none - brak obramowania Przykład border-top-style: none hidden - ukryte obramowanie Przykład border-top-style: hidden dashed - linia kreskowa Przykład border-top-style: dashed dotted - linia kropkowa Przykład border-top-style: dotted solid - linia...
- Obramowanie CSS / Atrybuty mieszane stylu obramowania {border-style}
selektor { border-style: wartości atrybutów } Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości stylu obramowania (rozdzielone spacjami), analogicznie jak w przypadku stylu pojedynczego obramowania. Polecenie pozwala ustalić kilka wartości stylu obramowania jednocześnie. Możliwe jest przy tym podanie: jednej wartości - dla wszystkich krawędzi naraz dwóch wartości - osobno dla...
- Obramowanie CSS / Szerokość obramowania {border-...-width}
...Szerokość prawego obramowania: selektor { border-right-width: szerokość } We wszystkich przypadkach Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "szerokość" należy podać: thin - cienkie obramowanie medium - średnie obramowanie thick - grube obramowanie lub konkretną wartość w jednostkach długości Pozwala zdefiniować szerokość dowolnego brzegu obramowania. Przy tworzeniu obramowania możesz również skorzystać ze...
- Obramowanie CSS / Styl obrysu {outline-style}
selektor { outline-style: styl } Selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "styl" należy wpisać: none - brak obrysu. Przykład outline-style: none dashed - linia kreskowa. Przykład outline-style: dashed dotted - linia kropkowa. Przykład outline-style: dotted solid - linia ciągła. Przykład outline-style: solid double - linia ciągła podwójna. Przykład outline-style: double groove - "rowek". Przykład...
- Obramowanie CSS / Odstęp obrysu {outline-offset}
(CSS 3 - interpretuje Firefox, Opera, Chrome) selektor { outline-offset: rozmiar } Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać odstęp wyrażony w jednostkach długości. Standardowo obrys jest rysowany bezpośrednio na krawędzi elementu. Możemy go jednak nieco od niego odsunąć, jeśli uważamy, że dzięki temu będzie on wyglądał bardziej estytycznie. Przy tworzeniu obrysu możesz również skorzystać ze...
- Obramowanie CSS / Zaokrąglenie obramowania {border-...-radius}
...narożnika: selektor { border-bottom-left-radius: zaokrąglenie } We wszystkich przypadkach selektorem może być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast "zaokrąglenie" określa promień wyrażony w jednostkach długości albo w procentach (względem obszaru obramowania - zobacz: Model pudełkowy). Możliwe jest tutaj podanie: jednej wartości - zaokrąglenie symetryczne dwóch wartości - pierwsza określa poziomy promień ćwiartki elipsy...