Tananyag_CSS_mindenes

Presentation

•

Computers

•

9th - 12th Grade

•

Practice Problem

•

Hard

Diána Madar

Used 5+ times

FREE Resource

15 Slides • 0 Questions

CSS
Cascading Style Sheets
Lépcsőzetes/Rangsorolt stíluslap

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.

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.

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.

<! 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

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

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.

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

CSS kód kinézete

ELEM
{
TULAJDONSÁG: ÉRTÉK;
}

-->

p
{
color: red;
}

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

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

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

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

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

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

Pythagorean Theorem

Lesson

•

8th - 12th Grade

14 questions

Artigos definidos e Indefinidos - Inglês

Lesson

•

9th - 12th Grade

14 questions

El futuro

Lesson

•

9th - 12th Grade

10 questions

Cara Praktis Mengubah PDF ke WORD

Lesson

•

10th - 12th Grade

14 questions

World Wide Web: CC CS #30

Lesson

•

9th - 12th Grade

10 questions

C++ Operators

Lesson

•

9th - 12th Grade

10 questions

тест для ПО-231

Lesson

•

KG - University

10 questions

Law of Sine

Lesson

•

9th - 12th Grade

Popular Resources on Wayground

7 questions

History of Valentine's Day

Interactive video

•

4th Grade

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

15 questions

Valentine's Day Trivia

Quiz

•

3rd Grade

20 questions

Main Idea and Details

Quiz

•

5th Grade

20 questions

Context Clues

Quiz

•

6th Grade

Discover more resources for Computers

10 questions

Exploring Valentine's Day with Charlie Brown

Interactive video

•

6th - 10th Grade

18 questions

Valentines Day Trivia

Quiz

•

3rd Grade - University

20 questions

El Verbo IR Practice

Quiz

•

9th Grade

20 questions

-AR -ER -IR present tense

Quiz

•

10th - 12th Grade

10 questions

Valentine's Day History and Traditions

Interactive video

•

6th - 10th Grade

20 questions

Graphing Inequalities on a Number Line

Quiz

•

6th - 9th Grade

20 questions

Exponent Properties

Quiz

•

9th Grade

21 questions

Presidents Day Trivia

Quiz

•

6th - 12th Grade