Nội tuyến, CSS nội bộ bên ngoài

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?

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

• phong cách nội tuyến,
• kiểu nội bộ (còn được gọi là CSS nhúng) và
• bảng định kiểu bên ngoài

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

    

      freeCodeCamp is one of the best platforms to learn how to code
    
    

      Learning to code is free on freeCodeCamp, that's why they call it
      freeCodeCamp
    
    

      freeCodeCamp generates money through donations inorder to pay employees
      and maintain servers.
    
    

      If you're generous enough, consider joining others who have been
      donating to freeCodeCamp
    
    

      At freeCodeCamp, it's not all about typing on a code editor alone,
      there's a forum like StackOverflow, where you can ask questions about
      your coding problems and get answers from campers alike.
    

Kiểu nội tuyến trong HTML

Khi 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

   

     freeCodeCamp
     is one of the best platforms to learn how to code
   
   

     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   
   

     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
   
   

     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   
   

     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   
 

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

• Tốt cho sửa chữa nhanh chóng
• Có tính đặc hiệu cao nhất, do đó, nó sẽ ghi đè bất kỳ kiểu nào được đặt bằng kiểu nội tuyến hoặc biểu định kiểu bên ngoài
• Bạn không cần chuyển đổi giữa các tệp hoặc cuộn đến phần đầu để sửa đổi CSS
• Các trình duyệt luôn tải xuống các tệp HTML, CSS và JavaScript trước khi hiển thị trang web, do đó, với CSS nội tuyến, sẽ có ít tệp hơn được tải xuống

Nhược điểm của kiểu nội tuyến

• Làm cho HTML lộn xộn, khó bảo trì hơn và khó đọc hơn
• Không thể được sử dụng lại trên nhiều tệp HTML
• Cuối cùng, bạn có thể ghi đè các kiểu nội bộ hoặc biểu định kiểu bên ngoài
• Bạn có các tùy chọn kiểu dáng hạn chế

Kiểu nội bộ trong HTML

Khi 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

 
 

   

     freeCodeCamp
     is one of the best platforms to learn how to code
   
   

     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   
   

     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
  
   

     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   
   

     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   
 

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ộ

• Giảm số lượng tệp trình duyệt cần tải xuống
• Không chuyển đổi giữa các tệp để sửa đổi CSS
• Nhiều tùy chọn kiểu dáng hơn khi bạn có thể sử dụng bộ kết hợp, bộ chọn lớp và bộ chọn id

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 (p) xuất hiện sau một div

Các bộ chọn lớp được biểu thị bằng dấu chấm (.) và bộ chọn id được biểu thị bằng một #

Nhược điểm của phong cách nội bộ

• Chúng không thể được sử dụng lại trên nhiều tệp HTML. Để thêm cùng một kiểu vào một tệp HTML khác, bạn cần đưa nó vào đầu một lần nữa
• Nó làm tăng kích thước tệp HTML, điều này có thể dẫn đến tốc độ tải chậm hơn

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

   

     freeCodeCamp
     is one of the best platforms to learn how to code
   
   

     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   
   

     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
   
   

     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   
   

     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   
 

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

  
    
    
    
    
    
  
  
    

      

        freeCodeCamp
        is one of the best platforms to learn how to code
      
      

        Learning to code is free on freeCodeCamp, that's why they call it
        freeCodeCamp
      
      

        freeCodeCamp generates money through donations inorder to pay employees
        and maintain servers.
      
      

        If you're generous enough, consider joining others who have been
        donating to freeCodeCamp
      
      

        At freeCodeCamp, it's not all about typing on a code editor alone,
        there's a forum like StackOverflow, where you can ask questions about
        your coding problems and get answers from campers alike.
      
    
 

Bạn có thể thắc mắc tại sao đường dẫn đến tệp CSS chỉ là

   

     freeCodeCamp
     is one of the best platforms to learn how to code
   
   

     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   
   

     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
   
   

     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   
   

     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   
 

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ệp

Hã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

• Làm cho các kiểu có thể sử dụng lại trên nhiều tệp HTML
• Nó là dễ dàng hơn để duy trì
• Nó được trình duyệt lưu vào bộ đệm khi tải lần đầu, giúp hiển thị trang dễ dàng hơn và tốn ít thời gian hơn sau khi tải trang tiếp theo
• Nó có thể được lưu trữ trên CDN, vì vậy băng thông trở nên tối thiểu và có thể dễ dàng vận chuyển qua các khu vực khác nhau trên thế giới

Nhược điểm của Biểu định kiểu bên ngoài

• Nó làm tăng số lượng tệp mà trình duyệt cần tải xuống
• Trình duyệt phải thực hiện thêm các yêu cầu HTTP cho mỗi tệp

Phần kết luận

Tô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

---

Kolade Chris

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

CSS bên ngoài và bên trong nội tuyến là gì?