és még sokan mások.
Az elemek által azonosított kacsacsőrök <>, körülvevő elem nevét. Ezáltal az elem fog kinézni:
Ezenkívül a szögletes zárójelben <и> az elem körül azt teremt, amit ismert, mint a kulcsszó. Címkék leggyakrabban megtalálható pár nyitó és záró tag.
A nyitó címke kezdetét az egy elem. Ez egy szimbólum <, затем идёт имя элемента и завершается символом>; például,
.
A záró tag végét egy elem. Ez egy szimbólum <с последующей косой чертой и именем элемента и завершается символом>; például,
Így a link címke fog kinézni:
Az attribútumok tulajdonságok alkalmazott kiegészítő információkat nyújtson az elemet. A leggyakoribb jellemzőkre az id attribútum. amely azonosítja az elemet; class attribútumot. amely osztályozza elem; attribútum src. amely azonosítja a forrást a beágyazott tartalom; és attribútum href. amely jelzi a linket egy kapcsolódó erőforrás.
Az attribútumok meghatározása a nyitó címke után az elem nevét. Általában a tulajdonságok közé tartozik a neve és értéke. A formátum ezen attribútum áll az attribútum neve azonos aláírja vele, majd elmegy idézőjelbe attribútum értéke. Például, elem a href attribútum a következő:
Bemutatása szempontjából alapvető HTML
Ábra. 1.01. HTML szintaxis tartalmaz egy áramköri elem, attribútum és egy tag
Most, hogy tudod, mi az elemek HTML címkék és attribútumok, nézzük meg együtt az első weboldalt. Ha valami úgy néz ki, új vagy itt, ne aggódjon - megfejteni mindezt útközben.
Beállítása a szerkezet egy HTML dokumentum
Minden HTML-dokumentumok tartalmazzák a kötőszerkezetet, amely tartalmazza a következő nyilatkozatokat és elemek: . .
és .
belül elem
Ez határozza meg a felső része a dokumentumnak, beleértve a különböző metaadat (kísérő információkat az oldalt). A tartalom a sejtben Ez nem jelenik meg a weboldalon is. Ehelyett, akkor tartalmazza a dokumentum címét (ami megjelenik a címsorban a böngésző ablak), linkek külső fájlokra, vagy bármilyen más hasznos metaadatokat.
A látható weboldal tartalmát lesz a sejtben
. A szerkezet egy tipikus HTML-dokumentum az alábbiak szerint:
Bemutató HTML dokumentum szerkezete
Ha egy elem benne van egy másik eleme is ismert befektetett egy jó ötlet, hogy adjunk egy padding tartani a szerkezet a dokumentum jól szervezett és olvasható. Az előző kód, a két elem
és beágyazott elemen belül tolódnak . A szerkezet a bemélyedés kiterjed az elemek az új elemekkel hozzáadott és .
önzáró elemek
Az előző példában, az elem Ez volt az egyetlen tag, amely nem tartalmazza a záró címke. Ne aggódj, ez történt szándékosan. Nem minden elem áll nyitó és záró tag. Egyes elemeket egyszerűen kap tartalmát, vagy viselkedés attribútumok egyetlen tag. Ez az egyik ilyen elem. Tartalmi elem Példa hozzárendelt karakterkészlet és attribútum értékeket. Más tipikus önzáró elemek a következők:
érvényesítési kódot
Nem számít, milyen gondosan írunk mi kódot, hibák elkerülhetetlenek. Szerencsére, amikor írsz HTML és CSS érvényesítő van, hogy ellenőrizze a munkát. W3C HTML kiértékelő kínál és CSS. hogy átvizsgálja a kódot hiba. Nézze meg a kód nem csak segít, hogy megjelenjen minden böngészőben, hanem abban is segít, hogy megtanulják a legjobb gyakorlatok írásakor kódot.
gyakorlatban
Mivel webes tervezők és front-end fejlesztő, akkor megengedheti magának, hogy menjen a számos kiváló konferenciák elkötelezett a vízi jármű. Mi lesz, hogy megszervezzék saját konferencia stílusok Konferencia és megteremteni azt a helyszínen a következő leckét. Hűha!
Az index.html fájlt, adjuk hozzá a dokumentum szerkezete, beleértve a dokumentum típusát és elemei .
és .
az elem belsejében
elemek hozzáadásához és . elem <meta> tartalmaznia kell a megfelelő attribútumokat charset és értékét, míg az elem <title> Ennek tartalmaznia kell az oldal nevét, például «Styles konferencia».</p>
<p>az elem belsejében <body> elemek hozzáadásához <h1> és <p>. elem <h1> tartalmaznia kell a kívánt fejléc - legyünk újra használja a «Styles konferencia», és az elem <р> Ennek tartalmaznia kell egy egyszerű bekezdés képviselni konferencián.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/blogotirni/prt/sozdaniepervoyvebstranitsiwebreference-6aa373c3.png" title="Ami az első weboldal, webreference (weboldal)" alt="Ami az első weboldal, webreference" /></div></p>
<p>Ábra. 1.02. Az első lépés, amikor létrehozza a helyszínen stílusok Konferencia</p>
<p>Nézzük váltani egy kicsit, távolodik HTML és nézd meg a CSS. Ne felejtsük el, a HTML a tartalma és szerkezete a weboldalak, míg CSS definiálja a vizuális stílus és a megjelenés.</p>
<h2>Fő CSS feltételek</h2>
<p>Amellett, hogy a feltételeket a HTML, van néhány kulcsfontosságú kifejezések CSS, amely akkor szeretnénk olvasni. Ezek a kifejezések közé szelektor tulajdonságokat és értékeket. Mint a terminológia HTML, annál többet dolgozni CSS, annál ezek a kifejezések váltak második természet.</p>
<p>Mivel elemeket adunk egy weblapot, akkor lehet díszített segítségével CSS. A szelektor meghatározza, hogy melyik elem vagy elemek a HTML a cél, és olyan stílust alkalmazni (például szín, méret, és helyzete). Selectors kombinációját tartalmazhatják különböző mutatók segítségével válassza ki a egyedi tárgyak, attól függően, hogy hogyan akarunk egyedi. Például szeretnénk kiválasztani minden bekezdés az oldalon, vagy válasszon csak egy bizonyos pontban.</p><p>Szelektorok általában társított egy attribútum érték, mint az értéke az ID vagy az osztály vagy tag nevét, mint a <h1> vagy <р> .</p>
<p>A CSS, szelektorok egyesítjük fogszabályozó <>, amely kiterjed a stílusok alkalmazzuk a kiválasztott elem. Ez a szelektor célja minden elemét <p> .</p>
<p>Miután az elem ki van választva, az ingatlan határozza meg a stílust, alkalmazni fogják azt. Nevei tulajdonságok menj után a választó, a fogszabályozó <> és közvetlenül előtte a vastagbélben. Sok ingatlan, hogy tudjuk használni, mint a háttér. színét. font-size. A magasság és a szélesség, és más tulajdonságok gyakran adunk hozzá. A következő példában határozza meg a tulajdonságait szín és font-size. alkalmazni minden eleme <p> .</p>
<p>Míg mi csak választani vezérli az elem, és melyik stílus tulajdonságain keresztül szeretnénk alkalmazni azt. Most tudjuk meg a viselkedését az ingatlan értékén keresztül. Az értékek meghatározása a szöveget a vastagbél és a pontosvesszőt. Az alábbiakban azt válassza ki az összes elemet <p> és a szín tulajdonság értéke, mint egy narancs. és az értéke a font-size, mint a 16 pixel.</p>
<p>Az általános gyakorlat az, hogy pár váltás tulajdonságokat és értékeket a fogszabályozó. Mint HTML, padding segít megőrizni a kódot szervezett és érthető.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/blogotirni/prt/sozdaniepervoyvebstranitsiwebreference-11544606.png" title="Ami az első weboldal, webreference (mely tartalmazza a magam)" alt="Ami az első weboldal, webreference" /></div></p>
<p>Ábra. 1.03. CSS szintaxis szerkezet tartalmaz egy szelektor tulajdonságokat és értékeket</p>
<p>Ismerve néhány alapfogalom és általános szintaxisa CSS - ez egy nagyszerű kezdet, de van még néhány pontot a vizsgálat előtt ugrunk a mélybe. Különösen azt kell alaposan vizsgálni, hogyan működik szelektor CSS.</p>
<h2>Munka szelektor</h2>
<p>Szelektor, mint korábban említettük, meghatározza, hogy milyen HTML elemek lesznek stílusú. Fontos, hogy megértsük, hogyan kell használni kapcsolók és hogyan működnek. Az első lépés ismernie kell a különféle szelektor. Kezdjük a legalapvetőbb szelektor: típus szelektor, osztályok és azonosítók.</p>
<h3>típusú szelektor</h3>
<p>Írja szelektor összpontosított elemeket azok típusát. Például, ha azt akarjuk, hogy összpontosítson az összes elemet <div> fel kell használni a választó div. A következő kód mutatja választó elemek <div>. valamint a megfelelő HTML.</p>
<p>Osztályok lehetővé teszi, hogy válasszon ki egy elemet értéke alapján a class attribútum. osztály szelektor kicsit pontosabb, mint a szelektor írja, mivel a kiválasztott konkrét elemek csoportja, nem minden eleme azonos típusú.</p>
<p>Osztályok lehetővé teszi, hogy ugyanazt a stílust különböző elemek segítségével egyszerre ugyanazt az értéket a class attribútum több elem.</p>
<p>A CSS osztályok kijelölt egy pont előtt, majd a class attribútum értéke. Osztály alatti választó kiválasztja az összes elemet tartalmazza a félelmetes osztály attribútum értékét. beleértve az olyan elemeket <div> és <p> .</p>
<h3>azonosítók</h3>
<p>Azonosítók pontosabb, mint osztály, mert a cél, csak egy egyedi tétel egy időben. Ahogyan az osztály szelektor használt class attribútum értéke. azonosítók id attribútum érték használható a választó.</p>
<p>Függetlenül attól, hogy milyen típusú kijelző elem id attribútum értéke lehet csak egyszer használható az oldalon. Ha id van jelen, ezek számára kell fenntartani fontos elemeket.</p>
<p>A CSS-azonosítók vannak jelölve a szimbólum a rács előtt, és akkor van egy értéke az id attribútum. Ott csak akkor válasszon ki egy azonosítót elemet tartalmazó azonosító attribútum értéke shayhowe.</p>
<h3>további szelektor</h3>
<p>Selectors nagyon nagy dolog, és a fent leírt a leggyakoribb választókat, hogy találkoznak. Ezek szelektor csak a kezdet. Sok fejlett szelektor, és azok könnyen elérhetőek. Ha kényelmes velük, ne félj, hogy nézd meg néhány fejlettebb.</p>
<p>Oké, kezdjük gyűjteni az egészet együtt. Adunk hozzá elemeket a oldalt a HTML, majd kiválaszthatja ezeket az elemeket, és alkalmazza azokat a CSS segítségével. Most csatlakoztassa a pontok a HTML és CSS, úgyhogy ez a két nyelv dolgozik együtt.</p>
<h2>Csatlakozó a CSS</h2>
<p>Annak érdekében, hogy a CSS beszélni a mi HTML, ki kell emelnünk, a CSS-fájlt a HTML. Egy jó gyakorlat az, hogy az összes A stílusok egy külső fájlt, amely egy mutató az elemben <head> HTML-dokumentumot. A használata egy külső CSS lehetővé teszi számunkra, hogy ugyanazt a stílust az egész oldalon, és gyorsan módosíthatja azt.</p>
<h3>További lehetőségek hozzá CSS</h3>
<p>További lehetőségek CSS kapcsolat között szerepelnek a belső és a belső stílusok. Megtalálható ezeket a lehetőségeket a valóságban, de ezek általában nem fogadják el, mint ahogy a frissítésforrásból nehézkes és nehezen kezelhető.</p>
<p>az elem belsejében <head> használt tételt <link>. amely meghatározza a kapcsolat a HTML és CSS-fájlok. Ahogy társítani CSS, majd a rel attribútum értéke stylesheet jelzésére a kapcsolatukat. Ezen kívül a href attribútum adja meg a helyét, vagy az elérési utat a CSS-fájlt.</p>
<p>A következő példa HTML-dokumentum elem <head> Ez arra utal, hogy egy külső stílus fájlt.</p>
<p>CSS jelenik meg helyesen, az érték, amely a href utat kell közvetlenül megfelelnek, ahol a mentett CSS-fájlt. Az előző példában main.css fájl tárolja ugyanazon a helyen, mint a HTML-fájl, más néven a gyökér mappát.</p>
<p>Ha CSS-fájl található az almappa, akkor az értéket, amely a href arra kell kiterjednie, hogy az útvonalat. Például, ha a main.css fájlt mentett egy al-mappa neve a stíluslapok, akkor a href attribútum értéke stíluslapok / main.css. Itt mi most egy perjel (vagy perjel), jelezve, mozgás egy almappát.</p>
<p>Abban a pillanatban, a lapok kezdenek életre, lassan, de biztosan. Még nem mélyed el a CSS túl mély, de lehet, hogy észrevette, hogy bizonyos elemek stílusok, hogy nem nyilatkozhat a CSS. Ez a böngésző szabhat saját preferált stílus ezeket az elemeket. Szerencsére mi is átírni ezeket a stílusokat annyira egyszerűek, hogy többet teszünk a CSS állítani.</p>
<h2>Használata Reset CSS</h2>
<p>Minden böngésző saját alapértelmezett stílusok különböző elemeket. A Google Chrome-mal megjeleníti fejezetek, bekezdések, listák, és így tovább, eltérhet hogyan teszi az Internet Explorer. Annak érdekében, kompatibilitás a különböző böngészők vált széles körben használt CSS állítani.</p>
<p>Visszaállítása CSS veszi az összes jelentősebb HTML elemeket, az adott stílusban, és egy egységes identitás minden böngészőben. Ezek a változások általában tartalmaznak törlés méretben, behúzás, vagy több stílus területeken csökkenti ezeket az értékeket. Mivel CSS lépcsőzetes fut fentről lefelé (hamarosan megtudjuk róla) - mi kell állítani a tetején a stílust. Ez biztosítja, hogy ezek a stílusok olvasni az első és a különböző böngészőkkel is működik egy általános hivatkozási pont.</p>
<p>Van egy csomó különböző CSS bevezetések áll a használatra, azok mind megvannak az erősségei. Az egyik legnépszerűbb Eric Meyer. CSS visszaállíthatja kialakítva, hogy tartalmazza az új HTML5 elemek.</p>
<p>Ha érzel magadban egy kis kalandos, ott is Normalize.css. készítette Nicolas Gallagher. Normalize.css nem elsősorban a használatát a hard reset, fő elemeit, hanem hogy közös stílusok ezeket az elemeket. Ez megköveteli a jobb megértését CSS, valamint a tudás, amit szeretne kapni a stílust.</p>
<h3>Határon böngésző kompatibilitási és tesztelés</h3>
<p>Mint már korábban említettük, a különböző böngészőkben elemek önmagukban. Fontos, hogy ismerje fel a cross-browser és a tesztelés. Weboldalak ne csak ugyanúgy néz ki minden böngészőben, de legyen közel. Mely böngészők szeretné támogatni, és milyen mértékben - ez a döntés, amit meg kell tenni alapján mi a legjobb a webhelyen.</p>
<p>Van néhány dolog, hogy tisztában legyenek írásakor CSS. A jó hír az, hogy ez mind erők, és kell egy kis türelem, hogy elsajátítsák azt.</p>
<h2>gyakorlatban</h2>
<p>Mi visszatérünk, ahol legutóbb abbahagyta a mi konferencia honlapján, és hogyan tudjuk hozzá egy kis CSS.</p>
<p>Keresi a index.html fájlt a böngésző azt látjuk, hogy az elemek <h1> és <p> már tartalmaz egy alapértelmezett stílus. Különösen, hogy van egy különleges csoportját a betűméret és a tér körül őket. Nullázhatja Erika Meyera tudjuk enyhíteni ezeket a stílusokat, amelyek lehetővé teszik mindegyik kezdeni azonos alap. Ehhez megnézzük saját honlapján. másold ki a kódot, és illessze be a tetején a main.css fájlt.</p>
<p>Mi is tartalmazni fog egy linket a fájl main.css az attribútum href. Ne felejtsük el, mi file main.css tárolt stíluslapok mappát, amely belül az eszközök mappában. Így, href érték. ami az út a mi file main.css kell lennie eszközök / stíluslapok / main.css.</p>
<p><div style="text-align:center;"><img src="https://images-on-off.com/blogotirni/prt/sozdaniepervoyvebstranitsiwebreference-e44e0113.png" title="Ami az első weboldal, webreference (mely tartalmazza a magam)" alt="Ami az első weboldal, webreference" /></div></p>
<p>Ábra. 1.04. Oldalunk stílusok konferencia CSS Reset</p>
<h3>Bemutató és a forráskód</h3>
<p>Tehát minden rendben van! Csináltunk néhány jelentős lépést a bemutató.</p>
<p>Gondoljunk csak bele, most már tudod az alapokat a HTML és CSS. Ahogy haladunk, és több időt töltenek az írás HTML és CSS, akkor sokkal kényelmesebb dolgozni ezt a két nyelvet.</p>
<p>Emlékezzünk vissza, hogy mi tekinthető a következő:</p>
<ul>
<li>A különbség a HTML és CSS.</li>
<li>Ismerete HTML elemek, címkék és attribútumok.</li>
<li>Beállítása a szerkezet az első weboldalt.</li>
<li>Kapcsolat a szelektor CSS, tulajdonságok és értékek.</li>
<li>Bízza szelektor CSS.</li>
<li>A mutató a CSS a HTML.</li>
<li>Fontosságát CSS állítani.</li>
</ul>
<p>Most vessünk egy közelebbi pillantást a HTML és kevés ismeri a szemantika.</p>
<h2>Források és linkek</h2>
</div>
<div class="extra">
<div class="info"><a href="/articles/magyarazat-uzi-magzat-a-terhesseg-alatt-eredmenyt.html">előző</a> ◈ <a href="/articles/a-megbocsatas-vasarnap-2019-ben-a-szamat-es.html">a következő</a></div>
<div class="clear"></div>
</div>
</article>
</div>
</div>
</div>
</div>
<div id="sidebar" class="col-1-3">
<div class="wrap-col">
<div class="box">
<div class="heading"><h4 class="title">Menu</h4></div>
<div class="content">
<a href="/tags/a.html" class="tag-links" title="407" style="font-size: 18pt;">a</a>
<a href="/tags/a-kornyezet.html" class="tag-links" title="225" style="font-size: 13pt;">a környezet</a>
<a href="/tags/absztrakt.html" class="tag-links" title="141" style="font-size: 11pt;">absztrakt</a>
<a href="/tags/arc.html" class="tag-links" title="142" style="font-size: 11pt;">arc</a>
<a href="/tags/auto.html" class="tag-links" title="123" style="font-size: 11pt;">autó</a>
<a href="/tags/az-elet.html" class="tag-links" title="116" style="font-size: 11pt;">az élet</a>
<a href="/tags/csirke.html" class="tag-links" title="117" style="font-size: 11pt;">csirke</a>
<a href="/tags/dieta.html" class="tag-links" title="115" style="font-size: 11pt;">diéta</a>
<a href="/tags/eskuvo.html" class="tag-links" title="292" style="font-size: 15pt;">esküvő</a>
<a href="/tags/festek.html" class="tag-links" title="178" style="font-size: 12pt;">festék</a>
<a href="/tags/foto.html" class="tag-links" title="294" style="font-size: 15pt;">fotó</a>
<a href="/tags/fotok.html" class="tag-links" title="171" style="font-size: 12pt;">fotók</a>
<a href="/tags/ferfi.html" class="tag-links" title="164" style="font-size: 12pt;">férfi</a>
<a href="/tags/gyermek.html" class="tag-links" title="199" style="font-size: 13pt;">gyermek</a>
<a href="/tags/haj.html" class="tag-links" title="263" style="font-size: 14pt;">haj</a>
<a href="/tags/hogy.html" class="tag-links" title="258" style="font-size: 14pt;">hogy</a>
<a href="/tags/haz.html" class="tag-links" title="121" style="font-size: 11pt;">ház</a>
<a href="/tags/ingyen.html" class="tag-links" title="130" style="font-size: 11pt;">ingyen</a>
<a href="/tags/javltas.html" class="tag-links" title="116" style="font-size: 11pt;">javítás</a>
<a href="/tags/jobb.html" class="tag-links" title="166" style="font-size: 12pt;">jobb</a>
<a href="/tags/kezek.html" class="tag-links" title="244" style="font-size: 14pt;">kezek</a>
<a href="/tags/kezeles.html" class="tag-links" title="176" style="font-size: 12pt;">kezelés</a>
<a href="/tags/kutya.html" class="tag-links" title="149" style="font-size: 12pt;">kutya</a>
<a href="/tags/kez.html" class="tag-links" title="422" style="font-size: 18pt;">kéz</a>
<a href="/tags/kezikonyvek.html" class="tag-links" title="110" style="font-size: 11pt;">kézikönyvek</a>
<a href="/tags/kornyezet.html" class="tag-links" title="171" style="font-size: 12pt;">környezet</a>
<a href="/tags/lehet.html" class="tag-links" title="122" style="font-size: 11pt;">lehet</a>
<a href="/tags/macska.html" class="tag-links" title="159" style="font-size: 12pt;">macska</a>
<a href="/tags/miert.html" class="tag-links" title="147" style="font-size: 12pt;">miért</a>
<a href="/tags/munka.html" class="tag-links" title="139" style="font-size: 11pt;">munka</a>
<a href="/tags/no.html" class="tag-links" title="116" style="font-size: 11pt;">nő</a>
<a href="/tags/otthon.html" class="tag-links" title="656" style="font-size: 24pt;">otthon</a>
<a href="/tags/recept.html" class="tag-links" title="123" style="font-size: 11pt;">recept</a>
<a href="/tags/receptek.html" class="tag-links" title="220" style="font-size: 13pt;">receptek</a>
<a href="/tags/shkolopediya-eloadas.html" class="tag-links" title="132" style="font-size: 11pt;">shkolopediya előadás</a>
<a href="/tags/studopediya.html" class="tag-links" title="144" style="font-size: 12pt;">studopediya</a>
<a href="/tags/szakacs.html" class="tag-links" title="129" style="font-size: 11pt;">szakács</a>
<a href="/tags/szerelem.html" class="tag-links" title="134" style="font-size: 11pt;">szerelem</a>
<a href="/tags/szamltogep.html" class="tag-links" title="112" style="font-size: 11pt;">számítógép</a>
<a href="/tags/terhesseg.html" class="tag-links" title="148" style="font-size: 12pt;">terhesség</a>
<a href="/tags/tiszta.html" class="tag-links" title="158" style="font-size: 12pt;">tiszta</a>
<a href="/tags/otletek.html" class="tag-links" title="155" style="font-size: 12pt;">ötletek</a>
<a href="/tags/utmutato.html" class="tag-links" title="162" style="font-size: 12pt;">útmutató</a>
<a href="/tags/o.html" class="tag-links" title="162" style="font-size: 12pt;">ő</a>
</div>
</div>
<div class="box">
<div class="content">
<div class="box">
<div class="content">
</div>
</div> </div>
</div>
<div class="box">
<div class="heading"><h4 class="title">Cikk címkék</h4></div>
<div class="content">
<a href="/tags/elso.html">első</a>, <a href="/tags/webreference-weboldal-tartalmaznia-kell-magat.html">WebReference weboldal tartalmaznia kell magát</a>, <a href="/tags/a-href-attributum-kell-lennie.html">a href attribútum kell lennie</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="wrap-footer pominodiko">
<div class="row">
<div class="col-1-1">
<div class="wrap-col">
<div class="box">
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © 2024</p>
<script>
new Image().src = "https://counter.yadro.ru/hit;blogotirni?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+
";"+Math.random();</script>
</div>
</footer></div>
</body>
</html>