Cascading Style Sheets, hay CSS, là ngôn ngữ cho biết trang web trông như thế nào. CSS thêm màu sắc, kiểu dáng và bố cục vào cấu trúc đơn giản của trang web. Cũng giống như bạn chọn quần áo để cảm thấy thoải mái và trông gọn gàng, CSS giúp trang web trở nên đẹp hơn và hấp dẫn hơn. Trong phát triển web, chúng ta sử dụng CSS để thay đổi màu sắc, kích thước và vị trí của văn bản và hộp trên trang. Bài học này sẽ giới thiệu cho bạn những điều cơ bản về CSS bằng ngôn ngữ đơn giản. Chúng ta sẽ tìm hiểu CSS là gì, tại sao nó quan trọng và cách nó hoạt động với HTML.
CSS là viết tắt của Cascading Style Sheets. Đây là ngôn ngữ đặc biệt được sử dụng để tạo kiểu cho các trang web. Hãy nghĩ về CSS như lớp sơn và đồ trang trí cho một tòa nhà. Tòa nhà được tạo thành từ HTML và CSS làm cho nó đẹp hơn. Sử dụng CSS, bạn có thể thay đổi màu nền, kiểu phông chữ và khoảng cách xung quanh các thành phần trên trang web của mình. CSS là một công cụ giúp các nhà thiết kế web làm cho các trang web trông đẹp hơn và thú vị hơn.
Hãy tưởng tượng bạn đang tô màu một bức vẽ. Các đường nét của bức vẽ giống như cấu trúc cơ bản của một trang web. CSS giống như bút chì màu và bút dạ giúp tô điểm cho bức vẽ. Với một vài quy tắc đơn giản, bạn có thể thay đổi toàn bộ bức vẽ của mình từ đơn giản thành nhiều màu sắc!
CSS được sử dụng để làm cho các trang web hấp dẫn và dễ sử dụng. Nó giữ cho phong cách tách biệt với nội dung. Điều này có nghĩa là các từ và hình ảnh trên trang (do HTML cung cấp) vẫn giữ nguyên, trong khi CSS kiểm soát cách chúng trông như thế nào. Khi bạn cập nhật phong cách, bạn không cần phải thay đổi nội dung. Sự tách biệt này giúp các nhà phát triển web làm việc nhanh hơn và làm cho các trang web đẹp hơn khi truy cập.
Hãy nghĩ về CSS như bộ trang phục bạn chọn. Nếu bạn mặc quần áo khác nhau, bạn trông khác nhau, nhưng bạn vẫn là cùng một người. CSS thay đổi giao diện của trang web mà không thay đổi thông tin trên đó. Điều này giúp bạn dễ dàng cập nhật thiết kế của toàn bộ trang web chỉ bằng cách chỉnh sửa một tệp CSS.
CSS hoạt động song song với HTML. HTML là nền tảng thiết lập vị trí của mọi thứ trên trang web. Sau đó, CSS sẽ thêm màu sắc, phông chữ và kiểu. Khi trình duyệt tải trang web, trước tiên nó sẽ xây dựng cấu trúc bằng HTML và sau đó áp dụng các kiểu được xác định trong CSS.
CSS được viết dưới dạng một tập hợp các quy tắc. Mỗi quy tắc có hai phần: một bộ chọn và một khối khai báo. Bộ chọn cho trình duyệt biết phần tử HTML nào cần định dạng. Khối khai báo chứa một hoặc nhiều khai báo. Mỗi khai báo có một thuộc tính và một giá trị. Thuộc tính là những gì bạn muốn thay đổi và giá trị cho biết cách thay đổi.
Ví dụ, để đặt màu nền của trang thành màu xanh nhạt, bạn có thể viết quy tắc như sau:
<mã>thân {
màu nền: xanh nhạt;
}</mã>Quy tắc đơn giản này sẽ thay đổi hình nền của toàn bộ trang.
Một quy tắc CSS cơ bản tuân theo một mẫu đơn giản. Nó hiển thị bộ chọn và một khối các thuộc tính và giá trị. Mẫu trông như thế này:
<code>bộ chọn {
thuộc tính: giá trị;
}</mã>Ở đây, bộ chọn sẽ chọn phần tử HTML nào để nhắm mục tiêu. Thuộc tính là thứ bạn muốn thay đổi và giá trị là cách bạn muốn thay đổi.
Ví dụ, nếu bạn muốn toàn bộ văn bản trong đoạn văn có màu xanh, bạn hãy viết:
<mã>p {
màu sắc: xanh lam;
}</mã>Quy tắc này cho trình duyệt web biết rằng mọi phần tử <p> (đoạn văn) phải có văn bản màu xanh lam.
Bộ chọn CSS cho phép bạn chọn phần tử nào trên trang web của bạn sẽ bị ảnh hưởng bởi các quy tắc kiểu. Có một số loại bộ chọn và mỗi loại hoạt động hơi khác nhau.
Những bộ chọn khác nhau này cung cấp cho bạn nhiều quyền để định dạng các phần cụ thể của trang web. Chúng cho phép bạn nhắm mục tiêu chính xác các thành phần và quyết định chúng sẽ trông như thế nào.
CSS cung cấp nhiều thuộc tính khác nhau mà bạn có thể sử dụng để định dạng trang web của mình. Mỗi thuộc tính cho phép bạn thay đổi một khía cạnh cụ thể về giao diện của một phần tử. Một số thuộc tính phổ biến là:
Mỗi thuộc tính CSS được theo sau bởi một giá trị. Ví dụ, để tô màu đỏ cho văn bản, bạn có thể viết:
<mã>p {
màu sắc: đỏ;
}</mã>Quy tắc đơn giản này làm cho tất cả các đoạn văn có văn bản màu đỏ. Thuộc tính color kiểm soát cách văn bản xuất hiện và giá trị red cho biết màu nào sẽ có.
Từ "cascading" trong CSS có nghĩa là các kiểu có thể chảy từ quy tắc này sang quy tắc khác. Nếu hai quy tắc có thể áp dụng cho cùng một phần tử, thứ tự có thể quyết định quy tắc nào thắng. Điều này tương tự như xếp chồng các khối, trong đó một khối đôi khi bao phủ một phần của khối khác.
Một quy tắc chung là các kiểu được viết trực tiếp bên trong một phần tử HTML (gọi là kiểu nội tuyến) sẽ ghi đè lên các kiểu trong tệp CSS của bạn. Một quy tắc khác là nếu một phần tử cha được định kiểu, các phần tử con của nó có thể kế thừa kiểu đó trừ khi chúng được yêu cầu khác.
Ví dụ, nếu bạn đặt màu văn bản của <div> thành màu xanh lá cây, thì văn bản bên trong <div> thường cũng sẽ xuất hiện màu xanh lá cây do tính kế thừa. Điều này giúp duy trì thiết kế nhất quán trên trang web.
Với CSS, bạn có thể thay đổi màu theo nhiều cách. Bạn có thể sử dụng tên màu thông dụng như đỏ , xanh lam và xanh lục . Bạn cũng có thể sử dụng mã thập lục phân như <code>#FF0000</code> cho màu đỏ hoặc giá trị RGB như <code>rgb(255, 0, 0)</code>.
Phông chữ là một phần quan trọng khác của CSS. Phông chữ giống như kiểu chữ viết tay bạn chọn trong sổ tay. Trong CSS, bạn có thể thay đổi họ phông chữ, kích thước, độ đậm và kiểu. Ví dụ, nếu bạn muốn đoạn văn của mình xuất hiện ở dạng Arial, bạn có thể sử dụng:
<mã>p {
font-family: Arial, sans-serif;
}</mã>Quy tắc này yêu cầu trình duyệt hiển thị văn bản bằng phông chữ Arial nếu có thể và sử dụng phông chữ tương tự khác nếu không.
Thay đổi màu sắc và phông chữ bằng CSS giúp văn bản dễ đọc hơn và trang web của bạn trông thú vị hơn.
CSS Box Model là một cách để hiểu cách các phần khác nhau của một phần tử được sắp xếp trên một trang. Mỗi phần tử giống như một hộp. Box model có bốn phần:
Hãy tưởng tượng một bức ảnh. Bản thân bức ảnh là nội dung. Tấm thảm bao quanh bức ảnh giống như lớp đệm. Khung giữ tất cả lại với nhau là đường viền. Và không gian xung quanh khung là lề. Sử dụng mô hình này, bạn có thể đảm bảo rằng tất cả các phần trong thiết kế của mình có không gian và sự cân bằng phù hợp.
CSS không chỉ là về màu sắc và phông chữ; nó còn giúp bạn sắp xếp các thành phần trên trang web. Đây được gọi là bố cục và định vị. Với CSS, bạn có thể quyết định vị trí xuất hiện của từng thành phần trên trang.
Có một số cách để kiểm soát bố cục của trang web, bao gồm:
Sử dụng các kỹ thuật bố trí này giống như sắp xếp đồ chơi trên kệ. Bạn quyết định vị trí của từng đồ chơi để tất cả chúng đều có đủ không gian và trông gọn gàng. Điều này làm cho trang web của bạn được tổ chức và hấp dẫn hơn.
Sau đây là ví dụ về cách HTML và CSS hoạt động cùng nhau. Mã mẫu này hiển thị một trang web đơn giản với một số kiểu dáng:
<code><!DOCTYPEhtml>
<html>
<đầu>
<phong cách>
thân hình {
màu nền: xanh nhạt;
}
h1 {
màu sắc: xanh nước biển;
cỡ chữ: 24px;
}
P {
màu sắc: xanh lá cây;
cỡ chữ: 18px;
}
</phong cách>
</đầu>
<thân>
<h1>Trang web đầu tiên của tôi</h1>
<p>Đây là một trang web đơn giản được thiết kế bằng CSS.</p>
</thân>
</html></mã>Mã này tạo ra một trang web có màu nền xanh nhạt. Văn bản tiêu đề là màu xanh navy và văn bản đoạn văn là màu xanh lá cây. CSS bên trong thẻ <code><style></code> cho biết cách viết và áp dụng các quy tắc.
Bạn có thể thêm CSS vào HTML theo ba cách chính. Mỗi phương pháp có cách sử dụng riêng tùy thuộc vào tình huống:
Phương pháp bên ngoài là phương pháp phổ biến nhất trong phát triển web chuyên nghiệp vì nó giúp HTML gọn gàng và cho phép bạn cập nhật kiểu trên nhiều trang cùng một lúc.
CSS rất hữu ích theo nhiều cách. Sau đây là một số lợi ích của việc sử dụng CSS trong phát triển web:
Sử dụng CSS giống như có một hộp công cụ đặc biệt. Mỗi công cụ trong hộp công cụ giúp bạn cải thiện giao diện trang web của mình một cách dễ dàng. Khi bạn thực hành, bạn sẽ thấy CSS có thể mạnh mẽ như thế nào trong việc làm cho các trang web đẹp và thân thiện với người dùng.
Mỗi trang web bạn truy cập đều sử dụng CSS theo một cách nào đó. Từ các trang hoạt hình yêu thích của bạn đến các trang dự án trường học, CSS giúp tạo ra một bố cục vui nhộn và dễ đọc. Khi bạn thấy một trang web đầy màu sắc với khoảng cách gọn gàng và văn bản rõ ràng, thì đó là CSS đang hoạt động.
Hãy xem xét thiết kế của các trang web phổ biến như trò chơi, phim hoạt hình hoặc truyện trực tuyến. Việc sử dụng màu sắc, phông chữ và bố cục một cách chu đáo giúp các trang web này trở nên thú vị và hấp dẫn. CSS cũng được sử dụng trong các ứng dụng và trang web dành cho thiết bị di động, đảm bảo nội dung trông đẹp trên cả màn hình lớn và điện thoại nhỏ.
Trong cuộc sống hàng ngày, CSS cũng giống như việc trang trí một căn phòng. Bạn có thể chọn một chủ đề cho căn phòng của mình, treo những bức tranh đầy màu sắc và sắp xếp đồ đạc gọn gàng. CSS cũng làm như vậy đối với các trang web. Nó mang lại sự ngăn nắp và vẻ đẹp cho không gian kỹ thuật số, khiến nó trở nên dễ chịu đối với khách truy cập.
Sau đây là những điểm chính chúng ta đã học về CSS:
CSS là một phần quan trọng trong phát triển web, giúp các trang web đẹp và dễ điều hướng. Khi bạn khám phá nhiều hơn và thử xây dựng trang web của riêng mình, hãy nhớ rằng CSS là công cụ thể hiện sự sáng tạo của bạn. Hãy vui vẻ thử nghiệm với màu sắc, phông chữ và bố cục, vì mọi thay đổi nhỏ đều góp phần tạo nên sự kỳ diệu của một trang web được thiết kế tốt.
Tiếp tục luyện tập và quan sát các trang web yêu thích của bạn. Lưu ý cách các phong cách khác nhau được sử dụng để thu hút sự chú ý của bạn và tạo ra trải nghiệm thú vị. Theo thời gian, bạn sẽ thấy CSS có thể mạnh mẽ như thế nào trong việc biến đổi các cấu trúc HTML đơn giản thành các trang web hấp dẫn về mặt hình ảnh.