Tananyag_CSS_mindenes
Presentation
•
Computers
•
9th - 12th Grade
•
Practice Problem
•
Hard
Diána Madar
Used 5+ times
FREE Resource
15 Slides • 0 Questions
1
CSS
Cascading Style Sheets
Lépcsőzetes/Rangsorolt stíluslap
2
A weboldalak megjelenésén túl beállíthatunk optimális megjelenést, stíluslapokat készíthetünk.
HTML= strukturális réteg (váz)
CSS = reprezentációs réteg (külső megjelenés)
Legfrissebb stílusszabvány CSS3
Megjegyzés készítése: /* */ --> lehet egy vagy több soros.
3
Stíluslapok előnyei
haladó formázási és elrendezési lehetőségeket nyújt
az oldalak egységesen és konzisztensen jeleníthetőek meg
a weboldalak egyszerűen karbantarthatóak
haladó akadálymentességi technikák alkalmazhatóak
a különböző médiatípusok eltérően jeleníthetőek meg.
Háttérkép beállítása; Háttérszín beállítása; Szövegméret beállítása; Szövegszín beállítása; Betűtípus meghatározása; Képek elhelyezkedésének meghatározása; Szövegigazítás változtatása; Tartalmak keretezése; Margó beállítása; stb
A CSS leválasztja a formázást a HTML-től, emiatt egy sokkal könnyebben átlátható rendszert alkot.
4
Stíluslapok típusai
A szerző által készített stíluslapok: a fejlesztő határozza meg a honlap kinézetét
A felhasználói stíluslapok: a böngészőprogramokba beállítható egyéni stíluslapok, ezt jellemzően technológiailag megkülönböztetett emberek miatt használjuk.
Böngészőben definiált stíluslapok: a böngészőben alapértelmezett megjelenésért felelnek.
5
<! DOCTYPE HTML>
<html lang="hu">
<head>
<meta charset="UTF-8">
<tilte>CSS példa</tile>
<stlye>
h1 {
color: red; }
</stlye>
</head>
...
Beágyazott stíluslap
<! DOCTYPE HTML>
<html lang="hu">
<head>
<meta charset="UTF-8">
<tilte>CSS példa</tile>
<link rel="stylesheet" type="text/css" href="alap.css">
</head>
...
Külső stíluslap beillesztése HTML taggel
Stíluslapok csatolási lehetőségei
6
CSS selectorok (kijelölők)
TYPE paraméter:
Típus vagy elemkijelölőt akkor érdemes használni, ha minden adott típusú elemre ugyanazt a stílust szeretnéd beállítani. Pl: minden címsort egységesen szeretnél beállítani.
A TYPE SELECTOR KÓDJA MINDEN ESETBEN MEGEGGYEZIK A FORMÁZNI KÍVÁNT RÉSZ HTML <> KÓDJÁVAL!!!
Pl.: h1{
text-align: center;
}
p{
font-weight: bold;
}
7
CSS selectorok (kijelölők)
CLASS selector (osztálykijelölő):
Akkor van rá szükség, ha egy stílust az elemek meghatározott csoportjűra kell beállítani.
A TYPE selectorral ellentétben a class selector egy PONT (.) vezeti be, ezt az osztály neve követi. Az osztálynév tartalmazhat betűket, számokat, aláhúzásokat és kötőjeleket is, azonban minden esetben betűvel kell kezdődniük.
Az osztályokat a HTML állományokban a CLASS PARAMÉTERREL hozhatjuk létre., és egy elemet akár több osztályban is használhatunk/besorolhatunk.
Szükség esetén más szelektorral is társíthatóak, több elemlél is megadhatod ugyanazt az osztálynevet más-más tulajdonsággal.
8
CSS selectorok (kijelölők)
ID SELECTOR (azonosítókijelölő):
A HTML állomány elemeihez szükség esetén egyesi azonosítók is rendelhetőek az ID PARAMÉTERREL. Értékeként egy nevet szükséges adni, nem tartalmazhat szóközt és az oldalon belül egyedinek kell lennie, külön kezeli a kis- és nagybetűket.
Az egyedi azonosítót a CSS oldalon: #-el jelöljük.
Pl.:
HTML
<p id="szines"> Ez a bekezdés más színű</p>
CSS
#szines{
background-color: lightyellow;
}
9
CSS kód kinézete
ELEM
{
TULAJDONSÁG: ÉRTÉK;
}
-->
p
{
color: red;
}
10
Csoportok kijelölése
Ha több elemnél is ugyanaz a deklaráció szerepel, akkor ezeket akár össze is vonhatjuk. A formázni kívánt részekre mutató selectorokat egymástól vesszővel elválasztva adjuk meg.
Pl.:
h1 {
font-family: sans-serif;
}
h2 {
font-family: sans-serif;
}
--> h1, h2{
font-family: sans-serif;
}
11
Betűre vonatkozó CSS szabályok
font-family:Fantasy; - Betűtípus
font-size:50px; - Betűméret
font-weight: bold; - Betűvastagság
text-align:right; - Betű/ Szöveg igazítása
text-shadow: 2px 2px red; - Betű árnyékolás
color:red; - Betűszín
font-style: italic; - Betű stílusa
font-variant: small-caps - Kiskapitális
text-indent: 20px; - Első sor behúzása
letter-spacing: 2pt; - Betű közötti térköz
word-spacing: 2pt; - Szavak közötti térköz
12
Betűre vonatkozó CSS szabályok
text-decoration: overline;- felül húz
text-decoration :underline; - aláhúz
text-decoration: line-through; -betű áthúzva
text-transform: lowercase- csupa kisbetű
text-transform: capitalize- szavak kezdőbetűje nagy
text-transform: uppercase- minden nagy
13
Táblázatra vonatkozó CSS szabályok
border: dashed - szaggatott vonalas
border: dotted - pontos
border: double- dupla
border: groove - térbeli hatású
border: ridge - térbeli hatás visszafele
border-radius - lekerekíti a keret éleit
padding - belső keret a szöveg körül
14
Felsorolás elemre vonatkozó CSS szabályok
li
{
list-style-type: -> felsorolásjel típusa
}
circle; disc; "&"; decimal; decimal-leading-zero; lower-greek;
upper-alpha; armenian; square
list-style-position: -> felsorolásjel helye
inside
outside
15
Háttérre vonatkozó CSS szabályok
background-color:yellow; - Háttérszín
background-image:url('kep.jpg'); - Háttérkép
width:100px; - kép szélessége
height:200px; - kép magassága
background-repeat: - háttérkép ismétlése
CSS
Cascading Style Sheets
Lépcsőzetes/Rangsorolt stíluslap
Show answer
Auto Play
Slide 1 / 15
SLIDE
Similar Resources on Wayground
11 questions
Sofware y Hardware
Presentation
•
10th Grade
12 questions
Factoring Trinomials using the box/area model
Presentation
•
9th - 12th Grade
8 questions
Lesson 3
Presentation
•
10th - 12th Grade
10 questions
Asesmen Formatif TIK (Excel) X Kuliner
Presentation
•
KG - University
8 questions
HTML Tables
Presentation
•
9th - 12th Grade
8 questions
Membuat Halaman Login Hotspot Mikrotik
Presentation
•
9th - 12th Grade
11 questions
10.1 - Graphing Quadratic Functions (Kozy)
Presentation
•
9th - 12th Grade
10 questions
Affirmative/Negative Words
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
6 questions
PRIDE Always and Everywhere
Presentation
•
12th Grade
20 questions
Lab Safety Quiz
Quiz
•
6th Grade
26 questions
KOR Review Kahoot Questions
Quiz
•
8th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
12 questions
Unit Zero lesson 2 cafeteria
Presentation
•
9th - 12th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
10 questions
Riddles Riddles fun Riddles
Quiz
•
6th - 12th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
