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
- CSS nội tuyến
- 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ụ
Ví dụ thực hànhSimple 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ẻ trong các trang HTML
Ví dụ
h1{ background-color : yellow; color : red; }This is a heading
Loại CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang. Tuy nhiên, sử dụng kiểu này cho nhiều trang sẽ tốn thời gian vì bạn cần đặt kiểu CSS trên mọi trang trên trang web của mình
Thuận lợi
- Bạn có thể sử dụng bộ chọn ID và lớp để viết CSS nội bộ
- Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên bạn không cần phải tạo hoặc tải lên nhiều tệp
Nhược điểm
- Vì bạn sẽ chỉ thêm mã trong cùng một tệp HTML nên việc tạo kiểu cho nhiều trang sẽ trở nên tốn thời gian
- Việc thêm mã vào tài liệu HTML có thể tăng kích thước và thời gian tải của trang
Ví dụ
/* 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%; }Ví dụ thực hànhSimple example of internal CSS
CSS bên ngoài
Với CSS 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. Chúng ta có thể viết CSS bên ngoài trong một. tập tin css. Mỗi trang HTML phải bao gồm tham chiếu đến tệp CSS bên ngoài bên trong thẻ
0, bên trong thẻSimple Box Design
0Simple Box Design
Ví dụ
tạo phong cách của tôi. css bằng bất kỳ trình soạn thảo văn bản nào [ví dụ:. - Sổ tay ++]
/* 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%; }
Bây giờ bao gồm phong cách của tôi. css tệp bên ngoài trong trang HTML của bạn bằng cách sử dụng thẻ
0Simple Box Design
Trang HTML hoàn chỉnh sẽ trông giống như
Simple example of external CSS
Thuận lợi
- Vì mã CSS nằm trong một tệp riêng biệt nên các tệp HTML của bạn sẽ có cấu trúc rõ ràng hơn và kích thước nhỏ hơn
- Bạn có thể sử dụng cùng một. css cho nhiều trang khi bạn muốn mỗi trang có giao diện giống nhau
Nhược điểm
- Các trang của bạn có thể không được hiển thị chính xác cho đến khi CSS bên ngoài được tải
- Tải lên nhiều tệp CSS bên ngoài có thể làm tăng thời gian tải xuống của trang web
Sự khác biệt giữa CSS nội tuyến, nội bộ và bên ngoài
Bảng dưới đây cho bạn thấy sự khác biệt giữa CSS nhúng nội tuyến và CSS bên ngoài. CSS nội bộ còn được gọi là CSS nhúng
Inline CSSInternal CSSExternal CSSInline CSS được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. CSS nội bộ được sử dụng để tạo kiểu cho một trang HTML cụ thể. CSS bên ngoài dùng để thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp. Bạn có thể viết CSS nội tuyến bằng thuộc tính style. Bạn có thể viết Internal CSS bằng thẻví dụ. - id, lớp, tên thẻ, v.v. Nó cũng cho phép bạn sử dụng bộ chọn. Phải mất thời gian để sử dụng vì mỗi yếu tố cần thêm. Cũng tốn thời gian nhưng so với Inline CSS thì ít hơn. Nó tiết kiệm thời gian vì bạn có thể sử dụng cùng một tệp trên nhiều trang cho cùng một giao diện
Phần kết luận
Trong bài viết này, bạn đã học được 3 loại CSS [nghĩa là. CSS nội tuyến, CSS nội bộ và CSS bên ngoài] và sự khác biệt giữa CSS nội tuyến và CSS bên ngoài