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/menus.html W3C është e mbrojtur nga copyright.

Një mbështetën-down menu

Menu ju shihni në cep të drejtë të lartë të kësaj faqe është thjesht një DIV A me disa elemente brenda. Të gjitha të punojë për të bërë atë qëndrim të caktuar në vendin e tij është bërë nga rregullat në fletë stil. Këtu është ngritje çmimi, kjo është marrë direkt nga burimi i kësaj faqe:

<div class="banner">
<p>
<a href = "..../../">< img alt = "W3C" src = "....../ Icons/w3c_home "> </ a>
<a href = "....../ Konsorciumit / Aktivitete "> Aktivitete </ a>
<a href = "....../ TR / "> Teknike. Njofton </ a>
<a href = "....../ Help / Siteindex "> index Site </ a>
<a href = "....../ Konsorciumit / Translation / "> Translations </ a>
<a href = "....../ Statusi "> Programe </ a>
<a href="http://search.w3.org/"> Search </ a>
<em> Pranë: </ em>
<a href = "..../ "> Style </ a>
<a href = "..../ CSS / "> CSS </ a>
<a href="./"> tips & tricks </ a>
</ div>

Në një shfletues pa CSS, ose me CSS fikur, kjo do të jetë vetëm një paragraf me lidhje normale. Por në sajë të rregullave më poshtë, ajo do të duket për të "noton" në krye të faqes, mbështetën të drejtën e sipërme të dritares së shfletuesit:

div.banner (
  margin: 0;
  font-size: 80% / * vogël * /;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  Top: 2em;
  left: auto;
  width: 8.5em;
  drejtë: 2em;
)
p div.banner (
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: # 900;
  border: fillimi i hollë # 900;
  color: white;
)

a, div.banner div.banner em (display: block; margin: 0 0.5em)
a, div.banner div.banner em (border-top: 2px zakon # 900)
një div.banner: së pari fëmijë (border-top: none)
em div.banner (color: # CFC)

div.banner a: link (text-decoration: none; color: white)
një div.banner: visited (text-decoration: none; color: # CCC)
div.banner a: hover (background: black; color: white)

Rregullat interesante këtu janë position: fixed ', që e bën të qëndrojë DIV fiksuar në ekran, dhe" display: block që bën një elementeve brenda DIV në elementet e bllokut, dhe kështu shfaqet me poshte njëri-tjetrin, në vend se të gjithë në një rresht.

Kini kujdes me qëllim që të tre rregullat e fundit. Ata të gjithë kanë të njëjtën specifike, kështu që një e fundit që vlen përcakton ngjyra. Nëse rri pezull mausit mbi linkun, ne :hover për të aplikuar, kështu që duhet të jetë e fundit.

Pjesa tjetër, kufijtë, kufijtë, ngjyrat, etj mund të hiqet apo ndryshohet në përputhje me shije personale. Shënim, megjithatë, se si ne e bëmë rregullat mes links: aty janë kufijtë e mbi të gjitha lidhjet, me përjashtim të parë, në sajë të rregull me :first-child '. Një palë e rregullave si ky kufi (-lartë në të gjitha elementet plus asnjë një kufi 'në fëmijën e parë) është shumë i përshtatshëm për krijimin e kufijve në mes të elementeve.

(Në qoftë se shikoni në fletët e stilit aktuale që janë të lidhura nga kjo faqe, baner-k.css dhe banner.css, ju do të shihni disa rregulla shtesë që duket se e kundërshtojnë njëri-tjetrin. Ata janë atje për të mbrojtur kundër të mete në disa shfletues të vjetër. Në veçanti, në flamurin-o.css, flamurin është i fshehur dhe në banner.css është shfaqur si një bllok. Kjo ka efekt të fshehur flamurin nga Netscape 4, sepse skips @ importin e banner.css.)

FAQ: IE 5 & 6 në Windows?

Nëse shihni në këtë faqe me Microsoft Internet Explorer 5 ose 6 në Windows ( "WinIE5" dhe "WinIE6"), ju do të vëreni se ajo nuk punon. Të paktën jo me verzionet e tanishme si e shtator 2002. Shumë njerëz më pyesni për këtë, kështu që këtu është pak shpjegim. Në shkurt: bug është në shfletuesin jo, në këtë faqe.

WinIE5 dhe WinIE6 nuk implementuar 'fiks' deri tani. Kjo është fatkeq, por problemi i madh është se ata edhe nuk e kuptoj qëndrimin e pronës 'saktë. Një shfletues që nuk e di 'fiks' duhet të hedhin larg rregull 'position: fixed' dhe i drejtohem në çfarëdo vlerën e mëparshme të 'position' në fletë stil ishte. Ne pastaj mund të shtoni 'position: absolute' pak para 'fiks' dhe shfletuesit do ta përdornin këtë. Por në WinIE 5 dhe 6 që nuk është se çfarë ndodh. Me sa duket fjalen 'fiks' është interpretuar disi si 'statike.

Ju nuk mund të bëjë WinIE5 dhe 6 përkrahje 'fiks', por nuk është një punë rreth problemit për analizë gramatikore. Johannes Koch alarmuar mua për këtë mashtrim (nga mbledhja e tij e punës arounds). Pari të zëvendësojë 'position: fixed' në stilin e rregullave të mësipërme nga "position: absolute 'dhe pastaj futur rregull pas një pak më i ulët në fletë style:

body> div.banner (position: fixed)

(Nëse është DIV.banner brenda një tjetër element shumë se TRUPI, të zëvendësojë TRUPI deri në atë element.) Efekti i kësaj është se shfletues që di në lidhje me '=>' fëmijë () përzgjedhës i CSS do të përdorin këtë rregull, por shfletues që nuk bëjnë, në WinIE5 të veçantë dhe WinIE6, do ta injorojë atë. Pozicion rregull ': absolut' do të përdoret në vend dhe menuja do të jetë në vendin e duhur, përveç se ajo nuk do të qëndrojnë të caktuar, kur keni rrotull.

Është e rëndësishme që nuk ka hapësira rreth '=>'.

 

Additional CSS resources:

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