Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với bốn biểu định kiểu khác nhau. Nhấp vào liên kết "Biểu định kiểu 1", "Biểu định kiểu 2", "Biểu định kiểu 3", "Biểu định kiểu 4" bên dưới để xem các kiểu khác nhau
Tại sao nên sử dụng CSS?
CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau
Ví dụ CSS
body {
màu nền. xanh nhạt;
}
h1 {
màu. màu trắng;
căn chỉnh văn bản. trung tâm;
}
p {
họ phông chữ. verdana;
cỡ chữ. 20px;
}
CSS đã giải quyết một vấn đề lớn
HTML KHÔNG BAO GIỜ có ý định chứa các thẻ để định dạng trang web
HTML được tạo ra để mô tả nội dung của một trang web, như
Đây là một tiêu đềĐây là một đoạn
Khi các thẻ như và các thuộc tính màu được thêm vào HTML 3. 2, nó bắt đầu cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi phông chữ và thông tin màu sắc được thêm vào từng trang, trở thành một quá trình lâu dài và tốn kém
Để giải quyết vấn đề này, World Wide Web Consortium [W3C] đã tạo CSS
CSS đã xóa định dạng kiểu khỏi trang HTML
Nếu bạn không biết HTML là gì, chúng tôi khuyên bạn nên đọc Hướng dẫn HTML của chúng tôi
CSS tiết kiệm rất nhiều công việc
Các định nghĩa kiểu dáng thường được lưu ở bên ngoài. tập tin css
Với tệp biểu định kiểu 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
CSS được phát triển bởi W3C [World Wide Web Consortium] vào năm 1996 vì một lý do khá đơn giản. Phần tử HTML không được thiết kế để có các thẻ giúp định dạng trang. Bạn chỉ được phép viết phần đánh dấu cho trang web
Tags like were introduced in HTML version 3.2, and it caused quite a lot of trouble for web developers. Due to the fact that web pages have different fonts, colored backgrounds, and multiple styles, it was a long, painful, and expensive process to rewrite the code. Thus, CSS was created by W3C to solve this problem.
CSS không phải là một thứ cần thiết về mặt kỹ thuật, nhưng có lẽ bạn sẽ không muốn xem một trang web chỉ có các phần tử HTML vì nó trông hoàn toàn đơn giản.
Tải xuống Bảng cheat CSS hoàn chỉnh
CSS là gì?
CSS là viết tắt của ngôn ngữ Cascading Style Sheets và được sử dụng để cách điệu các phần tử được viết bằng ngôn ngữ đánh dấu như HTML. Nó tách nội dung khỏi hình ảnh đại diện của trang web. Mối quan hệ giữa HTML và CSS được gắn chặt với nhau vì HTML là nền tảng của một trang web và CSS là tất cả tính thẩm mỹ của toàn bộ trang web
Cascading Style Sheets Giải thích trong một video hướng dẫn
Tìm hiểu thêm về CSS và cách nó hoạt động bằng cách xem video hướng dẫn này
Đăng ký Để có thêm video giáo dục. Học viện Hostinger
Đặt mua
Ưu điểm của CSS trên các trang web
Sự khác biệt giữa một trang web triển khai CSS và một trang web không triển khai là rất lớn và chắc chắn đáng chú ý
Bạn có thể đã thấy một trang web không tải hoàn toàn và có màu nền trắng với hầu hết văn bản là màu xanh và đen. Điều này có nghĩa là phần CSS của trang web không tải đúng cách hoặc nó hoàn toàn không tồn tại
Đó là giao diện của các trang web chỉ có HTML và tôi nghĩ bạn sẽ đồng ý rằng điều đó không hấp dẫn lắm.
Trước khi sử dụng CSS, tất cả các cách điệu phải được đưa vào phần đánh dấu HTML. Điều này có nghĩa là các nhà phát triển web phải mô tả riêng về màu nền, kích thước phông chữ, cách sắp xếp, v.v.
CSS cho phép bạn cách điệu mọi thứ trên một tệp khác, do đó tạo thiết kế ở đó và sau đó tích hợp các tệp CSS trên phần đánh dấu HTML. Điều này làm cho đánh dấu HTML thực tế sạch hơn và dễ bảo trì hơn
Nói tóm lại, với các tính năng CSS, bạn không cần phải lặp đi lặp lại việc mô tả các phần tử riêng lẻ trông như thế nào. Điều này tiết kiệm thời gian, rút ngắn mã và làm cho nó không dễ bị lỗi
CSS cho phép bạn có nhiều kiểu trên một trang HTML, do đó làm cho khả năng tùy chỉnh gần như vô tận. Ngày nay, điều này đang trở thành một nhu cầu thiết yếu hơn là một mặt hàng
CSS hoạt động như thế nào?
CSS uses a simple English based syntax with a set of rules that govern it. Like we’ve mentioned before, HTML was never intended to use style elements, only the markup of the page. It was created to merely describe the content. For example:
This is a paragraph.
.Nhưng làm thế nào để bạn tạo kiểu cho đoạn văn? . Nó có một bộ chọn và một khối khai báo. Bạn chọn một phần tử và sau đó khai báo những gì bạn muốn làm với nó. Khá đơn giản, phải không?
Tuy nhiên, có những quy tắc bạn phải nhớ. Luật cấu tạo khá đơn giản nên các bạn đừng lo
Bộ chọn trỏ đến các thành phần HTML bạn muốn tạo kiểu. Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy
Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm. Một khai báo CSS luôn kết thúc bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi dấu ngoặc nhọn
Hãy xem một ví dụ
All of the
elements will be colored blue and bolded.
p { color: blue; text-weight: bold; }
In another example, all
elements will be center-aligned, be 16x wide and pink.
p { text-align: center; font-size: 16px; color: pink; }
Xem bảng cheat CSS của chúng tôi để biết thêm ví dụ
Bây giờ hãy nói về các kiểu CSS khác nhau. Chúng là Nội tuyến, Bên ngoài và Nội bộ
Kiểu CSS nội bộ, bên ngoài và nội tuyến
Chúng tôi sẽ xem xét ngắn gọn từng phong cách, để giải thích sâu hơn về từng phương pháp, sẽ có một liên kết bên dưới phần tổng quan
Hãy bắt đầu bằng cách nói về Phong cách nội bộ. Các kiểu CSS được thực hiện theo cách này được tải mỗi khi toàn bộ trang web được làm mới, điều này có thể làm tăng thời gian tải. Ngoài ra, bạn sẽ không thể sử dụng cùng một kiểu CSS trên nhiều trang vì nó được chứa trong một trang. Tuy nhiên, điều này cũng đi kèm với lợi ích. Có mọi thứ trên một trang giúp chia sẻ mẫu để xem trước dễ dàng hơn
Phương pháp bên ngoài có thể là phương pháp thuận tiện nhất. Tất cả mọi thứ được thực hiện bên ngoài trên một. tập tin css. Điều này có nghĩa là bạn có thể thực hiện tất cả kiểu dáng trên một tệp riêng biệt và áp dụng CSS cho bất kỳ trang nào bạn muốn. Kiểu bên ngoài cũng có thể cải thiện thời gian tải
Lastly, we will talk about the Inline style of CSS. Inline works with specific elements that have the tag. Each component has to be stylized, so it might not be the best or fastest way to handle CSS. But it can come in handy. For example, if you want to change a single element, quickly preview changes, or maybe you don’t have access to the CSS files.
Để biết thêm thông tin về các kiểu CSS khác nhau, hãy xem bài viết chuyên sâu của chúng tôi tại đây
Phần kết luận
Hãy tóm tắt những gì chúng ta đã học được ở đây về CSS và cách nó giúp ích cho tính thẩm mỹ của các trang web
- CSS được tạo ra để hoạt động cùng với các ngôn ngữ đánh dấu khác như HTML. Nó được sử dụng để cách điệu một trang
- Có ba kiểu triển khai CSS và bạn có thể sử dụng kiểu Bên ngoài để phù hợp với nhiều trang cùng một lúc
- Ngày nay, bạn sẽ không đi xa mà không thấy một số kiểu triển khai CSS vì nó cũng là một yêu cầu cần thiết như chính ngôn ngữ đánh dấu
Nói chung, chúng tôi hy vọng bạn thấy bài viết này hữu ích và nếu bạn có bất kỳ câu hỏi nào, vui lòng để lại trong phần bình luận bên dưới
Câu hỏi thường gặp về CSS là gì
CSS có nghĩa là gì?
CSS là viết tắt của Cascading Style Sheet và đó là ngôn ngữ lập trình được sử dụng để xác định kiểu trang web cùng với HTML
Tại sao CSS được sử dụng?
CSS được sử dụng để cho trình duyệt web biết một trang web cụ thể sẽ trông như thế nào. Nó không thể được sử dụng để tạo các thành phần trang mới, nhưng thay vào đó, nó được sử dụng để tạo kiểu cho các thành phần HTML
Các loại CSS khác nhau là gì?
Có 3 loại CSS khác nhau. CSS nội tuyến, CSS nội bộ hoặc nhúng và CSS bên ngoài
Sự khác biệt giữa HTML và CSS là gì?
Là một ngôn ngữ lập trình đánh dấu, HTML được sử dụng để tạo các trang web tĩnh. Mặt khác, CSS là ngôn ngữ biểu định kiểu được sử dụng để xác định kiểu và cách trình bày tổng thể của các tệp và thành phần trang khác nhau trong ngôn ngữ đánh dấu như HTML
Tác giả
Artūras B
Artūras là một Người viết nội dung kỹ thuật có kinh nghiệm. Mang lại nhiều kiến thức về WordPress và lưu trữ web cho nhóm, anh ấy cố gắng viết nội dung nguyên sơ về bất kỳ chủ đề nào liên quan đến CNTT. Anh ấy cũng yêu chó