Active Server Pages,ActiveServerPages+,ASP,ASP+,aspx,VBScript,IIS,internet,intranet,programming,programowanie,XML,Extensible Markup Language,kurs,opis,HTML,Hypertext Markup Language,JScript,JavaScript,wyszukiwarka,znajdz,instrukcja,Stelmik,Stelmi,free,darmo,zadarmo,free,serwer,server,www,konta,PHP,perl,klient,uslugi,asp,sklep internetowy,sklepy internetowe,e-sklep,esklep,tworzenie stron internetowych,strony internetowe,strony www,tworzenie stron www,strony internetowe,web page,webpage,creating,Krzysztof Stelmach,Krzysztof,Stelmach,www.stelmach.info,www.asp.z.pl
 
IP: 54.234.190.237 
 
 CASCADE STYLE SHEET / CSS 1
Szukaj:  
Czw, 18.01.2018r.
KURSY » języki - klient » Cascade Style Sheet » CSS 1
 

Poniżej znajduje się krótki opis właściwości CSS1.

1. Czcionka

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. 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}

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%}

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}

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}

 

 
do góry ^ 
Jesteś 1823033 odwiedzającym
 
 
Copyright © 2003-2018 Krzysztof Stelmach, Wszelkie prawa zastrzeżone.
 
System reklamy Test