Tôi đã từng có ông chủ này yêu, yêu, yêu, yêu để nhấn mạnh từ ngữ. Đây là cách quay trở lại trước khi chúng tôi sử dụng trình chỉnh sửa WYSIWYG và tôi phải viết mã thủ công thứ đó.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Chúng ta đừng đi sâu vào màu sắc mà anh ấy đã sử dụng cho MOAR nhấn mạnh.)
Viết tất cả những đánh dấu đó không bao giờ cảm thấy tuyệt vời. Những nỗ lực nó đã mất, chắc chắn, bất cứ điều gì. Nhưng có nên thêm nội dung quá tải với gấp đôi — hoặc hơn thế nữa không! - nhấn mạnh?
Các thẻ khác nhau truyền đạt sự nhấn mạnh khác nhau
Để bắt đầu, <strong>
và <em>
thẻ được thiết kế cho các mục đích sử dụng khác nhau. Chúng tôi đã đưa chúng trở lại trong HTML5, trong đó:
Vì vậy, <strong>
mang lại cho nội dung nhiều trọng lượng hơn theo nghĩa nó gợi ý rằng nội dung trong đó là quan trọng hoặc khẩn cấp. Hãy nghĩ về một lời cảnh báo:
Cảnh báo: Nội dung sau đây đã được gắn cờ là tuyệt vời.
Nó có thể hấp dẫn để tiếp cận <em>
để làm điều tương tự. Rốt cuộc, văn bản in nghiêng có thể thu hút sự chú ý. Nhưng nó thực sự có ý nghĩa như một gợi ý để nhấn mạnh hơn khi đọc nội dung trong đó. Ví dụ, đây là hai phiên bản của cùng một câu với sự nhấn mạnh ở các vị trí khác nhau:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Cả hai ví dụ đều nhấn mạnh sự nhấn mạnh, nhưng trên các từ khác nhau. Và chúng sẽ phát ra âm thanh khác nếu bạn đọc to chúng. Điều đó làm cho <em>
một cách tuyệt vời để thể hiện giai điệu trong văn bản của bạn. Nó thay đổi ý nghĩa của câu theo cách mà <strong>
không làm.
Nhấn mạnh hình ảnh so với nhấn mạnh ngữ nghĩa
Đó là hai điều bạn phải cân nhắc khi nhấn mạnh nội dung. Giống như, có rất nhiều trường hợp bạn có thể cần in nghiêng nội dung mà không ảnh hưởng đến nghĩa của câu. Nhưng những thứ đó có thể được xử lý bằng các thẻ khác hiển thị chữ nghiêng:
<i>
: Đây là một trong những cổ điển! Trước HTML5, điều này được sử dụng để nhấn mạnh sự nhấn mạnh bằng chữ nghiêng ở khắp mọi nơi. Giờ đây, nó hoàn toàn được sử dụng để in nghiêng nội dung một cách trực quan mà không làm thay đổi ý nghĩa ngữ nghĩa.<cite>
: Chỉ ra nguồn gốc của một thực tế hoặc con số. ("Nguồn: CSS-Thủ thuật")<address>
: Được sử dụng để đánh dấu thông tin liên hệ, không chỉ địa chỉ thực mà cả những thứ như địa chỉ email và số điện thoại. (
)
Nó sẽ đến với anh ấy điều tương tự với <strong>
. Thay vì sử dụng nó để tạo kiểu cho văn bản mà bạn muốn trông nặng nề hơn, tốt hơn là sử dụng kiểu cổ điển <b>
gắn thẻ cho phần in đậm để tránh tạo thêm ý nghĩa cho nội dung không cần thiết. Và hãy nhớ rằng, một số yếu tố như tiêu đề đã được in đậm, nhờ vào kiểu mặc định của trình duyệt. Không cần phải nhấn mạnh hơn nữa.
Sử dụng chữ nghiêng trong nội dung nhấn mạnh (và ngược lại)
Có những trường hợp chính đáng mà bạn có thể cần in nghiêng một phần của dòng đã được nhấn mạnh. Hoặc có thể thêm điểm nhấn vào một đoạn văn bản đã được in nghiêng.
Một blockquote có thể là một ví dụ tốt. Tôi đã thấy rất nhiều lần chúng được in nghiêng theo phong cách, mặc dù các kiểu trình duyệt mặc định không làm điều đó:
blockquote { font-style: italic;
}
Nếu chúng ta cần đề cập đến một tiêu đề phim trong blockquote đó thì sao? Điều đó nên được in nghiêng. Không cần nhấn mạnh trọng âm, vì vậy một <i>
thẻ sẽ làm. Nhưng thật kỳ lạ khi in nghiêng một cái gì đó khi nó đã được hiển thị theo cách đó:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
Trong trường hợp chúng tôi đang in nghiêng nội dung nào đó trong nội dung được in nghiêng như thế này, chúng tôi phải loại bỏ chữ in nghiêng từ phần tử lồng nhau… <i>
trong trường hợp này.
blockquote i { font-style: normal;
}
Truy vấn kiểu vùng chứa sẽ cực kỳ hữu ích để thu thập tất cả các trường hợp này nếu chúng tôi nhận được chúng:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Đoạn mã nhỏ này đánh giá blockquote để xem liệu nó có font-style
được thiết lập để italic
. Nếu đúng như vậy, thì nó sẽ đảm bảo rằng <em>
, <i>
, <cite>
và <address>
các phần tử được hiển thị dưới dạng văn bản bình thường, trong khi vẫn giữ nguyên nghĩa ngữ nghĩa nếu có.
Nhưng trở lại nhấn mạnh trong nhấn mạnh
tôi sẽ không làm tổ <strong>
trong <em>
như thế này:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…hoặc tổ <em>
trong <strong>
thay thế:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Kết xuất là tốt! Và thứ tự của chúng không quan trọng… ít nhất là trong các trình duyệt hiện đại. Jennifer Kyrnin đề cập rằng một số trình duyệt chỉ hiển thị thẻ gần văn bản nhất, nhưng tôi đã không gặp phải điều đó ở bất cứ đâu trong các thử nghiệm hạn chế của mình. Nhưng một cái gì đó để xem cho!
Lý do tôi không lồng một hình thức nhấn mạnh này vào một hình thức nhấn mạnh khác là vì nó đơn giản là không cần thiết. Không có quy tắc ngữ pháp nào yêu cầu nó. Giống như dấu chấm than, một hình thức nhấn mạnh là đủ và bạn nên sử dụng hình thức phù hợp với những gì bạn đang theo đuổi cho dù đó là cách nhấn mạnh về hình ảnh, trọng lượng hay thông báo.
Và mặc dù một số trình đọc màn hình có khả năng thông báo nội dung được nhấn mạnh, nhưng chúng sẽ không đọc phần đánh dấu với bất kỳ mức độ quan trọng hoặc nhấn mạnh bổ sung nào. Vì vậy, không có đặc quyền tiếp cận bổ sung nào, theo như tôi có thể nói.
Nhưng tôi thực sự muốn tất cả sự nhấn mạnh!
Nếu bạn đang ở vị trí mà sếp của bạn giống như của tôi và muốn TẤT CẢ CÁC các nhấn mạnh, tôi sẽ tìm đúng thẻ HTML cho kiểu nhấn mạnh, sau đó áp dụng phần còn lại của các kiểu với sự kết hợp các thẻ không ảnh hưởng đến ngữ nghĩa với CSS để giúp giải thích bất kỳ kiểu trình duyệt nào không xử lý được.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Tôi thậm chí có thể làm điều đó với <strong>
gắn thẻ cũng như một biện pháp phòng thủ:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Miễn là chúng tôi đang chơi phòng thủ, chúng tôi có thể xác định các lỗi trong đó các điểm nhấn được lồng trong các điểm nhấn bằng cách đánh dấu chúng bằng màu đỏ hoặc thứ gì đó:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Sau đó, có lẽ tôi sẽ sử dụng đoạn mã đó từ phần cuối cùng để loại bỏ kiểu chữ in nghiêng mặc định khỏi một phần tử khi nó được lồng trong một phần tử in nghiêng khác.
Còn gì nữa không?
Mayyyybe:
- Phân phối nội dung và PR được hỗ trợ bởi SEO. Được khuếch đại ngay hôm nay.
- Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến thức. Truy cập Tại đây.
- nguồn: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- khả năng tiếp cận
- Tài khoản
- thêm vào
- địa chỉ
- địa chỉ
- ảnh hưởng đến
- ảnh hưởng đến
- Sau
- Tất cả
- cô đơn
- Đã
- Mỹ
- và
- công bố
- Thông báo
- Một
- bất cứ nơi nào
- Đăng Nhập
- hình đại diện
- trở lại
- lý lịch
- bởi vì
- trước
- được
- Hơn
- Một chút
- đậm
- biên giới
- BOSS
- Hộp
- phòng vé
- trình duyệt
- trình duyệt
- ngân sách
- Cuộc gọi
- có khả năng
- trường hợp
- trường hợp
- Những thay đổi
- thay đổi
- cổ điển
- màu sắc
- liên lạc
- chứa
- nội dung
- CSS
- Mặc định
- Phòng thủ
- phòng thủ
- thiết kế
- khác nhau
- Không
- dont
- tăng gấp đôi
- nỗ lực
- hay
- các yếu tố
- nhấn mạnh
- nhấn mạnh
- nhấn mạnh
- to lớn
- đủ
- Toàn bộ
- lỗi
- Ngay cả
- ví dụ
- ví dụ
- thể hiện
- thêm
- chiến đấu
- Hình
- Tên
- được gắn cờ
- tiếp theo
- hình thức
- từ
- được
- cho
- Cho
- Toàn cầu
- Go
- đi
- tốt
- tuyệt vời
- xử lý
- giúp đỡ
- tại đây
- Đánh dấu
- làm nổi bật
- HTML
- HTTPS
- ý tưởng
- xác định
- tầm quan trọng
- quan trọng
- in
- thông tin
- cái nhìn sâu sắc
- thay vì
- IT
- Jennifer
- Họ
- Hạn chế
- Dòng
- ít
- . Các địa điểm
- dài
- Xem
- thực hiện
- làm cho
- LÀM CHO
- dấu
- chất
- có nghĩa là
- đo
- đề cập đến
- Might
- triệu
- hiện đại
- Momentum
- chi tiết
- phim
- Phim Điện Ảnh
- NAB
- Cần
- Nest
- bình thường
- Bắc
- Bắc Mỹ
- số
- Cung cấp
- Office
- ONE
- mở
- gọi món
- Nền tảng khác
- một phần
- hiệu suất
- đặc quyền
- điện thoại
- vật lý
- Nơi
- plato
- Thông tin dữ liệu Plato
- PlatoDữ liệu
- chơi
- Rất nhiều
- điểm
- vị trí
- có lẽ
- bảo vệ
- hoàn toàn
- đạt
- Đọc
- độc giả
- lý do
- đỏ
- nhớ
- vẽ
- REST của
- giữ lại
- Quy tắc
- tương tự
- Màn
- trình đọc màn hình
- Phần
- ngữ nghĩa
- ý nghĩa
- kết án
- định
- nên
- đơn giản
- tình hình
- So
- một số
- một cái gì đó
- âm thanh
- nguồn
- Vẫn còn
- căng thẳng
- mạnh mẽ
- phong cách
- Gợi ý
- lớn
- phải
- TAG
- kiểm tra
- Sản phẩm
- Nguồn
- điều
- điều
- thời gian
- Yêu sách
- đến
- TẤN
- quá
- đúng
- khẩn cấp
- sử dụng
- cảnh báo
- Đồng hồ đeo tay
- cuối tuần
- cân
- trọng lượng
- Điều gì
- liệu
- trong khi
- CHÚNG TÔI LÀ
- sẽ
- ở trong
- không có
- từ
- sẽ
- viết
- Bạn
- trên màn hình
- zephyrnet