Cascading Style Sheets (CSS). CSS được định nghĩa là ngôn ngữ bảng phương pháp cung cấp cho các nhà thiết kế web quyền kiểm soát cách một trang web giao tiếp với các trình duyệt web, bao gồm cả việc định dạng và hiển thị các tài liệu HTML của họ

CSS hoặc bảng xếp tầng có thể là ngôn ngữ mã hóa dựa trên văn bản chỉ định định dạng trang web và cách trang web giao tiếp với trình duyệt web. Ngôn ngữ này cho phép các nhà phát triển web điều chỉnh các yếu tố phong cách và chức năng khác nhau, như bố cục, màu sắc, phông chữ và do đó định dạng và hiển thị các tài liệu HTML

Mục tiêu chính (với tư cách là ngôn ngữ trang phương pháp) là tách nội dung tài liệu khỏi cách trình bày tài liệu, kết hợp các yếu tố kiểu, như màu sắc, bố cục và phông chữ. CSS xử lý thiết kế và cảm thấy là một phần của trang internet. Sử dụng CSS, bạn sẽ kiểm soát màu sắc của văn bản, thiết kế 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.

CSS hướng dẫn hiển thị HTML về cách trang web sẽ hiển thị ở cuối người dùng. Chúng ta hãy xem qua những lợi ích và hạn chế của CSS

Trong bài viết này, bạn sẽ tìm hiểu về Các loại CSS (Cascading style sheet) với các ví dụ đơn giản và sự khác biệt chi tiết giữa các loại CSS này

Hãy bắt đầu nó

Mục lục

• Các loại css khác nhau là gì?
• 3 loại CSS với các ví dụ
  • CSS nội tuyến
    • Thuận lợi
    • Nhược điểm
  • CSS nội bộ
    • Thuận lợi
    • Nhược điểm
  • CSS bên ngoài
    • Thuận lợi
    • Nhược điểm
• Sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài
• Phần kết luận
• Câu hỏi thường gặp
  • 3 loại CSS là gì?

Các loại css khác nhau là gì?

Có ba loại CSS

3 loại CSS với các ví dụ

CSS nội tuyến

CSS nội tuyến thường chỉ được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Chúng ta có thể viết CSS nội tuyến đơn giản bằng cách thêm thuộc tính style vào mỗi phần tử HTML

Ví dụ

  
 This is a heading 
  
 This is some pragraph 

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ý một trang web có thể khó khăn nếu chúng ta chỉ sử dụng CSS nội tuyến

Thuận lợi

• Bạn có thể dễ dàng và nhanh chóng viết CSS nội tuyến vào trang HTML.  
• Nó 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 tạo hoặc liên kết một tài liệu riêng theo yêu cầu trong CSS bên ngoài

Nhược điểm

• Nói chung, CSS nội tuyến cần viết riêng từng thẻ HTML. Vì vậy, việc quản lý một trang web có thể khó khăn nếu chúng ta chỉ sử dụng CSS nội tuyến
• Việc thêm thuộc tính CSS vào mọi thẻ HTML rất tốn thời gian
• 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

Ví dụ

  
    
Simple Box Design 
    
 
  

CSS nội bộ

CSS nội bộ còn được gọi là CSS nhúng. Nó thường được sử dụng để tạo kiểu cho một trang. Chúng tôi có thể viết CSS nội bộ bên trong thẻ

This is a heading

  
     	
  
  
    
Simple example of internal CSS
    

    

  

  
    
Simple Box Design 
    
 
  

  
    
Simple Box Design 
    
 
  

/* Using tag name as a selector here */
h1{
   background-color:orange;
}

/* Using class as a selector here */
.box{
   height:200px;
   width:300px;
   background-color:yellow;
}

/* Using ID as a selector here */
#circle{
   height:200px;
   width:200px;
   background-color:red;
   border-radius:50%;
}

  
    
Simple Box Design 
    
 
  

  
     
  
  
    
Simple example of external CSS