CSS A CSS bemutatása.

Slides:



Advertisements
Hasonló előadás
Objektumok a Word-ben Pék Ágnes © 2009.
Advertisements

HTML nyelv.
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
A webprogramozás alapjai B282
Stíluslapok (CSS) a webfejleszétben
Bekezdésformázás Név: Szarvas Nóra 8/a Felkészítő tanár: Salamon Róza
FRAME-k (keretek). FRAME-k A frame-ek (keretek) segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több webes dokumentumot a képernyőn. Fejlec.html.
ELTE IK, Web-fejlesztés I. kurzus 1. 2  Az a HTML állomány, amelyet átalakítunk, a következő címről letölthető: 
CSS médiatípusok - példák
Honlap készítés Érdekességek.
Stílus, mesteroldal, témák
A webprogramozás alapjai B282
HTML nyelv.
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}
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
Készítette: Rummel Szabolcs
Dokumentum.
Szöveg egységei, gépelés
Hernyák Zoltán XML és HTML.
OLDALSZERKEZET ELEMEK 1. A TAG A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről (pl..)
Készítette: Nagy-Szakál Zoltán 2007.
Készítette: Danka Zsuzsa (CX7ASG)
A HTML alapjai Havlik Barnabás Készítette:
HTML dokumentum felépítése
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.
HTML oldal felépítése Készítette: Pataki Arnold
Bevezetés a Stíluslapok használatába - gyakorlati feladatsor
Webszerkesztés Stíluslapok (CSS).
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
JavaScript a gyakorlatban
CSS.
Buris Katalin V. földrajz - informatika
A szövegszerkesztés alapjai
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
XHTML – a tanultak összefoglalása
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
A <DIV> tag és formázás CSS-sel
HTML nyelv.
Közzététel a Weben. Film közzététele.
Hyper Text Markup Language
Hyper Text Markup Language
Honlap készítés 4. óra.
Web-grafika II (SVG) 4. gyakorlat
Szövegszerkesztés Alapfogalmak.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.
SZÖVEGSZERKESZTÉSI ALAPISMERETEK Formázások összefoglalás
Készítette: Turócziné Kiscsatári Nóra
Az NVU webszerkesztő program
XHTML és CSS Webszerkesztés stílusosan
Html nyelv (HyperText Markup Language)
Bekezdések formázása 1..
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Weblapkészítés alapjai
Gazdasági informatikus - Szövegszerkesztés 1 Bekezdések formázása 3.
Java web programozás 2..
SZÖVEGSZERKESZTÉS IV. ~ BEKEZDÉSFORMÁZÁS ~
A Mozilla magyar nyelvű szerkesztőjének használata
A <DIV> tag és formázás CSS-sel
Informatikai rendszerek
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Fejlett Programozási Technikák 2.
CSS Cascading Style Sheet HTML.
Formázási műveletek.
Cascading Style Sheet.
JavaScript a böngészőben
Html parancsok.
Táblázatok A táblázat megadása a tag használatával lehetséges. A és tageken belül: a és tagek között adhatjuk meg a.
Adatfeldolgozási ismeretek 15. ML osztály részére 2017.
Előadás másolata:

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ú strukturált dokumentumok megjelenését írja le.

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.

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.

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

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: <ID=lablec>

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

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

Példa (HTML) bekezdés kijelölés <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p> Hello World! </p> </body> </html>

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

Példa HTML azonosító kijelölés <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p id="szoveg"> Hello World! </p> </body> </html>

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

Példa HTML osztály kijelölés <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <p class="szoveg"> Hello World! </p> </body> </html>

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

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,”400-700”

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

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

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

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

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

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

Alelemek, alosztályok, alazonosítók Egy <div>-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

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

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; }

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

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