Kiểu CSS cho Mã trên Blog của bạn

css

Một người bạn của tôi đã hỏi tôi làm cách nào để tạo các vùng mã trong mục blog cuối cùng của tôi. Tôi thực sự đã 'giả mạo' vùng mã bằng cách sử dụng một kiểu. Trong Blogger, bạn có thể chỉnh sửa mẫu của mình. Tôi đã thêm kiểu sau:

p.code {font-family: Courier New; kích thước phông chữ: 8pt; border-style: inet; border-width: 3px; đệm: 5px; màu nền: #FFFFFF; chiều cao dòng: 100%; margin: 10px}

Bước tiếp theo là chỉnh sửa thẻ của tôi trong chế độ 'Chỉnh sửa Html'. Tôi chỉ đơn giản là trỏ đến phong cách mới của mình bằng cách tạo thẻ. Thì đấy! Phá vỡ các phong cách:

  • Đặt phông chữ thành Courier New… trông giống như một trình soạn thảo mã chung
  • Đặt kích thước phông chữ thành 8pt để trông phù hợp
  • Đặt kiểu đường viền đoạn văn thành 'inset'. Điều này sao chép một vùng văn bản trông như thế nào trên trang.
  • Đặt chiều rộng đường viền thành 2 hoặc 3 pixel. Điều này làm cho phong cách đường viền bên trong trông đúng.
  • Padding đặt khoảng cách giữa đường viền và văn bản bên trong.
  • Màu nền… đặt nó thành màu trắng (#FFFFFF)
  • Chiều cao dòng - Tôi đã điều chỉnh điều này thành 100% vì một số kiểu khác trong chủ đề blogger của tôi đã làm cho chiều cao dòng của tôi khoảng 200%
  • Đặt lề thành 10 px. Điều này sẽ di chuyển đoạn văn (thẻ p) cách xa mọi thứ 10 pixel.

Đó là tất cả quá nó! Một lưu ý: Trình chỉnh sửa đi kèm với Blogger không có khả năng hiển thị như nó sẽ xuất hiện trong blog của bạn. Nhưng nó hoạt động và trông tuyệt vời!

Một lưu ý nữa… sau khi bạn thực hiện chỉnh sửa thẻ, trình chỉnh sửa của Blogger muốn sử dụng ngẫu nhiên thẻ ở nơi khác trên bài đăng của bạn. Nó hơi khó chịu một chút! Lời khuyên của tôi là hãy viết toàn bộ bài đăng của bạn và sau đó thực hiện một chỉnh sửa nhỏ sau đó.

Một lưu ý cuối cùng… hãy chắc chắn sử dụng các Thực thể HTML để hiển thị các biểu tượng của bạn! Một vài ví dụ:

  • Dấu ngoặc kép (“) là“
  • > là>
  • > là>

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

3 Comments

  1. 1
  2. 2
  3. 3

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.