內容營銷

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;
}
  1. p.code:這是一個針對 HTML 的 CSS 規則 <p> 類別名為“code”的元素。 這意味著具有此類的任何段落都將根據以下屬性設定樣式。
  2. font-family: Courier New;:此屬性將字體系列設定為「Courier New」。 它指定目標元素中的文字將使用的字體。
  3. font-size: 8pt;:此屬性將字體大小設為 8 磅。 目標元素內的文字將以該字體大小顯示。
  4. border-style: inset;:此屬性將邊框樣式設定為「內嵌」。 它為目標元素周圍的邊框創建凹陷或受壓的外觀。
  5. border-width: 3px;:此屬性將邊框寬度設為 3 像素。 元素周圍的邊框將為 3 像素厚。
  6. padding: 5px;:此屬性在目標元素內的內容周圍新增 5 個像素的填充。 它提供文字和邊框之間的間距。
  7. background-color: #FFFFFF;:此屬性將背景顏色設定為白色 (#FFFFFF)。 目標元素內的內容將具有白色背景。
  8. line-height: 100%;:此屬性將行高設定為字體大小的 100%。 它確保文字行根據字體大小間隔。
  9. margin: 10px;:此屬性在整個元素周圍新增 10 像素的邊距。 它提供了該元素與頁面上其他元素之間的間距。

提供的 CSS 程式碼使用「code」類別定義 HTML 段落的樣式。 它設定這些段落的字體、字體大小、邊框樣式、邊框寬度、填滿、背景顏色、行高和邊距。 此樣式可以應用於 Blogger 帖子中的程式碼片段或預先格式化文本,以賦予它們特定的外觀。

其外觀如下:

p.代碼{
字體系列:Courier New;
字體大小:8pt;
邊框樣式:內嵌;
邊框寬度:3px;
padding:5px;
背景顏色:#FFFFFF;
行高:100%;
邊距:10px;
}

編碼愉快!

Douglas Karr

Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。