Informatika1-2012/Eloadas7
(Új oldal, tartalma: „<h1>HTML5 folytatás</h1> <h2>Egyszerű karakterformázás</h2> <table> <tr><td><b></td><td>Vastag <b>betű</b></td></tr> <tr><td><i></td><td>Dőlt <i>…”) |
|||
120. sor: | 120. sor: | ||
<h3>Megadhatjuk</h3> | <h3>Megadhatjuk</h3> | ||
<ul> | <ul> | ||
− | <li>egy elem stílusát: | + | <li>egy elem stílusát:</li> |
− | + | ||
− | <li>elemek csoportjának a stílusát: | + | p { ''CSS kód'' } |
− | + | ||
− | <li>elem stílusát (egyedi) azonosító szerint: | + | <li>elemek csoportjának a stílusát:</li> |
− | + | ||
− | #stilus2 { | + | h1, h2 { ''CSS kód'' } |
− | + | ||
− | <p id="stilus2">............</p></pre | + | <li>elem stílusát (egyedi) azonosító szerint:</li> |
− | <li>elem stílusa ami (egyedi) azonosítójú elem "része": | + | |
− | + | #stilus1 { ''CSS kód'' } | |
− | #stilus2 p { | + | #stilus2 { ''más CSS kód'' } |
− | + | ||
+ | ahol a cimkék megadásának módja: | ||
+ | <pre><p id="stilus1">............</p> | ||
+ | <p id="stilus2">............</p></pre> | ||
+ | <li>elem stílusa ami (egyedi) azonosítójú elem "része":</li> | ||
+ | |||
+ | #stilus1 p { ''CSS kód'' } | ||
+ | #stilus2 p { ''más CSS kód'' } | ||
<p>a HTML kódban:</p> | <p>a HTML kódban:</p> | ||
<pre><div id="stilus1"> | <pre><div id="stilus1"> | ||
139. sor: | 146. sor: | ||
<div id="stilus2"> | <div id="stilus2"> | ||
<p>............</p> | <p>............</p> | ||
− | </div></pre | + | </div></pre> |
− | <li>elemek csoportjának a stílusát osztály szerint: | + | <li>elemek csoportjának a stílusát osztály szerint:</li> |
− | + | ||
− | p.stilus2 { | + | p.stilus1 { ''CSS kód'' } |
+ | p.stilus2 { ''más CSS kód'' } | ||
+ | |||
<p>vagy különböző tipusú elemek esetén</p> | <p>vagy különböző tipusú elemek esetén</p> | ||
− | + | ||
− | .stilus2 { | + | .stilus1 { ''CSS kód'' } |
+ | .stilus2 { ''más CSS kód'' } | ||
+ | |||
<p>a HTML kódban:</p> | <p>a HTML kódban:</p> | ||
<pre><p class="stilus1">............</p> | <pre><p class="stilus1">............</p> | ||
<p class="stilus2">............</p> | <p class="stilus2">............</p> | ||
<p class="stilus1">............</p></pre> | <p class="stilus1">............</p></pre> | ||
− | + | ||
− | <li>pseudo-osztály esetén: | + | <li>pseudo-osztály esetén:</li> |
− | + | ||
− | a:visited { | + | a:link { ''CSS kód'' } |
− | + | a:visited { ''más CSS kód'' } | |
</ul> | </ul> | ||
A lap jelenlegi, 2012. november 6., 17:25-kori változata
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 );