CSS-t hogyan lehet megtanulni a legkönnyebben?
A HTML és a PHP kezelése már szinte gyerekjáték számomra de a CSS-el mindig annyit eltökölök, hogy az hihetetlen.
Sose tudom, hogy a floatot merre kell igazítani border, div stb kezelése is alig megy.
Esetleg valaki tudna adni valami leírást vagy videót arról, hogy hogyan lehetne ezt megtanulni mert a weboldalam rendszere hibátlan de a kinézete meg mint valami okádás.
Azért meg most nem akarok senkit felvenni, hogy feldizájnolja a weboldalam ha én is megtudnám tanulni.
Válaszokat előre is köszönöm!
válasza:Javaslom nem a CSS-t használni, hanem SASS-t vagy SCSS-t
- hierarchikusabb
- támogatja: változókat, matematikai műveleteket, függvény orientált paradigmát, vezérlési szerkezeteket, egyes adatszerkezeteket pl. list, map
SASS tördelése a Python-hoz hasonló.
SCSS vs SASS lényegében: SASS-ban nincs ; és {} blokkok. Minden másban megegyezik.
válasza:#3 Nagyot tevedsz ;) Egy kezdonek hiaba irod. Hisz ase tudja, a float-ot, hogy kell hasznalni. !Ezzel semmi baj majd ugy is bele jon. #1/#2 amit irt jo tanacs hidd el. En anno az egyetemen tanultam volt olyan vastag mint a regi telefonkonyvek. Szoval gyakorlas esetleg nezzel videokat is.Akkor neked a cyrex.hu-t ajanlom.
+
Tok folosleges hasznalni (persze attol meg lehet hasznalni). A designerek is a css szabvanyat kovetik (de nem csak ok). Konyebb, egyszerubb, atlathatobb. Csak azt nem ertem miert ajanlod egy tok kezdonek ?
válasza:Valóban nehéz megtanulni, és én is sokat tökölök vele néha. Az a tré, hogy a megfelelő információkat morzsánként kell összevadásznod hozzá. Néhány tippet tudok adni:
Div elhelyezés és formázás gyakorlásához szoktam csinálni wireframe-eket, ami csak a leendő elrendezést tartalmazza, színes borderekkel, hogy lássam mit hova pakol.
Elhelyezés:
--- position
--- float
--- flexbox [link]
Méretezés:
--- pixel
--- százalék
--- vw és vh
Amire még érdemes rájönnöd, az a centerelés, és a reszponzivitás megoldása, amit az alábbi példa tud. Meg ne kérdezd, miért és hogyan. :D
index.php:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./default.css">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
</body>
</html>
default.css:
body{
margin:0px;
}
#container{
width:100%;
min-height:100vh;
height:100%;
}
#header{
position:relative;
z-index:1;
width:100vw-10px;
max-width:960px;
height:26vw;
max-height:250px;
margin:0 auto;
background-size:cover;
border-radius:0px 0px 6px 6px;
-moz-border-radius:0px 0px 6px 6px;
-webkit-border-radius:0px 0px 6px 6px;
background-color:rgba(180,200,255,1);
border:1px solid #001630;
}
#content{
position:relative;
z-index:1;
width:100vw-120px;
max-width:840px;
margin:0 auto;
min-height:500px;
background-color:rgba(180,200,255,1);
padding:30px 60px 30px 60px;
border:1px solid #001630;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!