Style Sheets Web
CSS tips & tricks

Ky dokument është një përkthim i "CSS Tips & Tricks." Përkthimi nuk është një përkthim i normative dhe mund të përmbajë gabime e përkthimit. Rishikimi i statusit të vetëm në anglisht në dokument http://www.w3.org/Style/Examples/007/maps.html W3C është e mbrojtur nga copyright.

Një menu konfeti

Menu ngjyra shihni më poshtë është thjesht një element DIV me elemente brenda disa P. Efekti vizual është për shkak të faktit që çdo element P është i pozicionuar në mënyrë individuale dhe ka font vet dhe ngjyra. Ajo punon mirë me tekste të shkurtra, sepse efekti vizual është i bazuar në përputhen, por në qoftë se teksti është shumë e gjatë, ajo përputhet aq shumë sa që bëhet e vështirë për të lexuar.

Fletë stili lejon për një menu e deri 10 elemente, përdor shembullin e mësipërm 8. Këtu është HTML e shembullin e mësipërm:

<div class="map">
<p id="p1"> <a href = "..../ CSS / # news "> Çfarë ka të re?</ a>
<p id="p2"> <a href = "..../ CSS / # mësuar "> Learning CSS </ a>
<p id="p3"> <a href = "..../ CSS / # browsers "> CSS Browsers </ a>
<p id="p4"> <a href = "..../ CSS / # redaktorët "> Authoring Tools </ a>
<p id="p10"> <a href = "..../ CSS / # syze "> Specs </ a>
<p id="p6"> <a href = "..../ CSS / Test "> CSS1 Test Suite </ a>
<p id="p9"> <a href="/StyleSheets/Core"> W3C Core Styles </ a>
<p id="p8"> <a href="http://jigsaw.w3.org/css-validator/"> CSS Validator </ a>
</ div>

Shënim klasës "hartë" në DIV element, që e bën atë në një enë për menu, dhe ID atributet mbi Ps. Elementet P secili duhet të ketë një (të ndryshme) ID, i quajtur P1, P2, ... ose P10. Nuk është e nevojshme të përdorë kartat e identitetit në mënyrë që (siç tregon shembull). Ju mund të përdorni fletë style by kopjimi atë në fletë stilit tuaj, ose duke përdorur @ import apo një element LIDHJE të importojë map.css direkt nga site W3C: ose

@ "import http://www.w3.org/Style/map.css";

ose

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

Shpjegimi i fletë stil

Këtu është se si punon fletë stil. Fletë stili fillon me përcaktimin e një element DIV me klasë "hartë". Ajo krijon një hapësirë 190px të lartë në të cilën përmbajtja e elementeve P do të vendoset. Secili prej elementeve me ID p1 të P10 është dhënë pastaj një ngjyrë dhe një font, dhe çdo element i pozicionuar brenda hapësirës krijuar nga DIV me anë të pasurisë diferencë '': një diferencë të lartë negativ lëviz element deri në DIV hapësirë dhe një diferencë pozitive fund siguron element tjetër fillon përsëri në fund të DIV.

(Dobësi e fletë stili është se ajo ka gjithçka në px. Ju mund të dëshironi të ndryshojë atë të përdorni përqindjet në vend, në qoftë se ju keni një shfletues që zbaton CSS mirë.)

DIV.map (/ * Rezerva disa dhoma për lidhjet * /
  padding-top: 190px;
  margin-left:-2em; / * Adapt këtë faqe tuaj ... * /
  margin-right:-2em; / * Adapt këtë faqe për të tuaj ... * /
  margin-bottom: 4em;
  margin-top: 5em;
  qartë: të dyja;
  text-shadow: 0.2em 0.2em / * 0.2em * / argjendi)

# P1, P2 #, # p3, # P4, P5 #, # p6, # P7, # P8, P9 #, # P10 (
  white-space: nowrap)
# P1, P2 #, # p3, # P4, P5 #, # p6, # P7, # P8, P9 #, # P10 (
  text-indent: 0)
