ბლოგერი: 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 აბზაცებისთვის კლასით „კოდი“. იგი ადგენს შრიფტს, შრიფტის ზომას, საზღვრის სტილს, საზღვრის სიგანეს, ბალიშს, ფონის ფერს, ხაზის სიმაღლეს და ზღვარს ამ აბზაცებისთვის. ეს სტილი შეიძლება გამოყენებულ იქნას კოდის ფრაგმენტებზე ან წინასწარ ფორმატირებულ ტექსტზე Blogger-ის პოსტში, რათა მათ კონკრეტული გარეგნობა მისცეს.
აი, როგორ გამოიყურება:
p.code {
font-family: Courier New;
შრიფტის ზომა: 8pt;
სასაზღვრო სტილი: ჩასმული;
საზღვარი-სიგანე: 3px;
padding: 5px;
ფონის ფერი: #FFFFFF;
ხაზის სიმაღლე: 100%;
ზღვარი: 10px;
}
ბედნიერი კოდირება!