Làm Thế Nào để Thay đổi Màu Sắc Của Một Từ Với Thẻ Span Và CSS

• Web & Tìm kiếm
  • Tốt nhất của Web
  • Công cụ tìm kiếm
  • Chạy một trang web
  • An toàn & Bảo mật
• Email & Nhắn tin
  • Mẹo & thủ thuật
  • Mẹo và thủ thuật Outlook
  • VoIP
  • Mẹo và thủ thuật Gmail
  • Mẹo và thủ thuật của Yahoo
  • Hướng dẫn & Hướng dẫn
  • Ý chính
• Phần mềm
  • Thiết kế đồ họa
  • Bảng tính
  • Xuất bản máy tính để bàn
  • Các tài liệu
  • Bản trình bày
  • Cơ sở dữ liệu
  • Hoạt ảnh & video
• Các cửa sổ
  • Loại tập tin
  • Khái niệm máy tính
  • Thông báo lỗi
  • Trình điều khiển & phần cứng
  • Khái niệm cơ bản
  • Hướng dẫn & Hướng dẫn
  • Cài đặt & nâng cấp
• Trò chơi
  • PC
  • PlayStation
  • Xbox
  • Nintendo
  • Điện thoại di động
  • Minecraft
  • Trò chơi cổ điển
• Phần mềm & ứng dụng
  • Sao lưu & Tiện ích
  • Video & âm thanh
  • Chỉ iOS
  • Chỉ dành cho máy Mac
  • Email & Nhắn tin
  • Trình duyệt & Internet
  • Chỉ Android
• Hướng dẫn mua hàng
  • TV & Rạp hát tại nhà
  • Phụ kiện & thiết bị ngoại vi
  • Dụng cụ
  • Âm thanh
  • Trò chơi & bảng điều khiển
  • Máy ảnh
  • Máy tính để bàn

Thiết kế web & Dev CSS Share on FacebookShare on Twitter

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

1. 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.
2. 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.
3. Đặ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".
4. 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.
5. 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.

1. Trong tệp CSS của chúng ta, hãy thêm:
   1. .focus-text {
   2. màu: # F00;
   3. }
2. 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?
3. Lưu trang của bạn.
4. 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.
5. 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!

Alike posts

Cách tạo bố cục 3 cột trong CSS

Thiết kế web & Dev

Sự khác biệt giữa "display: none" và "visibility: hidden" trong CSS

Thiết kế web & Dev

Nhóm nhiều bộ chọn CSS

Thiết kế web & Dev

Giới thiệu về CSS3

Thiết kế web & Dev

Làm thế nào để bạn viết truy vấn phương tiện truyền thông CSS?

Thiết kế web & Dev

Làm thế nào để căn chỉnh và Float Elements trên một trang Web

Thiết kế web & Dev

CSS Outline Styles

Thiết kế web & Dev

CSS3 Linear Gradients

Thiết kế web & Dev

Tìm hiểu cách thêm hiệu ứng ánh sáng nhanh chóng và dễ dàng với CSS3

Thiết kế web & Dev

See Newest

Mạng thần kinh: Chúng là gì và chúng ảnh hưởng đến cuộc sống của bạn như thế nào

Mới & Tiếp theo

Đường kết cấu và đường trung tâm là gì?

Phần mềm

Hiểu biết về Ins và Outs của VoIP Phone Number Portability

Email & Nhắn tin

9 cách để kéo dài tuổi thọ pin cho Android của bạn

Android

Cách phân tích nhật ký HijackThis

Web & Tìm kiếm

Cách sử dụng hàm DGET trong Excel

Phần mềm

Sapid posts

Microsoft đưa ứng dụng email Outlook vào Apple Watch

Phần mềm & ứng dụng

Làm thế nào để Render Glass trong Maya và Mental Ray

Mới & Tiếp theo

Sirefef Malware là gì?

Antivirus

Ứng dụng của thực tế Augmented

Mới & Tiếp theo

Loa Subwoofer hỗ trợ DSP-3400 DSP-3400 - Đánh giá sản phẩm

Đánh giá sản phẩm

Cyberpower PC Zeus Mini

Đánh giá sản phẩm

Microsoft Office 2019 là gì?

Phần mềm & ứng dụng

Cách di chuyển công việc giữa các danh sách trong các tác vụ Gmail

Email & Nhắn tin

Quên mật khẩu ID Apple của bạn? Làm thế nào để đặt lại nó trong một vài bước dễ dàng

IPhone và iPod

Chữ sáng tạo: Thay đổi màu văn bản trong Paint Shop Pro

Phần mềm

Máy chiếu KTS e-Shift 4K thế hệ thứ hai của JVC tại CEDIA 2015

Đánh giá sản phẩm

Mẫu ngày và bản in của bố mẹ tốt nhất của Microsoft

Phần mềm

Toshiba SBX4250 Sound Bar Hệ thống loa Hình ảnh

Đánh giá sản phẩm

Làm thế nào để tìm một máy ảnh HD?

Hướng dẫn mua hàng

Tìm âm thanh bóng chày trên đài phát thanh, ứng dụng và podcast

Web & Tìm kiếm

Commander One: Tom's Mac Software Pick

Phần mềm & ứng dụng