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
10 questions
3.3 Quadratic Formula
Presentation
•
9th - 11th Grade
11 questions
Balancing, Conservation and Reaction Types Review
Presentation
•
9th - 12th Grade
14 questions
Percent Yield
Presentation
•
9th - 12th Grade
14 questions
Balancing Chemical Equations Review
Presentation
•
9th - 12th Grade
11 questions
EVALUASI & DISKUSI
Presentation
•
10th Grade - University
9 questions
Reference Angle
Presentation
•
9th - 12th Grade
11 questions
Formatarea textului - pagini web
Presentation
•
9th - 12th Grade
13 questions
Types of Chemical Reactions
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
20 questions
Math Review
Quiz
•
3rd Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
10 questions
Identify Fractions, Mixed Numbers & Improper Fractions
Quiz
•
3rd - 4th Grade
Discover more resources for Computers
10 questions
Fact Check Ice Breaker: Two truths and a lie
Quiz
•
5th - 12th Grade
10 questions
Video Games
Quiz
•
6th - 12th Grade
10 questions
Logos
Quiz
•
6th - 9th Grade
10 questions
Test Your Knowledge with 15 Fun Trivia Questions
Interactive video
•
6th - 10th Grade
15 questions
Memorial Day Trivia
Quiz
•
KG - 12th Grade
21 questions
Factoring Trinomials (a=1)
Quiz
•
9th Grade
12 questions
Name that Candy
Quiz
•
KG - 12th Grade
22 questions
Regular Preterite -AR-ER-IR-
Quiz
•
12th Grade