Hướng dẫn cách chạy file css
Show 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 */ CSS là một ngôn ngữ chuyên dùng để trình bày hình thức thể hiện của văn bản HTML cho người dùng, như văn bản đó được định dạng ra sao (cơ chữ, font chữ, màu sắc ...), bố cục, dàn trang thế nào ... CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu: Cascading là cách làm việc của CSS, các CSS tác dụng vào phần tử HTML có thể bị đè (định nghĩa lại) bởi CSS khác hoặc kết hợp cùng với CSS khác. Còn Style Sheets điều khiển cách hiện thị nội dung trang web. Ví dụ, CSS định nghĩa màu chữ đỏ cho phần tử CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang. Để học về CSS trước tiên phải hiểu cơ bản về HTML, rồi mới có thể thực hành css trong html. Tại sao cần dùng CSS?CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp nên. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS. Nhúng CSS vào HTMLĐể áp dụng CSS tác dụng vào các phần HTML có ba cách nhúng CSS: Inline, Internal và External
Kiểu inline và Internal thì chèn css vào html trực tiếp trong văn bản HTML. Nhúng CSS dạng inline - thuộc tính styleCách này là đặt mã Ví dụ đoạn mã CSS sau đặt màu chữ phần tử là trắng, màu nền phần tử là đỏ color:white; background-color:red; Giờ gán đoạn CSS đó cho một phần tử (ví dụ ≶p>) trong HTML, ở dạng inline thì thực hiện như sau: Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange ... Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻCách này bạn sẽ dùng thẻ , tạo ra khu vực để viết CSS,
bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt trong thẻ . Như ví dụ sau, trong khối Nhúng CSS dạng External, thẻ nạp file CSS vào HTMLCách link css vào html này các mã CSS bạn viết tập trung vào các file độc lập với file HTML (thường đặt phần mở rộng là
Trong file p { color:white; background-color:red; } Kết quả sẽ tương tự như ví dụ trên, chỉ có điều mã CSS đã đặt ra một file độc lập. Thuộc tính Ví dụ nữa, thử tích hợp các CSS định nghĩa bởi Framework Bootstrap, ở đường dẫn: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css Sau khi tích hợp thì sẽ có các lớp CSS sử dụng ngay như display-1, text-success ... |