CSS là gì? Mối quan hệ của CSS và HTML
Bùi Tấn Lực - 773
- 13/05/2024
Bùi Tấn Lực CSS là gì? Đó là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,… hoạt động theo phương pháp tìm và dựa vào các vùng chọn, chi tiết như nào hãy cùng chúng tôi phân tích:
CSS là gì? Mối quan hệ của CSS và HTML
Mục Lục [Ẩn]
CSS là gì?
CSS (Cascading Style Sheets) là ngôn ngữ quy định cách hiển thị của các thành phần trong HTML như font chữ, màu sắc, background, bố cục, viền,… hoạt động theo phương pháp tìm và dựa vào các vùng chọn (có thể là thẻ HTML, ID, class,...) sau đó áp dụng các thuộc tính cần thay thế lên vùng chọn đó.
Xem thêm bài viết:
Lịch sử phát triển của CSS
Cựu Giám đốc công nghệ của Opera Software là HĂ¥kon Wium Lie vào năm 1994 đã đề xuất ý tưởng về một ngôn ngữ định dạng trang (style sheet language) cho World Wide Web. Đề xuất của Lie là tạo ra một ngôn ngữ cho phép các nhà phát triển web tách biệt nội dung của một trang web với diện mạo của nó khi đó HTML là công cụ duy nhất để tạo kiểu cho các trang web và rất khó sử dụng.
Vào năm 1996 phiên bản CSS1 được phát hành. CSS1 nhanh chóng được các trình duyệt web áp dụng và sớm trở thành công cụ tiêu chuẩn để thiết kế web cho phép nhà phát triển web kiểm soát diện mạo của website một cách dễ dàng hơn so với việc sử dụng HTML.
Phiên bản CSS2 được phát hành vào năm 1998. CSS2 cũng là phiên bản đầu tiên của CSS được hỗ trợ bởi tất cả các trình duyệt web chính với nhiều đổi mới như hỗ trợ cho việc xếp chồng các phần tử, sắp xếp vị trí và gradient.
CSS3 đã bắt đầu được phát triển sau khi CSS2 được phát hành, phát triển dưới dạng một tập hợp các module riêng biệt.
Mối quan hệ của CSS và HTML
CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa, nếu có HTML mà không có css thì sẽ không dịnh dạng được, CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Chắc chắn sẽ không có tình thẩm mỹ nếu một trang web có thể chạy mà không cần CSS. CSS mang đến trải nghiệm người dùng tuyệt vời và làm cho giao diện người dùng của một trang web tỏa sáng. Các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều nếu không có CSS.
Tại sao cần sử dụng CSS?
Cung cấp nhiều thuộc tính khác nhau
Cho phép CSS cung cấp thêm nhiều phong cách, kiểu dáng khác nhau và đem lại khả năng tùy chỉnh các trang web theo cách thuận tiện và bắt mắt nhất với các thuộc tính do CSS cung cấp chi tiết hơn HTML trên cùng một giao diện trang web.
Thời gian sử dụng sẽ được rút lại
Bởi bạn có thể được dùng chương trình với mã code ngắn lại hơn nên thời gian sử dụng CSS được tiết kiệm tối đa. Ít lo lắng hơn về loại mã không cần thiết xuất hiện trong chương trình và giúp bạn kiểm soát nhanh hơn, thuận tiện hơn. Đảm bảo hạn chế tối đa sự trùng lặp gây mất kiểm soát và không ấn tượng và số lượng các stylesheet mà web mang đến là vô cùng đa dạng.
Cách hoạt động của CSS
Thực hiện thêm các thuộc tính cần thay đổi ngay trên vùng chọn, có thể là thẻ HTML, ID, class,…. Selector khai báo các thuộc tính sẽ cách nhau bởi dấu chấm phẩy “;” sau khi trỏ về yếu tố HTML bạn cần muốn tạo style.
Block khai báo được đặt trong dấu ngoặc nhọn “{}”, tên CSS và giá trị, cách nhau bởi dấu hai chấm “:” của mỗi khai báo, xem ví dụ cụ thể dưới đây:
<style>
p {
color: red;
text-weight: bold;
}
<style>
Các loại CSS
External Style sheet
Tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn. External style sẽ cải thiện thời gian tải trang rất nhiều, mọi thứ được lưu trong file .css.
Internal Style sheet
Internal CSS code được đặt trong mục <head> của một trang nhất định và chỉ hoạt động trên trang có định đó. Classes và IDs có thể được chỉ định tới CSS. Sẽ cần phải được tải về mỗi khi trang được load, vì vậy có thể dẫn đến mất nhiều thời gian để duyệt website. Tuy nhiên, vì tất cả đều chỉ nằm trong một trang – xem preview sẽ dễ hơn nhiều và trong một số trường hợp internal stylessheet rất hữu dụng. Trong thẻ <style></style> đặt Internal CSS. Một ví dụ của internal stylesheet:
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
Inline Styles
Một thẻ HTML xác định và sử dụng Inline CSS <style> attribute trên chính nó. Không được khuyến khích sử dụng CSS bằng cách này, vì mỗi tag HTML cần được styles độc lập, quản lý website sẽ rất khó nếu bạn chỉ sử dụng inline CSS. Chỉ trong trường hợp bạn không có quyền truy cập tới file CSS hoặc cần áp dụng style cho một element duy nhất. Ví dụ của một trang HTML với inline CSS:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">CSS là gì? Chi tiết về Ngôn ngữ CSS</h1>
<p style="color:white;">CSS là gì?</p>
</body>
</html>
Ưu điểm và Nhược điểm của CSS
Ưu điểm của CSS:
Thân thiện với công cụ tìm kiếm
Giúp website dễ dàng hiển thị trong các kết quả của công cụ tìm kiếm hơn với CSS style sheets.
Khả năng tiết kiệm thời gian
Xác định được một kiểu cho từng thành phần HTML và cũng áp dụng được cho nhiều trang web khác khi cần thiết, sử dụng lại trong các trang HTML tiếp theo.
Giúp trang web thân thiện hơn với máy in
Những màu sắc, hình ảnh và những yếu tố khó in khác có thể được loại bỏ để việc in ấn dễ dàng hơn, cung cấp các trang web thân thiện với việc in ấn.
CSS giúp khả năng tải trang nhanh chóng
Có thể áp dụng nó cho mọi lần xuất hiện tiếp theo của một thẻ, sử dụng là ít mã hơn, thời gian tải xuống nhanh chóng, giúp tiết kiệm thời gian đáng kể.
Dễ dàng kiểm soát việc trình bày trang web
Kiểm soát tốt hơn các phương tiện trên trang, sắp xếp lại code để giúp trình đọc màn hình theo dõi dễ dàng hơn, giúp trang web dễ truy cập hơn, tùy chọn để kiểm soát khoảng cách và đầu văn bản, xác định thứ tự mà trang hiển thị,…
Dễ dàng khi thực hiện bảo trì
CSS sẽ hỗ trợ cập nhật hoàn toàn tự động khi cần chúng ta chỉ cần thay đổi một kiểu và mọi thành phần trong tất cả những website.
CSS sở hữu thuộc tính rộng
Nếu đánh giá và so sánh với HTML CSS được đánh giá cao nhờ sở hữu những thuộc tính rộng hơn.
Khả năng tương thích tốt
Ưu điểm của CSS là khả năng tương thích với nhiều thiết bị. Cùng sử dụng một tài liệu HTML song với nhiều phiên bản website khác nhau được hỗ trợ tốt, có độ tương thích cao khi trình bày ở từng thiết bị di động.
Nhược điểm của CSS:
Không thể chỉnh sửa nội dung
Thay đổi hoặc tương tác trực tiếp với nội dung trang web thì CSS không có khả năng.
Giới hạn quyền kiểm soát
Không thể thực hiện được một số thiết kế phức tạp hoặc thay đổi sâu vào cấu trúc của trang web mặc dù CSS cho phép bạn kiểm soát giao diện trang web.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết về CSS
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
