Przyklad 1

To jest tekst na naszej stronie.

Przyklad 1

To jest tekst na naszej stronie. H1 { color: blue } Poniżej znajduje się krótki opis właściwości CSS1. 2.1. Czionka Właściwość Opis Wartość Odnosi się do Przykład font-family Określa typ czcionki nazwa czcionki wszystkie elementy {font-family: Arial} Przykład: Tekst font-style Określa styl czcionki normal, italic, oblique wszystkie elementy {font-style: italic} Przykład: Tekst font-variant normal, small-caps wszystkie elementy {font-variant: small-caps} Przykład: Tekst font-weight Określa grubość czcionki normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 wszystkie elementy {font-weight: bolder} Przykład: Tekst font-size Określa rozmiar czcionki xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, punkt (pt), inch (in), centymetr (cm), piksel (px) wszystkie elementy {font-size: 20px} Przykład: Tekst font Zawiera w sobie wszystkie właściwości dotyczące czcionki font-family, font-size, font-variant, font-weight, font-size wszystkie elementy {font: 12pt sans-serif bold italic} Przykład: Tekst 2.2. Kolor i tło Właściwość Opis Wartość Odnosi się do Przykład color Określa kolor czcionki nazwa koloru, wartość hex wszystkie elementy {color: red} Przykład: Tekst {color: rgb(0,0,255)} Przykład: Tekst background-color Określa kolor tła nazwa koloru, wartość hex wszystkie elementy {background-color: #FF5500} background-image Określa grafikę pełniąca rolę tła none, adres URL wszystkie elementy {background-image: url(tlo.gif)} background-repeat Określa powtrzalność tła repeat, repeat-x, repeat-y, no-repeat wszystkie elementy {background-repeat: repeat-x} background-attachment Określa czy tło ma się przesuwać wraz z zawartością (scroll) czy ma być stałe (fixed) scroll, fixed wszystkie elementy {background-attachment: scroll} background-position Określa pozycję początkową tła [top, center, bottom], [left, center, right], procent, punkt (pt), inch (in), centymetr (cm), piksel (px) elementy będące blokiem {background-position: 100% 30%} background Zawiera w sobie wszystkie właściwości dotyczące tła background-color, background-image, background-repeat, background-attachment, background-position wszystkie elementy {background: red url(tlo.jpg) left top no-repeat} 2.3. Tekst Właściwość Opis Wartość Odnosi się do Przykład word-spacing Określa odległość między wyrazami normal, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {word-spacing: 1.2em} Przykład: Tekst letter-spacing Określa odległość między literami normal, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {letter-spacing: 0.2em} Przykład: Tekst text-decoration Określa czy tekst ma być podkreślony, przekreślony, itd. none, underline, overline, line-through, blink wszystkie elementy {text-decoration: line-through} Przykład: Tekst vertical-align Określa położenie tekstu w pionie względem elementu poprzedzającego baseline, sub, super, top, text-top, middle, bottom, procent elementy wewnętrzne {vertical-align: top} text-transform Określa sposób przemiany tekstu capitalize, uppercase, lowercase, none wszystkie elementy {text-transform: uppercase} Przykład: Tekst text-align Określa położenie tekstu wewnątrz elementu left, right, center, justify elementy będące blokiem {text-align: center} text-indent Określa odległość od lewego marginesu procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) elementy będące blokiem {text-indent: 20%} line-height Określa odległość między dwoma sąsiednimi liniami normal, liczba, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {line-height: 120%} 2.4. Elementy kwadratowe Właściwość Opis Wartość Odnosi się do Przykład margin-top Określa odległość od górnej krawędzi strony auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {margin-top: 3em} margin-right Określa odległość od prawej krawędzi strony auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {margin-right: 4px} margin-bottom Określa odległość od dolnej krawędzi strony auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {margin-bottom: 13%} margin-left Określa odległość od lewej krawędzi strony auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {margin-left: 4em} margin Określa odległość od krawędzi strony według kolejności: górna, prawa, dolna, lewa auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {margin: 2em 3em 1em 4em} padding-top Określa górny odstęp elementu procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {padding-top: 0.2em} padding-right Określa prawy odstęp elementu procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {padding-right: 12px} padding-bottom Określa dolny odstęp elementu procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {padding-bottom: 0.4em} padding-left Określa lewy odstęp elementu procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {padding-left: 7%} padding Określa odstęp elementu według kolejności: górna, prawa, dolna, lewa procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {padding: 2em 1em 3em 4em} border-top-width Określa szerokość górnej granicy (ramki) elementu thin, medium, thick, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {border-top-width: thin} border-right-width Określa szerokość prawej granicy (ramki) elementu thin, medium, thick, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {border-right-width: medium} border-bottom-width Określa szerokość dolnej granicy (ramki) elementu thin, medium, thick, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {border-bottom-width: thick} border-left-width Określa szerokość lewej granicy (ramki) elementu thin, medium, thick, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {border-left-width: 3px} border-width Określa szerokość granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa thin, medium, thick, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) wszystkie elementy {border-width: thin thick medium thick} border-color Określa kolor granicy (ramki) elementu nazwa koloru, wartość hex wszystkie elementy {border-color: red} border-style Określa styl granicy (ramki) elementu none, dotted, dashed, solid, double, groove, ridge, inset, outset wszystkie elementy {border-style: double} border-top Określa szerokość, kolor i styl górnej granicy (ramki) elementu border-top-width, border-style, color wszystkie elementy {border-top: thin blue solid} border-right Określa szerokość, kolor i styl prawej granicy (ramki) elementu border-right-width, border-style, color wszystkie elementy {border-right: } border-bottom Określa szerokość, kolor i styl dolnej granicy (ramki) elementu border-bottom-width, border-style, color wszystkie elementy {border-bottom: } border-left Określa szerokość, kolor i styl lewej granicy (ramki) elementu border-left-width, border-style, color wszystkie elementy {border-left:} border Określa szerokość, kolor i styl granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa border-width, border-style, color wszystkie elementy {border: } width Określa szerokość elementu (np. grafiki) auto, procent, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) elementy będące blokiem {width: 80px} height Określa wysokość elementu (np. grafiki) auto, punkt (pt), inch (in), centymetr (cm), względem (em), piksel (px) elementy będące blokiem {height: 170px} float left, right, none wszystkie elementy {float: left} clear none, left, right, both wszystkie elementy {clear: right} 2.5. Klasyfikacja Właściwość Opis Wartość Odnosi się do Przykład display Określa w jaki sposób dany element ma być wyświetlony block, inline, list-item, none wszystkie elementy {display: none} white-space Określa w jaki sposób należy obchodzić się z odstępami wewnątrz elementu normal, pre, nowarp elementy będące blokiem {white-space: pre} list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none elementy z display = list-item {list-style-type: lower-roman} list-style-image adres URL, none elementy z display = list-item {list-style-image: url(rysunek.gif)} list-style-position inside, outside elementy z display = list-item {list-style-position: outside} list-style disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, inside, outside, adres URL, none elementy z display = list-item {list-style: circle outside}