Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:feladatok:css

< Feladatok

CSS feladatok

  • Szerző: Sallai András
  • Copyright © Sallai András, 2014, 2016, 2019
  • Licenc: GNU Free Documentation License 1.3

Bevezetés

Természetesen nem csak CSS, de HTML feladatok is egyben.

Háttér beállítása

Feladat 0001

Készítsen weblapot index.html néven. A weblap egy kettes szintű címsort tartalmazzon.

Állítsa be a következőket:

  1. Állítson be egy tetszőleges képet háttérnek.
  2. A háttérkép 220 pixel széles legyen.
  3. A háttérkép csak a jobb felső sarokban legyen.

Mentés könyvtára: torma

Feladat 0002

Készítsen weblapot. Tartalma egy darab egyes szintű címsor, amiben a Lorem szó szerepel. Egy bekezdés, amelyben a következő szöveg:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Állítsa be a következőket:

  1. Állítson be egy tetszőleges képet háttérnek.
  2. A háttérkép 180 pixel széles és magas legyen.
  3. A háttérkép csak vízszintesen, felül legyen, egymás után kirakva.

Mentés könyvtára: vonik

Szöveg és font stílus

Feladat 0101

Adott a következő szöveg:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam condimentum blandit sapien non volutpat. Vivamus 
posuere massa euismod libero varius et mollis velit 
aliquam. Donec ultrices placerat consequat. Phasellus 
sit amet est non lorem vestibulum placerat iaculis 
vitae justo. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Vivamus bibendum feugiat eleifend. 
Duis tincidunt tempus eros, ac laoreet magna suscipit 
eu. Praesent quis facilisis lacus. Quisque imperdiet 
egestas lectus dapibus iaculis. Morbi egestas nulla 
eu magna sagittis vitae eleifend lacus sodales. 
Nullam vel nunc nisl. Vestibulum eget sapien eros. 
Donec ac pellentesque odio. In hac habitasse platea 
dictumst.

Oldja meg CSS segítségével a következő feladatokat:

  1. Az első mondat legyen kiskapitális.
  2. A második mondat legyen aláhúzott.
  3. A harmadik mondat betűi legyenek 20 pixel nagyságúak.
  4. A negyedik mondat betűinek színe legyen a következő: #800080.
  5. Az ötödik mondat összes betűje legyen félkövér.
  6. A hatodik mondat első betűje legyen cursive fontcsaláddal megadva.
  7. Az utolsó mondat betűi legyenek árnyékoltak.
  8. A bekezdés első sora legyen 32 pixeles behúzással.

Feladat 0102

Adott a következő szöveg:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam condimentum blandit sapien non volutpat. Vivamus 
posuere massa euismod libero varius et mollis velit 
aliquam. Donec ultrices placerat consequat. Phasellus 
sit amet est non lorem vestibulum placerat iaculis 
vitae justo. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Vivamus bibendum feugiat eleifend. 
Duis tincidunt tempus eros, ac laoreet magna suscipit 
eu. Praesent quis facilisis lacus. Quisque imperdiet 
egestas lectus dapibus iaculis. Morbi egestas nulla 
eu magna sagittis vitae eleifend lacus sodales. 
Nullam vel nunc nisl. Vestibulum eget sapien eros. 
Donec ac pellentesque odio. In hac habitasse platea 
dictumst.

Oldja meg CSS segítségével a következő feladatokat:

  1. Az első mondat, második szava legyen 24 pixel méretű.
  2. Az első mondat, harmadik szava legyen aláhúzva.
  3. A harmadik és a negyedik mondat legyen áthúzva.
  4. A harmadik és a negyedik mondat betűi legyenek sárga színűek.
  5. A negyedik mondat háttérszíne legyen kék, szöveg színe fehér.

Dobozolás

Feladat 0201

  1. Írja a nevét div elemek közzé.
  2. A doboznak állítson be solid szegélyt.
  3. A doboz szegélye legyen 3 pixeles.
  4. A doboz szegélye legyen #800080 színű.
  5. A doboz belső margója legyen 17 pixel.
  6. A doboz külső margója legyen 10%.

Feladat 0301

Készítse el a következő weboldalt:

Feladat 0302

Készítse el a következő weboldalt:

Feladat 0303

Készítse el a következő weboldalt:

Feladat 0304

Készítse el a következő weboldalt:

Feladat 0305

Készítse el a következő weboldalt:

Feladat 0306

Készítse el a következő weboldalt:

Ügyeljen arra, hogy a legfelső szinten két doboz van.

Feladat 0307

Készítse el a következő weboldalt:

Feladat 0308

Készítse el a következő weboldalt:

Feladat 0309

Készítse el a következő weboldalt:

Feladat 0310

Készítse el a következő weboldalt:

Feladat 0311

Készítse el a következő weboldalt:

Feladat 0312

Készítse el a következő weboldalt:

Feladat 0313

Készítse el a következő weboldalt:

Ügyeljen arra, hogy a két oldalt látható ismétlődő képek, háttérként vannak beállítva. Két háttárkép van. Az egyik baloldalon egymás alatt ismétlődik, a másik jobboldalon egymás alatt ismétlődik. A háttérképek mérete 100px 100px.

Feladat 0314

Készítse el a következő weboldalt:

Ügyeljen arra, hogy a két kör egy-egy doboz, nem használjon képeket.

Feladat 0315

Készítse el a következő weboldalt:

A weboldal rugalmas elrendezésű, ezért a bekezdések szövegei másként jelenhetnek meg.

Speciális

Feladat 1001

Háttérformázás.

Készítsen egy html oldat, amely háttere egy vízszintesen kirakott háttérkép.

A CSS inline legyen megvalósítva.

Feladat 1002

Szövegformázás.

Készítsen weblapot, amelyre beilleszti a Lorem ipsum című szöveget három bekezdésen keresztül. A cím a „Lorem ipsum” legyen.

A CSS internal módon legyen meghatározva.

Komplex

1101

Készítsen egy weboldalt egy könyvkiadó számára.

1102

Készítsen egy weboldalt dolgozók nyilvántartására.

  • A nyilvántartást csak azonosítás után lehessen elérni.
  • Lehessen dolgozót
    • felvenni
    • törölni
    • módosítani
oktatas/web/feladatok/css.txt · Utolsó módosítás: 2019/12/04 11:33 szerkesztette: admin