Có mấy cách thêm css vào html
CSS là một ngôn ngữ dùng để trình bày hình thức thể hiện của các phần tử HTML. Như định dạng các phần tử văn bản (cơ chữ, font chữ, màu sắc ...), bố cục, dàn trang ... (CSS không phải là ngôn ngữ lập trình). Show CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu:
Ví dụ, trong một văn bản HTML phần tử
Cuối cùng, tổng hợp lại phần tử đó có màu anh, chữ in đậm, nền màu xám. Như vậy, 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. 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 hay một khu vực riêng. Nhúng CSS vào HTMLĐể minh họa, tại đây có một đoạn mã CSS, nội dung đoạn mã này như sau (tạm thời bạn chưa cần hiểu về cú pháp): color:white; background-color:red; Mã này sẽ định dạng chữ là màu trắng, nền màu đỏ. Để áp dụng mã CSS tác dụng vào các phần HTML có ba cách nhúng CSS vào HTML là 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 - dùng thuộc tính styleCách này là
đặt mã ) trong HTML sau đây: Kết quả: 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ách khởi văn bản HTML, viế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: Sau khi tích hợp thì sẽ có các lớp CSS sử dụng ngay như display-1, text-success ... Như vậy bài viết đã giới thiệu cho bạn khái niệm cơ bạn về CSS, 3 nơi bạn có thể viết code CSS để áp dụng vào trang HTML. Cách viết code ở file .css bạn nên áp dụng, bài viết tiếp theo bắt đầu tìm hiểu về cú pháp CSS và sử dụng các thuộc tính CSS. |