Falinn í djúpum CSS forskriftunum finnur þú CSS rásir. Eins og nafnið gefur til kynna leyfir þér að telja hlut á síðunni þinni með CSS sem hækkar gildi í hvert skipti sem það birtist á skjalinu.
Þetta er aðallega gagnlegt ef þú ert með kennsluvef - hvort sem það snýst um matreiðslu eða vefur þróun - þau hafa öll skref til að fylgja, og þú munt líklega þurfa að skrifa skrefnúmerið fyrir raunverulegt innihald. CSS tölur geta hjálpað með því að gera það sjálfkrafa, þú getur jafnvel notað það til að telja myndirnar á skrána og bæta við myndarnúmerum fyrir texta.
Í þessu dæmi mun ég sýna hvernig á að ná þessu með því að búa til einfalt uppskrift fyrir pönnukökur og gera CSS leit að upphafi hverrar málsgreinar og bæta við fjölda skrefið fyrir það.
Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.
Now add 1 tbsp vegetable oil and whisk thoroughly.
Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.
Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.
Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.
Markmiðið í þessu HTML er að hver málsgrein er annað skref og með CSS getum við bætt þeim virkan með því að skrifa eins lítið og 3 línur af kóða.
CSS borðar nota eigna gegn hækkun. Það hefur verið í kring fyrir a á meðan það var í raun hrint í framkvæmd í CSS 2.1, til að nota það verðum við fyrst að endurstilla sjálfgefið gildi sölunnar á 0 áður en allt sem við viljum treysta á síðunni, þannig að það er góð hugmynd að skilgreina þetta í líkamsstíll, eins og svo:
body {counter-reset: steps;}Þessi lína setur bara borðið aftur á 0 og það nefnir það líka, sem gerir okkur kleift að hringja í það síðar og leyfa okkur einnig að hafa fleiri en eina borðið á síðunni.
Næsta skref er að nota gervileikinn : áður en þú miðar á öll málsgreinar og bætist við skrefatalið áður en textinn hefst. Til að gera það þurfum við að nota gegn hækkun, þá tilgreina innihaldið. Við getum bara notað númerið eða við getum bætt við eða undirbúið einhvern texta. Í þessu tilfelli munum við prenta "Skref" fyrir gildi virkar, eins og svo:
p:before {counter-increment: steps;content: "Step " counter(steps) ": ";}Við ættum einnig að gera þetta efni standa út smá og til að gera það munum við gefa það stærri leturstærð en málsgreinar og gera það feitletrað:
p {color: #242424;font-family: arial, sans-serif;font-size: 16px;line-height: 20px;}p:before {counter-increment: steps;content: "Step " counter(steps) ": ";font-weight: bold;font-size: 18px;}Ef þú vilt sjá þessa hugmynd í aðgerð geturðu séð penninn sem ég bjó til.
Stöðug áhyggjuefni þegar unnið er með CSS er stuðningurinn í vafranum, en þar sem þetta er CSS 2.1 innleiðing er stuðningur vafrans mikill: það er studd af öllum helstu vöfrum, skrifborð og farsíma, eina mikilvæga vafrinn sem styður ekki það er IE7, og samkvæmt stýrivexti IE7 er aðeins notuð um 0,61% af fólki þannig að ég held að við getum sagt að IE7 muni fara fljótlega frá. Hvort sem þú þarft að styðja IE7 er það háð stöðu þinni á þínu eigin vefsvæði.
CSS mælirinn er ekki eitthvað sem þú munt nota í hverju verkefni en það er eitthvað sem þú ættir að halda í huga þínum vegna þess að einhvern tíma getur það komið sér vel.
Hefur þú notað CSS tölur í verkefni? Hvað er hægt að sjá fyrir þá? Láttu okkur vita í athugasemdunum.