بلاگر: سبک CSS برای کد در وبلاگ شما
یکی از دوستان از من پرسید که چگونه مناطق کد را در ورودی بلاگر ایجاد کردم. من این کار را با استفاده از یک برچسب سبک برای 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
: این یک قانون CSS است که HTML را هدف قرار می دهد<p>
عناصر با نام کلاس "کد". به این معنی که هر پاراگراف با این کلاس طبق ویژگی های زیر استایل بندی می شود.font-family: Courier New;
: این ویژگی خانواده فونت را روی «Courier New» تنظیم می کند. فونتی را مشخص می کند که برای متن در عناصر هدف استفاده می شود.font-size: 8pt;
: این ویژگی اندازه فونت را روی 8 امتیاز قرار می دهد. متن درون عناصر هدف با این اندازه فونت نمایش داده می شود.border-style: inset;
: این ویژگی سبک حاشیه را روی "inset" تنظیم می کند. این یک ظاهر فرورفته یا فشرده برای مرز اطراف عناصر هدف ایجاد می کند.border-width: 3px;
: این ویژگی عرض حاشیه را روی 3 پیکسل قرار می دهد. ضخامت حاشیه اطراف عناصر 3 پیکسل خواهد بود.padding: 5px;
: این ویژگی 5 پیکسل padding در اطراف محتوای داخل عناصر هدف اضافه می کند. فاصله بین متن و حاشیه را فراهم می کند.background-color: #FFFFFF;
: این ویژگی رنگ پس زمینه را سفید (#FFFFFF) تنظیم می کند. محتوای درون عناصر هدف پسزمینه سفید خواهد داشت.line-height: 100%;
: این ویژگی ارتفاع خط را روی 100% اندازه فونت تنظیم می کند. این اطمینان حاصل می کند که خطوط متن با توجه به اندازه فونت فاصله دارند.margin: 10px;
: این ویژگی یک حاشیه 10 پیکسلی در اطراف کل عنصر اضافه می کند. فاصله بین این عنصر و سایر عناصر صفحه را فراهم می کند.
کد CSS ارائه شده یک سبک برای پاراگراف های HTML با کلاس "کد" تعریف می کند. فونت، اندازه فونت، سبک حاشیه، عرض حاشیه، بالشتک، رنگ پسزمینه، ارتفاع خط و حاشیه را برای این پاراگرافها تعیین میکند. این سبک را میتوان برای تکههای کد یا متن پیشفرمتشده در یک پست Blogger اعمال کرد تا ظاهری خاص به آنها بدهد.
در اینجا چگونه به نظر خواهد رسید:
p.code {
font-family: Courier New;
اندازه فونت: 8pt;
حاشیه به سبک: درونی;
عرض حاشیه: 3px؛
بالشتک: 5px؛
پس زمینه رنگ: #FFFFFF;
ارتفاع خط: 100%؛
حاشیه: 10px؛
}
برنامه نویسی مبارک!