Nội dung tiếp thị

Blogger: Kiểu CSS cho mã trên blog của bạn

Một người bạn đã hỏi tôi cách tạo vùng mã trong mục nhập Blogger. Tôi đã làm điều đó bằng cách sử dụng thẻ kiểu cho CSS trong mẫu Blogger của mình. Đây là những gì tôi đã thêm:

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: Đây là quy tắc CSS nhắm mục tiêu HTML <p> các phần tử có tên lớp là “code”. Điều đó có nghĩa là bất kỳ đoạn văn nào có lớp này sẽ được tạo kiểu theo các thuộc tính sau.
  2. font-family: Courier New;: Thuộc tính này đặt họ phông chữ thành “Courier New.” Nó chỉ định phông chữ sẽ được sử dụng cho văn bản trong các phần tử được nhắm mục tiêu.
  3. font-size: 8pt;: Thuộc tính này đặt kích thước phông chữ thành 8 điểm. Văn bản trong các phần tử được nhắm mục tiêu sẽ được hiển thị ở cỡ chữ này.
  4. border-style: inset;: Thuộc tính này đặt kiểu đường viền thành “inset”. Nó tạo ra vẻ ngoài chìm hoặc bị ép cho đường viền xung quanh các phần tử được nhắm mục tiêu.
  5. border-width: 3px;: Thuộc tính này đặt chiều rộng đường viền thành 3 pixel. Đường viền xung quanh các phần tử sẽ dày 3 pixel.
  6. padding: 5px;: Thuộc tính này thêm 5 pixel đệm xung quanh nội dung bên trong các phần tử được nhắm mục tiêu. Nó cung cấp khoảng cách giữa văn bản và đường viền.
  7. background-color: #FFFFFF;: Thuộc tính này đặt màu nền thành màu trắng (#FFFFFF). Nội dung trong các phần tử được nhắm mục tiêu sẽ có nền trắng.
  8. line-height: 100%;: Thuộc tính này đặt chiều cao của dòng thành 100% kích thước phông chữ. Nó đảm bảo rằng các dòng văn bản được giãn cách theo kích thước phông chữ.
  9. margin: 10px;: Thuộc tính này thêm lề 10 pixel xung quanh toàn bộ phần tử. Nó cung cấp khoảng cách giữa phần tử này và các phần tử khác trên trang.

Mã CSS được cung cấp xác định kiểu cho các đoạn HTML với lớp “mã”. Nó đặt phông chữ, cỡ chữ, kiểu đường viền, độ rộng đường viền, phần đệm, màu nền, chiều cao dòng và lề cho các đoạn văn này. Bạn có thể áp dụng kiểu này cho các đoạn mã hoặc văn bản được định dạng sẵn trong bài đăng trên Blogger để tạo cho chúng một diện mạo cụ thể.

Đây là giao diện của nó:

p.code {
họ phông chữ: Courier New;
cỡ chữ: 8pt;
kiểu đường viền: hình nhỏ;
chiều rộng đường viền: 3px;
padding: 5px;
màu nền: #FFFFFF;
chiều cao dòng: 100%;
lề: 10px;
}

Chúc bạn mã hóa vui vẻ!

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.