Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

CSS A CSS bemutatása. CSS CSS: Cascading Style Sheet / Rangsorolt stíluslapok A számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú.

Hasonló előadás


Az előadások a következő témára: "CSS A CSS bemutatása. CSS CSS: Cascading Style Sheet / Rangsorolt stíluslapok A számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú."— Előadás másolata:

1 CSS A CSS bemutatása

2 CSS CSS: Cascading Style Sheet / Rangsorolt stíluslapok A számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.

3 Előnyei Felhasználói szempont: - kisebb adatmennyiség, szebb, gyorsabb Fejlesztői szempont: - Több formázási lehetőség. - Egyedibb weboldalak készítése - Akár egy fájl megváltoztatásával egy egész weboldal rendszer megjelenését módosíthatjuk.

4 A CSS nyelvtana A CSS-ben a stílusokat kijelölők és meghatározások segítségével lehet megadni. A kijelölők többnyire olyan HTML tagok melyek megadják, hogy a stílus a HTML lap mely elemeire vonatkozzon. Pl.: A p tag. Ami a weboldalon lévő összes bekezdést kijelöli.

5 A CSS nyelvtana Példa kijelölőre és meghatározásra. p{ font-family: Arial, Helvetica, sans-serif; font-size: medium; color: red; } Egy elemnek több tulajdonsága is beállítható egyszerre, ilyenkor az egyes meghatározások felsorolásszerűen követik egymást

6 A CSS nyelvtana Speciális kijelölők: - azonosító kijelölő: Egyszer használható egy oldalon. Általában olyan elemeknél használjuk ahol egy szerkezeti egységként szeretnénk formázni. PL.: fejléc, lábléc… jele:# meghívni az ‘ID’ attribútummal lehet. CSS: #lablec { color: green; } HTML:

7 A CSS nyelvtana Speciális kijelölők: - osztálykijelölő: Bármennyiszer használható egy oldalon. jele:.

8 A CSS nyelvtana CSS: H1 {color: grey}.kiem {font-size: 120%} HTML-ben: címsor kiemeléssel a közepén

9 Példa (HTML) bekezdés kijelölés Hello World!

10 Példa: (CSS) Bekezdés kijelölés p{ font-size=36pt; color=green; }

11 Példa HTML azonosító kijelölés Hello World!

12 Példa CSS azonosító kijelölés #szoveg{ font-size=36pt; color=green; }

13 Példa HTML osztály kijelölés Hello World!

14 Példa CSS osztálykijelölés.szoveg{ font-size=36pt; color=green; }

15 Néhány érték text-indent – bekezdés behúzás letter – spacing – betűköz word – spacing – szó távolság text – decoration – szöveg minta (overline,underline,line-through,blink) padding – tartalom margón belüli elhelyezkedése (left,right,top,bottom) font-weight: bold,normal,” ”

16 Body background-image: url(hatter.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; (repeat-x, repeat-y, no-repeat)

17 Keretek Border: 2px solid blue; További értékek: dashed, dotted border-left,right,top,bottom

18 Margók Margin tulajdonság Margin-left,right,top,bottom Margin-left: 10px

19 Pozícionálás position Értékei: static: eredeti hely relative: eredeti helyen, eltolás absolute: szabad eltolás fixed: rögzített

20 Egérkurzor Cursor Értékek: move, help, wait, text, e-resize, s- resize, se-resize, sw-resize, ne- resize, nw-resize, URL

21 Lebegés Kép igazítása szöveghez Float Értékek: left, right, none

22 Alelemek, alosztályok, alazonosítók Egy -en belüli osztályban egy másik osztályra való hivatkozás:.osztaly1.osztaly2 Azonosító: #azonosito1 #azonosito2 Elem: table p Vegyes:.osztaly1 #azonosito1

23 További kijelölők.. Leszármazottkijelölő body h1 { color: blue; } Gyermekkijelölő div > p { color:blue; }

24 További kijelölők Egyszerű jellemző kijelölő h1[class] { color: blue; } Pontos jellemzőérték kijelölő h1[class=„érték”] { color: blue; }

25 További elemek : hover: egér objektum felé kerül : after: elem utáni tartalom (content: „példa”) : before: elem előtti tartalom : link: azok a linkek, melyeket még nem kerestünk fel : visited: azok a linkek, melyeket már felkerestünk

26 További lehetőségek.. outline-style: dashed, dotted, solid bekezdés körvonala outline-width: 0.. vonal vastagsága padding-bottom: belső margó alsó részének a vastagsága. További fajtái: left, right, top word-spacing: 20px szavak közötti távolság


Letölteni ppt "CSS A CSS bemutatása. CSS CSS: Cascading Style Sheet / Rangsorolt stíluslapok A számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú."
Google Hirdetések