Ստացեք փաստերը այս խորհուրդների հետ
Բոլոր վեբ բրաուզերները ներառում են այն, ինչ գիտի որպես «դերաուլու ոճեր»: Սրանք ոճեր են, որոնք թելադրում են HTML- ի տարրերի տեսքը եւ զգացումը այլ ոճի տեղեկատվության բացակայության դեպքում: Օրինակ, գրեթե յուրաքանչյուր զննարկիչում հիպերհղմանների լռելյայն տեսքը վառ գծի գույն է: Այսպիսով, այդ հղումները նայում են, եթե դրանք չասեն, թե այլ կերպ ցուցադրեք:
Default զննարկիչի ոճերը կարող են օգտակար լինել, բայց շատ դեպքերում վեբ դիզայներները ցանկանում են հեռացնել այս ոճերը, որպեսզի նրանք կարողանան սկսել նորաձեւերով, որոնք նրանք 100% վերահսկողության տակ են: Դա արվում է այն բանից, ինչ հայտնի է որպես «վարպետության ոճերի թերթ»:
Վարպետ ոճաթերթիկը պետք է լինի ձեր բոլոր փաստաթղթերում առաջին ոճաթերթիկը: Դուք օգտագործում եք վարպետության ոճաթերթեր, մաքրելու կանխադրված դիտարկիչի պարամետրերը, որոնք կարող են առաջացնել խնդիրներ cross-browser Վեբ դիզայնում: Երբ դուք մաքրել ոճերը վարպետ ոճերով, ձեր դիզայնը սկսում է նույն վայրից բոլոր զննարկիչների մեջ, ինչպես նկարելուն մաքուր կտավ:
Global Defaults- ը
Ձեր վարպետի ոճաթերթիկը պետք է սկսի զրոյացնել էջի եզրագծերը, ծածկոցները եւ սահմանները : Որոշ վեբ բրաուզերները կանխորոշում են փաստաթղթի մարմինը, 1 կամ 2 պիքսել, բանալին թղթապանակի եզրագծերից: Սա համոզված է, որ բոլորը նույնը ցուցադրում են.
html, մարմին {margin: 0px; padding: 0px; սահման: 0px; }Դուք նույնպես ցանկանում եք տառատեսակը հետեւողական դարձնել: Համոզվեք, որ նաեւ տեքստի չափը սահմանեք 100% կամ 1em, որպեսզի ձեր էջը հասանելի լինի, սակայն չափը դեռեւս հետեւողական է: Եվ համոզվեք, որ ներառում է գծի բարձրությունը:
մարմինը {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Վերնագրի ֆորմատավորում
Թեմաների կամ վերնագրի պիտակները (H1, H2, H3 եւ այլն), սովորաբար, տատանվում են խոշոր տառերով, կամ դրանց շրջապատում: Կրելով քաշը, ծայրերը եւ լիցքավորումը, վստահեցնում եք, որ այս պիտակները դեռեւս մնում են ավելի մեծ (կամ ավելի փոքր), քան դրանց տեքստը, առանց լրացուցիչ ոճերի:
h1, h2, h3, h4, h5, h6 {margin: 0; լրացնելով `0; font-weight: նորմալ; font-family: Arial, Helvetica, sans-serif; }Կարող եք ենթադրել, որ որոշակի չափերի, նամակների ընդգրկման եւ տողերի պիտակները տեղադրեք ձեր վերնագրի պիտակների վրա, բայց դա իսկապես կախված է այն նախագծված կայքի ոճից, եւ պետք է դուրս մնալ վարպետության ոճից: Դուք կարող եք ավելացնել ավելի շատ ոճեր այս վերնագրերի համար, որքան անհրաժեշտ է ձեր կոնկրետ դիզայնի համար:
Պարզ տեքստի ֆորմատավորում
Վերնագրերից բացի, կան տեքստերի այլ տեքստեր, որոնք դուք պետք է համոզվեք, որ մաքրել: Մեկը, որ մարդիկ հաճախ մոռանում են, սեղանի բջջային պիտակները (TH եւ TD) եւ ձեւավորել պիտակներ (SELECT, TEXTAREA եւ INPUT): Եթե դրանք չեք սահմանում նույն չափի, ինչպես ձեր մարմնի եւ պարբերագրի տեքստում, ապա կարող եք տհաճորեն զարմացնել, թե ինչպես են բրաուզերները դրանք մատուցել:
p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, ընտրեք, textarea {margin: 0; լրացնելով `0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Հաճելի է նաեւ ձեր մեջբերումները (BLOCKQUOTE եւ Q), հապավումներ եւ հապավումներ մի փոքր լրացուցիչ ոճով, որպեսզի նրանք առանձնացնեն մի փոքր ավելի:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: շեղագիր; } հապավումը, abbr {կուրսորը `օգնություն; border-bottom: 1px dashed; }Հղումներ եւ նկարներ
Հղումներն հեշտ է կառավարել եւ վերափոխվել վերոնշյալ վառ կապույտ գծագրված տեքստից: Ես նախընտրում եմ, որ իմ հղումները մշտապես մնան ընդգծված, բայց եթե նախընտրում եք այլ ձեւով, կարող եք այդ տարբերակները առանձին կարգավորել: Ես չեմ նաեւ ներառում գույները վարպետության ոճով, քանի որ դա կախված է դիզայնից:
a, a: հղում, a: այցելել, a: ակտիվ, a: hover {text-decoration: ընդգծում; }Պատկերներով, կարեւոր է անջատել սահմանները: Մինչեւ բրաուզերների մեծ մասը դրսեւորում է սահմանը, երբ պատկերը միացված է, բրաուզերները միացնում են սահմանը: Սահմանել սա:
img {border: none; }Աղյուսակներ
Թեեւ սեղանները այլեւս օգտագործվում են դասավորության նպատակների համար, կայքը կարող է դեռ օգտագործել դրանք իրական աղյուսակի տվյալների համար: Սա HTML աղյուսակների լավ օգտագործումը: Մենք արդեն համոզված ենք, որ ստանդարտ տեքստի չափը նույնն է ձեր սեղանի բջիջների համար, սակայն կան մի քանի այլ ոճեր, որոնք դուք պետք է սահմանեք, որպեսզի ձեր աղյուսակը մնա նույնը:
աղյուսակ {margin: 0; լրացնելով `0; սահման: ոչ; }Ձեւեր
Ինչպես մյուս տարրերի հետ, դուք պետք է մաքրեք ձեր ձեւերի շուրջ ծածկույթները եւ ծածկոցները: Մեկ այլ բան, որը ես սիրում եմ, վերագրվում է ձեւի պիտակը որպես « ներդիր », որպեսզի այն ավելացնի հավելյալ տարածք, որտեղ տեղադրեք պիտակը կոդը: Ինչպես մյուս տեքստային տարրերով, ես սահմանում եմ տառատեսակի ընտրված ընտրանքը, textarea եւ մուտքագրման վերեւում, այնպես, որ նույնն է, ինչ իմ տեքստն է:
ձեւը {margin: 0; լրացնելով `0; ցուցադրում `inline; }Դա նաեւ լավ գաղափար է փոխել կուրսորը ձեր պիտակները: Սա օգնում է մարդկանց տեսնել, որ պիտակը մի բան կանի, երբ այն սեղմում է:
պիտակ {կուրսորը `ցուցիչ; }Ընդհանուր դասընթացներ
Վարպետի ոճերի այս հատվածի համար պետք է սահմանեք դասեր , որոնք իմաստ ունեն: Սրանք այն դասերից են, որոնք ես հաճախ օգտագործում եմ: Նշենք, որ դրանք որեւէ առանձին տարր չեն սահմանվել, այնպես որ կարող եք դրանք հանձնել այն ամենին, ինչ անհրաժեշտ է.
մաքուր երկուսն էլ; } .floatLeft {float: ձախ; } .floatRight {float: աջ; } .textLeft {text-align: ձախ; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: արդարացնել; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * հիշում է լայնությունը սահմանելու համար * / .բոլորը {font-weight: thick; } .italic {font-style: ստեղնաշար; } .մեկնաբանություն {text-decoration: ընդգծում; } .noid {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Հիշեք, որ քանի որ այս դասերը գրված են որեւէ այլ ձեւի առաջ, եւ դրանք պարզապես դասեր են, ապա դրանք հեշտ է գերադասել ավելի կոնկրետ ոճային հատկություններով, որոնք հետագայում տեղի են ունենում կասկադում : Եթե դուք գտնում եք, որ դուք ստեղծել եք ընդհանուր դասի տարրը եւ այն ուժի մեջ չի մտնում, պետք է ստուգեք `համոզվեք, որ նույն ոտնաչափին վերաբերող հետագա ոճաթերթերից որեւէ մեկում չկա այլ ոճ:
Ամբողջ Վարպետության ոճը
/ * Global Defaults * / html, body {margin: 0px; padding: 0px; սահման: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Վերջին լուրերը * / h1, h2, h3, h4, h5, h6 {margin: 0; լրացնելով `0; font-weight: նորմալ; font-family: Arial, Helvetica, sans-serif; } / * Text Styles * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, ընտրեք, textarea {margin: 0; լրացնելով `0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: շեղագիր; } հապավումը, abbr {կուրսորը `օգնություն; border-bottom: 1px dashed; } փոքր {font-size: .85em; } մեծ {font-size: 1.2em; } / * Հղումներ եւ նկարներ * / a, a: հղում, a: այցելել, a: ակտիվ, a: hover {text-decoration: ընդգծում; } img {border: none; } / * Աղյուսակներ * / table {margin: 0; լրացնելով `0; սահման: ոչ; } / * Ֆորումներ * / ձեւ {margin: 0; լրացնելով `0; ցուցադրում `inline; } պիտակ {կուրսորը `ցուցիչ; } / * Ընդհանուր դասեր * / .clear {clear: both; } .floatLeft {float: ձախ; } .floatRight {float: աջ; } .textLeft {text-align: ձախ; } .textRight {text-align: right; } .textCenter {text-align: center; } .textJustify {text-align: արդարացնել; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * հիշում է լայնությունը սահմանելու համար * / .բոլորը {font-weight: thick; } .italic {font-style: ստեղնաշար; } .մեկնաբանություն {text-decoration: ընդգծում; } .noid {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .nopadding {padding: 0; } .nobullet {list-style: none; list-style-image: none; }Իրական հոդվածը Ջենիֆեր Քրինինն է: Ջերեմի Գիրարդի կողմից խմբագրված 10/6/17 էջում