Szabályok html általános családi szabályok 2. HTML dokumentumok létrehozásának szabályai. Kerülje a hackek használatát

Ez a HTML-t, CSS-t és GSS-t használó fájlok működő verzióira vonatkozik

Bármilyen eszköz használható a fordítás vagy a kód obfuszkálásának minimalizálására, feltéve, hogy a kód általános minősége megmarad.

Hagyja ki a protokoll nevét (http:, https:) a képekre vagy más médiaforrásokra mutató hivatkozásokban, stílusfájlokban vagy szkriptekben, természetesen, ha ezek a fájlok mindkét protokollon keresztül elérhetők.

Nem ajánlott:
Ajánlott:
Nem ajánlott: .example ( háttér: url(http://www.google.com/images/example); )
Ajánlott: .example ( háttér: url(//www.google.com/images/example); )

Ne használjon tabulátorokat, és ne keverje a tabulátorokat szóközökkel.

Minden kódot kisbetűvel kell írni: Ez vonatkozik az elemnevekre, attribútumnevekre, attribútumértékekre (kivéve szöveg/CDATA), szelektorokra, tulajdonságokra és ezek értékeire (a szöveg kivételével).

A szóközök a sorok végén nem kötelezőek, és megnehezítik a diff használatát.

Győződjön meg arról, hogy a szerkesztő UTF-8 kódolást használ bájtsorrend-jel (BOM) nélkül.

Adja meg a kódolást HTML sablonokés a dokumentumok segítségével. Hagyja ki a css fájlok kódolását: alapértelmezés szerint az UTF-8 van beállítva.

(A kódolásokról és használatukról ezen a linken tudhat meg többet: Karakterkészletek és kódolások XHTML-ben, HTML CSS.)

Megjegyzésekkel magyarázza el kódját: mit csinál, mit csinál, és miért használják a választott megoldást.

(Ez a pont nem kötelező, mert nincs értelme elvárni, hogy a kód mindig jól dokumentált legyen. A megjegyzések hasznossága a projekt összetettségétől függ, és eltérhet a HTML- és CSS-kódok esetében.)

Jelölje meg a feladatokat a TODO kulcsszó használatával. Ne használjon más gyakran használt formátumot, például @@ .

A névjegyeket (felhasználónév vagy levelezési lista) tegye zárójelbe: TODO(contact) .

A kettőspont után írja le a feladatot, például: TODO: Feladat.

Ajánlott: (# TODO(Ivan Ivanov): Foglalkozz az igazítással #) Teszt
Ajánlott:

• uborka
• Paradicsom

(Javasolt a HTML használata a text/html tartalomtípussal. Ne használjon XHTML-t, mivel az application/xhtml+xml böngészőt nem támogatja, és ez korlátozza az optimalizálási lehetőségeket.)

Használjon érvényes HTML kódot, kivéve, ha a használat nem teszi lehetővé a kívánt teljesítményszint eléréséhez szükséges fájlméret elérését.

W3C HTML validátor (angol) a kód érvényességének ellenőrzéséhez.

Az érvényesség a kód fontos és mérhető minősége. Az érvényes HTML írása elősegíti a tanulást technikai követelményekés korlátozásokat és biztosítja a helyes HTML használatával.

Nem ajánlott: Check Csak ellenőrizze
Ajánlott: Check Csak egy csekk.

Használja az elemeket (néha helytelenül „címkéknek” nevezik) a rendeltetésüknek megfelelően: fejléceket a címsorokhoz, p-t a bekezdésekhez, a-t a hivatkozásokhoz stb.

Ez megkönnyíti a kód olvasását, szerkesztését és karbantartását.

Próbáljon alternatív tartalmat biztosítani a médiához, például képeket, videókat vagy vászonnal meghatározott animációkat. Képeknél ez egy értelmes alternatív szöveg (alt), videó és hang esetében pedig lehetőség szerint a szöveg és a felirat átirata.

Az alternatív tartalmak segíthetnek az embereknek fogyatékosok. Például egy gyengénlátó ember nehezen tudja megérteni, hogy mi van a képen, ha nincs beállítva az @alt. Előfordulhat, hogy mások nehezen értik meg a videó- ​​vagy hangfelvételen elhangzottakat.

(Ha a kép alt értéke redundáns, vagy csak dekorációs célokra használják olyan helyeken, ahol a CSS nem használható, használjon üres alt szöveget alt="" )

Tartsa külön a szerkezetet (jelölés), a megjelenést (stílusokat) és a viselkedést (szkriptek), és próbálja meg a minimálisra csökkenteni a köztük lévő interakciókat.

Győződjön meg arról, hogy a dokumentumok és sablonok csak HTML-t tartalmaznak, és a HTML csak a dokumentum szerkezetének meghatározására szolgál. Helyezze át a tervezésért felelős összes kódot stílusfájlokba, a viselkedésért felelős kódot pedig szkriptekbe.

Próbálja meg minimálisra csökkenteni a metszéspontjaikat úgy, hogy minimális számú stílusfájlt és szkriptet foglal a sablonokba.

A struktúra elválasztása a megjelenítéstől és a viselkedéstől megkönnyíti a kód karbantartását. A sablonok és HTML-dokumentumok módosítása mindig tovább tart, mint a stílusfájlok vagy szkriptek megváltoztatása.

Nem ajánlott: A HTML szívás A HTML szívás

Valahol már olvastam erről, de most már minden világos: A HTML teljes szemétség!!1 Nem hiszem el, hogy a dizájn megváltoztatásához minden alkalommal újra kell csinálni mindent.
Ajánlott: Az első, csak CSS-t használó újratervezésem Az új CSS-tervem

Korábban olvastam erről, de végül magam is megcsináltam: az aggodalmak szétválasztásának elvét használom, és nem tolom bele a tervezést a HTML-be.

Milyen klassz!

Ez alól a szabály alól csak a hivatalos kivétel HTML karakterek(Például< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

A fájlméret csökkentése és a kód olvashatóságának javítása érdekében elhagyhatja az opcionális címkéket. A HTML5-specifikáció tartalmazza az opcionális címkék listáját.

(Eltarthat egy ideig, amíg ez a megközelítés széles körben elterjed, mert nagyon eltér attól, amit a webfejlesztőknek általában tanítanak. A következetesség, a kódolás és az egyszerűség szempontjából a legjobb, ha elhagyja az összes opcionális címkét, nem pedig néhányat).

Nem ajánlott: Bájtokat pazarolunk – pénzt pazarolunk.
Ajánlott: A bájtok pénz!

Szóval azt

Ne használja a type attribútumot stílusok (kivéve, ha nem CSS-t használ) és szkriptek (kivéve, ha nem JavaScriptet használ) összekapcsolásakor.

Adja meg a type attribútumot ebben az esetben nem feltétlenül azért, mert a HTML5 alapértelmezés szerint text/css-t és text/javascriptet használ. Ez még régebbi böngészőkben is működik.

Nem ajánlott:
Ajánlott:
Nem ajánlott:
Ajánlott:

Az elemhez megadott stílusoktól függetlenül (a CSS lehetővé teszi az elem viselkedésének megváltoztatását a display tulajdonság segítségével), minden blokkot vagy táblázatelemet egy új sorba csomagoljon.

Ezenkívül behúzza az összes blokk- vagy táblázatelemen belüli elemet.

(Ha gondja van a listaelemek közötti szóközzel, akkor az összes li elemet egy sorba helyezheti. Ebben az esetben ajánlatos, hogy a Lint a hiba helyett egy figyelmeztetést adjon ki.

• Masha
• Glasha
• Cseburas

Kivéve azokat az eseteket, amikor böngészőfüggő kódra van szükség, vagy ha érvényesítő hiba lép fel, használjon érvényes CSS-kódot.

Használjon olyan eszközöket, mint a W3C CSS Validator a kód érvényesítéséhez.

Az érvényesség a kód fontos és mérhető minősége. Az érvényes CSS írása segít kiküszöbölni a redundáns kódot és biztosítja a stíluslapok megfelelő használatát...

Rejtjelek vagy leírás helyett kinézet elemet, próbálja az osztály vagy azonosító nevében kifejezni létrehozásának jelentését, vagy sablonnevet adni...

A helyettesítő karakternevek egyszerűen olyan elemek nevei, amelyeknek nincs különleges célja, vagy nem különböztethetők meg testvéreiktől. Általában „segítőként” van rájuk szükség.

A funkcionális vagy sablonnevek használata csökkenti a dokumentum vagy a sablonok szükségtelen módosításának szükségességét.

Elavult: /* Elavult: értelmetlen */ #yee-1901 () /* Elavult: megjelenés leírása */ .button-green() .clear()
Ajánlott: /* Ajánlott: pontos és lényegre törő */ #galéria () #bejelentkezés () .video () /* Javasolt: sablonnév */ .aux () .alt ()

Próbáld meg megfogalmazni, hogy ennek az elemnek pontosan mit is kell tennie, miközben a lehető legrövidebb legyen.

Az osztályok és azonosítók ilyen használata hozzájárul a kód könnyebb megértéséhez és hatékonyabbá tételéhez.

Hacsak nem feltétlenül szükséges (például segítő osztályok esetén), ne használjon elemneveket osztálynevekkel vagy azonosítókkal.

A CSS számos különféle gyorsírási formát kínál (például font ), amelyeket minden esetben javasolt használni, még akkor is, ha csak az egyik érték van megadva.

A tulajdonságok gyorsírása hasznos nagyobb hatékonyságés a kód jobb megértése.

Nem ajánlott: /* Nem ajánlott */ border-top-style: nincs; betűcsalád: palatino, grúzia, serif; betűméret: 100%; vonalmagasság: 1,6; párnázás-alsó: 2em; padding-bal: 1em; padding-right: 1em; padding-top: 0;
Ajánlott: /* Ajánlott */ border-top: 0; betűtípus: 100%/1,6 palatino, georgia, serif; párnázás: 0 1em 2em;

Ne adjon meg egységet nulla értékhez, hacsak nincs rá ok.

-1 és 1 közötti értékekben ne írjon 0-t az egész részbe.

Ne használjon idézőjeleket ("" , "") az url() -vel.

A színek háromkarakteres hexadecimális jelölése rövidebb és kevesebb helyet foglal.

Nagy projektekben, valamint a más projektekhez vagy más webhelyeken használt kódokban használjon előtagokat (névterekként) az azonosítókhoz és az osztálynevekhez. Használjon rövid, egyedi címeket, amelyeket kötőjel követ.

A névterek használata segít megelőzni a névütközéseket, és megkönnyíti a webhely karbantartását. Például a keresés és a csere során.

Kerülje a kötőjelen kívül a szavak és a rövidítések összekapcsolását a választókban, hogy javítsa a kód olvashatóságát és könnyebb megértését.

Nem ajánlott: /* Nem ajánlott: a „demo” és az „image” szavak nincsenek elválasztva */ .demoimage () /* Nem ajánlott: kötőjel helyett aláhúzást használunk */ .error_status ()
Ajánlott: /* Ajánlott */ #video-id().ads-sample()

Csábítónak tűnik a munkahelyi különbségek leküzdése. különböző böngészők CSS-szűrők, feltörések vagy egyéb megoldások használatával. Mindezeket a megközelítéseket csak végső megoldásként szabad figyelembe venni, ha hatékony és könnyen karbantartható kódbázist szeretne. Egyszerűen fogalmazva, a feltörések és a böngésző észlelésének engedélyezése hosszú távon árt a projektnek, mivel ez azt jelenti, hogy a projekt a legkisebb ellenállás útját választja. Ez megkönnyíti a hackek használatát, és lehetővé teszi, hogy egyre gyakrabban használják őket, ami azt eredményezi, hogy túl gyakran használják őket.

Határozza meg a deklarációkat ábécé sorrendben, hogy konzisztens kódot biztosítson, amellyel könnyen dolgozhat.

Rendezéskor hagyja figyelmen kívül a böngésző előtagjait. Sőt, ha egy tulajdonsághoz több böngésző előtagot használnak, akkor azokat is rendezni kell (például a -moz a --webkit előtt legyen)

Mindig húzza be a blokk tartalmát, például a szabályokon belüli szabályokat vagy a deklarációkat, hogy megmutassa a hierarchiát, és könnyebben érthető legyen a kód.

Használjon pontosvesszőt minden deklaráció után a kód konzisztenciája és az új tulajdonságok hozzáadásának megkönnyítése érdekében.

A deklarációkban mindig használjon egy szóközt a kettőspont után (de ne előtte), a kódban a sorrend érdekében.

Kezdje az egyes szelektorokat vagy deklarációkat ezzel új sor.

Mindig tegyen sortörést a szabályok közé.

Amikor csak lehetséges, csoportosítsa a szabályokat együtt. Jelölje meg a csoportokat megjegyzésekkel, és válassza el sortöréssel.

Ha kódot szerkeszt, szánjon néhány percet, hogy megértse, hogyan van megírva. Ha a matematikai operátorokat szóközzel választja el, tegye ugyanezt. Ha a megjegyzéseket zárójelek vagy kötőjelek veszik körül, tegye ugyanezt a megjegyzéseivel.

Ennek az útmutatónak az az ötlete, hogy egy közös szókészletet hozzon létre, amely lehetővé teszi a fejlesztők számára, hogy arra összpontosítsanak, amit kifejezni szeretnének, és nem arra, hogyan.

Ajánlunk egységes szabályokat olyan terveket, amelyek lehetővé teszik, hogy egy stílusban írjunk kódot, de fontos a projektben már használt kódstílus is.

Ha a kód nagyon eltér a meglévő kódtól, felboríthatja az olvasó ritmusát, és megnehezítheti az olvasást. Próbálja ezt elkerülni.

Köszönöm mindenkinek, aki idáig elolvasta.

A szabályok a világunk részét képezik, és folyamatosan irányítják napi cselekedeteinket. Életünk szinte minden területén vannak szabályok - viselkedési szabályok, etikett szabályok, az utcán való átkelés szabályai - a lista végtelen lehet.

Mik a szabályok? Ez egy olyan utasítás, amelyet követni kell, vagy be kell tartani. Sok angol szó van, amely szabályokra utal, vagy szabályokra utal:

• Figyelmeztetések - figyelmeztetés
• Parancsok – parancs, utasítás
• Útvonalak – utasítások
• Előrejelzések – figyelmeztetések
• Útmutatók
• Irányelvek
• Utasítások – utasítások
• Törvények – törvények
• Irányelvek – beállítások
• Eljárások
• Szabályzat – szabályok
• Figyelmeztetések – figyelmeztetések

Google rövid kód

A szabályok nap mint nap érintenek bennünket, és még a legegyszerűbb helyeken is nehéz kikerülni, még az utcán sétálva sem lehet lemaradni a körülöttünk kihelyezett táblákról, amelyek figyelmeztetnek és instruálnak a szabályok betartására. A szabály magyarázatának legegyszerűbb módja, ha leírod egy könyvbe, vagy olyan táblákat teszel fel, amelyeket mindenki láthat. Íme néhány szabály, amelyet táblák formájában helyeztek el, amelyeket gyakran láthatunk az utcákon és nyilvános helyeken, ezeket figyelmeztető tábláknak nevezzük.

• tilos kerékpározni – nem biciklizhet
• belépés tilos – belépés tilos
• korcsolyázni tilos – görkorcsolyázni nem lehet
• óvakodj a szembejövő kerékpároktól - óvakodj a szembejövő kerékpároktól
• Tartsa távol = ne zárja el ezt a területet – ne foglalja el ezt a területet
• itt nem töltheti meg a gázpalackokat - nem töltheti meg a gázpalackokat
• méreg = ne edd meg – méreg = nem tudsz enni
• tilos a dohányzás - tilos a dohányzás
• óvakodjunk az úton átkelő emberektől – legyenek óvatosak, gyalogosok
• tilos a parkolás – tilos a parkolás
• ne dobjon szemetet - ne dobja ki a szemetet
• gyerekeket tilos – gyerekeket nem
• fényképezni tilos – fényképezni tilos
• kérjük, takarítson a kutyája után – takarítson a kutyája után
• életveszély – veszély, magasfeszültségű áram a közelben – veszélyes! – veszélyes, nagyfeszültségű
• köpni tilos - nem lehet köpni

Amint látja, rengeteg szabály van körülöttünk, és ezeket be kell tartanunk, bár el kell mondani, hogy az emberek néha nem tartják be a szabályokat, megszegik a szabályokat, vagy szembemennek a szabályokkal. a szabályokkal), néha „elkapják” és megbüntetik (megbüntetik). Ha megszegsz egy szabályt, akkor pénzfizetésre kényszerülhetsz, pl. pénzbüntetés/büntetés, vagy ami még rosszabb, arra kényszerítheti, hogy menjen a rendőrségre.

Megszegted már a szabályokat? Azokat, akik mindig betartják a szabályokat, „törvénytisztelőknek”, a szabályokat megszegőket pedig „törvénysértőknek” nevezik.

Végül szeretnénk azt kívánni, hogy „legyen jó!” , „tartsd be a szabályokat!”, „kerüld a bajt!”

A cikk nem teljesen releváns
A 10.2-es és újabb verziókban lehetőség nyílt az oldal átnevezésére a webhelyszabályokkal közvetlenül a motor adminisztrációs paneljén, amikor közvetlenül szerkeszti a szabályok szövegét. A webhelyszabályokat tartalmazó oldal azonban megmarad. Létezik és megtalálható bármely DLE webhelyen a http://my_site/rules.html címen
Hogyan préseld ki az összes levet ebből a címből - olvass tovább

A webhelyszabályok oldala egy statikus rendszeroldal. A motor feldolgozza, és ugyanúgy generálja, mint egy normál statikus oldalt. Egyszerűen lehetetlen eltávolítani - a motor fejlesztője nem rendelkezik róla. Még akkor is, ha a webhelyszabályok megjelenítése le van tiltva a regisztráció során, a webhelyszabályokat tartalmazó oldal mindig elérhető a http://my_site/rules.html címen. Az első keresőmotor, amelyik ott találja, elkezdi hányni és köpködni a szöveget, és cím. Ez nem csoda. Végül is az összes DLE webhelyen ugyanaz a dolog.

Amikor egy webhelyszabályokkal rendelkező oldal az oldaltérképbe kerül, azt a keresőmotor „szemétnek” tekinti, és nem kerül be a keresési indexbe, mivel az oldalszabályok szinte mindenhol ugyanazok. Ezért a DLE webhelyszabályait tartalmazó oldal alapértelmezés szerint le van tiltva (le van zárva) a fájlban ( sor Disallow: /rules.html).

Az oldalszabályokkal és egyediségével kapcsolatos személyes véleményem az, hogy ez egy atavizmus, ami eltereli a felhasználó figyelmét a regisztráció során. Az oldal szabályai egy kezdetleges kinövés, melynek haszontalanságát a közösségi oldalak szervezői sikeresen bizonyították.

Nem, nos, látott valaki félelmetes vagy különleges szabályokat a Facebookon vagy a Twitteren való regisztráció során? Vagy talán a VKontakte és az Odnoklassniki oldalon vannak? Ugyanez!

És néhány webhely 1000 egyedi látogatóval -
elkezdi írni a saját egyedi szabályait a felhasználók számára.
Ami engem illet, az oldalon a legjobb szabályok a teljes hiányuk.
Ha a felhasználó normális és megfelelő, akkor már mindent ért.

Nem titok, hogy az oldalak és könyvtárak keresési indexelésének letiltása nem csodaszer. Így vagy úgy, az oldal bármely oldalát előbb-utóbb „megrágja” a kereső. Vegyük például ugyanazt a Yandexet. Keresőrobotjai mindent kiszívnak, amit a webhelyről találnak, és csak ezután kezdenek el válogatni és gondolkodni azon, hogy visszaadják-e az oldalakat a kereséshez vagy sem. Ez teljesen nyilvánvaló, annak ellenére, hogy a Yandex megható biztosítéka, hogy ő és robotjai nem töltenek le felesleges anyagokat az oldalról. Például, ha egy weboldalt bezártak az indexelésből, akkor a Yandex csak a címét menti el a jelöléssel , vagy(ki hogyan zárja be).

Ahelyett, hogy turkálunk és letiltunk egy webhelyszabályokat tartalmazó „szemét” oldalt a keresési indexelésből, sokkal jobb, ha átdolgozzuk valami más hasznos dologgá, és megnyitjuk a hozzáférést a keresők számára – hagyjuk, hogy megnyugodjanak. Vagy legalább írja meg viselkedését a webhelyen, és ismét engedélyezze a keresőmotorok számára az oldal elérését.

Merész lépést teszünk, és hozzáférést biztosítunk a keresőmotoroknak a webhelyszabályok oldalához. Ehhez a fájlunkban megtaláljuk a Disallow: /rules.html sort és töröljük nafik. Ez kész! Mostantól bármelyik keresőrobot hivatalosan be tud lépni a nyílt „Webhelyszabályokba”, és természetesen kimondhatja, hogy „Fe-e!” és „Be-e!” Ennek elkerülése érdekében átdolgozzuk a „Webhelyszabályzat” oldalt - bármilyen témához, saját egyedi szövegünkhöz, képekhez illesszük be, és változtassuk meg az oldal nevét (címét).

Az oldal szerkesztése a webhelyszabályokkal elérhető a DLE-motor adminisztrációs paneljén, az „Összes szakasz listája” - „Szabályok a webhelyen” részben. A „Webhelyszabályok” oldal szerkesztése ugyanúgy történik, mint bármely más statikus oldal esetében - a vizuális megjelenítés normál üzemmódjában. szöveg szerkesztő. Itt csak az egyedi szöveg írásával és az egyedi képek kiválasztásával lehet probléma. Kicsit feljebb van egy speciális ablak a frissítendő oldal címének (címének) megadásához. De egy ilyen újítás megjelent a 10.2-es verziótól kezdve.

A webhelyszabályok oldalának átnevezése
régebbi motormodelleknél -
elmélyülnie kell benne rendszerfájlokat.

A „Webhelyszabályok” oldal közvetlen átnevezése az adminpanel.lng fájlban történik, amely a Language/Russian/adminpanel.lng mappában található. Az adminpanel.lng fájl a DLE motor rendszerfájlja. A szerkesztéshez lépjen a szerverére (egyébként nincs mód).

Nyissa meg az adminpanel.lng fájlt.
Húrt keresek
"rules_edit" => "Általános szabályok a webhelyen"
Az „Az oldal általános szabályai” szavakat az új nevünkre cseréljük. Zárjuk le. Megment. (Csak a cirill ábécét módosíthatja, amely az idézőjelek között van. Ellenkező esetben teljesen leáll.)

Törölje a motor és a böngésző gyorsítótárát. Az adminlogs.lng fájl szerkesztése és mentése után törölnie kell a motor gyorsítótárát és a böngésző gyorsítótárát, hogy a motort új néven új oldal létrehozására kényszerítse, a böngészőt pedig letöltse. Ha ez nem segít, és továbbra is a régi név jelenik meg, akkor a motor adminisztrációs paneljére kell lépnie, szerkesztenie és el kell mentenie a „Webhelyszabályok” oldalt néhány kisebb jellel. Például tegyen pontot a szövegbe (akkor mindent vissza lehet javítani). Az ilyen zaklatások és atrocitások minden bizonnyal megtisztítják a motor és a szerver agyát, és új név generálására és megjelenítésére kényszerítik őket.

Hangosan gondolkodni. Olyan érzés, mintha kedves celsoft olvasná ezt a blogot. Kicsit később, e publikáció után, a CMS DLE 10.2 motorverziójának adminisztrációs panelén lehetővé vált az oldal normál civilizált módon, a rendszer szkriptfájljaiban való unalmas turkálás nélkül webhelyszabályokkal történő átnevezése. Köszönet a CMS DLE fejlesztőinek munkájukért és a hétköznapi emberek problémáira fordított figyelmükért.

Jelenleg a legtöbb böngésző megjeleníti a webhelyeket, függetlenül megfejtve és kijavítva a webmesteri hibákat. A HTML írásánál azonban óvatosnak kell lenni – be kell tartani az érvényességi szabályokat, mert A helyes elrendezés fontos a webhely optimalizálásához, és segít abban, hogy ne bolonduljanak meg azok a felhasználók, akik a böngészők korábbi verzióiban nyitják meg webhelyét.

Az elem bármely HTML-oldal első sorában található. Meghatározza az oldalon használt jelölőnyelv verzióját. Jelenleg javasolt az űrlap doctype használata - ez univerzális a nyelv bármely verziójához.

A , , címkéknek mindig jelen kell lenniük a kódban, így az oldal megfelel a szabványoknak, és biztosítja a helyes megjelenítést.

Rossz

Helló Világ!

Helló Világ!

Jobb

Helló Világ!

Helló Világ!

A metacímkéket és stílusokat a -ban kell megadni, nem valahol az oldal törzsében. Célszerű a szkripteket az oldal alján a záró címke elé helyezni. Ennek a megközelítésnek az az előnye, hogy az oldaltartalom megjelenítése előtt a böngésző csak a stílusokat tölti be, a szkripteket pedig utoljára tölti be, így a felhasználó gyorsabban láthatja az oldal tartalmát.

Rossz

Helló Világ!

Jobb

Helló Világ!

A képeknek mindig tartalmazniuk kell egy alt attribútumot. A böngésző erre az attribútumra támaszkodik, hogy kontextust biztosítson a képhez. Az alt attribútumnak szöveget kell tartalmaznia, amely akkor jelenik meg, ha a kép nem töltődött be.

Rossz

Jobb

Ez olyan oldalakat hoz létre, amelyek betöltése túl sokáig tart, és amelyeket nehéz karbantartani. Írjon minden stílust egy külön CSS dokumentumba. Próbálja meg minimálisra használni a címkét és a stílus attribútumot.

Írja meg kommentben a kódot, de ne vigye túlzásba. A tömören és egyértelműen megírt megjegyzések nagy segítséget jelenthetnek más fejlesztőknek, valamint fontos emlékeztetőként szolgálhatnak egy idő után.

Példa:

oldal

Adjon nevet a css osztályoknak a blokk tartalmának megfelelően, például: fejléc - fejléc, lábléc - lábléc, menü - menü, tartalom - tartalom. Ez sokkal áttekinthetőbbé és könnyebben karbantarthatóvá teszi a kódot.

Rossz kód

• 1. menüpont


• 2. menüpont


• 3. menüpont

Jó kód

• 1. menüpont


• 2. menüpont


• 3. menüpont

A CSS-ben is vannak szabályok, amelyeket betartva egyszerű, könnyen olvasható és jól szervezett kódot tarthat.

Beavatkozhatnak az általunk ténylegesen alkalmazni kívánt stílusokba. A szabványos böngészőstílusok visszaállításához szükséges fájlt innen töltheti le - reset.css.

Rossz kód

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-bal: 20px;

Jó kód

padding: 5px 10px 15px 20px;

Rossz kód

Elem (megjelenítés:blokk;pozíció: relatív;padding:5px 10px 15px 20px;)

Jó kód

elem (
kijelző: blokk;
pozíció: relatív;
padding: 5px 10px 15px 20px;
}

Rossz kód

padding: 10px 0px;
margó-bal: 0%;

Jó kód

padding: 10px 0;
margó-bal: 0;

Válassza el a fő blokkokat megjegyzésekkel, ez javítja a kód olvashatóságát.

Példa:

/*FEJLÉC*/
fejléc (
}
/*HEADER END*/

/*FŐ*/
fő(
}
/*FŐ VÉGE*/

/*FOOTER*/
lábléc(
}
/*Lábléc vége*/

Ezek az ajánlások és szabályok csak az alapok, hiszen HTML nyelvekés a CSS egyre gyorsabban fejlődik, és új módszereket fejlesztenek ki a helyes kód írására. Javaslatainkat követve biztos lehet benne, hogy kódja egyszerű, könnyen olvasható és optimalizált. Kapsz még +100 karmát és hálát a fejlesztőktől, akik utánad dolgoznak majd az oldalon.

Sziasztok, a blogoldal kedves olvasói. Ma azt javaslom, hogy folytassuk a beszélgetést, amelyről a fenti cikkben elkezdtünk. Még korábban megismerkedtünk a lépcsőzetes stíluslapokkal, megtanultuk, mit jelentenek, és még sok minden mást.

A lépcsőzetes stíluslapokról szóló összes anyag, amely már megjelent ezen a blogon, megtalálható a következő helyen: Ma először arról fogunk beszélni, hogyan lehet a kijelölőket kombinálni és csoportosítani, majd részletesen megvizsgáljuk, hogy milyen szabályok vonatkoznak ugyanarra az elemre a HTML kódban (Fontos, számláló szelektorok és írási szabályok a style attribútumban).

Tehát a korábbi cikkekben 7 típust sikerült figyelembe venni:

Ebből a hétből lehetséges típusok CSS-ben kombinációkat hozhat létre. Minden kombináció, amelyet készítünk, közvetlenül kapcsolódik (ősök - leszármazottak, szülők - gyerekek, testvérek - nővérek).

Az első típusú kombinációt kontextusválasztónak nevezik. Figyelembe veszi a HTML kódelemek kapcsolatát az „Ős – leszármazott” elv szerint:

A kombinációban lévő egyes kiválasztókat szóközzel kell elválasztani, és jobbról balra kell olvasni. Hogy. A CSS-szabályok ebből a kombinációból csak az utolsóra (a jobb szélsőre) vonatkoznak, és minden, ami előtte kerül, csak azt teszi lehetővé, hogy pontosabb alkalmazást (célzást) adjunk meg szabályainkhoz (kiemelés).

Az első példa azt állítja, hogy minden (félkövéren szedett) B elem, amelynek Div ​​elemei vannak, zöld színű lesz.

A fenti kódban csak az aláhúzott töredék lesz zöld színű, mert az ősei között van egy Div, és a második, B címkékkel kiemelt kódrészlet továbbra is az alapértelmezés szerint kiválasztott szín marad, mert a Div tároló már nincs az ősei között (csak P és Body):

Az ilyen kombinációk bármely böngészőben működnek.

A következő típusú kombináció a gyermekválasztó lesz, amely a „Szülő - Gyermek” típusú kódelemek közötti kapcsolatok elvein alapul:

(>-nál nagyobb elválasztójellel vannak írva):

Ez a bejegyzés A böngésző a következőképpen értelmezi: - esetén, amelynek „szülője” (legközelebbi őse) a Div tároló, pirossal lesz kiemelve.

A fenti példában csak a körvonalazott bekezdések lesznek piros színűek, mert közvetlenül abban a Div tárolóban vannak, amely a szülőjük (legközelebbi ősük). Ha módosítja a gyermekválasztó fenti példáját, hogy így nézzen ki:

Test > p (szín:piros)

Ekkor már csak az utolsó bekezdés lesz pirossal kiemelve, mert... szülője a Body címke, és az első két bekezdés az alapértelmezett színben marad (a Body a szülőjük, de nem a szülőjük, ami a Div). A gyermekválasztók nem működnek az Ie 6 böngészőben.

Az utolsó kombinációt szomszédos kiválasztóknak nevezik, és megfelel a „Sisters - Brothers” típusú HTML kódelemek közötti kapcsolatok elveinek. Használhatják a „+” vagy a „~” jelet elválasztóként:

Ez a bejegyzés azt jelenti, hogy az I (dőlt betűs) elem tartalma csak akkor lesz piros, ha a legközelebbi szomszédja balra (kódban fent) a B elem (félkövér). Például, ezt az állapotot ebben a példában követjük:

Ha a szomszédos választót Css kódban így írod be:

H1 ~ p (szín:piros)

Ez azt jelenti, hogy az összes olyan bekezdés (P), amelynek szomszédos H1 eleme (címsor) található a kódban magasabban, piros színű lesz. Ez kifejezetten a szomszédos elemekre vonatkozik (a „Nővérek – Testvérek” típusú kapcsolatok). Az alábbi példában az adott kijelölőhöz a bekarikázott bekezdések illeszkednek:

A szomszédos szelektorok kombinációi az Ie 6 böngészőben szintén sajnos nem támogatottak. Az Ie 6-ban csak az első típusú kombináció támogatott, az Ie 7-es és magasabb verziókban azonban az összes többi. Más böngészőkben nem lehet probléma.

A Css-ben lévő szelektorok csoportosíthatók is. Például, ha némelyikük egy vagy több azonos szabályt használ, akkor összevonhatók egy csoportba, hogy csökkentsék a Css kód mennyiségét.

A képernyőképen látható példában minden fejlécválasztónál megismétlődik (h1-3), ami bonyolultságot (többszörös munkát) okozhat, ha módosítani szeretné ennek a tulajdonságnak az értékét. Ezért a csoportos bejegyzés második lehetősége egy kicsit előnyösebbnek tűnik.

Kérjük, vegye figyelembe, hogy a csoportosítás során a kijelölőket vesszővel választjuk el. Ha több azonos szabály van, akkor a kódmegtakarítások észrevehetőbbek lesznek. És azokat a szabályokat, amelyek egyediek voltak, továbbra is egyenként kell leírni.

Most gondoljuk át, milyen stílust fog használni a böngésző, ha ehhez a HTML kódelemhez nincs megadva stílus? És ehhez van egy megfelelő specifikáció, ahol mindez le van írva.

Mint látható, a HTML és a Css végleges szétválasztása megtörtént. Azok. még tiszta HTML kód esetén is a böngésző továbbra is a stíluslapok alapértelmezett tulajdonságait fogja használni. Tehát az alapértelmezett tulajdonságok a legalacsonyabb prioritásúak.

A felhasználó által a böngésző beállításaiban hozzárendelt tulajdonságok magasabb prioritást élveznek. Ezeket a stílusokat a rendszer minden olyan dokumentumra alkalmazza, amelyet ebben a böngészőben tekint meg.

Igaz, nem minden böngészőben van ez a funkció, de legalább az Ie és az Opera megvan. Azok. Kívánt esetben a felhasználó saját CSS-fájlját is felveheti a stílusjelölés forrásaként.

Például az Ie-ben ehhez ki kell választania az „Eszközök” - „Internetbeállítások” lehetőséget a jobb felső menüben, majd az első „Általános” lapon kattintson az alsó „Megjelenés” gombra. A megnyíló ablakban jelölje be a „Tervezés egyéni stílus használatával” jelölőnégyzetet, és a „Tallózás” gombbal keresse meg a számítógépén szükséges CSS-stílusjelölő fájlt:

Azok. a felhasználónak lehetősége van arra, hogy a böngészőben megnyitott bármely webhelyet a CSS fájlban leírt követelményeinek megfelelően nézzen ki. Ezeket "felhasználói stílusoknak" nevezik, és elsőbbséget élveznek a specifikációban meghatározott alapértelmezett stílusokkal szemben. De az úgynevezett szerzői stílusok még nagyobb prioritást élveznek.

Vagyis ha én (az oldal fejlesztője) az alapértelmezett stílusoktól eltérő stílusokat akartam használni bármely HTML kódelem tervezésénél (ne feledje, ezek a specifikációban vannak leírva), akkor a felhasználó nem tudja felülbírálni a tervemet saját Css fájlja.

Kénytelen lesz ezt elfogadni a felhasználó? Nem. Képes a CSS-tulajdonságok prioritásának növelésére úgy, hogy mindegyik végéhez hozzáadja a Fontos elemet. Ezt a szót szóközzel elválasztva, felkiáltójellel elválasztva írjuk:

P (szín:piros !fontos;)

Ha a felhasználó saját stílusfájljában ugyanazzal a tulajdonsággal rendelkezik, mint az Important, amelyet a böngészőhöz kapcsolt, akkor az összes bekezdést pirossal látja. De a webhely szerzője (fejlesztője) ehhez a tulajdonsághoz használhatja a Fontos elemet is. Ki fog akkor nyerni, és kinek lesz magasabb prioritása?

Úgy döntöttünk, hogy a Fontos funkcióval rendelkező felhasználói stílusok minden esetben magasabb prioritást élveznek, mint a szerzői stílusok, akár a Fontos mellett, akár anélkül.

Foglaljuk össze lista formájában a stílustulajdonságok prioritásaival kapcsolatban bemutatott összes információt. A prioritás felülről lefelé csökken:

Azok. A Fontos nélkül a szerzői stílusok fontosabbak, és velük együtt a felhasználói stílusok a legfontosabbak és prioritást élveznek. Nos, most foglalkozzunk a szerzői táblázatokkal, mert amit a felhasználó csinál, az számunkra ismeretlen, és sötétségbe burkolózva.

Most áttérünk a lépcsőzetes CSS-stíluslapok kérdésére. Nézzük meg ezt egy példán keresztül, hogy világosabb legyen. Tegyük fel, hogy van egy kódrészletünk a következő HTML-elemekkel (egy bekezdés a Div tárolóban):

A tartály tartalma

Először írjuk le a következő tulajdonságokat:

P (szín:piros) .sbox (háttér:#f0f0f0)

Ennek eredményeként mind az első kerül alkalmazásra a bekezdésre (mivel a P címke alkotja), mind a tulajdonság, amely meghatározza Szürke háttér az „sbox” osztályú elemhez, amely ebben a bekezdésben is a következőket tartalmazza:

Most adjunk hozzá még egy tulajdonságot a második választóhoz (az osztályhoz), amely ütközik az első sorral (mindkettő beállítja a , de más értékeket használ):

P (szín:piros) .sbox (háttér:#f0f0f0;szín:kék)

Ez azt eredményezi, hogy a bekezdés szövegének színe piros helyett kékre változik.

Miért? Mert pontosan így lehet feloldani a konfliktust, amikor ugyanaz a HTML kódelem több azonos szabályt kap egyszerre, de különböző értékekkel és a Css kód különböző helyeiről. Annak meghatározásához, hogy melyik szabálynak van magasabb prioritása, meg kell számolnia a kiválasztókat.

Ezenkívül maguknak a válogatóknak van egy fokozata a prioritások szerint. Az azonosító a legmagasabb prioritású. Ebben a példában a szöveg színe pontosan azért lesz kék, mert az Id (#out) prioritása magasabb lesz, mint a címkeválasztóé (p):

P (szín:piros) #out (szín:kék)

A prioritási ranglétrán lejjebb vannak az osztályok, pszeudoosztályok és attribútumok választói. A következő példában a címke (p) újra lejátszásra kerül, és a bekezdés szövegének színe kék lesz, mert versenyez a magasabb prioritású (osztály) választójával:

P (szín:piros) .sbox (szín:kék)

Nos, a legalacsonyabb prioritást (nem számítva az univerzális *-ot, amely a legkisebb súlyú, és nem változtat az ilyen összeillesztéseken) a címkék és pszeudoelemek választói.

Div p (szín: piros) p (szín: kék)

Milyen színű lesz az eredményül kapott bekezdés szövege? Igaz, piros, mert... Ez a tulajdonság több címkeválasztóval rendelkezik (kettő az eggyel szemben). Oh hogy. Azok. Elsőként az azonosítókat veszik figyelembe. Ha a nyertest nem azonosítják, akkor osztályokat, álosztályokat és tulajdonságokat veszik figyelembe. Nos, ha ott semmi nem oldódott meg, vagy nem találtak ilyeneket, akkor a címkék és pszeudoelemek szelektorait veszik figyelembe.

De nagyon valószínű, hogy nem kerül ki győztes, és a versenyző osztályok válogatói összességében egyenlő elsőbbséget élveznek. Például egy Div-tárolóba zárt, régóta szenvedett bekezdésünkhöz:

A tartály tartalma

Teljesen lehetséges lenne egy ilyen CSS-kódrészletet írni:

Div.box #out(szín:piros) #in p.sbox(szín:kék)

És milyen színű legyen a bekezdés szövege? Mindkét kombináció pontosan leírja a bekezdésünket. Az elsőt szokás szerint jobbról balra kell olvasni: alkalmazza ezeket a tulajdonságokat (szín: piros) egy Id #out elemre, amely valahol a Div tároló belsejében található (legyen az „ősei között”) a következővel. osztály.doboz (div.box ). Teljesen megfelel a mi bekezdésünknek.

A második kombináció: alkalmazza ezeket a tulajdonságokat (szín:kék) egy sbox osztályú (p.sbox) bekezdéselemre, amely bármely #in azonosítójú elemen belül található. Ismét teljesen leírja a bekezdésünket. Számoljuk meg a kiválasztókat.

Az azonosítók mindkét kombinációban egyszer fordulnak elő, és ugyanez mondható el az osztályokról is. Már csak a címkeválasztókat kell megszámolni, de ezeket is ugyanannyiszor használják mindkét kombinációban (egy). Csapda.

Az eredmény azonos prioritások azonos tulajdonságokhoz, különböző értékekkel (piros vagy kék szöveg színe). Hogyan oldja meg a böngésző ezt a dilemmát?

Itt a szabály érvényes: aki utolsó, annak igaza van. Ezért az én példámban a bekezdés szövegének színe kék lesz, mert ez a tulajdonság (szín:kék) lejjebb található a kódban. Ha ezek a szabályok megfordulnak:

#in p.sbox(szín:kék) div.box #out(szín:piros)

Ennek eredményeként a bekezdés szövegének színe pirosra változik. Q.E.D. Bármilyen kombinációhoz hozzáadhat például egy másik címkeválasztót, és mi a javára billentjük a mérleget, még akkor is, ha nem lejjebb van a kódban:

Törzs #a dobozban(szín:kék) div.box #out(szín:piros)

Ebben az esetben a bekezdés színe kékre változik. Az univerzális „*” választónak nincs hatása a prioritások kiszámítására. Mellesleg fentebb megvizsgáltuk a CSS-szabályok prioritásának növelésének módját a Fontos hozzáadásával. Példánkban ez így nézhet ki:

P (szín:zöld !fontos) #in p.sbox(color:blue) div.box #out(color:red)

Milyen színű lesz ebben az esetben a bekezdés szövege? Zöld, természetesen. És még csak nem is kell számolnia semmit, mert a Fontos hozzáadás a style tulajdonsághoz egyértelműen megoldja ezt a vitatott problémát, függetlenül attól, hogy hol található a kódban, és nem számít, hány kiválasztója van.

De a Fontos nem az egyetlen módja annak, hogy feltétel nélkül növelje egy ingatlan prioritását. A javítás másik módja a stílustulajdonságok használata a szükséges HTML-elem Stílus attribútumában.

Azok. ugyanabban a régóta szenvedő P címkében adjon hozzá egy Stílus attribútumot, amely bármilyen színt megad:

A tartály tartalma

Ez az. Mostantól függetlenül attól, hogy egy külső stíluslapfájlban vagy a Style Html kódcímkékben milyen tulajdonságok vannak megadva ehhez az elemhez, a bekezdés szövegének színe sárga lesz.

De nem fogja tudni legyőzni a tulajdonságokat a Fontos funkcióval. Azok. az utolsó példában, ahol hozzáadtuk a "p (szín:zöld !fontos) szabályt", a szöveg színe továbbra is zöld lesz, annak ellenére, hogy style="color:yellow".

Valójában a két szabály prioritása (a külső stíluslapfájlban és a style attribútumban az Important mellett) egyenlő, ami azt jelenti, hogy tovább kell számolnunk a kijelölőket. Tényleg benne lehetnek a stílus attribútumban?

Igen, nem lehet, ami azt jelenti, hogy a style attribútumban írt szabály mindig veszít a Fontos szabálynál, csak a kisebb számú kijelölő miatt (a nulla bármely számnál kisebb lesz).

Nos, mi lesz akkor a legnagyobb prioritás? Css tulajdonság? Így van, a style attribútumban lesz írva, sőt a Fontos:

p (szín:zöld !fontos) #in p.sbox(color:blue) div.box #out(color:red)

A tartály tartalma

Ebben az esetben a bekezdésszöveg színe sárga lesz, és ezt nem lehet bármivel megszakítani a szerző stílusában. Megtaláltuk a stílusok beállításának abszolút módját. Csak a saját stílusfájljával és az ehhez megadott Important tulajdonsággal rendelkező felhasználó szakíthatja meg.

Tehát próbáljunk meg egy listát összeállítani azon tényezőkről, amelyek befolyásolják a tulajdonságok prioritását a szerzői stílusokban, csökkenő sorrendben:

Valójában a style attribútum szabályait rendkívül ritkán használják (képzeld el, milyen nehéz lenne ebben az esetben a teljes webhelykódot módosítani, és nem külön fájl CSS).

Ezt az attribútumot főleg akkor használják, ha valamit gyorsan kell tesztelni. Nos, az is kényelmes, ha beszúrod a kódodat mások HTML-oldalaiba, amelyeknek megvan a saját stílusuk, és ami örökölhető () a beillesztett elemekhez.

Miért és hogyan illessze be a kódját mások oldalaira? Lehet, hogy nekünk nincs rá szükségünk, de a Yandex és a Google megteszi ezt mások webhelyein (a mi webhelyeinken) amikor vagy másoknak.

Ha hozzáadja a style attribútumot a hirdetésblokk kód minden eleméhez, a benne megadott tulajdonságokkal és a Fontos elemmel, többé nem kell attól tartania, hogy a hirdetési kód bármilyen módon megváltozik (bár a Yandex hirdetések továbbra is módosíthatók CSS-sel és Fontos, láthatóan nem ezt a módszert használták).

Sok szerencsét! Hamarosan találkozunk a blog oldalain

Lehet, hogy érdekel

Címke-, osztály-, azonosító- és univerzális szelektorok, valamint attribútum-választók a modern CSS-ben
Álosztályok és pszeudoelemek választói a CSS-ben (hover, first-child, first-line és mások), a HTML kódcímkék közötti kapcsolatok
Listastílus (típus, kép, pozíció) - CSS szabályok a listák HTML-kódban való megjelenésének testreszabásához
Mire való a CSS, hogyan lehet a lépcsőzetes stíluslapokat csatlakoztatni HTML dokumentumés ennek a nyelvnek az alapvető szintaxisa
CSS - mi ez, hogyan kapcsolódnak a lépcsőzetes stíluslapok a HTML kódhoz a stílus és hivatkozás segítségével
Méretegységek (pixelek, Em és Ex) és öröklési szabályok a CSS-ben
Háttér a CSS-ben (szín, pozíció, kép, ismétlés, melléklet) - minden a HTML-elemek háttérszínének vagy háttérképének beállításához
Hogyan lehet megtalálni és eltávolítani a nem használt stílussorokat (extra kiválasztókat) a webhely CSS-fájljában? Különféle kialakítás a belső és Külső linkek CSS-en keresztül