www.math.uni.lodz.pl/ radmat
Elementy inline <strong>... </strong>
Elementy inline <strong>... </strong> <em>... </em>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub> <sup>... </sup>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub> <sup>... </sup> <del>... </del>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub> <sup>... </sup> <del>... </del> <cite>... </cite>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub> <sup>... </sup> <del>... </del> <cite>... </cite> <dfn>... </dfn>
Elementy inline <strong>... </strong> <em>... </em> <sub>... </sub> <sup>... </sup> <del>... </del> <cite>... </cite> <dfn>... </dfn> <code>... </code>
Wielkości Jednostka Wielkość % procent in cal cm centymetr mm milimetr em 1em odpowiada aktualnej wielkości czcionki ex wysokość litery X pt punkt (1pt=1/72 cala) pc 1pc=12pt px piksel
Walidacja strony https://validator.w3.org/
CSS (Cascading Style Sheets) - kaskadowe arkusze stylów Ogólna postać: selektor {cecha: wartość;},
CSS (Cascading Style Sheets) - kaskadowe arkusze stylów Ogólna postać: selektor {cecha: wartość;}, np. p{color: green;}
CSS - czcionka color: green, red, blue,...;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif; font-weight: bold, bolder, lighter;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif; font-weight: bold, bolder, lighter; font-size: 12pt, 200%, larger;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif; font-weight: bold, bolder, lighter; font-size: 12pt, 200%, larger; font-style: italic, oblique;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif; font-weight: bold, bolder, lighter; font-size: 12pt, 200%, larger; font-style: italic, oblique; text-align: left, right, center, justify;
CSS - czcionka color: green, red, blue,...; font-family: Times New Roman, Georgia, Serif; font-weight: bold, bolder, lighter; font-size: 12pt, 200%, larger; font-style: italic, oblique; text-align: left, right, center, justify; text-decoration: underline, overline;
CSS - tło background-color: red, green, blue,...;
CSS - tło background-color: red, green, blue,...; background-image: url( obrazek.jpg );
CSS - tło background-color: red, green, blue,...; background-image: url( obrazek.jpg ); background-repeat: repeat-x, repeat-y, no-repeat;
CSS - tło background-color: red, green, blue,...; background-image: url( obrazek.jpg ); background-repeat: repeat-x, repeat-y, no-repeat; background-position: center, left, right, top, bottom;
CSS - tło background-color: red, green, blue,...; background-image: url( obrazek.jpg ); background-repeat: repeat-x, repeat-y, no-repeat; background-position: center, left, right, top, bottom; background-size: 640px 100px;
CSS - obramowania border-width: 5px;
CSS - obramowania border-width: 5px; border-style: solid;
CSS - obramowania border-width: 5px; border-style: solid; border-color: blue;
CSS - obramowania border-width: 5px; border-style: solid; border-color: blue; border: 5px solid blue;
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid double
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid double groove
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid double groove ridge
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid double groove ridge inset
Styl obramowania border-top-style, border-right-style, border-bottom-style, border-left-style. dashed dotted solid double groove ridge inset outset
CSS - marginesy margin-bottom: 10px;
CSS - marginesy margin-bottom: 10px; margin-top: 20px;
CSS - marginesy margin-bottom: 10px; margin-top: 20px; margin-left: 50px;
CSS - marginesy margin-bottom: 10px; margin-top: 20px; margin-left: 50px; margin-right: 50px;
CSS - marginesy margin-bottom: 10px; margin-top: 20px; margin-left: 50px; margin-right: 50px; Uwaga! Jeśli określamy wszystkie wartości, to możemy wykorzystać następujący zapis (np. dla znacznika p): p{margin: wielkość góra wielkość prawo wielkość dół wielkość lewo;}
CSS - marginesy margin-bottom: 10px; margin-top: 20px; margin-left: 50px; margin-right: 50px; Uwaga! Jeśli określamy wszystkie wartości, to możemy wykorzystać następujący zapis (np. dla znacznika p): p{margin: wielkość góra wielkość prawo wielkość dół wielkość lewo;} p{20px 50px 10px 50px;}
CSS - odległości czcionki od innych elementów padding-bottom: 10px;
CSS - odległości czcionki od innych elementów padding-bottom: 10px; padding-top: 20px;
CSS - odległości czcionki od innych elementów padding-bottom: 10px; padding-top: 20px; padding-left: 50px;
CSS - odległości czcionki od innych elementów padding-bottom: 10px; padding-top: 20px; padding-left: 50px; padding-right: 50px;
CSS - lista nieuporządkowana list-style-type - styl numerowania listy
CSS - lista nieuporządkowana list-style-type - styl numerowania listy square - kwadrat
CSS - lista nieuporządkowana list-style-type - styl numerowania listy square - kwadrat disc - koło
CSS - lista nieuporządkowana list-style-type - styl numerowania listy square - kwadrat disc - koło circle - okrąg
CSS - lista uporządkowana list-style-type - styl numerowania listy
CSS - lista uporządkowana list-style-type - styl numerowania listy lower-alpha - małe litery alfabetu łacińskiego
CSS - lista uporządkowana list-style-type - styl numerowania listy lower-alpha - małe litery alfabetu łacińskiego upper-alpha - duże litery alfabetu łacińskiego
CSS - lista uporządkowana list-style-type - styl numerowania listy lower-alpha - małe litery alfabetu łacińskiego upper-alpha - duże litery alfabetu łacińskiego lower-roman - małe liczby rzymskie
CSS - lista uporządkowana list-style-type - styl numerowania listy lower-alpha - małe litery alfabetu łacińskiego upper-alpha - duże litery alfabetu łacińskiego lower-roman - małe liczby rzymskie upper-roman - duże liczby rzymskie
CSS - lista uporządkowana list-style-type - styl numerowania listy lower-alpha - małe litery alfabetu łacińskiego upper-alpha - duże litery alfabetu łacińskiego lower-roman - małe liczby rzymskie upper-roman - duże liczby rzymskie Dla znacznika li w obu rodzajach list można ustawić kolor czcionki, jej rozmiar, grubość, styl, czy też dekorację tekstu.
Ćwiczenie 1 Jeden 2 Dwa podpunkt 1 podpunkt 2 podpunkt 3 3 Trzy
Wyróżnik obrazkowy w liście W liście nieuporządkowanej kolejne jej pozycje mogą być wypunktowane za pomocą grafiki, np.: ul { list-style-image: url( strzalka.jpg ); }
Ćwiczenie Proszę stworzyć następującą tabelkę:
Ćwiczenie Proszę stworzyć następującą tabelkę: Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i wyśrodkowany, kolor biały, kolor tła niebieski.
Ćwiczenie Proszę stworzyć następującą tabelkę: Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i wyśrodkowany, kolor biały, kolor tła niebieski. Dla pozostałych wierszy: czcionka Times New Roman, 14pt, tekst pochylony, podkreślony i wyrównany do prawej, kolor czerwony, kolor tła zielony.
Ćwiczenie Proszę stworzyć następującą tabelkę: Dla nagłówka tabeli: czcionka Arial, 16pt, tekst pogrubiony i wyśrodkowany, kolor biały, kolor tła niebieski. Dla pozostałych wierszy: czcionka Times New Roman, 14pt, tekst pochylony, podkreślony i wyrównany do prawej, kolor czerwony, kolor tła zielony.