Các trang web sẽ trông nhàm chán nếu không có CSS vì ngôn ngữ phong cách này chịu trách nhiệm về kiểu dáng, kích thước, màu sắc và vị trí của văn bản trên trang web.
CSS là gì?
Cascading Style Sheets hay viết tắt là CSS là ngôn ngữ mô tả cách các phần tử HTML được hiển thị trên màn hình hoặc trên giấy. CSS được World Wide Web Consortium (W3C) tạo ra vào năm 1996.
Các thành phần HTML không được thiết kế để chứa đánh dấu giúp định dạng trang web và các nhà phát triển chỉ phải viết đánh dấu cho trang đó. Giới thiệu các thẻ như khi HTML bắt đầu 3.2gây ra những vấn đề mới cho các nhà phát triển.
Bởi vì các trang web có hình nền đầy màu sắc, phông chữ khác nhau và nhiều phong cách nên việc viết lại mã trở nên tốn kém và khó khăn. Các trường W3C đã giới thiệu CSS để giải quyết những thách thức này và đã phát triển qua nhiều năm.
Tại sao CSS?
# 1. CSS hiệu quả
CSS giúp chúng ta không phải thêm các thẻ như phông chữ, căn chỉnh phần tử, đường viền, màu sắc, kiểu nền và kích thước trên mỗi trang web.
#2. Tiết kiệm thời gian
Bạn có thể dễ dàng thay đổi giao diện của toàn bộ trang web của mình bằng cách thay đổi tệp CSS bên ngoài.
#3. Khả năng tương thích với nhiều thiết bị
Người dùng web ngày nay truy cập các trang web bằng các tiện ích có kích thước màn hình khác nhau, chẳng hạn như PC, máy tính bảng và điện thoại thông minh. CSS giúp dễ dàng tạo các trang web đáp ứng với kích thước màn hình.
#4. Ứng dụng dễ bảo trì
Các ứng dụng web hiện đại không ngừng phát triển. CSS giúp dễ dàng thay đổi từng thành phần riêng lẻ hoặc thậm chí toàn bộ trang web mà không thay đổi cơ sở mã.
CSS được sử dụng với HTML như thế nào để tạo các trang web?
HTML là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo các trang web. Mặt khác, CSS mô tả cách hiển thị các trang web (được tạo bằng HTML). Một trang web được tạo bằng HTML và CSS lý tưởng nhất sẽ chứa tệp HTML có văn bản, liên kết hình ảnh và đánh dấu HTML.
Tệp HTML này có thể có một tệp CSS riêng được liên kết với nó bằng thẻ liên kết hoặc áp dụng các kiểu CSS nội bộ hoặc tích hợp. Một tệp HTML có thể có tiêu đề như
. Bạn có thể sử dụng CSS để hướng dẫn trình duyệt hiển thị tất cả nội dung đoạn văn ở dạng in đậm hoặc thậm chí làm cho nội dung tiêu đề có kích thước 50px và có màu xanh lục.
Trong phần tiếp theo, chúng tôi sẽ trình bày cách HTML và CSS hoạt động.
Các loại CSS
# 1. CSS bên ngoài
Để CSS được phân loại là bên ngoài, cần có tệp HTML và tệp CSS riêng có phần mở rộng .css. Ví dụ: style.css. Tệp CSS được liên kết với tệp/tài liệu HTML bằng thẻ liên kết.
Một ví dụ về tệp CSS bên ngoài:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}Bạn có thể liên kết tệp CSS với tài liệu HTML sau:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://wilku.top/12-best-online-courses-and-books-to-master-css/style.css"/> </head> <body> <div class = "main"> <div class ="GF">Geek Flare!!!! </div> <div id ="TP"> Your favourite tech portal </div> </div> </body> </html>
Thẻ liên kết liên kết biểu định kiểu bên ngoài với tài liệu HTML, trong khi thuộc tính href chỉ định vị trí của biểu định kiểu bên ngoài.
Trang web cuối cùng sẽ trông như thế này:
CSS bên ngoài là phương pháp được khuyên dùng nhiều nhất vì nó giúp dễ dàng tạo các thành phần có thể tái sử dụng và thực hiện các thay đổi chung đối với cơ sở mã.
#2. CSS nội bộ
CSS nội tuyến lý tưởng khi bạn có một tài liệu HTML duy nhất mà bạn muốn tạo kiểu duy nhất. Bộ quy tắc kiểu được lưu trong tài liệu HTML ở phần đầu.
Đây là một ví dụ về CSS nội bộ:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>Trang web được hiển thị sẽ trông như thế này:
CSS nội tuyến không lý tưởng trong hầu hết các trường hợp vì nó làm cho mã trong tài liệu HTML quá lớn, ảnh hưởng đến tốc độ tải.
#3. CSS tích hợp
CSS nội tuyến chứa kiểu CSS trong phần thân. Ví dụ: bạn có thể tạo kiểu cho đoạn văn, tiêu đề và thậm chí cả div bằng CSS tích hợp.
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:red; font-size:50px; font-style:bold; text-align:center;"> Inline CSS Demonstration </p> </body> </html>
Tài liệu được kết xuất sẽ trông như thế này:
CSS nội tuyến không lý tưởng nếu bạn muốn mở rộng quy mô ứng dụng web của mình vì cần có thời gian để thêm thuộc tính CSS vào mỗi thẻ HTML.
Xem các khóa học và sách trực tuyến tốt nhất để thành thạo CSS.
Tạo các trang web đáp ứng bằng HTML và CSS
Khóa học phát triển trang web đáp ứng trong thế giới thực này hướng dẫn bạn cách tạo các trang web phản hồi bằng cách sử dụng HTML5 và CSS3. Bạn không cần bất kỳ kiến thức phát triển web nào trước đây để học khóa học này. Khóa học này bao gồm các khái niệm như mô hình hộp, giải quyết xung đột bộ chọn, sơ đồ định vị và kế thừa.
Đây cũng là khóa học hoàn hảo nếu bạn muốn học cách động não, lập kế hoạch, phác thảo, viết mã, kiểm tra và tối ưu hóa một trang web chuyên nghiệp.
CSS và Sass nâng cao
Khóa học CSS và Sass nâng cao sẽ đưa bạn đến hậu trường về cách hoạt động của CSS, khám phá các chủ đề như xếp tầng, tính đặc hiệu và tính kế thừa.
Khóa học bao gồm nhiều kỹ thuật CSS hiện đại để tạo các trang web mạnh mẽ, phản hồi nhanh. Khóa học giới thiệu Saas và cách sử dụng nó trong các dự án khi thiết kế CSS, biến toàn cục và quản lý truy vấn phương tiện.
Đây cũng là khóa học hoàn hảo nếu bạn muốn tìm hiểu hoạt hình CSS khi nó chạm vào @keyframes, hoạt ảnh và chuyển tiếp.
Tìm hiểu CSS
Tìm hiểu CSS của Codecademy dạy bạn cách sử dụng CSS để biến HTML thành các trang web hấp dẫn về mặt hình ảnh. Khóa học được chia thành 8 bài học và bao gồm 6 các dự án hiểu biết.
Những điều chính bạn sẽ học được từ khóa học này là thêm kiểu vào các thành phần HTML, kết hợp các tệp HTML và CSS cũng như tạo bố cục trang web độc đáo.
Xây dựng trang web đầu tiên của bạn bằng HTML và CSS
Khóa học tạo trang web đầu tiên sẽ hướng dẫn bạn cách sử dụng HTML5 và CSS3 để tạo các trang web phản hồi. Khóa học miễn phí này bao gồm 4 mô-đun và mất khoảng 10 giờ để hoàn thành. Bạn không cần bất kỳ kiến thức lập trình nào trước đó để học khóa học này.
Khái niệm cơ bản về CSS
CSS cơ bản được tạo bởi W3Cx. Một số điều bạn sẽ học trong khóa học này là; các phương pháp hay nhất về thiết kế web, bộ chọn CSS cơ bản và cách chọn thuộc tính CSS. Khóa học được chia thành 5 mô-đun; bạn cần khoảng 5 tuần để hoàn thành nó trong khi học 5-7 giờ mỗi tuần.
Giới thiệu về CSS3
Khóa học CSS3 này giới thiệu các biểu định kiểu xếp tầng. Khóa học do Đại học Michigan biên soạn và dạy bạn cách viết các quy tắc CSS, thiết lập thói quen lập trình tốt và kiểm tra mã của bạn. Bạn cần khoảng 12 giờ để hoàn thành khóa học này, kèm theo chứng chỉ có thể được chia sẻ sau khi hoàn thành.
Giới thiệu về HTML và CSS
Khóa học HTML và CSS giới thiệu này hướng dẫn bạn cách tạo các trang web có phong cách và có cấu trúc tốt bằng cách sử dụng HTML và CSS. Khóa học dạy học viên cách tạo các trang web bằng cấu trúc dạng cây và sau đó tạo kiểu cho chúng bằng CSS.
Khóa học miễn phí này phù hợp cho người mới bắt đầu và sử dụng mô hình học tập theo nhịp độ riêng. Bạn cần khoảng 3 tuần để hoàn thành khóa học này do các chuyên gia trong ngành giảng dạy.
Hướng dẫn CSS
Hướng dẫn CSS là khóa học miễn phí trên W3schools. Khóa học được chia thành các chương để dễ hiểu. Mỗi chương đều có ví dụ và bài tập. Nền tảng này có một trang web nơi bạn có thể thử nghiệm các khái niệm khác nhau bằng nút “Hãy tự mình thử”.
CSS: Hướng dẫn cơ bản
CSS: Hướng dẫn dứt khoát rất hữu ích nếu bạn muốn tìm hiểu những điều cơ bản về CSS, từ bộ chọn và tính đặc hiệu cho đến phân tầng. Cuốn sách cũng bao gồm thông tin chi tiết về các thủ thuật flexbox, định vị và bơi lội.
Đây cũng là một cuốn sách đáng đặt mua nếu bạn muốn tìm hiểu cách sử dụng CSS để tạo các phép biến đổi, chuyển tiếp và hoạt ảnh 2D và 3D. Hướng dẫn dứt khoát có sẵn ở cả hai phiên bản Kindlecũng như trong bìa mềm.
Thiết kế web đáp ứng với HTML5 và CSS
Cuốn sách này về thiết kế trang web phản hồi bằng HTML5 và CSS hướng dẫn bạn cách tạo các trang web phản hồi phù hợp với tương lai bằng HTML5 và CSS.
Sau khi tìm hiểu các thủ thuật trong cuốn sách này, các trang web bạn tạo sẽ hoạt động hoàn hảo trên máy tính để bàn, máy tính bảng và điện thoại di động. Cuốn sách được viết ở dạng dễ hiểu và có sẵn ở dạng bìa mềm và định dạng Kindle.
HTML và CSS: thiết kế và phát triển web
Cuốn sách HTML và CSS này hoàn hảo cho tất cả mọi người, cho dù bạn là người có sở thích, sinh viên hay chuyên nghiệp.
Tác giả trình bày nội dung của cuốn sách này bằng cách sử dụng đồ họa thông tin và nhiếp ảnh phong cách sống để làm cho các khái niệm khác nhau trở nên dễ hiểu hơn. Tài nguyên được trình bày theo một cấu trúc độc đáo, giúp bạn dễ dàng duyệt qua tất cả các chương.
CSS hiện đại
Cuốn sách này về CSS hiện đại: Nắm vững các khái niệm CSS chính để phát triển web hiện đại dạy CSS thông qua các ví dụ về mã, sơ đồ và ảnh chụp màn hình.
Cuốn sách giới thiệu màu sắc, bộ chọn, mô hình hộp, tổ hợp và các chi tiết cụ thể trong các chương đầu. Sau đó, cuốn sách giới thiệu kiểu văn bản, định vị, độ dốc, đường viền, chỉ mục z và bối cảnh xếp chồng. Bạn cũng sẽ tìm hiểu các chủ đề nâng cao như chuyển tiếp, hoạt ảnh, biến đổi, flexbox và lưới CSS.
những từ cuối
Vai trò của CSS trong các trang web hiện đại không thể được đánh giá quá cao. Ngoài việc làm cho các trang web trở nên hấp dẫn về mặt trực quan, CSS còn giúp điều hướng qua các trang web khác nhau dễ dàng hơn.
Học CSS có thể dễ dàng nếu bạn sử dụng các tài nguyên được liệt kê ở trên. Một số khóa học này là miễn phí trong khi những khóa học khác được trả phí.
Sau đó, bạn có thể kiểm tra bảng cheat CSS dành cho nhà phát triển và nhà thiết kế.
