Merrni faktet me këto këshilla
Të gjithë shfletuesit e internetit përfshijnë atë që dihet si "stilet e paracaktuara". Këto janë stile që diktojnë pamjen dhe ndjenjën e elementëve HTML në mungesë të ndonjë informacioni tjetër stili. Për shembull, në pothuajse çdo shfletues pamja e paracaktuar e hyperlinks është një ngjyrë të ndritshme blu me një nënvizim. Kështu duken këto lidhje nëse nuk u tregoni atyre të shfaqin në një mënyrë tjetër.
Stilet e shfletuesit të parazgjedhur mund të jenë të dobishëm, por në shumë raste dizajnerët e web-it dëshirojnë t'i heqin këto stilet në mënyrë që të fillojnë të fillojnë me stilet që janë 100% në kontroll. Kjo është bërë duke përdorur atë që njihet si "stili i stilit master".
Një stylesheet master duhet të jetë stili i parë i stilit që ju telefononi në të gjitha dokumentet tuaja. Ju përdorni një fletë stili master për të pastruar cilësimet e shfletuesit të parazgjedhur që mund të shkaktojnë probleme në dizajnimin e Web-it të shfletuesit. Pasi të keni pastruar stilet me një fletë stili master, dizajni juaj fillon nga i njëjti vend në të gjitha shfletuesit - si një kanavacë të pastër për pikturë.
Global Defaults
Master stylesheet juaj duhet të fillojë duke zeroing margjinat, paddings dhe kufijtë në faqe. Disa shfletues Web e paracaktojnë trupin e dokumentit në 1 ose 2 piksele të prera nga skajet e panelit të shfletuesit. Kjo siguron që të gjithë të shfaqin të njëjtën gjë:
html, trupi {margin: 0px; mbushje: 0px; kufiri: 0px; }Ju gjithashtu dëshironi të bëni font qëndrueshëm. Sigurohuni gjithashtu që të vendosni madhësinë e shkrimit në 100 për qind ose 1em, në mënyrë që faqja juaj të jetë e arritshme, por madhësia është ende e qëndrueshme. Dhe sigurohuni që të përfshini lartësinë e vijës.
trup {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Formulimi i titullit
Headline ose header tags (H1, H2, H3, etj) zakonisht default në tekst të guximshëm me margjina të mëdha ose mbushje rreth tyre. Duke pastruar peshën, kufijtë dhe mbushjen, sigurohuni që këto etiketa të mbeten më të mëdha (ose më të vogla) sesa teksti rreth tyre pa pasur stile shtesë:
h1, h2, h3, h4, h5, h6 {diferencë: 0; mbushje: 0; font-pesha: normale; font-familja: Arial, Helvetica, sans-serif; }Ju mund të dëshironi të konsideroni vendosjen e madhësive specifike, ndarjes së shkronjave dhe mbushjeve në etiketat tuaja të titullit, por që me të vërtetë varet nga stili i faqes që po hartoni dhe duhet të lihet jashtë stilit të stilit master. Ju mund të shtoni stilet më shumë për këto tituj sipas nevojës për dizajnin tuaj të veçantë.
Formulimi i thjeshtë i tekstit
Përtej titujve, ka etiketa të tjera të tekstit që duhet të jeni të sigurt për t'u pastruar. Një grup që njerëzit shpesh harrojnë janë etiketat e tabelës (TH dhe TD) dhe etiketat e formës (SELECT, TEXTAREA dhe INPUT). Nëse nuk i vendosni ato në të njëjtën madhësi si trupi dhe teksti i paragrafit, mund të habiteni në mënyrë të papëlqyeshme se si shfletuesit i bëjnë ato.
p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, zgjidhni, textarea {margin: 0; mbushje: 0; font: normale normale normale 1em / 1.25 Arial, Helvetica, sans-serif; }Është gjithashtu mirë të jepni citimet tuaja (BLOCKQUOTE dhe Q), shkurtesat dhe shkurtesat një stil pak më tepër, në mënyrë që të dalin pak më shumë:
blockquote {margin: 1.25em; mbushje: 1.25em} q {font-style: italic; } akronim, abbr {kursor: ndihmë; fundi i kufirit: 1px thye; }Lidhjet dhe Imazhet
Lidhjet janë të lehta për tu menaxhuar dhe për të ndryshuar nga teksti i lartpërmendur blu i lartpërmendur. Më pëlqen gjithmonë që lidhjet e mia të mbeten të nënvizuara, por nëse preferoni një mënyrë tjetër, ju mund t'i vendosni këto mundësi veç e veç. Unë gjithashtu nuk përfshij ngjyra në stilin e stilit master, sepse kjo varet nga dizajni.
a, a: lidhje, a: vizito, a: aktive, a: hover {text-decoration: nënvizoj; }Me imazhe, është e rëndësishme të fikni kufijtë. Ndërsa shumica e shfletuesve nuk shfaqin një kufi rreth një imazhi të thjeshtë, kur imazhi është i lidhur, shfletuesit kthehen në kufi. Për të rregulluar këtë:
img {border: none; }tabelat
Përderisa tavolinat nuk përdoren më për qëllime të faqosjes, faqja mund t'i përdorë ato për të dhënat aktuale tabluar. Kjo është një përdorim i mirë i tabelave HTML. Ne tashmë e kemi bërë të sigurtë që madhësia e tekstit të parazgjedhur është e njëjtë për qelizat e tabelave, por ka disa stile të tjera që duhet të vendosni në mënyrë që tabelat tuaja të qëndrojnë të njëjta:
tabela {margin: 0; mbushje: 0; kufiri: asnjë; }Format
Ashtu si me elementë të tjerë, duhet të pastrosh margjinat dhe paddings rreth formave tuaja. Një tjetër gjë që më pëlqen të bëj është të rishkruaj tagin e formës si " inline " në mënyrë që të mos shtojë hapësirë shtesë ku vendosni tagun në kodin. Ashtu si me elementët e tjerë të tekstit, unë përcaktoj informacionin e fontit për përzgjedhjen, textarea dhe inputin lart, kështu që është e njëjtë me pjesën tjetër të tekstit tim.
formë {margin: 0; mbushje: 0; shfaq: inline; }Është gjithashtu një ide e mirë për të ndryshuar kursorin për etiketat tuaja. Kjo i ndihmon njerëzit të shohin se etiketa do të bëjë diçka kur ta klikojnë.
etiketë {kursori: tregues; }Klasat e përbashkëta
Për këtë pjesë të stilit të stilit master, duhet të përcaktoni klasat që kanë kuptim për ju. Këto janë disa nga klasat që përdor më shpesh. Vini re se ato nuk janë vendosur në ndonjë element të veçantë, kështu që ju mund t'i caktoni ato për çdo gjë që ju nevojitet:
.clear {clear: both; }. floatLeft {float: left; } .floatRight {noton: drejtë; } .textLeft {text-align: majtas; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustifikoni {text-align: justifikoni; } .blockCenter {display: bllok; margjina-majtas: auto; kufiri i djathtë: auto; } / * mos harroni të vendosni width * / .bold {font-weight: bold; } .italik {font-style: italic; }. underline {text-decoration: nënvizoj; } .noindent {margin-left: 0; mbushje-majtas: 0; } .nomargin {margin: 0; } .nopadding {mbushje: 0; } .nobullet {list-style: none; list-style-image: asnjë; }Mos harroni se për shkak se këto klasa janë shkruar para ndonjë stil tjetër dhe ato janë vetëm klasa, ato janë të lehta për t'u anashkaluar me pronat më specifike të stilit që ndodhin më vonë në kaskadë . Nëse gjeni se keni vendosur një klasë të përbashkët në një element dhe nuk ka efekt, duhet të kontrolloni për të siguruar që nuk ka ndonjë stil tjetër në një nga fletët e stilit tuaj të mëvonshëm që ndikojnë në të njëjtin element.
Stili i gjërë i Masterit
/ * Global Defaults * / html, trupi (diferencë: 0px; mbushje: 0px; kufiri: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Titujt * / h1, h2, h3, h4, h5, h6 {margin: 0; mbushje: 0; font-pesha: normale; font-familja: Arial, Helvetica, sans-serif; } / * Stilet e tekstit * / p, th, td, li, dd, dt, ul, ol, blockquote, q, akronim, abbr, a, input, select, textarea {margin: 0; mbushje: 0; font: normale normale normale 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; mbushje: 1.25em} q {font-style: italic; } akronim, abbr {kursor: ndihmë; fundi i kufirit: 1px thye; } i vogël {font-size: .85em; } e madhe {font-size: 1.2em; } / * Lidhjet dhe Imazhet * / a, a: lidhje, a: vizito, a: aktive, a: hover {text-decoration: nënvizoj; } img {border: none; } / * Tabelat * / tabela {margin: 0; mbushje: 0; kufiri: asnjë; } / * Format * / formë {margin: 0; mbushje: 0; shfaq: inline; } etiketë {kursori: tregues; } / * Klasat e Përbashkët * / .clear {clear: both; }. floatLeft {float: left; } .floatRight {noton: drejtë; } .textLeft {text-align: majtas; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustifikoni {text-align: justifikoni; } .blockCenter {display: bllok; margjina-majtas: auto; kufiri i djathtë: auto; } / * mos harroni të vendosni width * / .bold {font-weight: bold; } .italik {font-style: italic; }. underline {text-decoration: nënvizoj; } .noindent {margin-left: 0; mbushje-majtas: 0; } .nomargin {margin: 0; } .nopadding {mbushje: 0; } .nobullet {list-style: none; list-style-image: asnjë; }Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 10/6/17