Loại tệp cho css là gì?

Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với bốn biểu định kiểu khác nhau. Nhấp vào liên kết "Biểu định kiểu 1", "Biểu định kiểu 2", "Biểu định kiểu 3", "Biểu định kiểu 4" bên dưới để xem các kiểu khác nhau

---

---

Tại sao nên sử dụng CSS?

CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau

Ví dụ CSS

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

h1 {
  màu. màu trắng;
  căn chỉnh văn bản. trung tâm;
}

p {
  họ phông chữ. verdana;
  cỡ chữ. 20px;
}

Tự mình thử »

---

CSS đã giải quyết một vấn đề lớn

HTML KHÔNG BAO GIỜ có ý định chứa các thẻ để định dạng trang web

HTML được tạo ra để mô tả nội dung của một trang web, như

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

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

Khi các thẻ như và các thuộc tính màu được thêm vào HTML 3. 2, nó bắt đầu cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi phông chữ và thông tin màu sắc được thêm vào từng trang, trở thành một quá trình lâu dài và tốn kém

Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo CSS

CSS đã xóa định dạng kiểu khỏi trang HTML

Nếu bạn không biết HTML là gì, chúng tôi khuyên bạn nên đọc Hướng dẫn HTML của chúng tôi

---

CSS tiết kiệm rất nhiều công việc

Các định nghĩa kiểu dáng thường được lưu ở bên ngoài. tập tin css

Với tệp 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

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). margin-left: 20 px;
Đúng (nospace). margin-left: 20px;

---

---

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?

CSS có phải là tệp HTML không?

Chương trình nào sẽ mở tệp CSS?