Alapjai CSS és HTML
Ez a leírás azoknak ajánljuk, akik most kezdik tanulni a bölcsesség weboldalak létrehozása. Ez ad az alapvető fogalmak HTML és CSS. Lépésről lépésre utasításokat követve ez a bemutató, akkor pár perc kiszabására egy sablont a webhelyen.
honlap sablon fogunk csinálni a segítségével egy blokk elrendezés. Én a tag - «DIV».
1. lépés - Jelölés a weboldal HTML-címkék segítségével
Először is, meg kell jelölni a weboldal HTML-címkék segítségével. Csak akkor tud lépni a site design segítségével CSS a Cascading Style Sheets.
HTML - Hypertext Markup Language van. Ezzel sozdaetsyastruktura weboldalt. Ezekre a célokra a HTML. Ezek zárójelbe "<" и ">”.
A címkék általában követi egy pár - nyitó és záró. Az utóbbi abban különbözik, hogy van zárójelben az első „/” jel. (Például:
). A rendszer segítségével a címkék meghatározni, mit fognak elhelyezkedni az internetes oldalon.Cascading stileyCSS használt táblázat később. Ezek szükségesek ahhoz, hogy elférjen a tag tartalmát a megadott helyen, valamint, hogy ez a kívánt megjelenés tartalmat.
A legegyszerűbb weboldal címkék:
Ezt követően, akkor a címkék között
akkor helyezze a másik tag megjelölésére weboldal elemek.
Fontos tag, mert így a lap tag
Ezen belül a tag akkor tegye más HTML címkék, hogy meg kell, hogy hozzon létre a webhely tartalmának (linkek, szöveg, kép, stb.) Mindezek az elemek később megtalálja a saját CSS használatával Cascading Style Sheets.
HTML kód az oldal jelenik meg az alábbiak szerint. Ez egy példa a címke használatával div:
Mint látható, minden egyes tag div adtunk egy bizonyos választó azonosítót. Azaz, minden egyes blokk oldalainkon már a nevét kapta. Erre azért van szükség annak érdekében, hogy később beállítás jellegű egységek a CSS fájlban, tudtuk megkülönböztetni az egyiket a másiktól egységet.
Kétféle kiválasztó. ID - használt egyedi blokkok, mint amilyeneket sehol máshol az oldalon nem ismétlődnek. Míg CLASS választó - alkalmazott jelölésére ismétlődő egységet.
Továbbá, arra a következtetésre jutottunk az összes blokkot belül a „tartály” mezőben. Ezt annak érdekében, hogy később képes legyen elhelyezni a teljes oldal, ahogy mi akarjuk.
2. lépés - csatolja a CSS-stíluslap
Mint már említettük, a CSS stílus lap meghatározza a tervezési elemeit egy weblapot. Akkor helyezze belül a html dokumentum és csatolja egy külső fájlt. Ebben a leckében fogjuk használni az utolsó lehetőség.
Ha már megnyitott weblap a böngészőben, akkor semmi sem találtak. Ez azért van, mert nem töltötte jegyeiket, vagy olyan tartalmat, sem adtak nekik bármilyen alakú és színű. Tartalom blokkok, felveheti a megfelelő címkéket. De az alakja, elhelyezkedése, szín, és egyéb tünetek, kérünk keresztül CSS fájl blokkolja.
De először meg kell létrehoznia. Nevezzük style.css található és ugyanabban a könyvtárban, mint a dokumentum html. Ezt követően, a html fájl, a címkék között, meg kell hozzá a következő sort:
Így társítani a két fájl együtt. Most, amikor megjelenítő weboldal a böngésző használja a megfelelő stíluslapot.
3. lépés - Határozza meg a stílus
CSS szintaxis alkotja a szelektor, a tulajdon és az érték. Selector - egy címkét, amely meg akarja határozni a megjelenése így ez a különböző tulajdonságok. Az ingatlan határozza meg a különböző tulajdonságok, ami viszont különféle értékeket vehet fel.
Rögzítéséhez szelektor kivéve a címke szervezetben. használja a „#” vagy „”. követik előtt választó nevét. Az első használható, hogy jelezze a selektorID. második, illetve selktorCLASS. A kiválasztó tetszőleges számú ingatlanok. Amelyek zárójelek "<> ”.
CSS tulajdonságok és lehetséges értékek:
Háttér (háttér) lehet beállítani, vagy színes kép, vagy mindkettő egyszerre. Jeleníti meg a képet, be kell állítani az elérési útvonalát. Ha a háttér színe van megadva, akkor használja a hexadecimális rendszer (#ffffff fehér színű, és így tovább.).
A szín tulajdonság meghatározásához használt szín a szöveget.
font-family
- Ez a tulajdonság határozza meg a betűtípus család, amelyben a szöveg jelenik meg. Általában meghatározott mindössze három fajta betűtípus. Ezért, ha a böngésző nem tudja megjeleníteni az első, ő sok közül lehet választani (Trebuchet MS, Arial, Times New Roman).
font-size - a szöveg méretét adják meg a különböző intézkedések, itt fogjuk használni pixel.
margin - meghatározza a helyét a blokk. Kiindulópontként ebben az esetben jár, mint a böngésző ablakot, és a határok egyéb elemeinek a weboldalt. Mivel azt szeretnénk, hogy helyezze a oldal közepén a böngésző ablakot, majd írja be a következő értékeket tulajdonságok: 0px auto 0px auto. Felvétel tűnhet könnyebb 0px auto. Count adatokat, amikor célérték van az óramutató járásával megegyező irányban: felső - jobb alsó - bal. Mivel a fel - le, jobbra - balra, ugyanolyanok vagyunk, akkor nincs szükség megismételni őket.
szélesség - szélesség a blokk.
úszó - a tulajdonságot, amely lehetővé teszi számunkra, hogy helyezze a választó elemek, főleg a bal, vagy a jobb oldalon.
Most néhány kódot hozzá a style.css fájlt stílusok (mert már létrehozott, nem?):
test háttér: # f3f2f3;
color: # 000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
>
#container háttér: #FFFFFF;
margin: 30px auto;
szélesség: 900px;
magasság: 1000px;
>
#header háttér: # 838283;
magasság: 200px;
szélesség: 900px;
>
#navigation háttér: # a2a2a2;
szélesség: 900px;
magasság: 20px;
>
#menu háttér: # 333333;
float: left;
szélesség: 200px;
magasság: 600px;
>
#content háttér: # d2d0d2;
float: right;
szélesség: 700 képpont;
magasság: 600px;
>
#footer háttér: # 838283;
magasság: 180px;
szélesség: 900px;
>
Abban az időben az írás, nem minden böngésző jeleníti meg helyesen kialakított weboldal. Ahhoz, hogy megszüntesse ezt a hátrányt is használhatja további teljesítmény, amelyet be kell helyezni a közvetlenül mögötte a tartalom egységet.