Với CSS , thật dễ dàng để đặt màu văn bản trong tài liệu. Nếu bạn muốn các đoạn văn trên trang của bạn được hiển thị bằng một màu nhất định, bạn chỉ cần chỉ rõ rằng trong trang kiểu bên ngoài của bạn và trình duyệt sẽ hiển thị văn bản của bạn trong màu đã chọn đó. Điều gì xảy ra sau đó khi bạn muốn thay đổi màu sắc của chỉ một từ (hoặc có lẽ chỉ là một vài từ) trong một đoạn văn bản? Đối với điều đó, bạn sẽ cần phải sử dụng một yếu tố nội tuyến như thẻ.
Cuối cùng, việc thay đổi màu của một từ hoặc một nhóm nhỏ các từ trong một câu dễ dàng bằng cách sử dụng CSS và các thẻ là HTML hợp lệ, do đó, đừng lo lắng về việc đây là một loại hack. Với cách tiếp cận này, bạn cũng tránh sử dụng các thẻ và thuộc tính không dùng nữa như "font", một sản phẩm của một kỷ nguyên HTML đã qua.
Bài viết này dành cho các nhà phát triển web bắt đầu có khả năng mới với HTML và CSS. Nó sẽ giúp bạn tìm hiểu cách sử dụng thẻ HTML và CSS để thay đổi màu sắc của văn bản cụ thể trên các trang của bạn. Điều đó đang được nói, có một số nhược điểm đối với phương pháp này, mà tôi sẽ đề cập ở phần cuối của bài viết này. Bây giờ, hãy đọc tiếp để tìm hiểu các bước để thay đổi màu chữ này! Nó rất dễ dàng và sẽ mất khoảng 2 phút.
Từng bước hướng dẫn
- Mở trang web bạn muốn cập nhật trong trình soạn thảo HTML văn bản yêu thích của bạn. Đây có thể là một chương trình như Adobe Dreamweaver hoặc một trình soạn thảo văn bản đơn giản như Notepad, Notepad ++, TextEdit, v.v.
- Trong tài liệu, tìm các từ bạn muốn hiển thị bằng một màu khác trên trang. Vì lợi ích của hướng dẫn này, hãy sử dụng một số từ nằm trong một đoạn văn lớn hơn. Văn bản đó sẽ được chứa trong cặp thetag. Tìm một trong hai từ có màu bạn muốn chỉnh sửa.
- Đặt con trỏ của bạn trước chữ cái đầu tiên trong từ hoặc nhóm từ bạn muốn thay đổi màu. Hãy nhớ rằng, nếu bạn đang sử dụng trình soạn thảo WYSIWYG như Dreamweaver, bạn hiện đang làm việc trong chế độ xem "mã xem".
- Hãy bọc văn bản có màu mà chúng ta muốn thay đổi bằng thẻ, bao gồm thuộc tính lớp. Toàn bộ đoạn văn có thể trông như thế này: Đây là văn bản được tập trung vào trong một câu.
- Chúng ta vừa mới sử dụng một phần tử inline, để cung cấp cho văn bản cụ thể đó một "hook" mà chúng ta có thể sử dụng trong CSS. Bước tiếp theo của chúng tôi là chuyển đến tệp CSS bên ngoài của chúng tôi để thêm quy tắc mới.
- Trong tệp CSS của chúng ta, hãy thêm:
- .focus-text {
- màu: # F00;
- }
- Quy tắc này sẽ đặt thành phần nội tuyến đó, để hiển thị màu đỏ. Nếu chúng ta có một phong cách trước đó đặt văn bản của tài liệu của chúng tôi thành màu đen, kiểu nội tuyến này sẽ làm cho văn bản span được tập trung và nổi bật với màu khác. Chúng tôi cũng có thể thêm các kiểu khác vào quy tắc này, có lẽ làm cho văn bản in nghiêng hoặc in đậm để nhấn mạnh nó hơn nữa?
- Lưu trang của bạn.
- Kiểm tra trang trong trình duyệt web ưa thích của bạn để xem các thay đổi có hiệu lực.
- Lưu ý rằng ngoài việc, một số chuyên gia web chọn sử dụng các yếu tố khác như các cặp thẻ hoặc. Các thẻ này thường được sử dụng để "in đậm" và "in nghiêng", nhưng không được dùng nữa và được thay thế bằng và. Tuy nhiên, các thẻ vẫn hoạt động trong các trình duyệt hiện đại, vì vậy nhiều nhà phát triển web sử dụng chúng làm móc tạo kiểu nội tuyến. Đây không phải là cách tiếp cận tồi tệ nhất, nhưng nếu bạn muốn tránh bất kỳ yếu tố không được chấp nhận nào, tôi khuyên bạn nên gắn thẻ cho các loại nhu cầu tạo kiểu này.
Mẹo và những điều cần theo dõi
Mặc dù phương pháp này hoạt động tốt cho các nhu cầu tạo kiểu tóc nhỏ, như nếu bạn chỉ cần thay đổi một đoạn văn bản nhỏ trong tài liệu, nó có thể nhanh chóng vượt khỏi tầm kiểm soát. Nếu bạn thấy rằng trang của bạn được rải rác với các phần tử nội tuyến, tất cả đều có các lớp duy nhất mà bạn đang sử dụng trong tệp CSS của mình, bạn có thể làm sai, Hãy nhớ rằng, càng nhiều thẻ trong trang của bạn càng khó có khả năng duy trì trang đó trong tương lai. Ngoài ra, kiểu chữ web tốt hiếm khi có nhiều biến thể về màu sắc, v.v. trong toàn bộ trang!