[Hungarian] CSS Course - Sapientia University

[Hungarian] CSS Course - Sapientia University

• 1.
  Sysgenic Young minds freshideas Iszlai Zoltán, Csapatvezető CSS, Sapientia MS – December 7, 2015
• 2.
  Tartalom • Bevezető • Beillesztés •Szintaxis • Doboz modell (Box model) • Pozicionálás • A clearfix megoldás • Szelektorok • Méretek • Szinek • Font arculat • Szöveg formázás • Képvágás • Hasznos linkek
• 3.
  Bevezető • A CSSegy stílusleíró nyelv amely HTML vagy XHTML típusu strukturált dokumentumok megjelenítését irja le • A CSS elsődleges célja, hogy szétválassza a dokumentumok megjelenését a tartalomtól • CSS szó lépcsözetes stílusleíró fájl-t jelent
• 4.
  Beillesztés • A HTMLoldalak-hozvaló beillesztéshez több módszerünk van: • Külsö beillesztés: • <link rel=“stylsheet” href=“style.css” media=“scren”> • Inline beillesztés HTML törzs és fejlécbe (nem ajánlott): • <style> … </style> • Inline beillesztés HTML elementekhez (nem ajánlott): • <p style=“color: red;”>…</p> • Dinamikus beillesztés script nyelvel (pl. Javascript): • document.getElementById(‘demo’).style.fontWeight = “bold”;
• 5.
  Szintaxis A CSS szintaxistöbb részböl épül fel: • A szelektrol-ból • A definiciós részböl ( “{“ és “}” ) • Az attributum nevéböl • Az attributum értékéböl • Az attributum elválasztó jeléböl
• 6.
  Doboz modell (Boxmodel) Egy HTML dokumentumban minden téglalap alaku. Minden ilyen doboz-nak, van: • Margója (margin) • Kerete (border) • Helykitöltése (padding) p { background-color: #ff0; padding: 20px; border: 10px solid #008; margin: 20px }
• 7.
  Pozicionálás Egy belsö elempoziciója egy külsö apa ellem poziciójától függ. • position: relative; (APA) • position: absolute; left: 0; top: 0; (GYEREK) • position: static; (APA) • position: absolute; left: - 20px; top: -20px; (GYEREK) • width: auto; overflow: hidden; (APA) • float: left; width: 300px; (GYEREK #1) • float: left; width: 300px; (GYEREK #2)
• 8.
  A clearfix megoldás •Gyakran megesik amikor a gyerek elemeket usztatjuk (float), hogy az apa hirtelen elveszti a magasságát (height: 0) • Erre talalták ki a clearfix módszert, aminek több változata létezik: • .clearfix { width: …px; overflow: hidden; } • .clearfix:after { content: ""; display: table; clear: both; } • .clearfix { overflow: auto; zoom: 1; } • Alternatív megoldás a float kihagyása is • .gyerek { display: inline-block; }
• 9.
  Szelektorok • Elemeket többféle képpen tudunk megfogni: • * {} a csillag szelektor mindent kijelöl • p {} az elem szelektor minden paragrafust kijelol • #id {} az id szelektor az odlalon levö id-t jeloli ki • .class {} az osztály szelektor minden osztály elemet kijelöl • div span {} az apa (div) es a gyere (span)-t jelöli ki • div, span {} a div és span-ot is kijelöli • div + span {} a span’t jelöli ki ami a div után jön • div > span {} a span’t jelöli ki ami rögtön a div-be van esölegesen • :first-child a legelsö gyereket jelöli ki • :first-line a legelsö sort jelöli ki • …
• 10.
  Mértek • Egy elemmértének megszabására több attributum áll rendelkezésünkre: • width – hosszuság (width: 100%; width: auto; width: 250px; ) • min-width, minimalis hosszuság (width: 10%; min-width: 200px; ) • max-width, maximális hosszuság (width: 100%; max- width: 250px; ) • height – szélesség (height: 100%; height: auto; height: 250px; ) • min-height, minimalis szélesség (height: 10%; min- height: 200px; ) • max-height, maximális szélesség (height: auto; max- height: 250px; ) • vertical-align – vertikális pozoció a szövegnél • vertical-align: middle; line-height: 20px; • vertical-align: bottom; • vertical-align: top;
• 11.
  Szinek • Color –egy szöveg szinének meghatározása • color: red; • color: #f00; • color: rgb(255, 0, 0); • color: rgba(255, 0, 0, 0); • color: hsl(120, 60%, 70%) • Background – egy elem hátterének meghatározása • background-color: red; • background-image: url(../images/red.jpg); • background-repeat: repeat-x; • background-attachment: fixed;
• 12.
  Font arculat • Egyuj font megjelenítésére a @font-face-t használjuk • A licensz kell engedélyezze a web-es használatot • @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-opentype, url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'), url('webfont.ttf') format('truetype'), url('webfont.svg#svgFontName') format('svg');} • Használat • body { font-family: 'MyWebFont', Fallback, sans-serif; }
• 13.
  Szöveg formázás • Text-indent:20px; - 20 pixeles indentálás • Text-align: center; középre való szöveg igazítás • Font-family: Arial, Helvetica, sans-serif; a font meghatározása • Font-size: 20px; a font mérete • Font-weight: bold; betü vastagság meghatározása • Font-style: italic; a font stílusának meghatározása • Text-decoration: underline; a font díszítésének a meghatározása • Text-shadow: 2px 2px #ff0000; a font árnyékának meghatározása • Letter-spacing: 1px; a betük közti távolság meghatározása • Word-spacing: 1px; a szavak közti távolság meghatározása • …
• 14.
  Képvágás • A képvágása módszer amin keresztül egy design-ból kiexportáljuk a számunkra fontos képeket • Ezek a kepek lehetnek: • Háttérképek • Iconok • Kisebb illetve nagyobb képek • Transparens képek
• 15.
  Hasznos linkek • CSSszerkesztők: • Sublime text: http://sublimetext.com • Notepad++: http://notepad-plus-plus.org/ • Dreamweaver: http://www.adobe.com/products/dreamweaver.html • Tutoriálok: • W3C schools: http://www.w3schools.com/css/ • Tuts+: http://tutsplus.com • Codeademy: http://www.codecademy.com • Kép vágok (Kép szerkesztők): • Adobe Photoshop • Adobe Fireworks
• 16.
  Kérdések? Köszönöm kedves figyelmeteket!