A CSS-ről

CSS 1.0 jellemzõk

• color (elõtér színének beállítása)
  • az attribútum lehetséges értékei: pl. red, green, blue, black, ..., rgb(100%,0,0,), rgb(72%,50%,10%), stb.
• background (háttér jellemzõinek beállítása)
  • a background-image attribútum lehetséges értékei: pl. url(rajz.gif)
  • a background-color attribútum lehetséges értékei: pl. silver, pink, cyan, lightblue, yellow, ..., rgb(100%,0,0,), rgb(72%,50%,10%), stb.
  • a background-repeat attribútum lehetséges értékei: repeat (háttér "kitapétázása"), repeat-x (tapétázás vízszintes irányban), repeat-y (tapétázás függõleges irányban), no-repeat (nincs tapétázás)
  • a background-attachment attribútum lehetséges értékei: scroll (tapéta függõleges görgetése), fixed (tapéta függõleges görgetésének letiltása)
  • a background-position attribútum lehetséges értékei: left, center, right vagy pl. 0%, 40%, -10% (x irányú pozíció); top, center, bottom vagy pl. 0%, 50%, 100% (y irányú pozíció)
• word-spacing (a szavak távolságának beállítása)
  • az attribútum lehetséges értékei: normal, pl. 0cm, 1.2em (a szavak távolságának növelése az alapértelmezett betûmagasság 1.2 szorosával), -1ex (a szavak távolságának csökkentése az 'x' betû alapértelmezett magasságával), 150%
• letter-spacing (a betûk távolságának megadása)
  • az attribútum lehetséges értékei: normal, pl. 0cm, 0.2em, -0.5ex, 150%
• text (a szöveg jellemzõinek megadása)
  • a text-align attribútum lehetséges értékei: left, center, right, justify
  • a text-decoration attribútum lehetséges értékei: none, underline (aláhúzott), overline (feléhúzott), line-through (áthúzott), blink (villogó -- az IE nem támogatja)
    • megjegyzés: ha egyszerre akarunk alá- és feléhúzást megvalósítani, két HTML tagot kell egymásba ágyaznunk pl. <H1 STYLE="text-decoration: overline"><U>alá- és feléhúzott szöveg</U></H1> módon
  • a text-transform attribútum lehetséges értékei: none, capitalize (a szavak elsõ betûjét nagybetûre cseréli), uppercase (a szavak betûit nagybetûre cseréli), lowercase (a szavak betûit kisbetûre cseréli)
  • a text-indent attribútum lehetséges értékei: pl. 3em (az elsõ sor behúzása az alapértelmezett betûmagasság 3 szorosával), 25mm, -4cm, 10%
• line-height (a sor magasságának beállítása -- csak többsoros bekezdésekre mûködik?! --)
  • az attribútum lehetséges értékei: normal, pl. 1.2em, 150%
• vertical-align (a szöveg függõleges igazításának beállítása egy soron belül -- csak karakterszintû elemekre mûködik, pl. a <FONT> tagban?! --; a karakterek a sor számára rendelkezésre álló téglalapban vagy "szövegdobozban" az un. alapvonal és a felsõ határolóvonal között helyezkednek el, amelyek a szövegdoboz alapélétõl és felsõ élétõl azonos távolságra vannak: a függõleges igazítás ennek a távolságnak az arányait változtatja meg); az attribútum lehetséges értékei:
  • baseline (igazítás az alapértelmezett alapvonalhoz),
  • sub (alsó index pozíció),
  • super (felsõ index pozíció),
  • top (a felsõ határolóvonal és a szövegdoboz felsõ éle egybeesik),
  • text-top (ez akkor különbözik az elõzõtõl, ha pl. egy soron belül ALIGN=top attribútummal megjelenített kép miatt a szövegdoboz magasságát meg kell növelni, amely viszont a felsõ határolóvonal pozícióját nem változtatja meg),
  • middle (az alapvonal helyzete a szövegdoboz középvonala lesz),
  • bottom (az alapvonal és a szövegdoboz alapéle egybeesik),
  • text-bottom (ez akkor különbözik az elõzõtõl, ha pl. egy soron belül ALIGN=bottom attribútummal megjelenített kép miatt a szövegdoboz "mélységét" meg kell növelni, amely viszont az alapvonal pozícióját nem változtatja meg),
  • és pl. 30% (az alapvonal távolságát a szövegdoboz alsõ és felsõ éleitõl 30:70 arányban állítja be)
• border (egy bekezdés teljes keretének beállítása vagy egy képkeret jellemzõinek megadása; célszerû az attribútumokat együtt megadni pl. <H1 STYLE="border: thick red solid"> módon)
  • a border-width attribútum lehetséges értékei: thin (vékony), medium (közepes vastagságú), thick (vastag), és pl. 0.5em
  • a border-color attribútum lehetséges értékei: pl. red, purple, ..., és pl. rgb(100%,0,0)
  • a border-style attribútum lehetséges értékei: none, hidden (rejtett), dotted (pontozott), dashed (szaggatott), solid (tömör), double (dupla), groove (vésett, "3D"), ridge (domborított, "3D"), inset (süllyesztett, "3D"), outset (kiemelkedõ, "3D")
