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 {
color: red;
}
</style>
Lưu ý:
-
Điều quan trọng là phải mở cả hai dấu ngoặc nhọn
{
và }
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 {
color: blue;
}
</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