Tôi có thông báo dưới đây (đã thay đổi một chút):
"Tham gia cuộc thi trước ngày 30 tháng 1 năm 2011 và bạn có thể giành được tới $$$$ - bao gồm cả những chuyến đi mùa hè tuyệt vời!"
Tôi hiện có:
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
định dạng chuỗi văn bản, nhưng muốn thay đổi màu của "ngày 30 tháng 1 năm 2011" thành # FF0000 và "mùa hè" thành # 0000A0.
Làm cách nào để thực hiện điều này một cách nghiêm ngặt với HTML hoặc CSS nội tuyến?
Câu trả lời:
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
Enter the competition by
<span style="color: #ff0000">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span style="color: #0000a0">summer</span>
trips!
</p>
Hoặc bạn có thể muốn sử dụng các lớp CSS thay thế:
<html>
<head>
<style type="text/css">
p {
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
}
.date {
color: #ff0000;
}
.season { /* OK, a bit contrived... */
color: #0000a0;
}
</style>
</head>
<body>
<p>
Enter the competition by
<span class="date">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span class="season">summer</span>
trips!
</p>
</body>
</html>
Bạn có thể sử dụng Thẻ HTML5 <mark>:
<p>Enter the competition by
<mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing
<mark class="blue">summer</mark> trips!</p>
Và sử dụng điều này trong CSS:
p {
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
}
mark.red {
color:#ff0000;
background: none;
}
mark.blue {
color:#0000A0;
background: none;
}
Thẻ <mark>có màu nền mặc định ... ít nhất là trong Chrome.
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
Enter the competition by <span style="color:#FF0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color:#0000A0">summer</span> trips!
</p>
Các phần tử span nằm trong dòng do đó không phá vỡ dòng chảy của đoạn văn, chỉ tạo kiểu ở giữa các thẻ.
<font color="red">This is some text!</font>
Điều này phù hợp nhất với tôi khi tôi chỉ muốn thay đổi một từ thành màu đỏ trong một câu.
Điều chỉnh mã này theo cách bạn muốn để phù hợp với nhu cầu của bạn, bạn có thể chọn văn bản? trong đoạn văn là phông chữ hoặc kiểu bạn cần !:
<head>
<style>
p{ color:#ff0000;font-family: "Times New Roman", Times, serif;}
font{color:#000fff;background:#000000;font-size:225%;}
b{color:green;}
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
Bạn có thể sử dụng cách lâu hơn
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p> bạn nhận được điểm cho phần còn lại