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
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
- Nhấp chuột phải vào văn bản Inspect me! bên dưới và chọn Inspect. Bảng điều khiển Element của Devtools sẽ mở ra. Phần tử Inspect me! đã được tô màu đánh dấu trong cây thư mục.
Inspect me!
- Chuyển sang Styles trên bảng điều khiển Elements sẽ liệt kê các quy tắc CSS đang được áp dụng cho bất kỳ phần tử nào hiện được chọn trong cây thư mục. Hình bên dưới mô tả kiểm tra phần tử 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ử
- Nhấp chuột phải vào văn bản Add A Background Color To Me! bên dưới và chọn Inspect.
Add A Background Color To Me!
- Nhấp chuột vào element.style ở gần vị trí đầu tiên của thẻ Styles
- Nhập vào background-color và nhấn Enter.
- Nhập vào yellow và nhấn Enter. Trong cây thư mục bạn có thể nhìn thấy một khai báo đã trực tiếp áp dụng cho phần tử.
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ử.
- Nhấp chuột phải vào phần tử Add A Class To Me! bên dưới và chọn Inspect.
Add A Class To Me!
- Nhấp vào .cls. DevTools sẽ lộ ra một hộp văn bản nơi bạn có thể thêm các lớp vào phần tử đã chọn.
- Nhập vào color_me vào trong hộp văn bản Add new class và nhấn Enter. Một hộp kiểm tra xuất hiện bên dưới hộp văn bản Add new class, ở đó bạn có thể bật hoặc tắt lớp. Từ khi có phần tử Add A Class To Me! đã có các lớp khác được áp dụng cho nó, bạn cũng có thể bật hoặc tắt chúng tại đây!
Thêm vào, sau đó bật hoặc tắt class
Thêm vào pseudostate cho một class
Sử 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
- Nhấp chuột phải vào văn bản Hover Over Me! bên dưới và chọn Inspect.
Hover Over Me!
- Trong thẻ Styles, nhấn vào :hov.
- Đây là nơi bạn áp dụng một CSS pseudostate vĩnh viễn cho phần tử với mục đích kiểm tra:
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.
- Nhấp chuột phải vào phần tử Change My Padding! bên dưới và chọn Inspect.
Change My Padding!
- Tại Sơ đồ Box Model trong thẻ Styles di chuột qua phần padding. Phần tử padding sẽ được đánh dấu trong khung nhìn.
- Nhấp chuột phải vào phần trên của padding trong Box model, giá trị hiện tại là 0 [-].
- Nhập 100 và nhấn Enter. Box model mặc định giá trị là pixels, nhưng nó cũng chấp nhận giá trị khác như 25%, hoặc 10vw.
Thay đổi padding bằng cách tương tác với sơ đồ Box model.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS
- Sử dụng CSS
Kết nối file CSS vào file HTML
Trướ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:
Html
- index.html
css
- style.css
Click vào dấu [+] để xem cấu trúc.
Nội fung file index.html
Tiêu
đề trang web
...Phần thân viết ở đây...
Nội fung file style.css
Nế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 HTML
Chú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.
Tiêu đề trang web
...Phần thân viết ở đây...
Thuộc tính href ta phân tích như sau:
- style.css là một file có tên là style với định dạng file là .css
- css là folder chứa file style.css
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 CSS
Viế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 CSS
Giả sử ta có file HTML như sau:
Tiêu
đề trang web
- Mục 01
- Mục 02
- Mục 03
- Mục 04
Đoạn văn
Nội dung navi
Bộ chọn theo tên id
tag#tênid { thuộc tính: giá trị; }
- Bắt buộc phải có ký tự dấu "#" và tênid
div#content { width: 600px; }Bộ chọn theo tên class
tag.tênclass { thuộc tính: giá trị; }
- Bắt buộc phải có ký tự dấu "." và tênclass
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ị; }
- Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
- Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần
nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:
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 CSS
Comment 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 */