Các Loại CSS - Go Coding

Trang chủ » Các Loại Css » Các Loại CSS - Go Coding

Có thể bạn quan tâm

Mục lục

  • Các loại CSS
  • CSS bên ngoài
    • Ví dụ
    • Mã CSS
    • Các điểm quan trọng liên quan đến khai báo CSS
  • CSS nội bộ
    • cú pháp
    • Ví dụ
    • Đầu ra
  • CSS nội tuyến
    • Ví dụ
    • Đầu ra
  • Ưu tiên CSS
  • Tác giả

Các loại CSS

CSS có thể được thêm vào trang web của chúng tôi theo ba cách sau:

  • CSS bên ngoài (Trong một tệp riêng biệt)
  • CSS nội bộ (Ở đầu tài liệu trang web)
  • CSS nội tuyến (Ngay bên cạnh văn bản mà nó trang trí)

CSS bên ngoài

Như đã thảo luận ở trên, chúng ta đã tạo một tệp có tên “style.css” trong thư mục “styles”. Tuy nhiên, tệp HTML của chúng tôi, tức là index.html không biết vị trí của nó. Do đó, chúng ta cần thêm mã đã cho trong phần tiêu đề [giữa và ] của tệp HTML của chúng tôi:

Ví dụ

Ví dụ về CSS bên ngoài

Hiện tại, chúng tôi vừa thêm vị trí của tệp CSS nhưng không có mã nào vào tệp CSS của chúng tôi. Do đó, đầu ra trông giống như sau:

Đầu ra CSS bên ngoài

Bây giờ chúng tôi sẽ thêm mã vào tệp CSS của chúng tôi. Chúng tôi sẽ làm cho Tiêu đề đầu màu đỏ, Tiêu đề phụ màu xanh lam và đoạn văn có màu xanh lục như được đề cập bên dưới:

Tệp CSS bên ngoài

Bây giờ, đầu ra trông giống như sau:

Đầu ra cuối cùng CSS bên ngoài

Mã CSS

Từ ví dụ trên, chúng ta có thể suy ra rằng một mã CSS bao gồm:

Mã CSS bên ngoài

  1. Bộ chọn: Bộ chọn giúp chúng tôi biết chính xác phần tử nào chúng tôi muốn thêm một kiểu nhất định. Trong sơ đồ trên, chúng tôi đang áp dụng màu xanh lá cây cho tất cả các thẻ. Loại bộ chọn này được gọi là bộ chọn Phần tử [còn được gọi là bộ chọn thẻ hoặc loại]. Nếu bạn cần tạo kiểu cho một phần tử khác, hãy nói , chỉ cần thay đổi tên bộ chọn trong CSS. Có nhiều loại bộ chọn. Sau đây là ba bộ chọn được sử dụng nhiều nhất:
Tên bộ chọn Mô tả Ví dụ
1. Bộ chọn phần tử Trong danh mục này, chúng tôi xác định một kiểu chung cho một thẻ html riêng lẻ và nó phản ánh cùng một kiểu cho thẻ đó, cho dù nó được sử dụng ở đâu. p {

  màu xanh lá cây;

}

Điều này sẽ phản ánh màu xanh lá cây cho tất cả các thẻ p.
2. Bộ chọn ID Trong danh mục này, chúng tôi cung cấp ID cho bất kỳ thẻ html nào và đối với ID đó, chúng tôi xác định một kiểu. Không thể gán cùng một ID cho nhiều thẻ HTML; do đó nó chủ yếu được sử dụng trong trường hợp cần có kiểu duy nhất cho một phần tử HTML cụ thể.

Trong CSS, chúng tôi xác định nó bằng cách sử dụng ký hiệu băm (#).

 CSS: # my-id1 {  màu xanh lá cây;

} HTML:

Điều này sẽ phản ánh màu xanh lục cho bất kỳ thẻ html nào có ID bằng “my-id1”.
3. Bộ chọn lớp Trong danh mục này, chúng tôi xác định một lớp cho bất kỳ thẻ html nào và cho lớp đó, chúng tôi xác định một kiểu. Nó là bộ chọn CSS được sử dụng nhiều nhất vì cùng một lớp có thể được gán cho nhiều thẻ html, do đó, một kiểu CSS có thể được sử dụng lại.

Trong CSS, chúng tôi xác định nó bằng cách sử dụng một dấu chấm (.).

 CSS: .lớp học của tôi {  màu xanh lá cây;

} HTML:

