Frontend - Backend - IKT Project: április 2014

2014. április 10., csütörtök

A kurzor

A CSS segítségével az egérmutató alakját is megszabhatjuk.
Szintakszisa:

cursor:crosshair;

Ezt is, mint a scrollbar-t a BODY legfelső szintű elemben kell megadni.
Értékei:

crosshair: kereszt alakú mutató
default: alapértelmezett
pointer: szövegkurzor
move: négy irányba mutató nyíl
wait: homokóra
help: kérdőjel

Ebben az esetben is óvatosságra intek mindenkit, az oldal hibátlan megjelenésének érdekében.

Az űrlapokon használhatunk gombot, textarea-t, legördülő menüt, radio gombokat stb.. Lehetőségünk van ezeket színezni, hogy jobban alkalmazkodjanak
oldalunkhoz. De itt is figyelembe kell venni, hogy nem minden böngésző támogatja, tehát erre ne építsünk design-t.

1. Az input elem:

input{
      color:#8CA93D;
      background-color:#FCFCFC;
}

input:hover{
      color:#8CA93D;
      background-color:#FFFFFF;
}

input:active{
      color:#8CA93D;
      background-color:#FFFFFF;
}

input:focus{
      color:#8CA93D;
      background-color:#FFFFFF;
}

Itt is, mint a látszólagos elemeknél használhatunk "hover", "active", és "focus" osztályokat.
A hover-, és active-ról már beszéltem. A focus abban az esetben fog aktiválódni, ha az egérrel rákattintasz a beviteli mezőre, vagy gombra.
Megadhatunk mindegyik esetben szövegszínt, háttérszínt, háttréképet, és mindenfajta szöveggel és színnel kapcsolatos beállítást (sok tulajdonság a későbbiekben kerül bemutatásrsa, de többségük alkalmazható lesz itt is).

2. A textarea:

textarea{
      color:#8CA93D;
      background-color:#FCFCFC;
}

textarea:hover{
      color:#8CA93D;
      background-color:#FFFFFF;
}

textarea:active{
      color:#8CA93D;
}

A fenti példák alapján alkalmazhatjuk ezeket a tulajdonságokat a SELECT, RADIO, CHECKBOX input elemekre is.

2014. április 5., szombat

Fieldset elemek formázása

<html lang="hu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML fájl</title>
<link href="ch1314.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="parser.php" method="post">
  <fieldset>
  <legend>Feliratkozás</legend>
  <div>
    <label for="lastname">Vezetéknév: </label>
    <input type="text" name="lastname" id="lastname">
    <br>
    <label for="firstname">Keresztnév: </label>
    <input type="text" name="firstname" id="firstname">
    <br>
    <label for="email">E-mail: </label>
    <input type="text" name="email" id="email">
    <br>
    <input type="submit" value="Feliratkozás">
  </div>
  </fieldset>
</form>
</body>
</html>

CSS-ben:

@charset "utf-8";

label {
    float: left;
    width: 5em;
    margin: auto 1em 0.8em 3em;
    text-align: right;
}

form br {
    clear: left;
}

form div {
    text-align: center;
}

legend {
    color: black;
    border: 3px solid #009900;
    background: #00FF66;
    padding: 0 4px;
}

fieldset {
    width: 20em;
    border: 3px solid #009900;
    padding: 10px;
}

Ilyesmi:

Feliratkozás

Vezetéknév:
Keresztnév:
E-mail:

Frontend - Backend - IKT Project

2014. április 10., csütörtök

A kurzor

Űrlap színei

2014. április 5., szombat

Fieldset elemek formázása

13 C helyettesítés idejére