http://www.signs.pl/html/index.php
http://xhtml.miniserwis.pl/naglowek-html.html
przykladowa strona html/css
http://stackoverflow.com/questions/2229094/css-is-it-possible-to-split-up-a-li-element
http://htmldog.com/articles/suckerfish/dropdowns/
Komentarze
HTML
<!-- komentarz -->
CSS
/* komentarz wieloliniowy */
// komentarz jednoliniowy
<head>
<title>enter page title here</title>
<!—nazwa strony www -->
<meta
name
=
"description"
content
=
" "
/
>
<!— wpisz opis twojej strony w " " -->
<meta
name
=
"keywords"
content
=
" "
/
>
<!—wpisz tagi do wyszukiwania twojej trony " " -->
<meta
http-equiv
=
"Content-Language"
content
=
"en-gb"
/
>
<meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=windows-1252"
/
>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/style.css"
/
>
</head>
Polskie znaki :
<meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
/
>
Link do stylu css:
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/style2.css"
/
>
<head>
<link rel="Stylesheet" type="text/css" href="style.css" title="Nazwa domyślna" />
<link rel="Alternate stylesheet" type="text/css" href="style1.css" title="Nazwa 1" />
</head>
IMG
<img
alt
=
"home image"
src
=
"images/homeimage.jpg"
width
=
"175"
height
=
"130"
/
>
<img
alt
=
""
src
=
"images/image.jpg"
/
>
Selektor wszystkich znacznikow:
*
{
margin:
0
;
padding:
0
;
}
Selektor potomka
przodek1 przodek2 potomek { cecha: wartość }
p b {
<p>to jest<b>czerwony napis</b> w akapicie </p> => to jest
czerwony napis
w akapicie
Grupowanie selektorow
selektor1, selektor2, selektor3... { cecha: wartość }
h1, h2, h3 {color: #c00000;}
Taka deklaracja stylu pozwala nadać te same wartości atrybutów kilku różnym selektorom jednocześnie (bez względu na ich położenie
w hierarchii drzewa dokumentu).
CSS w html’u
<h1 style="color: #c00000"> ... </h1>
<style type="text/css">
.style1 {
text-align: center;
font: "Times New Roman";
color: #800000;}
</style>
Body selektor:
body
{
margin:
0
;
padding:
0
;
background:
#CCC
;
color:
#
000
;
font-size:
80%
;
font-family:
"arial"
;
}
padding:
18px
0
0
25px
;
Deklaracja ta odpowiada regule określania odstępów zgodnie z ruchem wskazówek
.myclass {
padding: 20px; }
//wszystkie strony(gora, dol , lewa ,prawa) mają 20px
.myclass {
padding: 20px 10px;
} //20 px ma gora i dół, 10px lewa i prawa
.myclass {
padding: 5px 0 10px 15px; }
5px- gora, 0 px-prawa, 10px-dol, 15px lewa
Hyperlink - przyklady
a {
color: #c00000;
text-decoration: underline;
font-weight: bold;}
a:visited {
color: #c0c0c0;
text-decoration: none;
font-weight: bold;}
#sidebar a {
color: #4baee9;
text-decoration: none;
font-weight: bold;}
#sidebar a:hover {
color: #f8c032;
text-decoration: underline;
font-weight: bold;}
#footer a {
color: #ff4040;
text-decoration: none;
font-weight: normal;}
#footer a:hover {
color: #4040ff;
text-decoration: none;
font-weight: normal;}
Czcionka
h1 {
font-weight: bold;
font-size: 22px;
font-family: Georgia, "Times New Roman", serif; }
p {
font: 12px/20px Verdana, Arial, sans-serif; }
font-family : Określa typ czcionki
{font-family: Arial}
p
{
font-family:"Times New Roman",Georgia,Serif;
}
font-style Określa styl czcionki
normal,
italic,
oblique
p{font-style: italic}
font-variant
normal,
small-caps
font-weight Określa grubość czcionki
normal,
bold,
bolder,
lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900
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)
font Zawiera w sobie wszystkie właściwości dotyczące czcionki
font-family,
font-size,
font-variant,
font-weight,
font-size
{font: 12pt sans-serif bold italic}
Kolor i tło
color Określa kolor czcionki
nazwa koloru,
wartość hex wszystkie elementy
{color: red}
background-color Określa kolor tła
nazwa koloru,
wartość hex
{background-color: #FF5500}
background-image Określa grafikę pełniąca rolę tła
none,
adres URL
{background-image: url(tlo.gif)}
background-repeat Określa powtrzalność tła
repeat,
repeat-x,
repeat-y,
no-repeat
{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
{background-attachment: scroll}
background-position Określa pozycję początkową tła elementy będące blokiem
[top, center, bottom],
[left, center, right],
procent,
punkt (pt),
inch (in),
centymetr (cm),
piksel (px)
{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
{background: red url(tlo.jpg) left top no-repeat}
background:
#FFF
url
(
'../images/background-main.png'
)
repeat-y
;
Tekst
word-spacing Określa odległość między wyrazami
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{word-spacing: 1.2em}
letter-spacing Określa odległość między literami
normal,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{letter-spacing: 0.2em}
letter-spacing: -
2px
;
text-decoration Określa czy tekst ma być podkreślony, przekreślony, itd.
none,
underline,
overline,
line-through,
blink
{text-decoration: line-through}
vertical-align Określa położenie tekstu w pionie względem elementu poprzedzającego (elementy wewnętrzne)
baseline,
sub,
super,
top,
text-top,
middle,
bottom,
procent
{vertical-align: top}
text-transform Określa sposób przemiany tekstu
capitalize,
uppercase,
lowercase,
none
{text-transform: uppercase}
text-align Określa położenie tekstu wewnątrz elementu - elementy będące blokiem
left,
right,
center,
justify
{text-align: center}
text-indent Określa odległość od lewego marginesu - elementy będące blokiem
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{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)
{line-height: 120%}
Elementy kwadratowe
Przykłady
#wrapper {
width: 900px;
text-align: left;
margin: 0 auto;}
#sidebar {
font-size: 85%;
float: left;
width: 270px;
padding: 10px 30px 0 0;}
#content {
float: right;
width: 600px;
line-height: 1.5em;
padding: 10px 0 0 0;}
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)
{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)
{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)
{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)
{margin-left: 4em}
margin Określa odległość od krawędzi strony według kolejności: górna, prawa, dolna, lewa
przykład
.blok{ margin:
18px
0
0
25px
;) 18 gora , 0 prawa, 0 dolna, 25 lewa
Jeśli są podane 2 wartosci to 1sza okresla :gora ,dol a 2ga okresla : lewa ,prawa.
Przykład
.blok{ margin:
18px
0
;) 18 gora i dol, 0 prawa i lewa
auto,
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{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)
{padding-top: 0.2em}
padding-right Określa prawy odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-right: 12px}
padding-bottom Określa dolny odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-bottom: 0.4em}
padding-left Określa lewy odstęp elementu
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
{padding-left: 7%}
padding Określa odstęp elementu według kolejności: górna, prawa, dolna, lewa
przykład
{padding: 2em 1em 3em 4em}
.blok{ padding:
18px
0
0
25px
;) 18 gora , 0 prawa, 0 dolna, 25 lewa
Jeśli są podane 2 wartosci to 1sza okresla :gora ,dol a 2ga okresla : lewa ,prawa.
Przykład
.blok{ padding:
18px
0
;) 18 gora i dol, 0 prawa i lewa
procent,
punkt (pt),
inch (in),
centymetr (cm),
względem (em),
piksel (px)
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)
przykład
{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)
przykład
{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)
przykład
{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)
przykład
{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)
przykład
{border-width: thin thick medium thick}
border-color Określa kolor granicy (ramki) elementu
nazwa koloru,
wartość hex
przykład
{border-color: red}
border-style Określa styl granicy (ramki) elementu
none,
dotted,
dashed,
solid,
double,
groove,
ridge,
inset,
outset
przykład
{border-style: double}
border-top Określa szerokość, kolor i styl górnej granicy (ramki) elementu
border-top-width,
border-style,
color
{border-top: thin blue solid}
border-right Określa szerokość, kolor i styl prawej granicy (ramki) elementu
border-right-width,
border-style,
color
{border-right: }
border-bottom Określa szerokość, kolor i styl dolnej granicy (ramki) elementu
border-bottom-width,
border-style,
color
{border-bottom: }
border-left Określa szerokość, kolor i styl lewej granicy (ramki) elementu
border-left-width,
border-style,
color
{ border-left:
3px
solid
#FC0
;}
border Określa szerokość, kolor i styl granicy (ramki) elementu według kolejności: górna, prawa, dolna, lewa
border-width,
border-style,
color
{border:
1px
solid
#CCC
;}
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}
Klasyfikacja
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}
Wyszukiwarka
Podobne podstrony:
HTML i CSS id 206793 Nieznany
Duckett J HTML i CSS Zaprojektuj i zbuduj witrynę WWW
html, css html
html, css plik do koła
html, css htmml
html, css sprawozdanie id 62398 Nieznany
Projektowanie stron internetowych Przewodnik dla poczatkujacych webmasterow po X HTML CSS i grafice
HTML CSS Kaskadowe arkusze stylów 03 2005
HTML i CSS id 206793 Nieznany
Android Tworzenie aplikacji w oparciu o HTML CSS i JavaScript andrta
Android Tworzenie aplikacji w oparciu o HTML CSS i JavaScript andrta
Android Tworzenie aplikacji w oparciu o HTML CSS i JavaScript
więcej podobnych podstron