# p1 A, # p2 A, # p3 A, # p4 A, # P5 A, # p6 A, A # P7, P8 # A, # P9 A, # P10 A (
  text-decoration: none)

# p1, # p1 A (color: # DDD; font: 100px / 1 e ndikimit, Narrow Helvetica, sans-serif)
# p2, # p2 A (color: # 000; font: 40px italic / 1 "" Gjeorgjia, serif)
# p3, # p3 A (color: # 080; font: 40px / 1 "Verdana", sans-serif)
# p4, # p4 A (color: # 37F; font: bold 40px / 1 Courier New, Courier, monospace)
# P5 # P5 A (color: # F73; font: bold 100px / 1 "Verdana", sans-serif)
# p6, # p6 A (color: # 22A; font: bold 25px / 1 "Verdana", sans-serif)
# P7, # P7 A (color: # 088; font: 80px italic / 1 "Verdana", sans-serif)
# P8, # P8 A (color: # 088; font: 20px italic / 1 "Verdana", sans-serif)
# P9 # P9 A (color: # 088; font: 20px italic / 1 "Verdana", sans-serif)
# P10, P10 # A (color: # F73; font: bold 60px / 1 "Verdana", sans-serif)

# p1 (text-align: right; margin: 185px-0 85px 0) / * drejtën e lartë * /
# p2 (text-align: left; margin: 190px-150px 5% 0) / la * top * /
# p3 (text-align: right; margin: 90px-35% 50px 0) / * qendër * /
# p4 (text-align: right; margin:-95px 0 55px 0) / * drejtën qendër * /
# P5 (text-align: left; margin: 130px-0 30px 0) / * Qendra e majtë * /
# p6 (text-align: left; margin: 40px 0 15px-35%) / * fund qendër * /
# P7 (text-align: right; margin: 80px-0 0px 0) / * fund djathtas * /
# P8 (text-align: left; margin:-40px 0 20px 3%) / * fund majtas * /
# P9 (text-align: right; margin: 25px-0 5px 0) / * fund djathtas * /
# P10 (text-align: left; margin: 130px-0 70px 0) / * Qendra e majtë * /

Sigurisht, ju jeni të lirë për të ndryshuar stilin fletë të provoni fonts të ndryshme, ngjyra dhe pozita, ose për të krijuar rregullat shtesë stil për më shumë se 10 elementeve. Gjithashtu, hidhini një sy në kufijtë majtas dhe djathtas të DIV: ato janë bërë negativ, në mënyrë që meny është e gjerë se sa teksti përreth, por në faqen tuaj diferencë nuk mund të jetë mjaft e gjerë për këtë, dhe kështu ju mund të keni të hiqni këto rregulla.

Nëse ju provoni stil, ju mund të vëreni se ajo nuk punon shumë mirë në Netscape 4. Kjo është Netscape 4 gabimi, natyrisht. Megjithatë, map-ns.css është një fletë stil që është i ngjashëm dhe që duket se punojnë në rregull në atë browser. Mashtrim e mëposhtme në kokë i HTML dokumentin tuaj do të lejojë version for Netscape 4 dhe versionin e mësipërme për të mirë Implementimi CSS të bashkë-ekzistojnë:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

Implementimi korrekt CSS do të lexoni të dy fletëve stil, por rregullat në një të dytë refuzo e parë, kështu që përveç një punë pak të panevojshme, nuk ka ndryshim. Netscape 4, megjithatë, nuk do të ngarkesës fletë stili e dytë, për shkak të "mediat" atribut, se ai nuk e kupton.

Gjithashtu, ju mund të pyes veten pse elemente janë të pozicionuar me anë të kufijtë (negativ), ndërsa kjo duket të jetë një kandidat kryesor për pronat e pozicionuar absolut. Në të vërtetë, ju mund të bëni të njëjtën me 'position' dhe 'left' drejtë & ''. Arsye që kjo fletë stili përdor kufijtë në vend, është se në këtë mënyrë ajo punon në shfletues se vetëm zbatimin CSS1.

 

Additional CSS resources:

csswebguide.com | writecss.com | optimalcss.com
csslectures.com | improvecss.com | cssfirststep.com