Principal View - Piggy dezvoltator. Totul despre proiectarea, dezvoltarea și crearea de site-uri
Vezi principal - blog despre design, web design si web development. Dacă sunteți în curs de dezvoltare site-uri web, sau sunt interesați de web design si proiectare doar lucrurile din jurul nostru, sau sunteti doar interesat de teme de web design si dezvoltare web, acest blog va fi la tine foarte util. Pe blog puteți găsi articole, recenzii, tutoriale si multe altele.
1. cod scurt pentru font CSS
Când cere un canal de scurgere pentru fontul în CSS. ați descrie, de obicei, regulile după cum urmează:
Cu toate acestea, puteți simplifica înregistrarea în sine, astfel încât este mai ușor de a percepe. Puteți tăia și stilul de font pentru a scrie proprietăți într-o formă prescurtată:
Cred că mult mai bine! Și câteva cuvinte: o prescurtare pentru CSS va funcționa numai dacă definiți două reguli împreună: font-size și font-family. Și regula font-familie trebuie să fie plasat la capătul liniei, ca regulă font-size trebuie să fie plasate strict în fața lui. De asemenea, nu puteți specifica regulile de font-greutate. Stil de font și font-variant. În acest caz, valorile pentru care vor fi afișate în mod automat în mod normal. Acest lucru trebuie să vă amintiți.
2. Utilizarea de mai multe clase.
De obicei, atributele indică o singură clasă. Dar acest lucru nu înseamnă că este permisă utilizarea doar o singură clasă. De fapt, aveți posibilitatea să atribuiți cât mai multe clase ca ai nevoie. De exemplu:
Aici, după cum vom vedea punctul atribuit două clase de text și laterale. Folosind aceste clase împreună (separate printr-un spațiu, nu o virgulă) înseamnă că paragraf se vor aplica regulile prevăzute în klassahtextandside. În cazul în care clasele conțin aceleași reguli care se aplică sunt regulile clasei, care se află mai jos în documentul CSS.
3. Valoarea implicită pentru frontiera (de frontieră), în CSS.
Când scrieți o regulă la bordură, de obicei, specificați culoarea (culoare), grosimea (lățime) și stilul (stil). De exemplu, scriind un chenar: 3pxsolid # 000 veți obține un chenar solid negru, un 3-pixel grosime. Cu toate acestea, singura valoare necesară aici este stilul de frontieră. Dacă scrieți doar de frontieră: solid. opțiunile rămase vor fi utilizate în mod implicit pentru ea. Dar asta este implicit? Totul este descris în standardul CSS pe care trebuie să știți, sau cel puțin citit. Deoarece lățimea, valoarea implicită este utilizată pentru a reduce mediu (acest lucru este de aproximativ 3 - 4 pixeli). Ca o culoare, în mod implicit, este utilizat pentru culoarea de frontieră a textului în interiorul frontierei.
Astfel, în cazul în care valorile parametrilor coincid cu valorile setările implicite, nu puteți specifica această opțiune.
4. Document CSS pentru imprimare.
Prima linie de cod determină CSS pentru a afișa (folosind = media „ecran“) și a doua linie de cod determină CSS pentru a imprima (folosind = media „print“).
Creați un document text simplu și îl numesc printstyle.css. Înregistrați-l în acele comenzi CSS care vor forma pagina pentru imprimare.
5. imagini Tehnica de substituție.
Când aspectul paginii este foarte important să se folosească etichetele HTML de bază pentru marcarea textului. O utilizare imagini pentru a le înlocui text nu este necesar. Acest lucru este rău. Și aceasta este una dintre cele mai grave greșeli webmasteri novice. Deși eu însumi, de la bun început nu-mi place să folosească imaginile, dar uneori nu toți de. Tag-uri de marcare HTML standard are multe avantaje. Iar principalul motiv de aici este faptul că etichetele pagină HTML pentru a marca un bun motoarele de căutare înțelegere. În plus, pagina se încarcă mult mai repede. Există și alte beneficii, dar acum nu e vorba de asta.
Să presupunem că ești atât de frumoasă ca și fonturi diferite pe care le-au folosit pentru titlurile în proiectarea site-ului. Acum, stai pe spate si gandeste-te cum totul culegătorie. La urma urmei, cu siguranță vizitatorii site-ului dvs. pe computerele viitorului nu va avea fontul minunat. Prin urmare, nu puteți să marcați pagina doar etichetat HTML. Ei bine, trebuie doar să înlocuiască etichetele imaginea cu titlul minunat. Se pare a fi simplu. Nu, dar aici există o problemă. Motoarele de căutare nu poate citi textul de pe indexul de imagini și corect pagina dvs..
Pentru claritate, să presupunem că vindeți widget-uri și ar dori să facă o etichetă atractivă luminos pe fiecare pagină, „cumpara widget-ul.“ Pentru tine, este imperativ ca motoarele de căutare pot citi titlul pe de o parte, și cititorii să acorde o atenție la el, și el a remarcat în mod semnificativ, ceea ce înseamnă că imaginea era pe cealaltă parte:
Puteți presupune că totul este în regulă. Dar este destul de evident faptul că motoarele de căutare nu dau astfel de etichetă importanță alt ca și cum ar fi fost doar un text. Ca de masterat de web savvy de multe ori scrise în această etichetă este oribil, greutatea sa este prea mic.
Deci, ce să fac? - Tu întrebi. Și aici, și trebuie să utilizați doar imagine tehnica spoofing:
Acum avem un text potrivit pentru motoarele de căutare, dar nu utilizează tipăritura art. Rezolva-l în fișier stil:
- Utilizatorii vor vedea o imagine frumoasă cu text
- Motoarele de căutare vor vedea textul într-o etichetă standard,
6. CSS hack alternativă pentru box (model de cutie).
Alternativ CSS hack este frecvent utilizat pentru fixarea probleme de afișare în Internet Explorer versiunea 6 și mai jos pe PC-ul, atunci când frontiera și padding sunt incluse în lățimea unui element.
De exemplu, pentru a seta dimensiunea containerului, ați descrie regulile CSS după cum urmează:
Și apoi, Asociați regulile CSS pentru container:
Aceasta înseamnă că lățimea totală a containerului este 150px (100px latime + doi 5px + Boarder a doua liniuță din 20px) pentru toate browserele cu excepția Internet Explorer, browser-ul versiunea 6 și mai jos pe PC. Lățimea totală a acestor browsere este 100px și padding și la frontieră încorporate în această lățime. CSS hack alternativă pentru box corectează această discrepanță, dar se poate face o adevărată mizerie.
Cea mai simplă alternativă ar fi astfel reguli CSS:
Și codul HTML care urmează să fie modificat după cum urmează:
Excelent! Acum, containerul va fi întotdeauna egală cu lățimea de 150px, indiferent de browser-ul!
7. Aliniați centrul orizontal al blocului cu ajutorul CSS.
Să presupunem că aveți un design cu lățime fixă, și doriți conținutul este situat în mijlocul paginii. În acest caz, ar trebui să utilizați CSS următorul cod:
Acum intră în conținutul în tag-ul
Acum, conținutul principal va fi amplasat în mijloc. În interiorul containerului am avut de a forța aliniat la stânga. Dar funcționează!
8. Alinierea blocului de mijloc vertical folosind CSS.
Cel mai simplu mod este de a utiliza o aliniere verticală a mesei. Dar aspectul tabelar este învechită și ineficientă. Pentru a alinia conținutul la necesitatea de a utiliza centrul vertical vertical-align: mijloc. Dar, din păcate, nu funcționează.
Să presupunem. pe care doriți să setați înălțimea elementului de meniu egal 2em. Utilizați CSS aliniere verticală, dar aceasta nu funcționează. Textul afișat cu încăpățânare în partea de sus.
Hmm. Acest lucru nu este ceea ce ne-am așteptat să vedem o sută. Cum de a rezolva această problemă?
Soluția este: setați înălțimea liniei de linie de înălțime egală cu înălțimea elementului de meniu. Deoarece înălțimea noastră este 2em, atunci trebuie să creați o regulă CSS. line-height: 2em. Excelent! Acum, textul nostru este plasat vertical în mijloc.
9. poziționarea CSS într-un container.
Unul dintre cele mai bune lucruri despre CSS, cu siguranță este. puteți aranja elemente de pe pagina în absolut oriunde.
Puteți, de asemenea, (și acest lucru este adesea folosit) pentru a poziționa obiecte într-un container.
De asemenea, este foarte ușor de făcut. Pur și simplu atribuie următoarele reguli CSS container:
Acum, un element arbitrar va fi amplasat în interiorul containerului în raport cu containerul.
Să presupunem că aveți această structură HTML:
Și pentru a plasa containerul de navigare exact 30 de pixeli la stânga și la 5 pixeli de la marginea de sus a containerului din container, ar trebui să utilizați următoarele CSS:
Excelent! Cei care cunosc bine CSS, desigur, spun că, în acest exemplu, ar trebui să utilizați marja: 5px0 0 30px. Toate acest lucru este adevărat, dar în unele cazuri, este încă de dorit să se folosească de poziționare.
fundal 10. verticală până la sfârșitul paginii.
După cum probabil știți, CSS nu poate fi controlată pe verticală. Și acesta este unul dintre dezavantajele CSS, și creează o serie de probleme care complică viața noastră. Deși aspectul tabelar și lipsit de acest neajuns, dar vom încerca să rezolvăm ceva.
Imaginați-vă că aveți o coloană de pe partea stângă a lățimii paginii de 150px. Trebuie să faci să treacă prin pagina de sus în jos. Fundalul paginii dvs. este alb, iar fundalul albastru dvs. coloană. Prin urmare, încercați să utilizați CSS următorul cod:
Doar o remarcă. în cazul în care conținutul de navigație ale containerului nu utilizează întreaga înălțime a coloanei, și spun că este suficient doar pentru jumătate din înălțimea, fundalul va fi tăiat după finalul conținutului. Acesta este fundalul coloanei va fi albastra doar la mijlocul ecranului. Și este strica cu siguranta design-ul minunat. Ce să fac!?
Din păcate, singura soluție la această problemă este de a utiliza o imagine de fundal. Ar trebui să utilizați o imagine cu un fundal alb și o coloană albastră, a cărei lățime coincide exact cu design-ul. Alocați-l următorul cod CSS:
Imaginea pe care îl utilizați ca fundal ar trebui să fie 150px lățime și este inundat în albastru, cum ar fi coloana.
Dezavantajul acestei metode, după cum probabil ați ghicit, această aderență rigidă la lățimea. În cazul în care utilizatorul mărește fontul și lățimea coloanei pentru a schimba, el va vedea o discrepanță între lățimea fundal și difuzoare. Folosind această metodă, trebuie să specificați o lățime în pixeli (px).
concluzie
Astăzi, ne-am uitat la unele aspecte ale lucrării cu CSS. Astfel de momente sunt de fapt mult mai mult. Această temă nu este un singur articol. Sper că aceste informații vor fi utile pentru tine. Vă mulțumesc pentru atenție.
Bine ai venit! Subiectul construirea site-ului a fost recent, face primele InstantCMS bazate pe site-ul 1.7. A început să se îngropa în CSS, am dat peste articolul dvs. interesant. Dat seama că nu toate, voi înțelege.
Întrebarea 5 paragraful :) în capul documentului are titlu, conținut meta, care pot fi atribuite „cumpăra un widget.“ Cu siguranță acesta va cântări mai mult Alt. Va cântări mai mult sau mai puțin decât recordul antet H1?
Întrebări cu privire la 10 paragraf:
1. În cazul în care un al treilea rând:
fundal: albastru;
Lățime: 150px
înregistrare higt: 100%, în cazul în care înălțimea containerului și la ce dimensiune va crește în cazul în care creșterea?
2. În cazul în care opțiunea 1 nu este adecvat, în conformitate cu navigarea container pentru a crea un container de aceeași lățime, evident, mai mare (nu știu, poate că limitarea înălțimii min înălțimea totală a paginii și pentru a înregistra o nouă înălțime în pixeli) că înălțimea totală a coloanei a fost mai mare difuzoarele rămase și să-l înregistreze:
fundal: albastru;
Lățime: 150px
Va exista un decalaj în container de la frontieră?
@ DED-pikto
în conformitate cu punctul 5:
nici o îndoială că tag-ul are o greutate mai mare decât atributul alt al etichetei. Întregul sensul alineatului 5 este tocmai pentru a scăpa de eticheta de imagine. Ca rezultat, vom obține tag-ul text pur. care este bine înțeles de către motoarele de căutare, mai ales în combinație cu tag-ul propriu-zis.
la punctul 10:
1) înălțimea etichetei va funcționa numai dacă specificați înălțimea tuturor tag-uri, în cazul în care este încorporat această etichetă. Prin urmare, trebuie să se deplaseze de la înălțimea de eticheta părinte.
2) Este greu de spus fără exemple concrete, dar cred că puteți găsi orice vă cere pentru a rezolva. Puteți încerca mai multe opțiuni și a vedea pentru tine care unul funcționează.
Reducerea cod CSS, în termeni de design, nu este opțiune foarte potrivită - mai rău care poate fi citit. Ca o consecință, mai dificil să însoțească produsul. Cu toate că, în cazul în care stilul este folosit numai, și schimbați-l ca nimeni altcineva nu va, o opțiune este acceptabilă, de exemplu, pentru a reduce spațiul ocupat de acestea (în special util pentru fișiere mari de CSS) - vor fi încărcate browser mai rapid
Cel mai bun mod de a face bani online este de a lucra la Kwork.
KWORK mod de încredere pentru a face bani prin completarea sarcinilor pentru 500 p.
- Admitad - venituri de la afiliați
- 7offers - venituri de la afiliați
- etxt - câștiguri în vânzarea și cumpărarea de texte
- TravelPayouts - Câștigurile din vânzarea biletelor de avion
- Vktarget - câștiguri în VKontakte, Facebook, Instagram, YouTube, Twitter
- BestChange - Monitorizarea schimbătoare de căldură, în cazul în care plata este de la $ de 0,35 pentru fiecare client
Rămâneți conectat
Prin citirea acestui site, sunteți de acord cu utilizarea de fișiere Cookie. În caz contrar, lăsați acest site. Sunt de acord