Informatika1-2012/Eloadas7

A MathWikiből

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 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 );
Személyes eszközök