Điều này sẽ phản ánh màu xanh lục cho bất kỳ thẻ html nào có lớp bằng “my-class1”.

 

 

 

  1. Tờ khai: Khai báo là một cặp giá trị trường, trong đó trường là một trong những thuộc tính phần tử mà bạn muốn thay đổi và giá trị là thay đổi bắt buộc. Ví dụ màu đỏ;
  2. Bất động sản: Như đã thảo luận ở trên, thuộc tính là thuộc tính của một phần tử có thể được sửa đổi. Các thuộc tính có thể có cho thẻ đoạn, tức là có thể là màu sắc, căn chỉnh, phông chữ, v.v.
  3. Giá trị tài sản: Đây là giá trị có thể có cho một thuộc tính và thay đổi tương ứng. Đối với màu sắc, nó có thể là bất kỳ màu nào trong Hệ thập lục phân hoặc tên màu.

Các điểm quan trọng liên quan đến khai báo CSS

  • Toàn bộ cấu trúc của CSS được gọi là quy tắc hoặc bộ quy tắc. Mỗi bộ quy tắc phải được khai báo trong dấu ngoặc nhọn ({}).
  • Mỗi Tuyên bố phải ở dạng trường: giá trị or Tài sản: Giá trị tài sản ghép đôi tức là nó phải có dấu hai chấm (:) giữa trường và giá trị.
  • Trong mỗi bộ quy tắc, chúng ta có thể có nhiều khai báo. Mỗi khai báo phải được kết thúc hoặc tách biệt với nhau bằng dấu chấm phẩy (;).

CSS nội bộ

Trong các ví dụ trên, chúng tôi đã sử dụng tệp CSS bên ngoài để đặt mã tạo kiểu của mình, nhưng bạn cũng có thể thêm tất cả các mã này hoàn toàn bằng mã HTML. Để làm được điều đó, bạn cần thêm CSS dưới trong phần tiêu đề [giữa và ] của HTML. Điều này có thể được hiểu rõ hơn từ ví dụ đã cho:

cú pháp

Cú pháp CSS nội bộ

Ví dụ

Chúng tôi sẽ lấy ví dụ cũ của chúng tôi về Sachin Tendulkar. Chúng tôi sẽ xóa liên kết giữa CSS bên ngoài và thêm CSS tương tự vào trong mã HTML của chúng tôi:

Ví dụ về CSS nội bộ

Đầu ra

Ở đây, chúng tôi vừa thêm một khai báo CSS bổ sung cho đánh dấu và tô đậm. Do đó, đầu ra trông giống như sau:

Đầu ra CSS nội bộ

CSS nội tuyến

Giả sử, bạn đã áp dụng CSS cho tất cả và cần phải thêm kiểu duy nhất cho một trong các thì bạn sẽ phải sử dụng CSS nội tuyến. CSS nội tuyến được sử dụng để thêm kiểu duy nhất vào một phần tử. Để sử dụng kiểu nội tuyến, chúng tôi thêm "style" làm thuộc tính của phần tử đó.

cú pháp

”>

Ví dụ

Ví dụ về CSS nội tuyến

Trong ví dụ trước, chúng tôi sẽ chỉ thêm một kiểu nội tuyến với CSS nội bộ.

Đầu ra

Do đó, kết quả đầu ra sẽ như hình dưới đây:

Đầu ra CSS nội tuyến

Ưu tiên CSS

Từ ví dụ trên, chúng ta cũng có thể kết luận rằng CSS nội tuyến có thể ghi đè lên một loại CSS khác. Do đó, mức độ ưu tiên của CSS sẽ được theo sau bởi trang web sẽ như sau:

  1. Kiểu nội tuyến (Mức độ ưu tiên cao nhất)
  2. Kiểu bên ngoài và bên trong (chúng có mức độ ưu tiên gần như giống nhau)
  3. Mặc định của trình duyệt (Ngay cả trình duyệt cũng áp dụng CSS cho các phần tử của chúng tôi)

 

Tác giả

  • Rudramani Pandey

    Nhà phát triển Full Stack với hơn 10 năm kinh nghiệm trong các lĩnh vực khác nhau bao gồm SAP, Blockchain, AI và Phát triển Web.

    Xem tất cả các bài viết

Bài viết liên quan:

  • CSS là gì
  • Bài tập thực hành CSS
  • Giáo trình CSS
  • Cấu trúc trang web
  • Bộ chọn CSS
  • Gỡ lỗi CSS

Từ khóa » Các Loại Css