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
13 questions
PROCESOS TERMODINÁMICOS
Presentation
•
9th - 12th Grade
14 questions
Exploring Triangles: Sides and Angles
Presentation
•
9th - 12th Grade
11 questions
Spanish Adjective Placement
Presentation
•
9th - 12th Grade
11 questions
Last Three Steps of Bible Reading
Presentation
•
9th - 12th Grade
12 questions
La Famille
Presentation
•
10th - 12th Grade
10 questions
Stoichiometry Lesson
Presentation
•
9th - 12th Grade
12 questions
Equitable or not?
Presentation
•
9th - 12th Grade
11 questions
Solving absolute value equations
Presentation
•
9th - 11th Grade
Popular Resources on Wayground
20 questions
STAAR Review Quiz #3
Quiz
•
8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
12 questions
What makes Nebraska's government unique?
Quiz
•
4th - 5th Grade
Discover more resources for Computers
7 questions
Warm Up 04.01.2026
Quiz
•
9th Grade
50 questions
STAAR English 2 Review
Quiz
•
10th Grade
20 questions
Graphing Inequalities on a Number Line
Quiz
•
6th - 9th Grade
20 questions
Figurative Language Review
Quiz
•
10th Grade
20 questions
Linear Functions Review
Quiz
•
9th Grade
30 questions
English 1 STAAR Review
Quiz
•
9th Grade
10 questions
Pythagorean Theorem and its Converse
Quiz
•
7th - 9th Grade
14 questions
Ecological Succession: Primary and Secondary
Quiz
•
9th Grade