Biểu định kiểu nhúng sẽ ghi đè kiểu dáng nội tuyến
Khi bạn tìm hiểu về phát triển web, chắc hẳn bạn sẽ nghe khá nhanh về HTML và CSS. Chà, những công cụ này là gì và bạn sử dụng chúng như thế nào? Show
Bạn có thể coi HTML như cấu trúc và khung của một ngôi nhà. Và khi bạn muốn làm cho cấu trúc đó trông đẹp mắt, bạn thêm sơn, đồ trang trí và các tính năng khác. Trang trí này là CSS Bạn định kiểu mã HTML như thế nào?HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Nó là một tài liệu dựa trên văn bản được thiết kế để hiển thị trong trình duyệt. Để làm cho văn bản đó và các thành phần nhúng khác có trong HTML trông đẹp mắt, bạn cần thêm CSS hoặc Cascading Style Sheets Có 3 cách khác nhau để bạn có thể tạo kiểu cho HTML của mình
Trong hướng dẫn này, chúng ta sẽ khám phá ba phương pháp tạo kiểu này càng sâu càng tốt. Chúng tôi cũng sẽ xem xét ưu và nhược điểm của chúng để bạn có thể bắt đầu sử dụng chúng trong các dự án mã hóa của mình và chọn cái nào phù hợp nhất với bạn Mẫu HTMLĐể làm cho mọi thứ dễ dàng hơn trong hướng dẫn này, tôi đã chuẩn bị một mẫu HTML đơn giản mà chúng ta sẽ tạo kiểu
Kiểu nội tuyến trong HTMLKhi bạn sử dụng các kiểu nội tuyến, bạn thêm chúng trực tiếp vào các thẻ HTML bằng thuộc tính kiểu Ví dụ: trong mã HTML của chúng tôi, chúng tôi có thể chỉ định màu cho bất kỳ đoạn nào bằng cách viết CSS ngay bên trong thẻ mở Việc xóa gạch dưới và màu mặc định được gán cho các liên kết cũng là điều bình thường, vì vậy chúng tôi cũng có thể làm điều đó bên trong thẻ mở đầu
Bạn có thể thấy rằng đoạn đầu tiên bây giờ ít đọc hơn? Trang web của chúng tôi bây giờ trông giống như ảnh chụp màn hình bên dưới Ưu điểm của kiểu nội tuyến
Nhược điểm của kiểu nội tuyến
Kiểu nội bộ trong HTMLKhi bạn sử dụng kiểu nội bộ, bạn nhúng các kiểu ngay bên trong tệp HTML trong thẻ kiểu. Bạn thường đặt chúng vào đầu, nhưng nó hoạt động ở mọi nơi, ngay cả bên ngoài các thẻ HTML mở và đóng (nhưng đừng làm vậy vì đó là một cách làm không tốt) Chúng tôi có thể áp dụng một số kiểu nội bộ cho mã HTML của mình như thế này
Bạn có thể thấy rằng chúng tôi hiện có nhiều tùy chọn kiểu dáng hơn khi chúng tôi sử dụng các kiểu nội bộ Ưu điểm của phong cách nội bộ
Nếu bạn đang thắc mắc tổ hợp là gì, thì chúng là những biểu tượng được sử dụng để kết nối các bộ chọn khác nhau. Một ví dụ là khoảng trắng () để chọn hậu duệ tiếp theo của một phần tử, chẳng hạn như bất kỳ đoạn văn nào ( Bộ chọn lớp được biểu thị bằng dấu chấm ( 0) và bộ chọn id được biểu thị bằng 1Nhược điểm của phong cách nội bộ
Trang web của chúng tôi bây giờ trông như thế này Biểu định kiểu bên ngoài trong HTMLĐây được coi là cách tốt nhất để định kiểu mã HTML của bạn. Các biểu định kiểu bên ngoài hoàn toàn tách biệt với HTML và bạn đặt chúng trong một tệp CSS (với phần mở rộng 0)Để sử dụng các biểu định kiểu bên ngoài trong HTML của bạn, bạn liên kết chúng trong phần đầu bằng thẻ liên kết Cú pháp cơ bản của thẻ liên kết trông như thế này
Để tạo kiểu cho mã HTML của chúng tôi, chúng tôi cần tạo một tệp CSS và liên kết nó. Khi được liên kết, tệp HTML đầy đủ của chúng tôi bây giờ trông như thế này
Bạn có thể thắc mắc tại sao đường dẫn đến tệp CSS chỉ là 1, đây cũng là tên tệp. Điều này là do các tệp HTML và CSS nằm trong cùng một thư mục. Nếu bạn có biểu định kiểu trong một thư mục khác, bạn phải bao gồm tên thư mục trước tên tệpHãy áp dụng một số kiểu dáng cho HTML của chúng ta trong biểu định kiểu dáng bên ngoài của chúng ta Ưu điểm của Biểu định kiểu bên ngoài
Nhược điểm của Biểu định kiểu bên ngoài
Sự kết luậnTôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu những cách khác nhau mà bạn có thể tạo kiểu cho HTML của mình Và bây giờ bạn cũng biết những ưu và nhược điểm của từng phương pháp, vì vậy bạn có thể chọn phương pháp phù hợp nhất với mình Cảm ơn đã đọc và tiếp tục mã hóa QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Kiểu dáng nội tuyến có ghi đè CSS không?Nó hoạt động theo kiểu phản trực giác, vì vậy tôi chỉ giải thích thêm. kiểu nội tuyến ghi đè CSS nội bộ và CSS nội bộ ghi đè tệp CSS bên ngoài và tệp CSS bên ngoài ghi đè giá trị mặc định của trình duyệt. Một cách để nghĩ về nó giống như các lớp. Phong cách càng “gần” với phần tử thì nó càng có mức độ ưu tiên cao hơn.
Kiểu bên ngoài có ghi đè kiểu nhúng không?Kiểu nhúng ghi đè kiểu bên ngoài .
CSS nội tuyến có ghi đè nội bộ không?Vì vậy, kiểu nội tuyến có mức độ ưu tiên cao nhất và sẽ ghi đè kiểu bên ngoài và bên trong cũng như giá trị mặc định của trình duyệt .
Biểu định kiểu bên ngoài có ghi đè tất cả các kiểu nội tuyến không?Các biểu định kiểu bên ngoài luôn được áp dụng sau (và do đó ghi đè) Kiểu nội tuyến . Giả sử các quy ước tốt được tuân thủ, biểu định kiểu nhúng của trang web sẽ được áp dụng sau biểu định kiểu bên ngoài của trang web. |