Bùi Tấn Lực
- 1221
- 14/10/2024
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,…, 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
Để xây dựng lên giao diện website thì cần cả 2 CSS và HTML, thiếu HTML thì CSS không là gì cả, thiếu CSS thì HTML cũng không làm được trò trống gì.
HTML có nhiệm vụ tạo và cấu trúc các phần trong trang web còn CSS có nhiệm vụ tổ chức bố cục dựa theo cấu trúc mà HTML đã tạo.
Ngoài cấu trúc thì HTML có tạo thêm các thẻ và CSS có nhiệm vụ chỉnh cho các thẻ HTML hoạt động theo ý của người lập trình sao cho giao diện nhìn đẹp và chuyên nghiệp.
Cách hoạt động của CSS
Trên thẻ HTML sẽ khai báo các thuộc tính ID hoặc Class. Trong file CSS sẽ quy định ID sẽ là #, Class sẽ là dấu chấm ".".
Nếu chỉ định dạng cho duy nhất 1 thẻ thì bạn đặt là ID, còn nếu định dạng chung cho nhiều thẻ giống nhau thì dùng Class.
Mỗi Class hay Id trong CSS phải có 2 dấu mở ngoặc đóng mở {}, các thuộc tính cách nhau bằng dấu chấm phẩy ";".
Tên thuộc tính của CSS và giá trị của nó cách nhau bằng dấu 2 chấm ":".
<!DOCTYPE html>
<html>
<head>
<title>CSS và HTML</title>
<style>
#theid{color: red;}
.theclass{color: green;}
<style>
</head>
<body>
<p id="theid">Định dạng ID</p>
<p class="theclass">Định dạng Class</p>
<p class="theclass">Định dạng Class</p>
</body>
</html>
Đoạn code trên đã nêu ra cách hoạt động của CSS, bạn hãy đọc những ý mình nói trên kết hợp với đoạn code này để hiểu hơn. CSS ở ví dụ này mình để trong thẻ style.
Các loại CSS
External Style sheet
Bạn đưa tất cả định dạng Css vô trong 1 file hoặc nhiều file, file đó có đuôi .css, bạn phải tạo thẻ nhúng thẻ .css vào website.
<!DOCTYPE html>
<html>
<head>
<title>CSS và HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p id="theid">Định dạng ID</p>
<p class="theclass">Định dạng Class</p>
<p class="theclass">Định dạng Class</p>
</body>
</html>
Internal Style sheet
CSS được đặt trong thẻ đóng mở <style></style>, thẻ này đặt ở head:
<!DOCTYPE html>
<html>
<head>
<title>CSS và HTML</title>
<style>
#theid{color: red;}
.theclass{color: green;}
<style>
</head>
<body>
<p id="theid">Định dạng ID</p>
<p class="theclass">Định dạng Class</p>
<p class="theclass">Định dạng Class</p>
</body>
</html>
Inline Styles
CSS trực tiếp luôn trên thẻ html bằng cách khai báo style="":
<!DOCTYPE html>
<html>
<head>
<title>CSS và HTML</title>
<style>
#theid{color: red;}
.theclass{color: green;}
<style>
</head>
<body>
<p style="color: red;">Định dạng ID</p>
<p style="color: green;">Định dạng Class</p>
<p style="color: green;">Định dạng Class</p>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết CSS là gì?
- 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 *