Kiến thức Web

Sử dụng CSS để đổi màu, thay font chữ cho website

Hello bạn. Bạn có cho mình một bộ giao diện web ưng ý, nhưng vẫn chưa hài lòng với nó, vì đâu đó vẫn còn những chỗ bạn muốn đổi màu nền, thay font chữ cho đẹp. Hãy làm theo Alo Mmo để tùy biến giao diện theo ý của bạn nhé.

Bước 1: Dùng Chrome truy cập trang web để xem code CSS Styles.

Đầu tiên bạn hãy truy cập vào trang web của bạn trên trình duyệt Chrome=> Click chuột phải vào trang chọn dòng cuối cùng là “kiểm tra”.

Ví dụ như ở đây Alo Mmo sẽ đổi màu nền cho phần header của trang mmoalo.com từ màu xanh sang màu đỏ. Hehe!

Tiếp theo bạn chọn cho mình nút chức năng như mũi tên số 1 chỉ vào trên hình minh họa hoặc nhấn tổ hợp phím Ctrl+Shift+C. Sau đó bạn rê con chuột đến vị trí cần thay đổi màu nền để xem code. Ở ví dụ này Alo Mmo sẽ rê chuột đến vị trí mũi tên số 2 trong hình minh họa.

Khi đó khung code bên phải phần “Styes” bạn sẽ thấy code tương ứng với vị trí số 2 này là “.top-header {background: #007A87}”

Ở đây Alo Mmo chỉ quan tâm đến màu nền nên chỉ lấy thuộc tính màu nền “background” cho phần “.top-header”

sử dụng css

Bước 2: Tùy chỉnh CSS trong giao diện của trang web

Cách 1: Bạn hãy đăng nhập vào quản trị trang web. Trong phần trùy chỉnh của Giao diện hãy chọn “Chỉnh sửa CSS”. Lúc này bạn dán mã CSS ở trên vào: .top-header {background: #ff5a5f} (Alo Mmo đã thay mã màu đỏ #ff5a5f trong đoạn CSS này).

sử dụng css

Cách 2: Bạn hãy đăng nhập vào quản trị trang web. Hãy chọn chỉnh sửa giao diện => chỉnh sửa Style.css => nhấn tổ hợp phím Ctrl+F để tìm “.top-header” thay đổi lại mã màu cho thuộc tính “background”

sử dụng css

Cách 3: Có một cách khác là bạn hãy vào trình quản lý tập tin của trang web trong cPanel. Tìm mở file Style.css => tiếp theo hãy nhấn tổ hợp phím Ctrl+F để tìm “.top-header” để tìm đoạn CSS liên quan => sau đó bạn thay đổi lại mã màu cho thuộc tính “background” nhé

sử dụng css

Tương tự bạn có thể thay đổi màu hoặc các thuộc tính khác cho các thành phần của trang web như độ rộng của khung, màu chữ viết, font chữ viết …

sử dụng css

Kết luận:

Với cách xem code CSS trên Chrome này bạn có thể áp dụng vào chỉnh sửa rât nhiều các thành phần trong giao diện và trang web mà mặc định giao diện trang web của bạn không hỗ trợ. Hãy liên hệ ngay với Alo Mmo nếu quá trình bạn làm có gặp khó khăn gì nhé! Cảm ơn bạn đã quan tâm bào viết nếu thấy hay thì hãy like và chia sẻ bài viết nhé.

Lân Phùng, Admin của Blog Alo Mmo. Chuyên môn: Kế toán công. Sở thích, sở trường: Công nghệ thông tin, tự học thiết kế web, tự học Wordpress và code đơn giản, tự học affiliate...

Bình luận

%d bloggers like this: