Biểu định kiểu bên ngoài là một tệp riêng biệt được liên kết với trang web HTML. Nó đi kèm với một. phần mở rộng tên tệp css. Tất cả các kiểu cần sử dụng trên trang web đều có thể được khai báo trong biểu định kiểu bên ngoài. Biểu định kiểu bên ngoài là một công cụ quan trọng theo quan điểm của quản trị viên web

Quảng cáo

Techopedia giải thích biểu định kiểu bên ngoài

By applying consistent formatting to website pages, external style sheets help in bringing a uniform, global look and feel to a website. The external style sheet can be linked from HTML pages. When using an external style sheet, styles need to be set up only once for each element. The external style sheet contains only CSS syntax and also carries a “text/CSS” MIME type. One of the unique features associated with external style sheets is that they can be created in any text editor, but need to be saved with a .css extension. The file should never have any elements of HTML. There are two main techniques of calling an external style sheet into an HTML document. One method is by using the tag within the HTML document head. Another method is with the help of a combination of external CSS functions along with embedded CSS.

Có những lợi ích liên quan đến biểu định kiểu bên ngoài. Biểu định kiểu bên ngoài có thể được áp dụng cho số lượng trang web không giới hạn. Một biểu định kiểu bên ngoài có thể được áp dụng ngay lập tức để áp dụng giao diện cho từng trang web. Họ cũng có thể giúp mang lại định dạng thống nhất cho mọi trang mà họ đính kèm.

CSS xử lý phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, kích thước và bố cục của các cột, v.v.

Sau đây là những ưu điểm của CSS −

• CSS tiết kiệm thời gian – Bạn có thể viết CSS một lần và sau đó sử dụng lại cùng một trang tính trong nhiều trang HTML. Bạn có thể xác định kiểu cho từng thành phần HTML và áp dụng kiểu đó cho bao nhiêu trang Web tùy thích

• Dễ dàng bảo trì – Để thực hiện thay đổi toàn cầu, chỉ cần thay đổi kiểu và tất cả các thành phần trong tất cả các trang web sẽ được cập nhật tự động

• Các tiêu chuẩn web toàn cầu - Hiện tại các thuộc tính HTML không được dùng nữa và nên sử dụng CSS. Vì vậy, bạn nên bắt đầu sử dụng CSS trong tất cả các trang HTML để làm cho chúng tương thích với các trình duyệt trong tương lai

