CSS (Cascading Style Sheets) - segédanyag

Stílusok elhelyezése egy adott HTML fájlban

<HTML>
   <HEAD>
      <STYLE type="text/css">
         ide kerülnek a formázások
      </STYLE>
   </HEAD>
   <BODY>
      Törzsrész
   </BODY>
</HTML>

Stílusok elhelyezése külön fájlba, .css kiterjesztéssel

<HTML>
   <HEAD>
      <LINK rel="stylesheet" type="text/css"
       href="filenev.css">

   </HEAD>
   <BODY>
      Törzsrész
   </BODY>
</HTML>

Általános forma:

HTML-tag neve { formázási paraméterek }
   Például: h1 {color:#0000FF; font-size: 12px;}
   (A formázási lehetőségeket ; jellel zárjuk le.)

<DIV> tag használata és formázása:

<DIV> használata:
   formázás osztálynév vagy azonosító megadásával
   például: osztálynévvel
<DIV class="onev">
                azonosítóval   <DIV id="aznev">
   hivatkozás osztályra a CSS részben: .onev
   hivatkozás azonosítóra a CSS részben: #aznev
   class/id használható a többi HTML tag-nél is!

HTML tag-ekre használható formázási lehetőségek:

<BODY> - Háttérbeállítások
   background-color:szín;
   background-image:url('filenev.jpg');
   backgorund-repeat:repeat-x/repeat-y/no-repeat;
   background-attachment:fixed;
   background-position:vízszintes függőleges;

          vízszintes: left/center/right
          függőleges: top/middle/bottom


<H1>...<H6>, <P> - Bekezdésformázások
   color:szín;
   text-align:center/right/justify;
   text-decoration:formázás;

       formázás: overline/line-through/underline/blink/none
   text-transform:uppercase/lowercase/capitalize;
   text-indent:behúzás;
(pixelben)
   margin:margóméret; (pixelben)
       top-bottom-right-left sorrendben
       külön is megadható, pl.:
margin-top:méret;

<A> - Hivatkozások (linkek)
   4-féle linkre adhatunk meg formázást:

      a:link - még meg nem látogatott link
      a:visited - már meglátogatott link
      a:hover - egér link feletti áthúzásakor
      a:active - épp aktív link
   Beállítások a különböző linkekre:

      display:block;
      color:szín;
      backgorund-color:szín;
      text-decoration:formázás;
      text-align:center/right/justify;


Táblák
   Bármely táblázattal kapcsolatos tag-re:
     color:szín;
     background-color:szín;
     width:szélesség;
(pixelben, százalékban)
   csak <TABLE> és <TR>

     height:magasság; (pixelben, százalékban)
   csak <TABLE>, <TH> és <TD>

     padding:távolság; (pixelben) - cellamargó
       top-bottom-right-left sorrendben
       külön is megadható, pl.:
padding-left:méret;
     border-collapse:collapse/separate;
       saját cellaszegély: separate
       közös/megosztott cellaszegély: collapse
     border-spacing:méret; (pixelben) - cellaköz
     border-width:méret; (pixelben)
     border-color:szín;
     border-style:stílus;

       stílus: none/solid/dotted/dashed/double/groove/ridge
       összevonható méret stílus szín sorrendben:
       Például:
table { border:1px solid black;}
       a szegélyt az oszlopokra (td/th) is meg kell azt adni
     csak <TD> és <TH>

       text-align:left/center/right;
       vertical-align:top/middle/bottom;

<DIV> - Blokk
   position:absoulte/relative;
   top/left/right:távolság;
(pixelben)
   width:szélesség; (pixelben, százalékban)

Font (karakter) formázási lehetőségek
   font-family:"pontos fontnév", családnév, ált._család;
   font-style:italic;
   font-weight:normal/bold/bolder/lighter;
   font-variant:small-caps;
(kiskapitális)
   font-size:méret; (pixelben)

Listák
   list-style-type:típus;
       típus <UL> esetén: square/circle
       típus <OL> esetén: upper-roman/lower-alpha

   list-style-image:url('kep.gif'); -> csak <UL>-nél

<IMG>
   float:left/right/center; (kép helyzete szövegben)
   width:szélességérték; (pixelben/százalékban)
   height:magasságérték; (pixelben/százalékban)
   border-width:méret; (pixelben)
   border-color:szín;
   border-style:stílus;
     stílus: none/solid/dotted/dashed/double/groove/ridge
     összevonható méret stílus szín sorrendben:
     Például:
img { border:1px solid black;}

www.000webhost.com