Thay đổi màu của văn bản

Ngày đăng: 22/10/2018   -    Cập nhật: 07/12/2020

Sử dụng kiểu CSS Inline Style


Bây giờ hãy thay đổi màu sắc của một số văn bản của chúng ta. Chúng ta có thể làm điều này bằng cách thay đổi style của phần tử h2. Thuộc tính chịu trách nhiệm về màu của văn bản của phần tử là thuộc tính color.


Đây là cách bạn sẽ đặt màu văn bản của phần tử h2 thành màu blue:




<h2 style="color: blue;">CatPhotoApp</h2>
 

> Lưu ý: Để css trên hiển thị đúng thì bạn phải chắc chắn kết thúc khai báo bằng một dấu chấm phẩy ;

Bài tập 1


Thay đổi kiểu phần tử h2 của bạn để màu văn bản có màu đỏ (red).

            
        

Sử dụng CSS Selector để áp dụng CSS cho các phần tử HTML


Với CSS, có hàng trăm thuộc tính (properties) CSS mà bạn có thể sử dụng để thay đổi cách hiển thị của một phần tử trên trang của bạn.


Khi bạn nhập:




<h2 style="color: red"> CatPhotoApp </h2>
 

.. bạn đã tạo style riêng cho phần tử h2 bằng CSS nội tuyến (Internal CSS).


Đó là một cách để xác định kiểu cho một phần tử, nhưng có một cách tốt hơn để áp dụng CSS.
Ở trong thẻ <head></head> của bạn, tạo khối style như sau:




<style>
    /* Cocde CSS  */
</style>
 

Bên trong khối style đó, bạn có thể tạo CSS Selector cho tất cả các phần tử h2.

Ví dụ: Nếu bạn muốn tất cả các phần tử h2 có màu đỏ (red), bạn sẽ thêm quy tắc style như sau:




<style>
    h2 {
        colorred;
    }
</style>
 

Lưu ý:

  • Điều quan trọng là phải mở cả hai dấu ngoặc nhọn {} xung quanh (các) quy tắc style của mỗi phần tử.
  • Bạn cũng cần đảm bảo rằng định nghĩa style phần tử của bạn nằm giữa các thẻ mở <style> và thẻ đóng </style>.
  • Cuối cùng, hãy chắc chắn thêm dấu chấm phẩy ; vào cuối mỗi quy tắc style phần tử của bạn.

Bài tập 2


Xóa thuộc tính style của phần tử h2 của bạn và thay vào đó tạo khối style CSS. Thêm CSS cần thiết để biến màu của tất cả các phần tử h2 thành màu xanh dương (blue).

Sử dụng Lớp CSS để tạo kiểu cho phần tử HTML


Lớp CSS hay còn được gọi là CSS Class


Các Class có thể tái sử dụng có thể được thêm vào các phần tử HTML. Dưới đây là khai báo CSS cho một class mẫu:




<style>
    .blue-text {
        colorblue;
    }
</style>
 


Bạn có thể thấy rằng chúng ta đã tạo một CSS class có tên là blue-text trong cặp thẻ <style> </style>


Bạn có thể áp dụng một class cho một phần tử HTML như thế này:




<h2 class="blue-text">CatPhotoApp</h2>
 

> Lưu ý: Trong CSS style của bạn, gọi tên class bắt đầu bằng dấu chấm . . Dĩ nhiên là khi đặt tên class cho các phần tử HTML của bạn, tên class không bao gồm dấu chấm.

Bài tập 3


Bên trong style của bạn, thay đổi bộ chọn (selector) h2 thành .red-text và cập nhật giá trị của màu từ xanh dương (blue) sang đỏ (red)

Trong phần tử h2 của bạn, hãy thêm class với tên là: red-text


Style cho nhiều phần tử cùng class


Class có thể tái sử dụng vì thế nó cho phép bạn sử dụng cùng một CSS style trên nhiều phần tử HTML.

Bạn có thể thấy điều này bằng cách áp dụng class red-text của bạn cho phần tử p đầu tiên.


Bài tập 4


Trong phần tử p đầu tiên, hãy thêm cho nó một class có tên là red-text. Xem màu sắc thay đổi thế nào trong màn hình hiển thị.
 

Tổng kết

Như vậy là qua bài này bạn đã biết cách thay đổi màu của văn bản trong CSS. Hãy ghi nhớ để sử dụng trong các bài học tiếp theo bạn nhé.

---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
 
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python
Bình luận Facebook
Đăng ký tư vấn
Nhân viên gọi điện tư vấn miễn phí sau khi đăng ký
Được cập nhật các ưu đãi sớm nhất
Hotline: 0383180086
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Hãy đăng ký để nhận những thông tin mới nhất về học bổng mới nhất tại NIIT - ICT Hà Nội
top
Đóng lại Đăng ký học tại NIIT - ICT Hà Nội
6260+ học viên đã theo học tại NIIT - ICT Hà Nội và có việc làm tốt trong ngành lập trình. Nắm lấy cơ hội ngay hôm nay!
Chọn khóa học
  • KHÓA HỌC LẬP TRÌNH FRONT END VỚI REACT.JS
  • KHÓA HỌC LẬP TRÌNH PHP WEB
  • Khóa học PHP Full stack [2023] cho người mới bắt đầu
  • Khóa học BIG DATA với Hadoop và Spark
  • Khóa học Lập trình Android tại Hà Nội
  • [Tuyển sinh 2023] Lập trình viên Quốc tế DigiNxt
  • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại Hà Nội
  • LẬP TRÌNH GAME
    • Khóa học Lập trình Game Unity
  • LẬP TRÌNH WEB FRONT END
    • KHÓA HỌC PYTHON HƯỚNG ĐỐI TƯỢNG
    • KHÓA HỌC ANGULAR & TYPESCRIPT (FRONT END)
  • LẬP TRÌNH WEB BACK END
    • LẬP TRÌNH JAVA WEB VỚI FRAME WORK
    • Lập trình Web với Django
    • Lập trình PHP với Laravel Framework
  • CHƯƠNG TRÌNH ĐÀO TẠO ỨNG DỤNG CÔNG NGHỆ
    • Khóa học Tiền lương & Phúc lợi (C&B Excel) tại TP HCM
  • LẬP TRÌNH WEB FULL STACK
    • Khóa học Java Full stack (IJFD)
  • LẬP TRÌNH MOBILE
    • FRONT-END VỚI REACTJS VÀ REACT NATIVE
    • Lập trình Android Nâng cao
  • ĐÀO TẠO CHO DOANH NGHIỆP
    • KHÓA HỌC BUSINESS ANALYSIC TỪ CƠ BẢN ĐẾN NÂNG CAO 2023
    • Khóa học Magento: Làm chủ CMS TMĐT lớn nhất
    • Khóa học IOT: Xây dựng Sản phẩm IOT với Raspberry Pi
    • Khóa học Automation Testing Chuyên nghiệp
  • KHÓA HỌC DỰ ÁN
    • Học sử dụng bộ Office: Word, Excel, Power Point, Mail chuyên nghiệp
  • KHÓA HỌC KHÁC
    • VBA Excel Toàn Tập (Cơ Bản - Nâng Cao)
    • VBA Excel Nâng cao
    • Khóa học JMeter: Performance Testing
    • Khóa học Tester đạt chuẩn Quốc tế ISTQB Foundation Level
    • Khoá Học Tester đạt chuẩn quốc tế ISTQB Advanced Level
Bạn chưa chọn khóa học cần đăng ký
Tên không được để trống
Số điện thoại không được để trống
Email không được để trống
Đăng ký học thành công!
Cảm ơn bạn đã đăng ký học tại NIIT - ICT HÀ NỘI!