Informatika1-2012/Eloadas7

HTML5 folytatás

Egyszerű karakterformázás

<b>	Vastag betű
<i>	Dőlt betű
<mark>	Kiemelt <mark>szöveg</mark>
<pre>	Előformázott szöveg
<s>	Áthúzott szöveg
<small>	Kisbetű
<strong>	Vastag betű
<sub>	Alsó index
<sup>	Felső index
<u>	Aláhúzott

Néhány különleges karakter

karakter	html	angol megnevezés
<	&lt;	less-than
>	&gt;	greater-than
"	&quot;	quotation mark
&	&amp;	ampersand
©	&copy;	copyright
®	&reg;	registered trademark
™	&trade;	trademark
°	&deg;	degree
€	&euro;	euro
±	&plusmn;	plus-or-minus
‰	&permil;	per mille
×	&times;	multiplication
	&nbsp;	non-breaking space

Néhány új elem

Ezeket még nem minden böngésző támogatja.

<article>	Szövegrész. Például blog post, forum post, comment
<audio>	Hang anyag
<canvas>	Terület grafikai elemekhez (például javascript által)
<nav>	Navigációs linkek egy oldalon
<section>	A dokument egy részének egysége
<video>	Mozgókép tartalom

CSS

A HTML oldal formázására, illetve elrendezésére szolgáló eszköz.
CSS: stílus(lap)nyelv ( CSS = Cascading Style Sheets, vagyis „rangsorolt” vagy „egymásba ágyazott”, „többszintű” stb. stíluslapok)

A CSS3 alkalmazásával egységesebb szerkezetű és gyorsabban működő weblapok készíthetők.
Lehetőség van (lesz) folyamatos színátmenetek, többhasábos elrendezés, animációk, képekből készített szegélyek, stb. alkalmazására.

A CSS kód lehetséges helyei:

1. Inline (szövegközi) stílus
   A címke style jellemzőjének értékeivel definiálhatjuk az adott címkére vonatkozó megjelenítést – ezt Pl.:

   <p style="......CSS kódok.....">bekezdés szövege</p>

   Nem túl gyakori megoldás.

2. Belső vagy beágyazott stílus
   A HTML dokumentum fejrészében kell elhelyezni:

   <style>
       CSS formázás kódolása
   </style>

   Akkor érdemes használni, ha a formázás csak egy oldalt érint.

3. A szokásos eljárás az egy webhelyen belüli összes HTML oldalhoz külső stíluslap(ok) kapcsolása:

   <link rel="stylesheet" href=".......css">

   A link általában egy lokális fájlra mutat.

4. A külső stíluslap(ok) kapcsolásának a másik módja az @import utasítás használata:

   <style>
   @import url(http://www................)
   </style>

Megadhatjuk

• egy elem stílusát:

p { CSS kód }

• elemek csoportjának a stílusát:

h1, h2 { CSS kód }

• elem stílusát (egyedi) azonosító szerint:

#stilus1 { CSS kód }
#stilus2 { más CSS kód }

ahol a cimkék megadásának módja:

<p id="stilus1">............</p>
<p id="stilus2">............</p>

• elem stílusa ami (egyedi) azonosítójú elem "része":

#stilus1 p { CSS kód }
#stilus2 p { más CSS kód }

a HTML kódban:

<div id="stilus1">
    <p>............</p>
</div>
<div id="stilus2">
    <p>............</p>
</div>

• elemek csoportjának a stílusát osztály szerint:

p.stilus1 { CSS kód }
p.stilus2 { más CSS kód }

vagy különböző tipusú elemek esetén

.stilus1 { CSS kód }
.stilus2 { más CSS kód }

a HTML kódban:

<p class="stilus1">............</p>
<p class="stilus2">............</p>
<p class="stilus1">............</p>

• pseudo-osztály esetén:

a:link { CSS kód }
a:visited { más CSS kód }  

Betűtípusok

font	font-style font-variant font-weight font-size/line-height font-family
font-family	family-name generic-family
font-size	small | medium | large length
font-style	normal | italic
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

például

h2 { font-family: ”Comic Sans MS”, cursive;
font-weight: normal;
font-stretch: normal;
font-style: italic;
font-variant: small-caps;
font-size: 20px; }

Szövegek

text-align	left | right | center | justify
text-indent	length
text-decoration	none | underline | overline | line-through | blink
text-outline	none color length
text-shadow	none color length

Dobozok (box pl. táblázat cella)

height	auto length %
width	auto length %
margin	margin-top margin-right margin-bottom margin-left
margin-bottom	auto length %
padding	padding-top padding-right padding-bottom padding-left

margin a border-en kívül van;
padding a border-en belül

Border

border	border-width border-style border-color
border-color	color
border-width	thin | medium | thick length
border-style	none | hidden | dotted | dashed | solid | double
border-bottom	border-bottom-width border-style border-color
border-radius	border-bottom-right-radius border-bottom-left-radius border-top-left-radius border-top-right-radius
border-top-right-radius	length

Listák

list-style	list-style-type list-style-position list-style-image
list-style-image	none url
list-style-position	Inside | outside
list-style-type	none | asterisks | box | check | circle | diamond | disc | hyphen | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | lower-greek | lower-latin | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | footnotes

Hasábok

columns	column-width column-count
column-count	auto number
column-width	auto length
column-gap	normal length

Színek

color	inherit color
opacity	inherit number

Például RGB színmódban a normál vörös:

color: #ff0000;
color: #f00;
color: rgb ( 100%, 0%, 0% );
color: rgb ( 255, 0, 0 );
color: red;

Illetve RGBA színmódban a vörös, ha nem teljesen fedi az alatta lévő színt:

color: rgba ( 100%, 0%, 0%, 0.8 );
color: rgba ( 255, 0, 0, 0.8 );