內容營銷
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>
類別名為“code”的元素。 這意味著具有此類的任何段落都將根據以下屬性設定樣式。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 程式碼使用「code」類別定義 HTML 段落的樣式。 它設定這些段落的字體、字體大小、邊框樣式、邊框寬度、填滿、背景顏色、行高和邊距。 此樣式可以應用於 Blogger 帖子中的程式碼片段或預先格式化文本,以賦予它們特定的外觀。
其外觀如下:
p.代碼{
字體系列:Courier New;
字體大小:8pt;
邊框樣式:內嵌;
邊框寬度:3px;
padding:5px;
背景顏色:#FFFFFF;
行高:100%;
邊距:10px;
}
編碼愉快!