Կատարեք Fancy վերնագրերը CSS- ով

Օգտագործեք տառատեսակներ, սահմաններ եւ պատկերներ, վերնագրերը զարդարելու համար

Բաժնետոմսերը տարածված են վեբ էջերի մեծ մասում: Փաստորեն, շատ տեքստային փաստաթուղթը հակված է առնվազն մեկ վերնագրի, որպեսզի դուք գիտեք, թե ինչ եք ընթերցում: Այս վերնագրերը կոդավորված են օգտագործելով HTML վերնաշերտը `h1, h2, h3, h4, h5 եւ h6:

Որոշ կայքերում կարող եք գտնել, որ վերնագրերը կոդավորված են առանց այդ տարրերի օգտագործման: Փոխարենը, վերնագրերը կարող են օգտագործել պարագրաֆները, որոնք ավելացվել են հատուկ դասի հատկանիշներով, կամ դասակարգային տարրերով բաժանումներ: Պատճառը, որ հաճախ եմ լսում այս սխալ պրակտիկան, այն է, որ դիզայները «դուր չի գալիս, թե ինչպես են վերնագրերը նայում»: Ըստ լռելյայն, վերնագրերը դրսեւորվում են համարձակ եւ դրանք ավելի մեծ են, հատկապես h1 եւ h2 տարրերը, որոնք ավելի մեծ տառատեսակով են դրսեւորվում, քան մյուս էջի տեքստից: Հիշեք, սա միայն այս տարրերի կանխադրված տեսքն է: CSS- ով, դուք կարող եք վերնագիր փնտրել, բայց ուզում եք: Դուք կարող եք փոխել տառաչափը, հեռացնել համարձակ եւ շատ ավելին: Թեմաների վերնագրերը պատշաճ ձեւ են `էջի վերնագրերը կոդավորելու համար: Ահա որոշ պատճառներ:

Ինչու օգտագործեք տիտղոսաթերթեր, փոխարենը DIVs- ից եւ Styling- ից

Որոնման շարժիչները, ինչպես տողի վերնագրերը


Սա լավագույն պատճառն է, օգտագործելու վերնագրերը եւ դրանք օգտագործեք ճիշտ կարգով (այսինքն h1, ապա h2, ապա h3 եւ այլն): Որոնման համակարգերը տալիս են տեքստի մեջ ներառված տեքստի ամենաբարձր քաշը, քանի որ այդ տեքստի համար սիմանդիկ արժեք կա: Այլ կերպ ասած, ձեր էջի անվանումը H1- ը պիտակելով, դուք հայտնաբերում եք որոնման spider- ը, որը էջի # 1 կենտրոնն է: H2- վերնագրերը # 2 շեշտադրում ունեն եւ այլն:

Դուք չեք հիշում, թե ինչ դասեր եք օգտագործում ձեր վերնագրերը

Երբ գիտեք, որ ձեր բոլոր վեբ էջերը պատրաստվում են H1- ի, որը համարձակ, 2em եւ դեղին է, ապա կարող եք սահմանել, որ մեկ անգամ ձեր ոճաթերթիկում եւ արվի: 6 ամիս անց, երբ դուք ավելացնում եք մեկ այլ էջ, դուք պարզապես ավելացնում եք H1 պիտակը ձեր էջի վերեւում, դուք չունեք այլ էջեր վերադառնալ, պարզելու համար, թե ինչ ոճի ID- ն կամ դասը, վերնագիր եւ ենթատարրեր:

Նրանք ապահովում են ամուր էջի կառուցվածքը

Հատկանշական տեքստը հեշտ է կարդալ: Ահա թե ինչու ամերիկյան դպրոցներից շատերը սովորեցնում էին ուսանողներին, նախքան թերթը գրել նախագիծը: Տեքստի ձեւաչափում օգտագործեք վերնագրի տեքստը, ձեր տեքստը ունի հստակ կառուցվածք, որը շատ պարզ է դառնում: Ընդ որում, կան գործիքներ, որոնք կարող են վերանայել էջի ուրվագիծը, սինոպսիս տրամադրելու համար, եւ դրանք հիմնվում են գծագրության կառուցվածքի վերնագրերին:

Ձեր էջը զգայունություն կհայտնի նույնիսկ այն ոճերի հետ, որոնք անջատված են

Ոչ բոլորը կարող են դիտել կամ օգտագործել ոճի թերթիկները (եւ սա գալիս է դեպի # 1 - որոնման համակարգերը դիտելու ձեր էջի բովանդակությունը (տեքստը), այլ ոչ թե ոճաթերթերը: Եթե ​​Դուք օգտագործում եք տիտղոսաթերթեր, դուք ձեր էջերը ավելի մատչելի դարձնում եք, քանի որ վերնագրերը տրամադրում են այն տեղեկությունները, որոնք DIV պիտակը չէ:

Այն օգտակար է Էկրանի ընթերցողների եւ կայքերի մատչելիության համար

Առարկաների պատշաճ օգտագործումը փաստաթղթի տրամաբանական կառուցվածքը ստեղծում է: Սա էկրանի ընթերցողները կօգտագործեն «կարդալ» կայքը կայքի տեսողության խանգարում ունեցող օգտվողին `դարձնելով ձեր կայքը մատչելի դարձնելով հաշմանդամություն ունեցող անձանց:

Style ձեր վերնագրերի տեքստը եւ տառատեսակը

Թեման պիտակների «մեծ, համարձակ եւ տգեղ» խնդիրից հեռանալու ամենադյուրին ճանապարհը տեքստի ոճը այնպես, որ դուք ուզում եք տեսնել: Իրականում, երբ աշխատում եմ նոր կայքում, ես սովորաբար գրում եմ պարբերություն, h1, h2 եւ h3 ոճերը առաջին բանը: Ես սովորաբար մնում եմ միայն տառատեսակ ընտանիքով եւ չափսերով / քաշով: Օրինակ, սա կարող է լինել նոր կայքի համար նախնական ոճաթերթիկը (դրանք ընդամենը մի քանի օրինակներ են, որոնք կարող են օգտագործվել):

մարմին, html {margin: 0; լրացնելով `0; } p {font: 1em Arial, Ժնեւ, Helvetica, sans-serif; } h1 {font: bold 2em «Times New Roman», Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Ժնեւ, Helvetica, sans-serif; }

