Content Marketing

Blogger: สไตล์ 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;
}
  1. p.code: นี่คือกฎ CSS ที่กำหนดเป้าหมาย HTML <p> องค์ประกอบที่มีชื่อคลาส “รหัส” หมายความว่าย่อหน้าใด ๆ ในคลาสนี้จะได้รับการออกแบบตามคุณสมบัติดังต่อไปนี้
  2. font-family: Courier New;: คุณสมบัตินี้ตั้งค่าตระกูลแบบอักษรเป็น "Courier New" ระบุแบบอักษรที่จะใช้สำหรับข้อความภายในองค์ประกอบเป้าหมาย
  3. font-size: 8pt;: คุณสมบัตินี้กำหนดขนาดตัวอักษรเป็น 8 พอยต์ ข้อความภายในองค์ประกอบเป้าหมายจะแสดงตามขนาดตัวอักษรนี้
  4. border-style: inset;: คุณสมบัตินี้ตั้งค่ารูปแบบเส้นขอบเป็น "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 ที่ให้มากำหนดสไตล์สำหรับย่อหน้า HTML ด้วยคลาส “รหัส” โดยจะตั้งค่าแบบอักษร ขนาดแบบอักษร ลักษณะเส้นขอบ ความกว้างของเส้นขอบ ระยะห่างจากขอบ สีพื้นหลัง ความสูงของบรรทัด และระยะขอบสำหรับย่อหน้าเหล่านี้ สไตล์นี้สามารถนำไปใช้กับข้อมูลโค้ดหรือข้อความที่จัดรูปแบบล่วงหน้าในโพสต์ของ Blogger เพื่อให้มีลักษณะเฉพาะเจาะจง

มันจะมีลักษณะดังนี้:

p.code {
ตระกูลฟอนต์: Courier New;
ขนาดตัวอักษร: 8pt;
สไตล์เส้นขอบ: สิ่งที่ใส่เข้าไป;
ขอบกว้าง: 3px;
padding: 5px;
สีพื้นหลัง: #FFFFFF;
ความสูงของเส้น: 100%;
ขอบ: 10px;
}

มีความสุขในการเข้ารหัส!

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา