Thêm css vào đầu javascript

Tuy nhiên, khi trang web của bạn trở nên siêu tuyệt vời, nó cũng có thể trở nên cực kỳ lộn xộn. Ví dụ: với biểu định kiểu, bạn sẽ có một biểu định kiểu khổng lồ, lộn xộn hoặc [tốt nhất là] bạn sẽ có một số [hãy hy vọng] các biểu định kiểu được tổ chức độc đáo. Nhược điểm của điều đó là phần đánh dấu HTML của bạn sẽ trở nên lộn xộn. Đó là chưa kể mọi yêu cầu đối với một tệp, chẳng hạn như biểu định kiểu, đều tốn thời gian và tài nguyên, đồng thời sẽ làm chậm trang web của bạn

Tốt nhất, bạn nên biên dịch các tệp này thành một tệp kê khai duy nhất. Có rất nhiều công cụ để giúp bạn với điều này. Compass và Gulp là một vài ví dụ

Và nếu bạn đang sử dụng ngôn ngữ phía máy chủ để xây dựng trang web của mình [chẳng hạn như Ruby hoặc PHP], bạn thậm chí còn có nhiều công cụ hơn cho mình

Làm điều đó ở phía máy khách [JavaScript]

Nếu bạn không thể biến kịch bản lý tưởng thành hiện thực, một tùy chọn phù hợp là thêm các tập lệnh và kiểu này thông qua một tập lệnh duy nhất

Để làm như vậy, hãy thêm nội dung như thế này vào tài liệu của bạn [hy vọng bạn có một trang chính hoặc tệp tiêu đề duy nhất, vì vậy bạn chỉ phải thực hiện việc này một lần]

Bạn sẽ muốn thêm phần này vào cuối phần của mình, để nó là tập lệnh cuối cùng được tải

Ghi chú. Có một cơ hội nhỏ để đưa ra lỗi khi sử dụng phương pháp này. Vì các tập lệnh của bạn đang được tải trong đầu thay vì ở phần cuối của phần nội dung, nên trang của bạn có thể không tải nếu có lỗi JavaScript. Ngoài ra, hãy lưu ý rằng các tệp JavaScript khác có thể được tải sau phần này nếu chúng được tải động hoặc được tải ở cuối phần nội dung

Bây giờ, trong tệp controller.js của bạn, hãy thêm chức năng này

controller.js

function loadFile[path, type] {
  if [type == "js"] {
    var fileref = document.createElement["script"];
    fileref.setAttribute["type", "text/javascript"];
    fileref.setAttribute["src", path];
  } else if [type == "css"] {
    var fileref = document.createElement["link"];
    fileref.setAttribute["rel", "stylesheet"];
    fileref.setAttribute["type", "text/css"];
    fileref.setAttribute["href", path];
  }
  document.getElementsByTagName["head"][0].appendChild[fileref];
}

Bên dưới chức năng đó [trong bộ điều khiển. js], bạn có thể gọi tất cả các tệp JS và CSS của mình, như vậy

controller.js

Bây giờ các tệp của bạn sẽ tải không có vấn đề gì

Sử dụng jQuery

Một phương pháp sạch hơn một chút là viết cùng một hàm bằng jQuery. Để làm như vậy, tài liệu của bạn sẽ cần đánh dấu này

Lưu ý ở đây chúng tôi đang tải thư viện jQuery trước, vì vậy chúng tôi có thể sử dụng nó trong controller.js. Tôi đang tải thư viện này từ Thư viện của Google, nhưng bạn chắc chắn có thể thêm nó theo bất kỳ cách nào bạn muốn

Bây giờ, trong tệp controller.js

controller.js

function loadFile[path, type] {
  if [type == "js"] {
    $["head"].append[
      ''
    ];
  } else if [type == "css"] {
    $["head"].append[
      ''
    ];
  }
}

Và bạn sẽ thêm các tệp của mình theo cách tương tự như trước đây

controller.js

Như bạn có thể thấy, cách này gọn gàng hơn nhiều, nhưng trừ khi bạn định sử dụng thư viện jQuery xuyên suốt mã JS của mình, thì không đáng để tải toàn bộ thư viện cho một hàm này

tải thứ tự

Không phải lúc nào bạn cũng có thể chắc chắn trình duyệt của mình sẽ xử lý thứ tự tải của tập lệnh như thế nào. Nếu tập lệnh của bạn có các phần phụ thuộc đan xen, thì bạn có thể cân nhắc sử dụng công cụ như RequireJS để đảm bảo tập lệnh của bạn được tải theo thứ tự phù hợp

Khi trình duyệt đọc một biểu định kiểu, nó sẽ định dạng tài liệu HTML theo thông tin trong biểu định kiểu

