Hướng dẫn xem thêm css
Tìm hiểu cách thực hiện các thay đổi trực tiếp trên trang web với công cụ DevTools Show
Trong bài viết này, chúng ta sẽ tìm hiểu cách thực hiện các thay đổi trực tiếp trên trang web bằng cách sử dụng cộng cụ Chrome DevTools. Hãy đảm bảo bạn đang dùng trình duyệt Google Chrome. Xem một phần tử CSS
Inspect me!
Thẻ Styles: Danh sách của Styles đang được áp dụng cho phần tử được chọn Thêm khai báo CSS vào một phần tửChuyển sang sử dụng thẻ Styles khi bạn muốn thay đổi hoặc thêm các khai báo CSS vào một phần tử
Add A Background Color To Me!
Nền màu vàng đã được áp dụng cho phần tử được chọn! Thêm một Class CSS vào phần tửSử dụng thẻ Styles để thêm class CSS hoặc xóa khỏi một phần tử.
Add A Class To Me!
Thêm vào, sau đó bật hoặc tắt class Thêm vào pseudostate cho một classSử dụng thẻ Styles để áp dụng CSS pseudostate vĩnh viễn cho một phần tử. DevTools hỗ trợ :active, :focus, :hover, and :visited
Hover Over Me!
Trạng thái phần tử có hiệu lực Thay đổi kích thước của một phần tửSử dụng sơ đồ tương tác Box model trong thẻ Styles để thay đổi width, height, padding, margin hoặc độ rộng border của một phần tử. Lưu ý: Tùy thuộc vào kích thước cửa sổ DevTools của bạn, bạn có thể cần cuộn xuống cuối thẻ Styles để xem Box Model.
Change My Padding!
Thay đổi padding bằng cách tương tác với sơ đồ Box model.
Kết nối file CSS vào file HTMLTrước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:
Click vào dấu [+] để xem cấu trúc. Nội fung file index.html
...Phần thân viết ở đây... Nội fung file style.cssNếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng: Kết nối file CSS vào file HTMLChúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.
...Phần thân viết ở đây... Thuộc tính href ta phân tích như sau:
Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css. Cách viết một nội dung CSSViết nội dung CSS theo cấu trúc như sau: Bộ chọn { thuộc tính: giá trị; } Chúng ta có thể viết nhiều cặp thuộc tính và giá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy. p { color: red; float: left; padding-left: 10px; } Đoạn code trên tương tự như đoạn code sau: p { color: red; float: left; padding-left: 10px; } Cách viết bộ chọn CSSGiả sử ta có file HTML như sau:
Đoạn văn
Nội dung navi Bộ chọn theo tên idtag#tênid { thuộc tính: giá trị; }
div#content { width: 600px; } Bộ chọn theo tên classtag.tênclass { thuộc tính: giá trị; }
div.navi { background: #333333; } Bộ chọn theo cấp bậc[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }
div#content p { color: #333333; } /* Chon thanh phan p theo content*/ div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/ div#content ul li { display: inline; } /* Chon thanh phan li theo content*/ Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo. Cách viết một comment trong file CSSComment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau: /* Đây là dòng comment */ |