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

Hãy cùng xem sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài, sau đó chúng ta sẽ đi sâu vào cách sử dụng từng loại

Kiểu nội tuyến liên quan đến một thẻ HTML cụ thể, sử dụng thuộc tính kiểu với quy tắc CSS để . Chúng hữu ích cho những thay đổi nhanh chóng và lâu dài nhưng kém linh hoạt hơn so với biểu định kiểu bên ngoài và bên trong, vì mỗi kiểu nội tuyến bạn tạo phải được chỉnh sửa riêng nếu bạn đang thực hiện thay đổi thiết kế.

Một biểu định kiểu nội bộ chứa các quy tắc CSS cho trang trong đầu section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged page elements.

Một biểu định kiểu bên ngoài là một biểu định kiểu độc lập. css tệp được liên kết từ một trang web. 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.

Sử dụng kiểu nội tuyến

Kiểu nội tuyến được áp dụng trực tiếp cho một phần tử trong mã HTML của bạn. Họ sử dụng thuộc tính kiểu, theo sau là thuộc tính CSS thông thường

Ví dụ

Today’s Update

Sử dụng biểu định kiểu CSS nội bộ

Thay vì liên kết bên ngoài. css , các tệp HTML có biểu định kiểu bên trong bao gồm một bộ quy tắc trong head section. CSS rules are wrapped in

Sử dụng biểu định kiểu CSS bên ngoài

Một trang HTML được tạo kiểu bởi biểu định kiểu CSS bên ngoài phải tham chiếu đến. css trong phần đầu của tài liệu. Khi bạn tạo tệp CSS, tệp đó phải được tải lên máy chủ của bạn và được liên kết trong tệp HTML bằng mã chẳng hạn.

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 giữa các loại CSS này một cách chi tiết

Hãy bắt đầu nó

Mục lục

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

Thí 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 
    
 
  

/* 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%;
}