• border (a bekezdés keretvonalainak beállítása egyenként; az egyes keretvonalak jellemzõinek megadása ugyanúgy történik, mint a teljes keretre)
  • border-top (a felsõ keretvonal beállítása)
  • border-right (a jobb szélsõ keretvonal beállítása)
  • border-bottom (az alsó keretvonal beállítása)
  • border-left (a bal szélsõ keretvonal beállítása)
• margin (a bekezdés margójának beállítása)
  • margin-top (a felsõ margó beállítása)
    • az attribútum lehetséges értékei: pl. 2em, 20mm, 0.75cm, stb.
  • margin-right (a jobboldali margó beállítása)
  • margin-bottom (az alsó margó beállítása)
  • margin-left (a baloldali margó beállítása)
• padding (a margók és a sornak megfelelõ "szövegdoboz" közötti terület távolságának beállítása; ennek a köztes, "kipárnázott" területnek a színét a háttérszín adja meg)
  • padding-top
    • az attribútum lehetséges értékei: pl. 1.2em, 150%
  • padding-right
  • padding-bottom
  • padding-left
• white-space (az elválasztó karakterek, pl. szóközök vagy sorvége jelek megjelenítésének beállítása); az attribútum lehetséges értékei:
  • normal (ilyenkor a forrásszöveg két vagy több elválasztó karaktere egy szóközként jelenik meg),
  • pre (a forrásszöveg minden elválasztó kerektere megjelenik),
  • nowrap (az automatikus tördelés kikapcsolása; a forrásszöveg két vagy több elválasztó karaktere egy szóközként jelenik meg, de ez még akkor sem eredményez sortörést, ha a karakterek a képernyõn már nem férnek el; ilyenkor megjelenik a képernyõn a vízszintes gördítõsáv)
• height (a bekezdés magasságának megadása)
  • az attribútum lehetséges értékei: pl. 3em, 200px, 5cm, stb.
• width (a bekezdés szélességének megadása)
  • az attribútum lehetséges értékei: pl. 50ex, 400px, 10cm, stb.
• float (a megadott bekezdés "körbefolyatása" szöveggel adott irányból; ilyenkor az elem bal- vagy jobboldalán nem csak egy, hanem több sor is állhat)
  • az attribútum lehetséges értékei: left, right, none
• clear (a megadott elem körbefolyatásának letiltása adott vagy mindkét irányból)
  • az attribútum lehetséges értékei: left, right, both, none
• list-style (a lista vagy felsorolás jellemzõinek megadása)
  • a list-style-type attribútum lehetséges értékei: none, disc, circle, square, decimal (a jelölõ szám), lower-roman (a jelölõ kisbetûs római szám, pl. i, ii, iii, iv, stb.), upper-roman (a jelölõ nagybetûs római szám, pl. I, II, III, IV, stb.), lower-alpha (a jelölõ kisbetû, pl. a, b, c, stb.), upper-alpha (a jelölõ nagybetû, pl. A, B, C, stb.)
  • a list-style-image attribútum lehetséges értékei: none, és pl. url(kep.jpg)
  • a list-style-position attribútum lehetséges értékei: outside (a jelölõ a listaelemek baloldali margóján kívül jelenik meg), inside (a jelölõ a listaelemek baloldali margóján belül jelenik meg)
• font (a karakterek egyéb jellemzõinek megadása)
  • a font-weight attribútum lehetséges értékei: normal, bold (félkövér), bolder (az elõzõnél sötétebb), lighter (az elõzõnél világosabb), 100, 200, ..., 900
  • a font-style attribútum lehetséges értékei: normal, italic (dõlt)
  • a font-variant attribútum lehetséges értékei: normal, small-caps ("kiskapitális", a kisbetûk méretével egyezõ nagybetûk)
  • a font-size attribútum lehetséges értékei: xx-small (rendkívül kis méret), x-small (nagyon kis méret), small (kis méret), medium (közepes méret), large (nagy méret), x-large, xx-large, larger (nagyobb méret), smaller (kisebb méret), és pl. 12pt, 1.3em, 150%
    • a betûméretet követõen / jel után megadható a sormagasság is: pl. 12pt/14pt
  • a font-family attribútum lehetséges értékei: konkrét betûtípusok, pl. Times New Roman, Arial, Courier New vagy betûcsaládok, pl. serif ("talpas"), sans-serif ("talpatlan"), monospace (rögzített szélességû)

Boda István, 2006. augusztus 23.

Példa1:

A hozzá tartozó CSS:

