CSS

Az alábbiak nem a túlzott precizitás igényével készültek. Ha valódi, pontos leírásokra vágysz, akkor látogasd meg a CSS szabvány leírásának hivatalos honlapját! Itt csak néhány emlékeztető példát találsz.

A CSS kódok elhelyezése

A style paraméterbe

Minden HTML elemnek lehet sytle paramétere, amibe a csak rá vonatkozó stílus leíró utasítások írhatók:

<p style="color: red;">Ez egy piros szöveg lesz</p>

.

A fejlécben <style> elemek közé

<head>
  ...
  <style type="text/css">
    h1 { text-align: center; color: blue; }
  </style>
</head>

Külön CSS állományba

<link rel="StyleSheet" href="base.css" type="text/css" media="screen,print"/>

Fontosabb paraméterek

Betűtípus, méret...

  p {
    font-family: Times;
    font-size: 16pt;
    font-weight: bold;
    font-style: italic;
    text-decoration: underlined;
    color: red;
  }
  h1 {
    font: bold italic 16px;
    color: blue;
  }

Keretezés

  p {
    border-width: 0px 1px 2px 3px;
    border-color: red blue;
    border-style: solid dashed dotted solid;
  }
  h1 {
    border: 1px dotted green;
  }

Igazítás, margó

  p {
    text-align: center;
    margin: 10px 20px;
  }
  h1 {
    margin: 10px;
    padding: 4px 40px 10px 40px;
    text-align: right;
  }

Méretezés

  img {
    height: 100px;
    width: 200px;
  }

Háttér

  body {
    background-color: yellow;
    background-image: url(hatter.png);
    background-repeat: repeat-y;
  }

Elhelyezés

  img { float: left; }
  div { position: absolute; top: 10px; left: 30px; }

Táblázat formázása

  table { border: 1px solid black; border-spacing: 0px; }
  th { border: 1px solid red; text-align: center; font-weight: bold; }
  td { border: 1px solid blue; text-align: right; }

Felsorolás formázása

  ol { list-style-type: upper-roman; } /* I, II, III, IV */
  ol { list-style-type: lover-roman; } /* i, ii, iii, iv */
  ol { list-style-type: upper-alpha; } /* A, B, C, ... */
  ol { list-style-type: lover-alpha; } /* a, b, c, ... */
  ol { list-style-type: decimal; }     /* 1, 2, 3, ... */
  ol { list-style-type: decimal-leading-zero; }     /* 01, 02, 03, ... */
  ul { list-style-type: disc; } /* pötty */
  ul { list-style-type: circle; } /* karika */
  ul { list-style-type: square; } /* négyzet */