Դուք կարող եք փոփոխել ձեր վերնագրի տառատեսակները կամ փոխել տեքստային ոճը կամ նույնիսկ տեքստի գույնը : Այս ամենը ձեր «տգեղ» գլուխը կդարձնի ավելի աշխույժ ու դիզայնի մեջ:

h1 {font: thick italic 2em / 1em «Times New Roman», «MS Serif», «New York», serif; margin: 0; լրացնելով `0; գույնը `# e7ce00; }

Սահմանները կարող են հագցնել վերնագրերը

Սահմանները ձեր լավատեղյակ աղբյուրների բարելավման մեծ ճանապարհ են: Իսկ սահմանները հեշտ է ավելացնել: Բայց մի մոռացեք փորձել սահմանների հետ, ձեր վերնագրի յուրաքանչյուր կողմում սահման չկա: Եվ դուք կարող եք օգտագործել ավելի քան պարզապես պարզ ձանձրալի սահմանները:

h1 {font: thick italic 2em / 1em «Times New Roman», «MS Serif», «New York», serif; margin: 0; լրացնելով `0; գույնը `# e7ce00; border-top: solid # e7ce00 միջին; border-bottom: dotted # e7ce00 բարակ; լայնությունը `600px; }

Ես ավելացրեցի վերեւի եւ ներքեւի սահմանը իմ օրինակելի վերնագրի համար `ներկայացնելով որոշ հետաքրքիր տեսաֆիլմեր: Դուք կարող եք սահմանները ավելացնել ցանկացած ձեւով, որ դուք ուզում եք հասնել դիզայնի ոճին, որը ցանկանում եք:

Լրացուցիչ պատկերներ ավելացրեք ձեր վերնագրերին Ավելի շատ Pizazz- ի համար

Շատ Վեբ կայքեր ունեն էջերի վերեւում գտնվող վերնագիր բաժինը, որը պարունակում է վերնագիր, սովորաբար կայքի անվանումը եւ գրաֆիկական: Դիզայներների մեծ մասը դա համարում է երկու առանձին տարր, բայց դուք չունեք: Եթե ​​գրաֆիկն ուղղակի զարդարել վերնագիրն է, ապա ինչու չես ավելացնում այն ​​վերնագրի ոճերը:

h1 {font: thick italic 3em / 1em «Times New Roman», «MS Serif», «New York», serif; background: #fff url ("fancyheadline.jpg") կրկնում-x ներքեւ; padding: 0.5em 0 90px 0; text-align: կենտրոն; margin: 0; border-bottom: solid # e7ce00 0.25em; գույնը `# e7ce00; }

Այս գլխի հնարքն այն է, որ իմ պատկերն իմ բարձրությունը 90 պիքսել է: Այսպիսով, ես լրացնում եմ 90px- ի խորագրի ներքո (լրացնելով 0.5 0 90px 0p;): Դուք կարող եք խաղալ ծածկույթների, գիծի բարձրության եւ պաստառի հետ `վերնագրի տեքստը ցուցադրելու համար` հենց այն վայրում, որտեղ ցանկանում եք:

Պատկերների օգտագործման ժամանակ հիշելու մի բան այն է, որ եթե ունեք ձեր պատասխանատու կայքը (որը դուք պետք է), որի վրա փոփոխություններ են կատարվում էկրանի չափսերի եւ սարքերի վրա, Դուք վերնագիր միշտ չէ, որ նույն չափը: Եթե ​​ձեր գլուխը պետք է լինի ճշգրիտ չափի, ապա դա կարող է խնդիրներ առաջացնել: Դա այն պատճառներից մեկն է, որ ես ընդհանուր առմամբ խուսափում եմ ֆոնային պատկերների վերնագրում, ինչպես սառը, երբ դրանք կարող են երբեմն նայել:

Պատկերների փոխարինում վերնագրերում

Սա վեբ դիզայներների համար մեկ այլ հայտնի մեթոդ է, քանի որ այն թույլ է տալիս ստեղծել գրաֆիկական վերնագիր եւ վերնագրի պիտակի տեքստը այդ պատկերով: Սա ճշմարտորեն ոգեշնչված պրակտիկա է, որը վեբ դիզայներներից օգտվել է շատ քիչ տառատեսակներից եւ ցանկանում է օգտագործել իրենց ավելի շատ էկզոտիկ տառատեսակներ: Վեբ տառատեսակների բարձրացումը իսկապես փոխվել է, թե ինչպես դիզայներները մոտենում են կայքերին: Բաժնետոմսերը այժմ կարող են սահմանվել տարբեր տառատեսակների եւ պատկերների մեջ, որոնք ներկված տառատեսակները այլեւս կարիք չունեն: Որպես այդպիսին, դուք միայն կստանաք CSS պատկերների փոխարինում ավելի հին կայքերում վերնագրերի համար, որոնք դեռեւս թարմացվում են ավելի ժամանակակից պրակտիկայում:

Իրական հոդվածը Ջենիֆեր Քրինինն է: Փոփոխված է Ջերեմի Գիրարդը, 9/6/17 թ .: