Tùy chỉnh CSS trong Markdown
Mặc dù Markdown cung cấp định dạng cơ bản, bạn có thể cải thiện đáng kể tài liệu của mình bằng CSS để thêm màu sắc, thiết kế và tùy chỉnh trực quan.
Định dạng Cơ bản
Nhúng CSS Nội tuyến
markdown
<style>
.highlight {
background-color: yellow;
padding: 2px 5px;
}
</style>
Đây là văn bản <span class="highlight">được đánh dấu</span>.Liên kết Stylesheet Bên ngoài
markdown
<link rel="stylesheet" href="styles.css">
# Nội dung Của TôiKỹ thuật CSS Nâng cao
Tùy chỉnh Khối Mã
css
pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
}
code {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 14px;
}Định dạng Bảng
css
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th {
background: #3498db;
color: white;
padding: 12px;
text-align: left;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background: #f9f9f9;
}Cải thiện Liên kết
css
a {
color: #3498db;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #2980b9;
text-decoration: underline;
}Framework CSS
Bootstrap
markdown
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="alert alert-info" role="alert">
Đây là thông báo thông tin!
</div>Tailwind CSS
markdown
<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-blue-500 text-white p-4 rounded-lg">
Hộp được định dạng bằng Tailwind
</div>Thực hành Tốt nhất
- Tính Nhất quán: Sử dụng biến CSS cho màu sắc và khoảng cách
- Đáp ứng: Làm cho thiết kế thân thiện với thiết bị di động
- Hiệu suất: Thu nhỏ CSS và tải quan trọng trước
- Khả năng Tiếp cận: Đảm bảo độ tương phản đủ và hỗ trợ trình đọc màn hình
- Bảo trì: Tổ chức CSS thành các tệp logic
Kết luận
CSS cho phép bạn chuyển đổi Markdown đơn giản thành tài liệu đẹp và chuyên nghiệp. Chọn phương pháp phù hợp với dự án của bạn và tận hưởng sự linh hoạt trong việc tùy chỉnh giao diện theo nhu cầu của bạn.