Ba cách để chèn CSS

Có ba cách để chèn một biểu định kiểu

• CSS bên ngoài
• CSS nội bộ
• CSS nội tuyến

CSS bên ngoài

Với biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp

Mỗi trang HTML phải bao gồm một tham chiếu đến tệp biểu định kiểu bên ngoài bên trong phần tử, bên trong phần đầu

Ví dụ

Các kiểu bên ngoài được xác định trong phần tử, bên trong phần của trang HTML

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

Một biểu định kiểu bên ngoài có thể được viết trong bất kỳ trình soạn thảo văn bản nào và phải được lưu bằng một. phần mở rộng css

Ngoại thương. tệp css không được chứa bất kỳ thẻ HTML nào

Đây là cách "mystyle. tệp css" trông

"phong cách của tôi. css"

body {
  màu nền. xanh nhạt;
}

h1 {
  màu. hải quân;
  lề-trái. 20px;
}

Ghi chú. Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị.
Sai [dấu cách].

function loadFile[path, type] {
  if [type == "js"] {
    var fileref = document.createElement["script"];
    fileref.setAttribute["type", "text/javascript"];
    fileref.setAttribute["src", path];
  } else if [type == "css"] {
    var fileref = document.createElement["link"];
    fileref.setAttribute["rel", "stylesheet"];
    fileref.setAttribute["type", "text/css"];
    fileref.setAttribute["href", path];
  }
  document.getElementsByTagName["head"][0].appendChild[fileref];
}

1
Đúng [nospace].

function loadFile[path, type] {
  if [type == "js"] {
    var fileref = document.createElement["script"];
    fileref.setAttribute["type", "text/javascript"];
    fileref.setAttribute["src", path];
  } else if [type == "css"] {
    var fileref = document.createElement["link"];
    fileref.setAttribute["rel", "stylesheet"];
    fileref.setAttribute["type", "text/css"];
    fileref.setAttribute["href", path];
  }
  document.getElementsByTagName["head"][0].appendChild[fileref];
}

2

CSS nội bộ

Một biểu định kiểu nội bộ có thể được sử dụng nếu một trang HTML có một kiểu duy nhất

Kiểu bên trong được xác định bên trong

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

CSS nội tuyến

Một kiểu nội tuyến có thể được sử dụng để áp dụng một kiểu duy nhất cho một phần tử

Để sử dụng kiểu nội tuyến, hãy thêm thuộc tính kiểu vào phần tử có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào

Ví dụ

Kiểu nội tuyến được xác định trong thuộc tính "kiểu" của phần tử có liên quan

Đây là một tiêu đề

Đây là một đoạn

Tự mình thử »

Mẹo. Kiểu nội tuyến làm mất đi nhiều ưu điểm của biểu định kiểu [bằng cách trộn nội dung với bản trình bày]. Sử dụng phương pháp này một cách tiết kiệm

Nhiều Style Sheets

Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn [phần tử] trong các biểu định kiểu khác nhau, thì giá trị từ biểu định kiểu được đọc cuối cùng sẽ được sử dụng.  

Giả sử rằng một biểu định kiểu bên ngoài có kiểu sau cho

thành phần

Sau đó, giả sử rằng một biểu định kiểu bên trong cũng có kiểu sau cho

thành phần

Ví dụ

Nếu kiểu nội bộ được xác định sau liên kết đến biểu định kiểu bên ngoài,

các phần tử sẽ là "màu cam"

Tự mình thử »

Ví dụ

Tuy nhiên, nếu kiểu nội bộ được xác định trước liên kết đến biểu định kiểu bên ngoài,

các yếu tố sẽ là "hải quân".  

Tự mình thử »

thứ tự xếp tầng

Kiểu nào sẽ được sử dụng khi có nhiều hơn một kiểu được chỉ định cho một phần tử HTML?

Tất cả các kiểu trong một trang sẽ "xếp tầng" thành một biểu định kiểu "ảo" mới theo các quy tắc sau, trong đó số một có mức độ ưu tiên cao nhất

1. Kiểu nội tuyến [bên trong phần tử HTML]
2. Biểu định kiểu bên ngoài và bên trong [trong phần đầu]
3. trình duyệt mặc định

Vì vậy, một kiểu nội tuyến có mức độ ưu tiên cao nhất và sẽ ghi đè các kiểu bên ngoài và bên trong cũng như mặc định của trình duyệt

Tự mình thử »

Bạn đã bao giờ nghe nói về Không gian W3Schools chưa?

Làm cách nào để thêm CSS qua JavaScript?

Bạn có thể đặt CSS vào phần đầu của HTML không?

Làm cách nào để thêm động tệp CSS trong JavaScript?

CSS có đi vào đầu không?