Blogger: блогыңыздағы кодқа арналған CSS стилі
Бір досым Blogger жазбасында код аймақтарын қалай жасағанымды сұрады. Мен мұны Blogger үлгісіндегі CSS үшін стиль тегін пайдалану арқылы жасадым. Міне, мен қостым:
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
: Бұл HTML-ге бағытталған CSS ережесі<p>
«код» сынып атауы бар элементтер. Бұл классы бар кез келген абзац келесі сипаттарға сәйкес мәнерленетінін білдіреді.font-family: Courier New;
: Бұл сипат қаріптер тобын «Courier New» деп орнатады. Ол мақсатты элементтердегі мәтін үшін пайдаланылатын қаріпті көрсетеді.font-size: 8pt;
: Бұл сипат қаріп өлшемін 8 нүктеге орнатады. Мақсатты элементтердегі мәтін осы қаріп өлшемінде көрсетіледі.border-style: inset;
: Бұл сипат жиек мәнерін «inset» күйіне орнатады. Ол мақсатты элементтердің айналасындағы жиек үшін шөгілген немесе қысылған көрініс жасайды.border-width: 3px;
: Бұл сипат шекара енін 3 пиксельге орнатады. Элементтердің айналасындағы жиек қалыңдығы 3 пиксель болады.padding: 5px;
: Бұл сипат мақсатты элементтер ішіндегі мазмұнның айналасына 5 пиксель толтыруды қосады. Ол мәтін мен жиек арасындағы қашықтықты қамтамасыз етеді.background-color: #FFFFFF;
: Бұл сипат фон түсін ақ (#FFFFFF) етіп орнатады. Мақсатты элементтердегі мазмұн ақ фонға ие болады.line-height: 100%;
: Бұл сипат жол биіктігін қаріп өлшемінен 100% орнатады. Ол мәтін жолдарының шрифт өлшеміне сәйкес орналасуын қамтамасыз етеді.margin: 10px;
: Бұл сипат бүкіл элементтің айналасында 10 пиксель жиегін қосады. Ол осы элемент пен беттегі басқа элементтер арасындағы қашықтықты қамтамасыз етеді.
Берілген CSS коды «код» сыныбы бар HTML абзацтары үшін стильді анықтайды. Ол осы абзацтар үшін қаріпті, қаріп өлшемін, жиек мәнерін, жиек енін, толтыруды, фон түсін, жол биіктігін және жиегін орнатады. Бұл стильді код үзінділеріне немесе белгілі бір көрініс беру үшін Blogger жазбасындағы алдын ала пішімделген мәтінге қолдануға болады.
Міне, ол қалай көрінеді:
p.code {
font-family: Courier New;
шрифт өлшемі: 8 pt;
жиек стилі: кірістіру;
жиек ені: 3px;
толтыру: 5px;
фон түсі: #FFFFFF;
сызық биіктігі: 100%;
маржа: 10px;
}
Кодтау құтты болсын!