Informatika: február 2014

2014. február 23., vasárnap

Mire jó a fieldset és legend elemek?

A fieldset és alegend: Egyik elemet sem kötelező használni, de nagyon hasznosnak a komplex űrlapok és prezentációk esetében.

A fieldset elem segítségével szemantikus egységekbe rendezheted az űrlapot. Egy bonyolultabb űrlapon például használhatsz különböző fieldset-eket a címekhez, a számlázási adatokhoz, a felhasználói szokásokhoz, és így tovább. A legend elemmel pedig elnevezheted a különböző fieldset részeket.

A legend elem feliratát aztán tetszőlegesen formázhatjuk. A fieldset tulajdonképpen csak egy keret (border), ezért a border tulajdonsággal tudjuk eltüntetni, vagy módosítani a fieldset elemet.

<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>

@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;
}

Vágás

A láthatóság határainak beállítása.

Egy képet adott formára vágunk. Jelenleg téglalap alakúra, bár jelenleg nem támogatott más forma:

img { 
    position: absolute;
    clip: rect(20px, 460px, 351px, 30px); 
}

A vágást csak abszolút pozíciónálású elemen lehet végrehajtani.

Tetejét, jobboldalát, alját és baloldalát adjuk meg.

Ál-osztályok

Az ál-osztályokkal néhány elemhez speciális effektusokat rendelhetünk.

Az ál-osztályok szintaxisa

szelektor:ál-osztály {beállítás:érték;}

De használható így is:

szelektor.osztály:álosztály {beállítás:érték;}

Példa

a:link {color:#FF0000;}      /* még nem látogatott linkek */
a:visited {color:#00FF00;}  /* látogatott linkek */
a:hover {color:#FF00FF;}  /* ha az egér felé megy */
a:active {color:#0000FF;}  /* aktuális linkek */

Megjegyzés
- Az a:hover az a:link és az a:visited után kell következzen a CSS definícióban!
- Az a:active az a:hover után kell következzen.
- Az állosztályok nem kisbetű-nagybetű érzékenyek

Az összes ál-osztály

Szelektor	Példa	A példa leírása
:link	a:link	Meg nem látogatott linkek.
:visited	a:visited	Látogatott linkek.
:active	a:active	Aktív linkek.
:hover	a:hover	link amely felett az egér tartózkodik.
:focus	input:focus	Az input elem, ha fókuszba került.
:first-letter	p:first-letter	A p elem első betűje.
:first-line	p:first-line	A p elem első sora.
:first-child	p:first-child	A p elem közül az, amely a szülő első eleme.
:before	p:before	Minden p elem elé tartalmat szúr be.
:after	p:after	Minden p elem után tartalmat szúr be.
:lang(nyelv)	p:lang(hu)	Minden p elem a lang tulajdonsággal és hu értékkel lesz beállítva.

Számlálók

p {
  counter-increment: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}

Fejezetenként újraszámozva:

p {
  counter-increment: par-num;
}
h1 {
  counter-reset: par-num;
}
p:before {
  content:counter(par-num, upper-roman)".";
}

Bekezdések számozása:

  <p>Első</p>  
  <p>Második</p>

body {
  counter-reset: section; 
}
p:before {
  counter-increment: section;
  content: counter(section)".) "; 
}

Mértékegységek

Relatív hosszmérték
em	A releváns karakter mérete
px	képpont; eszközfüggő
ex	A releváns karakter x-magassága

Abszolút hosszérték
in	inch; hüvelyk; 25,4 mm
cm	centiméter
mm	milliméter
pt
pc	pica; 12 pont, 3/18 hüvelyk; kb.: 4,23 mm

Példák:

h1 {
    margin: 0.3in;
    line-height: 2cm;
    word-spacing: 5mm;
    font-size: 10pt;
}

Mikor ajánlott hasznli
	Ajánlott	Alkalmanként	Nem ajánlott
Képernyő	px, em, %	ex	mm, cm, in, pt, pc
Nyomtatott	mm, cm, in, pt, pc, em, %	px, ex

At-szabályok

@import "masik.css";

Az import sorok meg kell, hogy előzzék az összes szabályt.

Függelék

Értékek

Egész és valós számok

Az egész számok 0-9 közötti számjegyek.

A valós számok lehetnek egész számok, 0 vagy több számjegy, amelyet egy pont, azt pedig újabb számjegyek követnek.

Az egész és a valós számokat megelőzhetik (-) vagy (+) karakterek.

Relatív hosszértékek

em: a releváns karakter mérete
ex: a releváns karakter x magassága
px: pixel vagy képpont

Például:

p {
  font-size: 1em
}

Abszolút hosszérték

cm: centiméter
mm: milliméter
in: inch - hüvelyk 25,4 mm
pc: pica - 12 pont, vagyis 3/18 hüvelyk, kb. 4,23 mm
pt: point - 1/72 hüvelyk, kb. 0,352 mm

Százalékérték

p {
  font-size: 120%;

Űrlap

<form id="egy">
    <label for="user">Felhasználónév:</label>
    <input type="text" name="user" /><br />
 
    <label for="pass">Jelszó:</label>
    <input type="password" name="pass" /><br />
    <input type="submit" value="Bejelentkezés" />
<form>

form#egy label {
    width: 200px;
    display: inline-block;
}

Az input elemek tördelése a br elem mellett lehet div elemmel vagy p elemmel. Ez utóbbiról tudni kell, hogy nagyobb távolságot hagy a kettő között.

Űrlap 2

#urlap {
   text-align: center; 
}
 
form {
 background-color: #996600;
 padding: 15px;
 display: inline-block;
 border-radius: 5px;
}
 
fieldset {
 border-style: none;
 background-color: orange;
 border-radius: 5px; 
}
 
legend {
 color:white;
 background-color: blue;
 font-family: sans-serif;
 border-style: none;
 border-radius: 5px;
 text-align: center;
 padding: 3px;
}
 
form#egy label {
 display: inline-block;
 width: 100px;
 text-align: left;
}

<div id="urlap"> 
<form id="egy">
<fieldset>
<legend>Azonosítás</legend>
 
 
<label for="user">Felhasználónév: </label><input type="text" name="user" required />
<br>
 
 
<label for="pass">Jelszó: </label><input type="password" name="pass" >
<br>
 
<div>
<input type="submit" value="Bejelentkezés" />
</div>
 
</fieldset>
</form>
</div>

Táblázat beállítások

table, th, td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
}
 
table, th, td {
    border: 1px solid blakc;
}

td {
    width: 50px;
    background-color: yellow;
}

Cella közötti, cella és tartalma közötti tér

Cellák közötti tér

table {
    border-spacing: 20px;
}

A cella és tartalma közötti tér

td {
    padding: 50px;
}

A szegély összeolvasztása vagy elkülönítése

table {
    border-collapse: collapse;
}

Lehetséges értékei:

collapse	A szegély összeomlik egyetlen vonallá, amikor lehetséges. (border-spacing és a empty-cells beállítások nem működnek)
separate	A szegély különálló (border-spacing és empty-cells beállítások működnek). Alapértelmezett
inherit	A border-collapse tulajdonság a szülő elemtől öröklött.

Cella tartalmának színe, igazítása

td {
    text-aling: center;
    color: yellow;
}

Példa

table, td, th {
    border-collapse: collapse;
    border-width:1px;
    border-style: solid;
    border-spacing: 20px;
}
td {
    padding:15px;
 
}

Z-index

<div id="egy" >z-index: 1</div>
<div id="ketto">z-index: 2</div>
<div id="harom">z-index: 3</div>

#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:3;
}
 
#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}
 
#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:1;
}

z-index: 3

z-index: 2

z-index: 1

z-index: 2

z-index: 3

Az utóbbi példában a dobozok z-indexét megfordítottuk:

#egy {
    position: relative; left: 0px; top:0px; width:100px; height:100px; 
    background: #f00;
    z-index:1;
}
 
#ketto {
    position: relative; left: 50px; top:-50px; width:100px; height:100px; 
    background: #0f0;
    z-index:2;
}
 
#harom {
    position: relative; left: 100px; top:-100px; width:100px; height:100px; 
    background: #00f;
    z-index:3;

Informatika

2014. február 23., vasárnap

Mire jó a fieldset és legend elemek?

Vágás

Ál-osztályok

Az ál-osztályok szintaxisa

Példa

Az összes ál-osztály

Számlálók

Mértékegységek

At-szabályok

Függelék

Értékek

Egész és valós számok

Relatív hosszértékek

Abszolút hosszérték

Százalékérték

Űrlap

Űrlap 2

Táblázat beállítások

Cella közötti, cella és tartalma közötti tér

Cellák közötti tér

A cella és tartalma közötti tér

A szegély összeolvasztása vagy elkülönítése

Cella tartalmának színe, igazítása

Példa

Z-index

12B 2024.04.16. helyettesítés

Összes oldalmegjelenítés

Visszaélés jelentése