1. Reguli CSS abreviate pentru font
Pentru a determina stilul fontului în CSS, de exemplu:
Cu toate acestea, acest lucru nu este necesar, deoarece poate fi utilizată următoarea versiune prescurtată:
Deja mai bine. DAR! Această formă scurtă a înregistrării va funcționa numai dacă dimensiunea fontului și familia font-ului sunt specificate explicit. Dacă nu specificați proprietăți precum greutatea fontului. font-style sau font-varianta. vor fi atribuite valori implicite, adică normale. au în vedere acest lucru.
2. Două clase simultan
De obicei, pentru o etichetă este specificată o singură clasă la un moment dat, dar aceasta nu înseamnă că nu puteți specifica mai mult. De fapt, puteți specifica câte clase doriți, de exemplu:
Folosirea acestor două clase împreună (separate de un spațiu, mai degrabă decât de o virgulă) înseamnă că aspectul folosește regulile specificate în ambele texte. și în lateral. Dacă se suprapun unele reguli de diferite clase, atunci clasa care este setată mai târziu decât celelalte în foaia de stil are prioritate.
3. Grosimea implicită a cadrului în CSS
Când scrieți o regulă CSS pentru un cadru, setați de obicei culoarea, lățimea și stilul (nu neapărat în ordinea respectivă :). De exemplu, granița: 3px solid # 000 vă va oferi o margine neagră, pictată în culoarea neagră solidă, cu trei pixeli grosime.
Dacă tocmai ați întrebat: frontieră: solidă. atunci parametrii impliciți ar fi utilizați pentru a determina parametrii rămași. Și acestea sunt următoarele: grosimea este medie, adică undeva 3-4 pixeli, iar culoarea este setata de culoarea textului din interiorul cadrului. Dacă acești parametri sunt doar cei de care aveți nevoie, nu le puteți defini în mod explicit!
4. Proprietatea IE ignorată! Important
Pentru regulile CSS, următorul comportament este tipic: indiferent de câte dintre ele există, acesta din urmă are cea mai mare prioritate. Cu toate acestea, dacă este important după comandă, această comandă CSS va avea cea mai mare prioritate, indiferent de ce este după ea. Acest lucru este valabil pentru toate browserele, cu excepția aplicației IE. De exemplu:
În acest caz, linia va fi de 3,5 mm pentru toate browserele, cu excepția IE, pentru care suma liniei este 2em.
5. Metoda de înlocuire a fonturilor non-standard cu imagini
De exemplu, trebuie să aveți titlul "Cumpărați widget" în titlul fiecărei pagini. Și din moment ce sunteți cel care tranzacționează, aveți nevoie de această frază pentru a fi un motor de căutare. Și din moment ce doriți să utilizați un font non-standard, atunci inserați o imagine:
Soluția însăși este normală, dar trebuie amintit că motoarele de căutare nu acordă atât de multă atenție textului alternativ pentru imagini, ca și textului obișnuit (deoarece webmasterii au un obicei de a scrie orice nonsens într-un text alternativ). Prin urmare, alternativa ar fi:
Cu toate acestea, fontul dvs. personalizat nu mai este folosit aici. Pentru a ieși din această situație, plasați următoarele comenzi în documentul CSS:
6. Modelul hack-ului alternativ în IE
Box hack model este folosit pentru a rezolva o problemă în browsere în conformitate cu IE 6, în cazul în care cadrul și umplutura sunt incluse în lățimea elementului, mai degrabă decât fiind adăugate. De exemplu, atunci când specificați dimensiunile containerelor, puteți utiliza următoarea regulă:
Regula CSS este aplicată după cum urmează:
Aceasta înseamnă că lățimea totală a casetei este de 150 de pixeli (lățime directă de 100 de pixeli + 5 pixeli în fiecare cadru + 20 pixeli pe ambele părți) în toate browserele, cu excepția celui de-al șaselea IE inferior. În aceste browsere, lățimea totală va fi de 100 pixeli, iar ambalajul și grosimea cadrului deja incluse în lățime. Modelul vă permite să corectați acest comportament, dar acesta nu este cel mai bun mod.
Soluția simplă este să utilizați următoarea foaie de stil:
Iar noul cod HTML va fi apoi:
Acum, lățimea casetei va fi întotdeauna de 150 de pixeli, indiferent de browser.
7. Alinierea elementelor de bloc în centru
Ei bine, am vrut ca tu să ai un site cu o lățime constantă, conținutul cărora ar fi în mijlocul ecranului. Puteți face acest lucru astfel:
Apoi fiecare element este
În acest fel, vom centraliza conținutul principal, cu toate acestea, iar textul va fi aliniat la mijloc. Pentru a schimba aceasta din urmă, am setat proprietatea aliniere: stânga în elementul div.
8. Alinierea verticală folosind CSS
Hmm, comportament ciudat. Iată soluția. Setați înălțimea liniei este aceeași cu înălțimea casetei însăși în CSS. În special, pentru exemplul nostru, cutia este de 2 m înălțime, deci trebuie să o introduceți în regula CEM-height: 2em. iar textul va fi acum în mijlocul casetei!
9. Poziționarea în interiorul recipientului
Unul dintre avantajele incontestabile ale CSS este că, cu ajutorul lor, putem plasa un obiect oriunde în document. Este, de asemenea, posibil (și, uneori, de dorit) să aranjați obiecte în container. Acest lucru este făcut simplu. Pur și simplu creați următoarea regulă CSS pentru container:
Acum orice element care se află în acest container va fi situat în raport cu acesta. Să presupunem că avem acest HTML:
Pentru a plasa meniul la o distanță de exact 30 de pixeli în stânga și 5 deasupra marginii containerului, puteți utiliza următoarea regulă CSS:
În acest exemplu, puteți utiliza și regula de marjă: 5px 0 0 30px. dar există unele cazuri în care este preferabil să se folosească poziționarea.
10. Distribuiți culoarea de fond a celulei în partea de jos a paginii
Unul dintre dezavantajele foilor de stil este imposibilitatea de a controla poziția în înălțime, spre deosebire de aspectul tabelar. Să presupunem că trebuie să obțineți o coloană cu navigare pe site-ul din stânga. Și doriți ca fundalul ei să fie albastru, în timp ce fundalul paginii este alb. Pentru aceasta, se aplică o regulă simplă:
Dar există o singură lovitură: deoarece înălțimea meniului este mai mică decât înălțimea ecranului, fundalul paginii albe va fi vizibil sub el până la sfârșitul ecranului. Acest lucru strică foarte mult designul paginii. Și ce facem cu asta?
Din păcate, singura soluție este înșelăciunea - adică corpul documentului din imaginea de fundal cu aceeași culoare și aceeași lățime ca și coloana noastră. Să facem așa:
Lățimea imaginii pe care o specificați ca imagine de fundal ar trebui să aibă exact 150 de pixeli, iar culoarea ei ar trebui să fie aceeași cu culoarea de fundal a coloanei din stânga. Dezavantajul acestei metode este că nu puteți specifica lățimea coloanei în em, adică este imposibil să faceți o pagină "din cauciuc".
La momentul acestei scrieri, această metodă a fost singura soluție la problema stângă a coloanei. Să sperăm că CSS3 va oferi aceeași cale kosher pentru ao rezolva.
Trimiteți-le prietenilor: