CSS (Bảng kiểu xếp tầng) mô tả các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương tiện khác. Nó tiết kiệm rất nhiều thời gian. Nó kiểm soát bố cục của nhiều trang web cùng một lúc. Nó đặt kích thước phông chữ, gia đình phông chữ, màu, màu nền trên trang. describes the HTML elements which are displayed on screen, paper, or in other media. It saves a lot of time. It controls the layout of multiple web pages at one time. It sets the font-size, font-family, color, background color on the page. Show
Nó cho phép chúng tôi thêm hiệu ứng hoặc hình ảnh động vào trang web. Chúng tôi sử dụng CSS để hiển thị các hình ảnh động như nút, hiệu ứng, bộ tải hoặc người quay và cả hình nền hoạt hình.effects or animations to the website. We use CSS to display animations like buttons, effects, loaders or spinners, and also animated backgrounds. Nếu không sử dụng CSS, trang web sẽ không hấp dẫn. Có 3 loại CSS dưới đây:CSS, the website will not look attractive. There are 3 types of CSS which are below:
1. CSS nội bộCSS nội bộ có thẻ trong phần của tài liệu HTML. Phong cách CSS này là một cách hiệu quả để tạo kiểu một trang. Sử dụng kiểu CSS cho nhiều trang web là tốn thời gian vì chúng tôi yêu cầu đặt kiểu trên mỗi trang web. tag in the section of the HTML document. This CSS style is an effective way to style single pages. Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page. Chúng ta có thể sử dụng CSS nội bộ bằng cách sử dụng các bước sau: 1. Đầu tiên, hãy mở trang HTML và xác định vị tríHTML page and locate the 2. Đặt mã sau sau 3. Thêm các quy tắc của CSS trong dòng mới.rules of CSS in the new line. Example: 4. Đóng thẻ kiểu. Sau khi thêm CSS nội bộ, tệp HTML hoàn chỉnh trông giống như sau: Chúng tôi cũng có thể sử dụng các bộ chọn (lớp và ID) trong bảng kiểu.(class and ID) in the style sheet. Example: Ưu điểm của CSS nội bộ
Nhược điểm của CSS nội bộ:
2. CSS bên ngoàiTrong CSS bên ngoài, chúng tôi liên kết các trang web với tệp .css bên ngoài. Nó được tạo bởi Trình chỉnh sửa văn bản. CSS là phương pháp hiệu quả hơn để tạo kiểu cho một trang web. Bằng cách chỉnh sửa tệp .css, chúng tôi có thể thay đổi toàn bộ trang web cùng một lúc..css file. It is created by text editor. The CSS is more efficient method for styling a website. By editing the .css file, we can change the whole site at once. Để sử dụng CSS bên ngoài, hãy làm theo các bước, được đưa ra dưới đây: 1. Tạo một tệp .CSS mới với trình soạn thảo văn bản và thêm các quy tắc bảng kiểu xếp tầng..css file with text editor, and add Cascading Style Sheet rules too. Ví dụ: 2. Thêm tham chiếu đến .cssfile bên ngoài ngay sau khi thẻ trong phần của tờ HTML:.cssfile right after Ưu điểm của CSS bên ngoài:
Nhược điểm của CSS bên ngoài:
3. CSS nội tuyếnCSS nội tuyến được sử dụng để tạo kiểu cho một phần tử HTML cụ thể. Thêm một thuộc tính kiểu cho mỗi thẻ HTML mà không cần sử dụng các bộ chọn. 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. Tuy nhiên, CSS nội tuyến trong HTML rất hữu ích trong một số tình huống. Chúng tôi không truy cập các tệp CSS hoặc để áp dụng các kiểu cho phần tử.HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element. Trong ví dụ sau, chúng tôi đã sử dụng CSS nội tuyến trong và TAG. and Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trong CSS nội bộ CSS bên ngoài Sự khác biệt giữa các kiểu CSS nội tuyến, bên ngoài và bên trongCSS nội bộ CSS nội bộCSS bên ngoài tag in the section of your HTML document. CSS nội tuyến Các bảng kiểu xếp tầng (CSS) là một ngôn ngữ đánh dấu chịu trách nhiệm về việc các trang web của bạn sẽ trông như thế nào. Nó kiểm soát màu sắc, phông chữ và bố cục của các yếu tố trang web của bạn.
<style type="text/css">
body { background-color: blue; } h2 { color: red; padding: 60px; }
</style> Phong cách CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang duy nhất. Tuy nhiên, sử dụng kiểu này cho nhiều trang là tốn thời gian vì bạn cần đặt các quy tắc CSS trên mỗi trang của trang web của bạn. <!DOCTYPE html> <html> <head> <style> body { background-color: blue; } h2 { color: red; padding: 60px; } </style> </head> <body> <h2>Hostinger Tutorials</h2> <p>This is our paragraph.</p> </body> </html> Tại đây, cách bạn có thể sử dụng CSS nội bộ:
.class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; }
Thêm quy tắc CSS trên một dòng mới. Đây là một ví dụ:
CSS bên ngoàiCSS nội tuyến.css file, which can be created by any text editor in your device (e.g., Notepad++). Các bảng kiểu xếp tầng (CSS) là một ngôn ngữ đánh dấu chịu trách nhiệm về việc các trang web của bạn sẽ trông như thế nào. Nó kiểm soát màu sắc, phông chữ và bố cục của các yếu tố trang web của bạn..css file, you can change your entire site at once. Ngôn ngữ bảng kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt hình vào trang web của bạn. Bạn có thể sử dụng nó để hiển thị một số hình ảnh động CSS như các hiệu ứng nút nhấp, máy quay hoặc bộ tải và nền hoạt hình.
.xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; }
<link rel="stylesheet" type="text/css" href="style.css" /> CSS nội bộ hoặc nhúng yêu cầu bạn thêm thẻ trong phần tài liệu HTML của bạn.style.css with the name of your .css file. Phong cách CSS này là một phương pháp hiệu quả để tạo kiểu cho một trang duy nhất. Tuy nhiên, sử dụng kiểu này cho nhiều trang là tốn thời gian vì bạn cần đặt các quy tắc CSS trên mỗi trang của trang web của bạn.
Đặt mã sau ngay sau khi thẻ
CSS nội tuyếnCác bảng kiểu xếp tầng (CSS) là một ngôn ngữ đánh dấu chịu trách nhiệm về việc các trang web của bạn sẽ trông như thế nào. Nó kiểm soát màu sắc, phông chữ và bố cục của các yếu tố trang web của bạn.style attribute to each HTML tag, without using selectors. Ngôn ngữ bảng kiểu này cũng cho phép bạn thêm hiệu ứng hoặc hoạt hình vào trang web của bạn. Bạn có thể sử dụng nó để hiển thị một số hình ảnh động CSS như các hiệu ứng nút nhấp, máy quay hoặc bộ tải và nền hoạt hình. Không có CSS, trang web của bạn sẽ xuất hiện dưới dạng trang HTML đơn giản. Ở đây, cách Twitter sẽ trông như thế nào nếu chúng ta vô hiệu hóa CSS của nó: Hãy cùng xem một ví dụ. Ở đây, chúng tôi thêm một CSS nội tuyến vào và TAG: and Trong hướng dẫn này, bạn đã học được sự khác biệt giữa ba loại CSS: nội bộ, bên ngoài và nội tuyến. Ở đây, bản tóm tắt: Vì vậy, bạn sẽ sử dụng kiểu CSS nào? Chia sẻ với chúng tôi trong phần bình luận dưới đây. Domantas dẫn đầu các nhóm nội dung và SEO về phía trước với những ý tưởng mới và ra khỏi các phương pháp tiếp cận. Được trang bị kiến thức SEO và tiếp thị rộng rãi, ông nhằm mục đích truyền bá lời nói của Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi kỳ lạ. |