• Nền tảng độc lập - Tập lệnh cung cấp nền tảng độc lập nhất quán và cũng có thể hỗ trợ các trình duyệt mới nhất

  Sự khác biệt chính giữa CSS nội tuyến và CSS bên ngoài là CSS nội tuyến được xử lý nhanh hơn vì nó chỉ yêu cầu trình duyệt tải xuống 1 tệp trong khi sử dụng CSS bên ngoài sẽ yêu cầu tải xuống các tệp HTML và CSS riêng biệt

  Trong hướng dẫn này, chúng ta sẽ đi sâu so sánh ba loại kiểu CSS. nội tuyến, bên ngoài và nội bộ. Chúng tôi cũng sẽ khám phá những ưu điểm và nhược điểm của việc sử dụng từng phương pháp

  Tải xuống Bảng cheat CSS hoàn chỉnh
  • CSS chính xác là gì?
  • Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong
    • CSS nội bộ
    • CSS bên ngoài
    • CSS nội tuyến

  CSS chính xác là gì?

  Cascading Style Sheets [CSS] là ngôn ngữ đánh dấu chịu trách nhiệm về giao diện trang web của bạn. Nó kiểm soát màu sắc, phông chữ và bố cục của các thành phần trang web của bạn

  Ngôn ngữ biểu định kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt ảnh vào trang web của mình. Bạn có thể sử dụng nó để hiển thị một số hoạt ảnh CSS như hiệu ứng nút bấm, trình quay hoặc trình tải và hình nền động

  Nếu không có CSS, trang web của bạn sẽ xuất hiện dưới dạng trang HTML đơn giản. Đây là cách Twitter sẽ trông như thế nào nếu chúng ta tắt CSS của nó

  Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong

  Có ba cách bạn có thể sử dụng để triển khai CSS vào HTML của mình. phong cách bên trong, bên ngoài và nội tuyến. Hãy phá vỡ chúng

  CSS nội bộ

  Internal or embedded CSS requires you to add tag in the section of your HTML document.

  Kiểu CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang. Tuy nhiên, sử dụng kiểu này cho nhiều trang sẽ tốn thời gian vì bạn cần đặt các quy tắc CSS trên mọi trang trên trang web của mình

  Đây là cách bạn có thể sử dụng CSS nội bộ

  1. Open your HTML page and locate opening tag.
  2. Put the following code right after the tag
  1. Thêm quy tắc CSS trên một dòng mới. Đây là một ví dụ

  body {
      background-color: blue;
  }
  h1 {
      color: red;
      padding: 60px;
  }
  

  1. Nhập thẻ đóng

  Tệp HTML của bạn sẽ trông như thế này

  
  
  
  body {
      background-color: blue;
  }
  h1 {
      color: red;
      padding: 60px;
  } 
  
  
  
  
  Hostinger Tutorials
  This is our paragraph.
  
  
  
  

  Ưu điểm của CSS nội bộ

  • Bạn có thể sử dụng bộ chọn lớp và ID trong biểu định kiểu này. Đây là một ví dụ

  .class {
      property1 : value1; 
      property2 : value2; 
      property3 : value3; 
  }
  
  #id {
      property1 : value1; 
      property2 : value2; 
      property3 : value3; 
  }
  

  • Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên bạn không cần tải nhiều tệp lên

  Nhược điểm của CSS nội bộ

  • Việc thêm mã vào tài liệu HTML có thể tăng kích thước và thời gian tải của trang

  CSS bên ngoài

  Với CSS bên ngoài, bạn sẽ liên kết các trang web của mình với một bên ngoài. css, tệp này có thể được tạo bởi bất kỳ trình soạn thảo văn bản nào trong thiết bị của bạn [e. g. , Sổ tay ++]

  Loại CSS này là một phương pháp hiệu quả hơn, đặc biệt là để tạo kiểu cho một trang web lớn. Bằng cách chỉnh sửa một. css, bạn có thể thay đổi toàn bộ trang web của mình cùng một lúc

  Làm theo các bước sau để sử dụng CSS bên ngoài

  1. Tạo một cái mới. css bằng trình soạn thảo văn bản và thêm quy tắc kiểu. Ví dụ

  .xleftcol {
     float: left;
     width: 33%;
     background:#809900;
  }
  .xmiddlecol {
     float: left;
     width: 34%;
     background:#eff2df;
  }
  

  1. In the section of your HTML sheet, add a reference to your external .css file right after tag:

  Đừng quên thay đổi phong cách. css với tên của bạn. tệp css

  Ưu điểm của CSS bên ngoài

  • Vì mã CSS nằm trong một tài liệu riêng nên tệp HTML của bạn sẽ có cấu trúc rõ ràng hơn và kích thước nhỏ hơn
  • Bạn có thể sử dụng cùng một. tệp css cho nhiều trang

  Nhược điểm của CSS bên ngoài

  • Các trang của bạn có thể không được hiển thị chính xác cho đến khi CSS bên ngoài được tải
  • Tải lên hoặc liên kết đến nhiều tệp CSS có thể làm tăng thời gian tải xuống trang web của bạn

  CSS nội tuyến

  CSS nội tuyến được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Đối với kiểu CSS này, bạn chỉ cần thêm thuộc tính kiểu vào từng thẻ HTML mà không cần sử dụng bộ chọn

  Loại CSS này không thực sự được khuyến nghị vì mỗi thẻ HTML cần được tạo kiểu riêng. Việc quản lý trang web của bạn có thể trở nên quá khó khăn nếu bạn chỉ sử dụng CSS nội tuyến

  Tuy nhiên, CSS nội tuyến trong HTML có thể hữu ích trong một số trường hợp. Ví dụ: trong trường hợp bạn không có quyền truy cập vào tệp CSS hoặc chỉ cần áp dụng kiểu cho một phần tử

  Let’s take a look at an example. Here, we add an inline CSS to the

  and

  tag:

  
  
  
  Hostinger Tutorials
  Something usefull here.
  
  
  
  

  Ưu điểm của CSS nội tuyến

  • Bạn có thể dễ dàng và nhanh chóng chèn các quy tắc CSS vào trang HTML. Đó là lý do tại sao phương pháp này hữu ích để thử nghiệm hoặc xem trước các thay đổi và thực hiện các bản sửa lỗi nhanh cho trang web của bạn
  • Bạn không cần phải tạo và tải lên một tài liệu riêng như ở kiểu bên ngoài

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

  • Việc thêm các quy tắc CSS vào mọi phần tử HTML rất tốn thời gian và làm cho cấu trúc HTML của bạn trở nên lộn xộn
  • Việc tạo kiểu cho nhiều thành phần có thể ảnh hưởng đến kích thước trang và thời gian tải xuống của bạn

  Sự kết luận

  Trong hướng dẫn này, bạn đã học được sự khác biệt giữa ba loại CSS. nội bộ, bên ngoài và nội tuyến. Đây là bản tóm tắt

  • Internal or embedded ⁠— add tag in the section of HTML document
  • Bên ngoài ⁠— liên kết trang tính HTML với một trang tính riêng biệt. tập tin css
  • Nội tuyến ⁠— áp dụng các quy tắc CSS cho các phần tử cụ thể

  Vì vậy, bạn sẽ sử dụng kiểu CSS nào?

  Tác giả

  Domantas G

  Domantas dẫn dắt các nhóm nội dung và SEO về phía trước với những ý tưởng mới và phương pháp tiếp cận vượt trội. Được trang bị kiến ​​thức sâu rộng về SEO và tiếp thị, anh đặt mục tiêu quảng bá Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi xa lạ

  Ưu điểm của bảng định kiểu bên ngoài Mcq là gì?

  Ưu điểm của Biểu định kiểu bên ngoài là. .

  Sử dụng chúng, kiểu của nhiều tài liệu có thể được kiểm soát từ một tệp

  Các lớp có thể được tạo để sử dụng trên nhiều loại phần tử HTML trong nhiều tài liệu

  Trong các tình huống phức tạp, các phương pháp chọn và nhóm có thể được sử dụng để áp dụng các kiểu

  Ưu điểm mạnh nhất của một biểu định kiểu bên ngoài là gì?

  Ưu điểm chính của việc sử dụng biểu định kiểu bên ngoài là bạn có thể áp dụng kiểu cho nhiều trang web . Ví dụ: nếu bạn tạo một trang web và bạn muốn tất cả các trang trông giống nhau, bạn có thể tạo một biểu định kiểu bên ngoài mô tả các kiểu cho các thẻ khác nhau được sử dụng trong các trang.

  Lợi thế của việc sử dụng CSS bên ngoài so với biểu định kiểu bên trong là gì?

  tệp css được liên kết từ một trang web. Khi sử dụng biểu định kiểu bên ngoài, bạn có thể áp dụng quy tắc cho nhiều trang web . Nếu bạn cần thực hiện các thay đổi lớn đối với thiết kế trang web của mình, một thay đổi duy nhất trong biểu định kiểu có thể được áp dụng cho tất cả các trang được liên kết, tiết kiệm rất nhiều thời gian và công sức.

  Lợi thế của việc sử dụng CSS là gì?

  Cascading sheet không chỉ đơn giản hóa việc phát triển trang web mà còn đơn giản hóa việc bảo trì vì một thay đổi của một dòng mã sẽ ảnh hưởng đến toàn bộ trang web và . Nó ít phức tạp hơn do đó nỗ lực giảm đáng kể. Nó giúp hình thành những thay đổi tự phát và nhất quán.