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;
}
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 พิกเซลรอบๆ เนื้อหาภายในองค์ประกอบเป้าหมาย ให้ระยะห่างระหว่างข้อความและเส้นขอบbackground-color: #FFFFFF;
: คุณสมบัตินี้ตั้งค่าสีพื้นหลังเป็นสีขาว (#FFFFFF) เนื้อหาภายในองค์ประกอบเป้าหมายจะมีพื้นหลังสีขาวline-height: 100%;
: คุณสมบัตินี้ตั้งค่าความสูงของบรรทัดเป็น 100% ของขนาดตัวอักษร ช่วยให้แน่ใจว่าบรรทัดข้อความมีระยะห่างตามขนาดตัวอักษรmargin: 10px;
: คุณสมบัตินี้เพิ่มระยะขอบ 10 พิกเซลรอบองค์ประกอบทั้งหมด โดยให้ระยะห่างระหว่างองค์ประกอบนี้กับองค์ประกอบอื่นๆ บนเพจ
รหัส CSS ที่ให้มากำหนดสไตล์สำหรับย่อหน้า HTML ด้วยคลาส “รหัส” โดยจะตั้งค่าแบบอักษร ขนาดแบบอักษร ลักษณะเส้นขอบ ความกว้างของเส้นขอบ ระยะห่างจากขอบ สีพื้นหลัง ความสูงของบรรทัด และระยะขอบสำหรับย่อหน้าเหล่านี้ สไตล์นี้สามารถนำไปใช้กับข้อมูลโค้ดหรือข้อความที่จัดรูปแบบล่วงหน้าในโพสต์ของ Blogger เพื่อให้มีลักษณะเฉพาะเจาะจง
มันจะมีลักษณะดังนี้:
p.code {
ตระกูลฟอนต์: Courier New;
ขนาดตัวอักษร: 8pt;
สไตล์เส้นขอบ: สิ่งที่ใส่เข้าไป;
ขอบกว้าง: 3px;
padding: 5px;
สีพื้นหลัง: #FFFFFF;
ความสูงของเส้น: 100%;
ขอบ: 10px;
}
มีความสุขในการเข้ารหัส!