Informatika1-2012/Eloadas7
Tartalomjegyzék |
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 |
<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 |
---|---|---|
< | < | less-than |
> | > | greater-than |
" | " | quotation mark |
& | & | ampersand |
© | © | copyright |
® | ® | registered trademark |
™ | ™ | trademark |
° | ° | degree |
€ | € | euro |
± | ± | plus-or-minus |
‰ | ‰ | per mille |
× | × | multiplication |
| 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:
- Inline (szövegközi) stílus
A címkestyle
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.
- 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.
-
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.
-
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 }
h1, h2 { CSS kód }
#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>
#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>
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>
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 );