Basics css kezdőknek - könnyű és egyszerű programozás kezdőknek

Először is, nézzük meg, mi is pontosan a CSS. Mindenki tudja, hogy a HTML - Hypertext Markup Language van. A CSS viszont vizuális formanyelv a jelölés is. CSS - ez a Cascading Style Sheets - Cascading Style Sheets. A HTML-ben vannak az eszközei látványterv, de sok tekintetben rosszabb CSS-képességeit, és ha sok oldalt, akkor képzeljük el, hirtelen akart változtatni a színét minden címet, akkor lapáttal a HTML fájlokat és css csinálni egy vonalon. Azt hiszem, ez elég ez az érv csak azért, hogy kezdi a tanulást CSS.
CSS módon nem csak a használt vizuális oldal elrendezés jelölt HTML, de ezek az oldalak írt XHTML jelölőnyelv is ideális dekoráció az XML dokumentumok.
Mivel mi csak kezdők még kezdeni az alapokat, hogy a jövőben mi lesz, hogy mélyen ezt a technológiát, mint a CSS elég nagy dolog, és egy cikkben minden csak nem illik, ezért osztani a CSS vizsgálatban több órákat, a fokozatos mélyül a Cascading Style Sheets.

Nos, megyünk gyakorolni, és kezdjük akkor egy egyszerű szintaxis. Ez valahogy így néz ki:

design elem úgynevezett választó, de az egyszerűség kedvéért én is így.

Ez érthető volt szintaxist, adunk egy nagyon egyszerű példa:

ahol
p - a paragrafus;
szín -, hogy az ingatlan esetünkben ez a szín;
piros - ezt az értéket, ebben az esetben a piros.
És a végén a szöveges információkat minden paragrafus piros lesz.

A szintaxis egy kicsit érteni, folytassa a pont, ahol ez az egész írás, azaz csatlakoztassa a CSS a HTML dokumentum.
Számos módja van:

1. Közvetlenül a dokumentum elem révén a stílus attribútum. például ha lefordítani a fenti példában a dokumentumban, és írják fel azt az elemet, akkor így fog kinézni:

Ez a módszer nem célszerű, mert megint, ha van egy csomó dokumentum, meg kell változtatni az összes ezeket a dokumentumokat, és minden cellában.

2. Egy kis kényelmes módja annak alkalmazására, amikor a CSS stíluslap leírása a dokumentumban. A fej rész csak a stílus elem, amiben leírja a stíluslapot. Például, ismét alkalmazni a fent említett példában, de ez a módszer:

Kiderült, ugyanaz, mint volt fent. Ez a módszer néha, de ez még mindig nem tökéletes.

3. A harmadik módszert alkalmazzák import css dokumentumot. Ritkán láttam az használja ezt a módszert, akkor, és senki nem használja, de meg kell tudni róla. Itt a stílus lap már leírt egy külön dokumentumban.

ahol
css-file.css - ez az, ahol css fájlt, és leírja a stíluslapot, ha az egy másik mappába, meg kell írni a fájl elérési útját.

4. A leggyakoribb módszer CSS egy kapcsolat css fájlt a dokumentumot. Ezt a módszert használják szinte minden, mert a legkényelmesebb. CSS összekötve link tag az elem fejét.

ahol
css-file.css - ez egy fájl, amely leírja a stíluslap újra, ha a fájl a mappában a dokumentum eltér a helyét meg kell írni az elérési útvonalát.

Tehát összekötő css kiválogattam most a választókkal, azaz Keresés módszerek a legtöbb ilyen elemeket a dokumentumban, más szóval, ha nem kell, hogy az összes bekezdések piros a fenti esetben, mint például egyes pontjaiban, fekete volt, a másik pedig piros. Sőt, kilenc fajt, de még mindig úgy a legnépszerűbb.

A szelektor elemek (tag), akkor vezették be, hogy a fent felsorolt ​​példákban alkalmazott összes tag:

p - ez egy elem választó, ott lehet szinte bármilyen HTML dokumentum, mint például a test, div, table, tr, td, h1, és sok-sok más.

Véleményem a legnépszerűbb fajta a szelektor használ osztályokat és azonosítókat. Más szóval, hogy állapítson meg a dokumentumot jelöli meg a dokumentum tételeket az azonosítók (ami egyedülálló az egész dokumentumot), vagy azokat az azonos osztályhoz (ez lehet ismételni egy dokumentum). Mi volt egyértelmű, hogy példát, amelyben mi lesz két bekezdést, amelyek közül az egyik piros, a másik fekete.

Szöveg css van:

A dokumentum szövege a következő:

A gyakorlás kösse magát semmilyen módon a CSS-t a dokumentumba.
Ön valószínűleg már rájött, hogy a css azonosítók által jelzett # jelet (#idred) és osztályokat egy pontot, és a nevét az osztály (.black).
Egy HTML dokumentum, ezek segítségével azonosítják az érintett tag: id az azonosító és osztályról osztályra.

A szöveg a HTML-dokumentum:

Mint látható, a jobb oldali linkek minket, a betűtípus lett 20 pixel.
Most tekintsük az azonos népszerű formája a szelektor jelentése - leszármazott szelektor. Más szóval, akkor adja meg, hogy ez az elem, az ID vagy az osztályba csak ilyen leszármazottai, azaz a ez egy adott elem, amely, például, egy adott id vagy osztály. például:
Szöveg css:

A szöveg a HTML-dokumentum:

Látod itt egy bekezdés, amely egy div elem zöldre vált, és minden ítélet, hogy nem egy div elem lenne piros.
Meg kell jegyezni, hogy az kell kiosztani leszármazottai jobbról balra, például először a leszármazottja (div), majd megy a kívánt tétel (p).

Mint látható, ma már csak két tulajdonság a font-méret és szín. Tény, hogy sok közülük ma, azt hiszem elég, a következő tanulságokat továbbra is vizsgálja egyéb ingatlan, valamint egy csomó, hogy még!
Remélem lesz egy kicsit, hogy megértsék a lényegét a legtöbb Cascading CSS stíluslapok. A jövőben tanulságok nehezebb lesz! Tehát akkor biztos, hogy a CSS egy nagyon vicces dolog, itt egy példa a kulináris hely, ahol a fő menü használatával valósítjuk csak a HTML és CSS, anélkül, java script. Remélhetőleg a jövőben azt is megtanulják, hogyan kell megtenni.

Kapcsolódó cikkek