A CSS tervezése a listák megszilárdításával, számítógépes dokumentációról
CSS Tervezés: Taming Lists
Azért nem regisztráljuk őket listákként, hogy nem szeretnénk látni egy jelzőt a menü minden linkje előtt. Az előző cikkben a CSS használatával beszéltem az oldalelrendezés egyes módszereiről. Az egyik ilyen technikában megtanultuk, hogyan nyomtassunk ki sorokat egy sorban, és ne függőlegesen.
Ebben a cikkben megmutatom neked, hogyan lehet megszégyeníteni ezeket a csúnya és könyörtelen listákat a CSS használatával. Ez elég ahhoz, hogy a weboldalain keresztül tévelyegjenek. Itt az ideje, hogy elmondja nekik, hogyan viselkedjenek.
Az aréna előkészítése
A képzés témaként egyszerű nem rendezett listákat választottam. Az itt említett összes CSS-szabály az azonos eredményű számozott listákra alkalmazható. A példákban (kivéve a kifejezetten meghatározott eseteket) az alábbi lista kerül felhasználásra:
- 1. pont
- 2. tétel
- 3. pont
- 4. pont
- Az 5. pont kicsit hosszabb ideig teszi ezt az elemet,
így a következő sorra megy
Minden lista egyszerűen egy különálló elem belsejébe kerül
#base határ: 1px szilárd # 000;
margin: 2em;
szélesség: 10em;
párnázottság: 5px;
>
További stílusszabályok nélkül az alapvető DIV-e listája így fog kinézni:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
helymeghatározás
A következő példában az UL elem baloldali bal és padding-left tulajdonságai 0:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
Vegye figyelembe, hogy a jelölők a DIV határán kívül esnek. Ha a tartály nem DIV, de
dokumentum, a jelölők a böngészőablakon kívül maradnak, azaz eltűnt volna a szeme elől. Ha azt szeretné, hogy a jelölők a DIV határain belül feküdjenek, a bal oldali szélén adja hozzá a bal padding tulajdonságot vagy a bal margó tulajdonságot 1em-hez.Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
Tegyük fel, hogy speciális jegyzékekkel kell rendelkezned. Hogyan csináltál korábban? Egy táblázatot hoztak létre, egy oszlopban egy marker gif-képét helyezték el, és jobbra és jobbra mozgatták a cellában. A másik oszlopban a szöveg lett elhelyezve, ami az elemek között szerepelt
A stílus szabály így néz ki:
ul list-style-image: url (bullet.gif);
>
A böngésző így megmutatja a listát:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
Azoknál a böngészőknél, amelyek nem támogatják a rajz kimenetét, adja hozzá a következő sort a szabályokhoz:
A megjelölésként kiválasztott képek "kúszhatnak" a listából. Ennek elkerülése érdekében helyezze a képet a blokk belsejébe
Mindhárom kijelentés egyetlen rövid szabályba illeszthető:
ul list-style: lemez url (bullet.gif) belül;
>
ul list-style-type: lemez;
list-style-image: url (bullet.gif);
list-style-position: inside;
>
Az így kapott lista így fog kinézni:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
Előfordul, hogy van egy listája, de nincsenek jelölők, vagy jelzőként más szimbólumot akarsz használni. A CSS ismét siet, hogy segítsen neked. Adja hozzá a szabálylista-stílusát: none; és készítsd el az elemeket
ul list-style: none;
margin-left: 0;
padding-left: 1em;
szöveg-indent: -1em;
>
Vagy az ingatlan bal padding. vagy a bal margó tulajdonságot 0-ra kell állítani, és a másik tulajdonságnak 1em-nek kell lennie. Ennek a tulajdonságnak a megváltoztatásával beállíthatja az ujjméret méretét a jelölőből az elfogadható értékre. A szöveges szöveget tartalmazó tulajdonság negatív értéke azt eredményezi, hogy a lista minden egyes elemének első sorai balra tolódnak, és a "többi" a szöveg többi részén.
A következő lista normális lesz, például csak egy szabványos HML-szimbólumot használunk markerként. " amely megfelel a záró tipográfiai idézőjelnek: ".
"Az 5. pont kicsit hosszabb ideig teszi ezt a pontot, így a következő sorra megy
Meg kell jegyezni, hogy Netscape6 / 7 / Mozilla (és más származékai Gecko-böngészőt) és az Opera képes generálni tartalmi elem a pszeudo: mielőtt a szabványos CSS2. Mi ezt automatikusan generálja a szimbólum „, vagy más jellegű, mint a marker. Így nem kell kézzel beírja minden LI elem. Ha az Opera vagy a családdal böngészők, a Gecko, a következő CSS hoz létre a lista azonos és az előzőt, de nem kell semmit hozzáadnia a listához.
# custom-gen ul li: tartalom előtt: "\ 00BB \ 0020";
>
A tartalom tulajdonsága szövegszöveghez, URL-hez vagy máshoz rendelhető, beleértve a speciális karaktereket is. Ha a típusszimbólumot választotta, meg kell adnia a karakter hexadecimális kódját. A jog a kódot nyomtat idézetek \ 00BB (a többi karakter \ 0020 - ez egy hely kerül esztétikai okokból). A végeredmény az alábbiakban látható (lásd az Opera böngészőt vagy a Mozilla / Netscape programot):
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
Létrehozunk egy listát egy sorban
Ki mondta, hogy a listáknak függőlegesen kell haladniuk, és a markereknek balra kell formálniuk? Például, ha szüksége van egy számozott hivatkozások listáját, de vizuálisan szeretné a listát az oldalon nézett ki, mint egy függőleges navigációs sáv. Vagy azt mondja, hogy a linkeket vízszintesen kell elhelyezni az oldal felső szélén.
Ez nem csak a referenciák listájára vonatkozik. Előfordulhat, hogy több bekezdést kell felsorolni egy bekezdésen belül (például egy könyvlista). Szerkezetileg - ez a lista, de előtte, ha ezt tetted, ez a lista megtöri a bekezdésedet. A CSS ismét jön a mentéshez!
Mivel ez a lista nem jelenik meg az oldalon, mint valami különálló, a korábbi listákban nem teszem meg az alap DIV-ben. Ezúttal a jelölés így fog kinézni: bekezdés, lista, következő bekezdés.
Már hallottam a sikolyokat: "Doodle, azt hittük, megtanít minket, hogyan tegyük a listákat egy bekezdésbe, nem két bekezdés között."
És erre válaszolok: "Nos, igen, igazad van." Sajnos (X) a HTML nem teszi lehetővé, hogy listákat helyezzen el egy bekezdésben, de stílusokkal megteheti ezt. "
Először itt a stílus szabályai:
# inline-list határ: 1px szilárd # 000;
margin: 2em;
szélesség: 80%;
párnázottság: 5px;
betűtípus-család: Verdana, sans-serif;
>
# inline-list p megjelenítés: inline;
>
# inline-lista ul, # inline-list li kijelző: inline;
margin: 0;
párnázottság: 0;
szín: # 339;
font-weight: bold;
>
Minden kód be van helyezve
Az eredmény így néz ki (a lista kiemelve kék színű):
Néhány szöveg jelenik meg a lista előtt. Talán a kontextus egy olyan férfinak, aki felhívja a feleségét, hogy vegyen fel néhány dolgot otthonról a munkából. Nem számít, hogy a mi célunkra csak egy korábbi szövegre van szükségünk a lista előtt:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy.
És ott van a szöveg, amely a bekezdésben szereplő listát követi. Egy vagy két mondat elegendő a példához.
Mint a fenti példában egy jelölővel, automatikusan generálhatunk vesszőket és időszakokat a CSS használatával. Ha a látogatók csak az Opera és a Gecko böngészőket használják, nem kell aggódnia. A stílusszabályok így fognak kinézni:
# inline-list-gen ul li: tartalom után: ",";
>
# inline-list-gen ul li.last: tartalom után: ".";
>
Itt használjuk az ál-elemet: utána vesszőt adunk minden listaelem végén, és állítsuk be a pontot az "utolsó" osztályosztály használatával. Az eredmény ez lesz (ne felejtsd el, csak Opera vagy Mozilla / Netscape):
Néhány szöveg jelenik meg a lista előtt. Talán a kontextus egy olyan férfinak, aki felhívja a feleségét, hogy vegyen fel néhány dolgot otthonról a munkából. Nem számít, hogy a mi célunkra csak egy korábbi szövegre van szükségünk a lista előtt:
Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy
És ott van a szöveg, amely a bekezdésben szereplő listát követi. Egy vagy két mondat elegendő a példához.
Amint azt a linkek menü elején említettem, melyeket minden oldalon látunk, azokat listáknak kell összeállítaniuk, amelyek lényegében és lényegében. Mivel nem szeretnénk látni ezt a listát, ahogy a böngésző alapértelmezés szerint megjeleníti, a CSS használatával kozmetikai változtatásokat hajthatunk végre. Már tudjuk, hogy a listák speciálisan horizontálisan (egy sorban), és nem csak függőlegesen jelennek meg (alapértelmezés szerint). A stílusok segítségével a jelölők eltávolíthatók, és a lehetőségek széles skálája jelenik meg a kezében, hogyan lehet elválasztani a lista egy elemét a másiktól.
Íme néhány példa a vízszintes listákra, amelyeket ugyanabba a DIV bázisba helyezünk az alábbi szabályok szerint.
# h-contain padding: 5px;
határ: 1px szilárd # 000;
margin-bottom: 25px;
>
Az alábbi két példa ugyanazt az UL-t használja, csak az utolsó bekezdés hosszú szövege nélkül. Hozzáadott egy további osztály is, amely lehetővé teszi, hogy külön dolgozhasson az egyik LI-ben a listában.
A szimbólum | Gyakran használják a különböző választási lehetőségeket. Természetes, hogy a menüben használja. Ezt a szimbólumot LI határok segítségével szimuláljuk.
#pipe ul margin-left: 0;
padding-left: 0;
kijelző: inline;
>
#pipe ul li margin-left: 0;
párnázottság: 3px 15px;
border-left: 1px szilárd # 000;
lista-stílus: nincs;
kijelző: inline;
>
#pipe ul li.first margin-left: 0;
border-left: nincs;
lista-stílus: nincs;
kijelző: inline;
>
Hozzáadtunk egy osztály osztályt "első" az első LI-hez, hogy nincs bal oldali felesleges határa.
Elemezzük a stíluslap szabályát szabály szerint, és megmagyarázom, miért van szükségük mindegyikre.
#button width: 12em;
határ-jobb: 1px szilárd # 000;
párnázottság: 0 0 1em 0;
margin-bottom: 1em;
betűtípus-család: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Genf, Helvetica,
Arial, sans-serif;
háttérszín: # 90bade;
szín: # 333;
>
#button ul list-style: none;
margin: 0;
párnázottság: 0;
határ: nincs;
>
#button li border-bottom: 1px szilárd # 90bade;
margin: 0;
>
#button li a display: blokk;
párnázottság: 5px 5px 5px 0.5em;
border-left: 10px szilárd # 1958b7;
határ-jobb: 10px szilárd # 508fc4;
háttérszín: # 2175bc;
szín: #fff;
text-decoration: none;
szélesség: 100%;
>
html> body #button li a szélesség: auto;
>
#button li a: hover border-left: 10px szilárd # 1c64d1;
határ-jobb: 10px szilárd # 5ba3e0;
háttérszín: # 2586d7;
szín: #fff;
>
Végül eljutottam a linkekhez. Az eredeti kivitelben 10 pixel volt bal és jobb oldalán. Ezek a határok megváltoztatták színüket a háttérrel együtt, miközben az egeret lebegették. Ez a viselkedés meglehetősen könnyű elérni az ál-osztály használatával: lebeg. így a szegély és a háttér színeinek módosítása hatással van az elemekre .
Itt használtam egy trükket: a linkek viselkedését a teljes blokkra (szélességre és magasságra) kiterjesztve hozzárendeltem a kijelzőt: blokk, szabály. Ez minden böngészőben működött, kivéve az IE for Windows programot. Ha kifejezetten megadja a 100% -os szélességet, az IE for Windows mindent meg fog érteni. De ugyanakkor problémákat okoz az IE5 böngészőkben a Mac és a Netscape / Mozilla esetében. Így becsaptam: a gyermekválasztó ">" használatával a szélességet "automatikus" -ra állítottam. Mivel a Windows IE böngészője nem ismeri a gyermekszelektort, figyelmen kívül hagyja ezt a szabályt. Az IE5 Mac, az Opera és a Netscape / Mozilla megértette ezt a szabályt, és mindenki boldog volt.
A pszeudosztályra vonatkozó szabály: a lebegés megváltoztatja a háttér és a szegélyek színét, amikor az egeret az összeköttetés felett lebeg.
A jéghegy csúcsa
Mark Newhouse (Mark Newhouse) vezeti a gnuhaus.com blogot. működik a noao.edu. és cikkeket ír a realworldstyle.com-ra.