Կասկադինգի ոճերի թերթիկների ակնարկ, օրինակելի ոճաթերթով
Երբ եք զրոյից կայք կառուցելիս, խելացի է սկսել որոշված հիմնական ոճերը: Դա նման է մաքուր կտավից եւ թարմ խոզանակներից: Վեբ դիզայներների առաջին խնդիրներից մեկը այն է, որ վեբ բրաուզերները տարբեր են: Նախնական տառատեսակը տարբերվում է պլատֆորմի հարթությունից, ստանդարտ տառատեսակ ընտանիքը տարբերվում է, որոշ բրաուզերները սահմանում են շերտեր եւ լրացնում են մարմնի պիտակի վրա, մինչդեռ ուրիշները չեն եւ այլն: Ստացեք այդ անհամապատասխանությունների շուրջ `սահմանելով ձեր ոստայնաթերթիկների համար ստանդարտ ոճերը:
CSS եւ նիշերի հավաքածու
Նախ, առաջին հերթին, սահմանեք ձեր CSS փաստաթղթերի բնույթը utf-8 : Թեեւ հավանական է, որ ձեր նախագծած էջերի մեծ մասը գրված են անգլերեն լեզվով, ոմանք կարող են տեղայնացված լինել տարբեր լեզվաբանական եւ մշակութային համատեքստում: Երբ դրանք լինեն, utf-8 պարզեցնում է գործընթացը: Արտաքին ոճի թերթիկում սահմանված գրանշանները նախադրյալ չեն դարձնում HTTP վերնագրի վրա , այլ բոլոր այլ իրավիճակներում:
Հեշտ է սահմանել բնույթը: CSS- ի առաջին գծի համար գրեք.
@ sharset "utf-8";Այս կերպ, եթե դուք օգտագործում եք միջազգային նիշերը բովանդակության գույքում կամ դասի եւ ID- ի անուններով, ոճաթերթիկը դեռ ճիշտ է:
Կառուցելով Էջի մարմինը
Հաջորդ բանը, որպես լռելյայն ոճի թերթիկ, ոճեր են, որոնք զրոյից դուրս են մղում, padding եւ սահմանները: Սա համոզված է, որ բոլոր բրաուզերները տեղադրում են բովանդակությունը նույն տեղում, եւ զննարկիչի եւ բովանդակության միջեւ թաքնված տարածքներ չկան: Բազմաթիվ վեբ էջերի համար դա շատ մոտ է տեքստի եզրին, սակայն կարեւոր է սկսել այնտեղ, որպեսզի ֆոնային պատկերները եւ դասավորության ստորաբաժանումները ճիշտ ձեւավորվեն:
html, մարմին {margin: 0px; padding: 0px; սահման: 0px; }Սահմանեք նախնական նախապատկերը կամ տառատեսակի գույնը սեւ եւ ստանդարտ ֆոնի գույնը սպիտակ: Թեեւ այս ամենը, ամենայն հավանականությամբ, կփոխվի էջերի նախագծերի մեծամասնության համար, մարմնով եւ HTML- ի վրա հիմնված այս ստանդարտ գույները, սկզբում էջը ավելի հեշտ կարդալու եւ աշխատելու համար:
html, մարմին {գույնը `# 000; background: #fff; }Default տառատեսակի ոճերը
Տառատեսակը եւ տառատեսակը ընտանիքը մի բան է, որը անխուսափելիորեն փոխվում է, երբ դիզայնը տեղի է ունենում, բայց սկսվում է 1 em- ի տառաչափի եւ Arial, Ժնեւի տառատեսակի տառատեսակ տառատեսակով կամ որեւէ այլ sans-serif տառատեսակով: Ems- ի օգտագործումը հնարավորինս մատչելի է էջը, եւ sans-serif տառատեսակը ավելի պարզ է էկրանին:
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Կարող են լինել այլ վայրեր, որտեղ դուք կարող եք գտնել տեքստ, սակայն p- ը , td , li , dd- ը եւ dt- ը լավ սկիզբ են հիմնական տառատեսակը սահմանելու համար: Ներառեք HTML եւ մարմնի ընդամենը այն դեպքում, սակայն շատ բրաուզերները գերադասում են տառատեսակների ընտրությունը, եթե միայն սահմանեք ձեր տառատեսակ HTML կամ մարմնի համար:
Վերջին լուրերը
HTML- ի վերնագրերը կարեւոր են օգտագործման համար, որոնք կօգնեն ձեր կայքի ուրվագծերը եւ թույլ են տալիս, որ որոնիչները ավելի խորացնեն ձեր կայքում: Առանց ոճերի, նրանք բոլորն էլ բավականին տգեղ են, ուստի բոլորի վրա սահմանվում են ստանդարտ ոճեր եւ սահմանում տառատեսակի ընտանիքը եւ տառատեսակների չափերը յուրաքանչյուրի համար:
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Չհիշեք Հղումներ
Հղիության գույնը ձեւավորելը գրեթե միշտ դիզայնի կարեւորագույն մասն է, բայց եթե դուք չեք սահմանում դրանք նախնական ոճերում, հնարավորությունները մոռանում եք առնվազն մեկ կեղծ դասերի մասին: Սահմանել դրանք փոքրիկ փոփոխություններով կապույտով եւ այնուհետեւ փոխել դրանք, երբ դուք ունեք գունավոր պնակը, որը նախատեսված է կայքի համար:
Կապը կապել կապույտ երանգներով, սահմանել `
- կապերը կապույտ
- այցելեց հղումներ, որպես մուգ կապույտ
- սավառնել հղումները, որպես թեթեւ կապույտ
- ակտիվ հղումներ, ինչպես նաեւ գորշ կապույտ
ինչպես նշված է այս օրինակով.
a: հղում {color: # 00f; } a: այցելել {գույնը `# 009; } a: hover {color: # 06f; } a: ակտիվ {color: # 0cf; } Կատարելով հղումները բավականին անմարդկային գունային սխեմայով, այն ապահովում է, որ ես չմոռանամ դասերից որեւէ մեկին, եւ դրանք մի փոքր ավելի բարձր է, քան ստանդարտ կապույտ, կարմիր եւ մանուշակագույն:Full Style թերթ
Ահա ամբողջական ոճը:
@ sharset "utf-8"; html, մարմին {margin: 0px; padding: 0px; սահման: 0px; գույնը `# 000; background: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: հղում {color: # 00f; } a: այցելել {գույնը `# 009; } a: hover {color: # 06f; } a: ակտիվ {color: # 0cf; }