CSS tutorialok

**NB.** · 2010-07-13, 18:20

Bár a tutorial projekt meghalt, azért (hátha feléled), jöhetnek ide CSS tutorialok.

Kezdem eggyel:

Dupla keretek létrehozása.

--VÁZLAT--

A probléma: egy div-nek egy sima CSS keretet könnyen lehet adni, viszont a kétszeres (pl. sötétszürke kívül, világos szürke belül) létrehozása "kevésbé evidens.
A módszer:
1. A HTML-ben egy egyszerű DIV létrehozása.
2. A div-nek beállítani a tulajdonságait.
3. Végül pedig a :before-nak a tulajdonságait.

--RÉSZLETES MEGOLDÁS--

1. Új HTML lap létrehozása vagy a régi szerkesztése. Felteszem, hogy újat hozunk létre.
2. A BODY részbe egy

Kód:

<div id="valami"></div>

behelyezése.
3. Tulajdonságok adása a valami elemnek (nem kötelező). Néhány ajánlott példa, ami akár javíthatja is a hatást:
a) Háttér: pl.

Kód:

background: #f4f4f4;

b) Igazítás: pl.

Kód:

margin: 60px auto;

vagy top és left alkalmazása.

Fontos:
a) Méretek (tetszőlegesen megadható):

Kód:

width: 200px;  
height: 200px;

b) Keret:

Kód:

border: 1px solid #bbbbbb;

A dupla kerethez a következő kódot kell beilleszteni:

Kód:

#valami:before {  
border: 1px solid white;  
content: '';  
width: 198px;  
height: 198px;  
position: absolute;  
}

A lényeg a before, a width és a height (ezt így kell kiszámolni: a valami div értékei- a keret*2, és a content üressége.

Aztán bocs, ha rossz helyre írtam.

Hasonló témák:

**NB.** · 2010-07-13, 18:20

Ha tripla is kell, akkor:

Kód:

#valami:after {  
content: '';  
position: absolute;  
width: 196px;  
height: 196px;  
border: 1px solid #bbbbbb;  
left: 1px; top: 1px;  
}

A szélesség-magasság kiszámolása megint hasonló, a content ugyanaz, a before after lett. A border szabadon változtatható.

Az egész egy angolról fordítás. Az videó, úgyhogy akik látni szeretnék a kódot fejlődés közben, ott nézhetik meg (igen, nem volt kedvem magyarra fordított videót készíteni.)

**Emphus** · 2010-07-14, 02:52

Nem tudom pontosan, hogy érted ezt a dupla/tripla keretet, de szerintem könnyedén megoldható úgy is, hogy két/három divet pakolsz egymásba. Persze, ez így sokkal elegánsabb (a Te verziód), csak azt szeretném jelezni, hogy szerintem nem lehet rá azt mondani, hogy nem túl evidens, mert egy ilyen megoldás adja magát.

Ha pedig másfajta a keret, akkor bocsi, de én dupla/tripla keretben nem látok semmi extrát.

**lexxx7** · 2010-07-14, 08:25

Ez a pdf az alapokról szól, de indítónak egész jó. Igaz, 2004-es...

hXXp://www.bibl.u-szeged.hu/inf/szakdoli/2004/rimar/css_szakdolgozat.pdf

**NB.** · 2010-07-14, 10:45

Emphus eredeti hozzászólása

Nem tudom pontosan, hogy érted ezt a dupla/tripla keretet, de szerintem könnyedén megoldható úgy is, hogy két/három divet pakolsz egymásba. Persze, ez így sokkal elegánsabb (a Te verziód), csak azt szeretném jelezni, hogy szerintem nem lehet rá azt mondani, hogy nem túl evidens, mert egy ilyen megoldás adja magát.

Ha pedig másfajta a keret, akkor bocsi, de én dupla/tripla keretben nem látok semmi extrát.

Én se, a divek logikusabbak, csak ez sz'tem szebb módszer.

**Nero** · 2010-07-14, 15:25

Ebben a témában a tutorial.hu oldal kódolás menüpontot ajánlanám tanulmányozásra ami magába foglalja a css témakörét is...

**oszti** · 2010-07-14, 19:22

Két hasonló megoldással is találkoztam:
http://net.tutsplus.com/tutorials/ht...th-simple-css/
http://www.evanbyrne.com/article/fan...-image-borders
Egy hátránya van IE nem kezeli az after, before tagokat.

Egy másik remek alkalmazása, amit már a weblink.hu-ra is beimplementáltam, hogy a meglátogatott linkeket meg lehet jelölni.

Mentsétek el valami.html-ként, indítsátok el, és nyomjatok a linkekre:

Kód:

<HEAD>
 <STYLE type="text/css">
  a:visited:after {content:  "\2713 ";}
 </STYLE>
</HEAD>
<BODY>
 <a href="http://www.weblink.hu" target=_blank>weblink</a>
 <a href="http://www.google.hu" target=_blank>google</a>
 <a href="http://www.bing.hu" target=_blank>Bing</a>
</BODY>

**edem** · 2010-07-17, 16:06

Szerintem ez az utóbbi nem igazán jó, még a végén valaki ezt jegyzi meg. A CSS-t külön file-ban szokás tárolni, a tag-ek neveit meg régóta nem írjuk nagy betűvel.

**oszti** · 2010-07-18, 11:57

edem eredeti hozzászólása

Szerintem ez az utóbbi nem igazán jó, még a végén valaki ezt jegyzi meg. A CSS-t külön file-ban szokás tárolni, a tag-ek neveit meg régóta nem írjuk nagy betűvel.

Ezekben igazad van, csak a szemléltetés miatt van most így.

**crecky** · 2010-09-29, 13:31

Tudnátok nekem javasolni valami irodalmat?
Teljesen a zéró-ról kezdeném a html-t és a css-t is.
Tudom, hogy Dunát lehet rekeszteni ilyen könyvekkel, de biztos van olyan, amit ti, akik ezt tanulták tényleg jónak gondoltok. A válaszokat előre is köszönöm!

Téma: CSS tutorialok

LinkBack

Téma eszközök

Display

CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

re: CSS tutorialok

A téma címkéi:

Hozzászólás szabályai