STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}

Az előadások a következő témára: "STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}"— Előadás másolata:

1 STÍLUSOK Tulajdonságok és értékek

2 Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red} H1 {color: transparent}

3 Hosszúságok megadása div.elso {width: 300px} div.elso {width: 30%} div.elso {width: 2in}(1 inch = 2,54 cm) div.elso {width: 2pt} (1 pont = 1/72 in.) div.elso {width: 2pc}(1 pica = 12 pont) div.elso {width: 5cm} div.elso {width: 5mm}

4 URL megadása body {background-image: url(‘kep/bg.jpg’)

5 Tulajdonságok csoportosítása Betű tulajdonságok Szöveg tulajdonságok Lista tulajdonságok Doboz tulajdonságok Megjelenítési tulajdonságok Hely tulajdonságok Látszólagos kiválasztók

6 Betű tulajdonságok Betűtípus (család, általános család) P {font-family: verdana, sans-serif} Betűméret P {font-size: 12px} P {font-size: xx-small} P {font-size: smaller} Betű stílusa P {font-style: italic} Betű vastagsága P {font-weight: bold} P {font-weight: 300}

7 Szövegtulajdonságok P {color: black} P {text-decoration: underline} P {text-decoration: blink} P {text-transform: capitalize} P {white-space: pre} P {white-space: normal} P {word-spacing: 3px} P {line-height: 10pt}

8 Lista tulajdonságok UL {list-style-type: square} OL {list-style-type: decimal} UL {list-style-image: url(‘potty.gif’)} OL {list-style-position: outside}

9 Háttér tulajdonságok body {background-color: #CC0000} body {background-image: url(‘kep/bg.jpg’) body {background-repeat: repeat-x} body {background-repeat: repeat} body {background-attachment: fixed} body {background-attachment: scroll} body {background-position: top left} body {background-position: 20% 30%}

10 Dobozmodell Tartalom

11 Doboz tulajdonságok P {width: 70%, height: 100px} P {border-width: thin, border-style: solid} P {border-color: red, border-style: none} P {border-bottom-color: red} P {padding: 5px, margin: 10px} P {margin-right: 15px, padding-top: 2px}

12 Megjelenítési tulajdonságok div.rendor {visibility: hidden} div.rendor {visibility: visible} div.rendor {display: none} div.rendor {display: block}

13 Hely megadása div.bal {position: static} div.bal {position: relative, left: 80, top: 100} div.bal {position: fixed, left: 80, top: 100} div.bal {float: left} div.bal {float: none} div.bal {clear: both}

14 Látszólagos kiválasztók Látszólagos elemek (részelem) P:first-line {color: red} P:first-letter {font-size: 14pt} Látszólagos osztályok (elemállapot) A:link {color: yellow} A:visited {color: red} P.gomb:hover {background-color: red} P.gomb:active {background-color: blue}