konyvek { display:block; background:lightblue; } konyv { display:block; border:pink solid 5px; font-weight:bold; font-size:24pt; text-align:center; } szerzo { font-family:sans-serif; } cim { font-style:italic; }

Példa 2:

Hozzá tartozó CSS:

konyvek { display:block; background:lightblue; } konyv { display:block; border:pink solid 5px; font-weight:bold; font-size:24pt; text-align:center; } konyv:first-letter { font-size:48pt; } szerzo:first-child { text-decoration:underline; } szerzo, tovabbiSzerzo { color:blue; } tovabbiSzerzo:before { content: "; " } cim[nyelv="en"] { color:red; } cim[nyelv="hu"] { color:green; } cim:before { color:black; content: ": " } cim:hover { color:purple; cursor:help; } cim:after { color:black; content: ". [" attr(nyelv) "]" }

Példa 3:

A hozzá tartozó CSS:

autok{ counter-reset:section; } auto:before{ counter-increment:section; content:"Sorszám: " counter(section) ". "; font-style: italic; } auto{ display: block; border: solid 1px; margin-bottom: 2cm; } marka{ display: block; font-weight: bold; } marka:after{ content: " (" attr(tipus) ")"; } evjarat { display:none; } rendszam { display:none; } alvazszam { display:none; } ar{ display: block; } ar:after{ text-decoration: underline; content: attr(penznem); }

Példa 4:

<!ELEMENT szemelyi_adatok(szemely)+> <!ELEMENT szemely (nev, kor, allampolgarsag, kep, (szemigsz|utlevelsz|diakigsz), beszelt_nyelvek)> <!ELEMENT nev (#PCDATA)> <!ELEMENT kor (#PCDATA)> <!ELEMENT allampolgarsag (#PCDATA)> <!ELEMENT kep EMPTY> <!ELEMENT szemigsz (#PCDATA)> <!ELEMENT utlevelsz (#PCDATA)> <!ELEMENT diakigsz (#PCDATA)> <!ELEMENT beszelt_nyelvek (#PCDATA|anyanyelv)*> <!ELEMENT anyanyelv (#PCDATA)> <!ATTLIST nev

titulus CDATA #IMPLIED> <!ATTLIST kep

src CDATA #REQUIRED

meret CDATA #IMPLIED> <! ATTLIST szemely

nem (férfi|nő) "férfi">

A hozzá tartozó XLS:

eletrajz CSS: (<link href="oneletrajz.css" rel="stylesheet" type="text/css" /> a html-be )

body {

background-color: lightgray;

cursor: help;

}

h1 {

font-family: "Hobo Std";

font-size: 36px;

color: green;

text-decoration: blink;

background-attachment: float;

background-image: url(magyarzaszlo.jpg);

background-repeat: repeat-x;

background-position: center center;

text-align: center;

margin: 2px;

padding: 2px;

float: center;

width: auto;

border-top-style: dotted;

border-right-style: dotted;

border-bottom-style: dotted;

border-left-style: dotted;

border-top-color: blue;

border-right-color: blue;

border-bottom-color: blue;

border-left-color: blue;

position: relative;

z-index: 1;

}

h2 {

font-family: Verdana;

font-size: 24px;

font-style: italic;

text-transform: uppercase;

color: red;

text-decoration: underline blink;

text-align: center;

vertical-align: bottom;

}

h3 {

font-family: "Comic Sans MS";

font-size: 18px;

font-weight: bold;

font-variant: small-caps;

color: blue;

border-bottom-width: thick;

border-bottom-style: double;

}

ul {

font-family: Verdana;

font-size: 12px;

font-style: italic;

background-color: pink;

float: left;

height: 50px;

width: 200px;

list-style-position: inside;

list-style-type: square;

padding-top: 20px;

padding-left: 100px;

}

a {

background-color: #FFFF00;

}

div {

font-size: large;

font-weight: bolder;

font-variant: small-caps;

text-decoration: underline;

vertical-align: baseline;

}

p {

font-family: Arial;

font-size: 14px;

color: brown;

}

beagyazott CSS: (<style type="text/css">és</style>között a HEAD-ban )

body {

background-attachment: fixed;

background-color: pink;

background-image: url(krystohanslogo.png);

background-repeat: repeat-y;

background-position: center;

}

table {

background-color: lightblue;

border-top-color: red;

border-right-color: red;

border-bottom-color: red;

border-left-color: red;

}

#sarga {

background-color: yellow;

}

.kekszoveg {

font-family: Arial;

font-size: 16px;

color: blue;

}

.vastagszoveg {

font-size: 14px;

font-weight: bold;

}

p.kekszoveg {

font-family: Arial;

font-size: 14px;

font-style: italic;

color: blue;

font-weight: bold;

}

td.kekszoveg {

font-family: Arial;

font-size: 14px;

font-style: italic;

color: blue;

}

td.vastagszoveg {

font-family: Arial;

font-size: 14px;

font-weight: bold;

}