[Tutorial CSS] Resetarea setarilor CSS din diferite browsere

#1
Nume Tutorial: Resetarea setarilor CSS din diferite browsere
Descriere: Resetarea setarilor CSS din diferite browsere
Download:
Autor: Anonim
Sursa (Link-ul oficial):
tutorialeonline
Propria parere: Folositor.
Tutorialul:

Majoritatea programatorilor web au probleme cu aranjarea conţinutului în pagina web în aşa fel încât să se vadă la fel în toate browserele. Asta se întâmplă deoarece fiecare browser are anumite setări prestabilite, cum ar fi spaţiul dintre margini, border-ul, culorile de la link-uri şi alte mici setări care pot deranja aspectul general al paginii dacă nu ţineţi cont de ele.

Încerc să prezint mai jos o tehnică de a reseta setările implicite ale browserelor astfel încât setările ulterioare făcute în fişierul css să se aplice la fel în pagină indiferent de browser.
Atenţie! Aceste setări sunt doar pentru resetare, ulterior va trebui să scrieţi voi dimensiunile dorite pentru margini, padding, border, culori şi alte setări de care aveţi nevoie în pagină în funcţie de necesităţi şi care vor suprascrie unele din setările făcute aici.

Cod: Selectaţi tot

html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, input, label, textarea, legend,
 select, isindex, listing, xmp, plaintext,
 table, caption, tbody, tfoot, thead, tr, th, td {
     /* se scoate inconsistenţa (între browsere) implicită pentru ul, ol, padding sau margin */
     /* se scoate şi spaţiul din pre, form, body, html, p, blockquote */
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     /* se evită inconsistenţa dintre setările prestabilite ale browserelor în ce priveşte */
     /* heading font-sizes şi pre/code */
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
     white-space: normal;
 }
 
 body {
     line-height: 1;
     color: black;
     background: white;
     padding: 5px;
 }
 
 /* fără list-markers iniţial, din moment ce listele sunt folosite mai des pentru semantice */
 ul, ol, dir, menu {
     list-style: none;
 }
 
 /* tabelele au încă nevoie de 'cellspacing="0"' in marcare */
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 caption, th, td {
     text-align: left;
     font-weight: normal;
 }
 
 /* se scot posibilele quote marks (") din <q> şi <blockquote> */
 blockquote:before, blockquote:after,
 q:before, q:after {
     content: '';
 }
 
 blockquote, q {
     quotes: "" "";
 }
 
 /* link-urile subliniate tind să facă hipertextul mai puţin citibil,
 deoarece sublinierea ascunde formele inferioare */
 :link, :visited, a, ins, blink {
     text-decoration: none;
 }
 
 /* credeţi că imaginile care conţin link cu bordură albastră e o idee bună? */
 iframe, form, fieldset, abbr, acronym, object, applet, table
 a, img, a img, :link img, :visited img {
     border: none;
 }
 
 /* dezactivăm câteva atribute urâte ale fonturilor din browserele standard */
 font {
     color: inherit !important;
     font: inherit !important;
 }
 
 marquee {
     overflow: inherit !important;
 }
 
 nobr {
     white-space: normal;
 } 
Recomand ca aceste setări să le puneţi într-un fişier reset.css pe care să îl includeţi primul în pagina dvs. ulterior adăugând setul cu setările css specifice site-ului la care lucraţi. Aceste setări sunt valide cu versiunile CSS 2, 2.1 şi 3

Înapoi la “Tutoriale CSS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori