Բլոգեր. CSS ոճ ձեր բլոգի կոդի համար
Ընկերներից մեկն ինձ հարցրեց, թե ինչպես եմ ես ստեղծել կոդերի շրջաններ Blogger-ի մուտքում: Ես դա արեցի՝ օգտագործելով CSS-ի ոճային պիտակը իմ Blogger ձևանմուշում: Ահա թե ինչ եմ ավելացրել.
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
Սա CSS կանոն է, որն ուղղված է HTML-ին<p>
տարրեր դասի «կոդ» անվանումով: Դա նշանակում է, որ այս դասի ցանկացած պարբերություն ոճավորվելու է հետևյալ հատկությունների համաձայն.font-family: Courier New;
Այս հատկությունը տառատեսակների ընտանիքը սահմանում է «Courier New»: Այն սահմանում է այն տառատեսակը, որը կօգտագործվի թիրախային տարրերի տեքստի համար:font-size: 8pt;
Այս հատկությունը տառատեսակի չափը սահմանում է 8 միավոր: Թիրախային տարրերի տեքստը կցուցադրվի այս տառաչափով:border-style: inset;
Այս հատկությունը սահմանում է եզրագծի ոճը «ներդիր»: Այն ստեղծում է խորտակված կամ սեղմված տեսք թիրախային տարրերի շուրջ եզրագծի համար:border-width: 3px;
Այս հատկությունը սահմանում է եզրագծի լայնությունը 3 պիքսել: Տարրերի շուրջ եզրագիծը կունենա 3 պիքսել հաստություն:padding: 5px;
Այս հատկությունը ավելացնում է 5 պիքսել լցոնում բովանդակության շուրջ թիրախային տարրերի ներսում: Այն ապահովում է տեքստի և եզրագծի միջև հեռավորություն:background-color: #FFFFFF;
Այս հատկությունը սահմանում է ֆոնի գույնը սպիտակ (#FFFFFF): Թիրախային տարրերի բովանդակությունը կունենա սպիտակ ֆոն:line-height: 100%;
Այս հատկությունը սահմանում է տողի բարձրությունը տառաչափի 100%-ին: Այն ապահովում է, որ տեքստային տողերը բաժանված են ըստ տառաչափի:margin: 10px;
Այս հատկությունը ավելացնում է 10 պիքսել լուսանցք ամբողջ տարրի շուրջ: Այն ապահովում է տարածություն այս տարրի և էջի այլ տարրերի միջև:
Տրամադրված CSS կոդը սահմանում է ոճ HTML պարբերությունների համար՝ «code» դասով: Այն սահմանում է տառատեսակը, տառաչափը, եզրագծի ոճը, եզրագծի լայնությունը, լիցքավորումը, ֆոնի գույնը, տողի բարձրությունը և լուսանցքը այս պարբերությունների համար: Այս ոճը կարող է կիրառվել Blogger-ի գրառման կոդի հատվածների կամ նախապես ձևաչափված տեքստի վրա՝ դրանց հատուկ տեսք հաղորդելու համար:
Ահա թե ինչպիսի տեսք կունենա այն.
p.code {
font-family: Courier New;
տառաչափը՝ 8 pt;
եզրային ոճ՝ ներդիր;
եզրագծի լայնությունը՝ 3px;
լիցք: 5px;
ֆոնի գույնը՝ #FFFFFF;
գծի բարձրությունը՝ 100%;
լուսանցք ՝ 10 px;
}
Շնորհավոր կոդավորում: