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:
CatPhotoApp
> 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:
CatPhotoApp
.. 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ẻ của bạn, tạo khối style như sau:
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:
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ở
.
- 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:
Bạn có thể thấy rằng chúng ta đã tạo một CSS class có tên là blue0 trong cặp thẻ blue1
Bạn có thể áp dụng một class cho một phần tử HTML như thế này:
CatPhotoApp
> Lưu ý: Trong CSS style của bạn, gọi tên class bắt đầu bằng dấu chấm blue2 . 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 blue4 và cập nhật giá trị của màu từ xanh dương [blue] sang đỏ [blue6]
Trong phần tử h2 của bạn, hãy thêm class với tên là: blue7
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 blue7 của bạn cho phần tử blue9 đầu tiên.
Bài tập 4
Trong phần tử blue9 đầu tiên, hãy thêm cho nó một class có tên là blue7. 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: //facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python
Bước 2: Tại đây, nếu quý khách muốn đối màu chữ trên menu, thì quý khách click chọn màu trong ô Màu Liên Kết.
Còn để chuyển màu chữ khác khi đưa chuột vào thì quý khách chọn màu trong ô Link Color Active.
B. Tùy Chỉnh Màu Nền Cho Menu
Đầu tiên vào Cấu hình giao diện nâng cao > Tùy chỉnh CSS/JS.
Sau đó quý khách dán đoạn code dưới đây vào trong khung Tuỳ chỉnh CSS toàn cục.
#tbay-header .header-mainmenu {background: #ffffff;
}
Vị trí dán code thì quý khách có thể dán ở bất kỳ đâu trong khung Tùy chỉnh Css toàn cục miễn là không trọn lẫn với mấy đoạn Code Css khác.
Như vậy là cũng coi như gần xong rồi đó, bây giờ quý khách chỉ cần lựa màu và thay thế nó chỗ mã màu trên dòng background: Mã màu;.