Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS Nền CSS Đường viền CSS Lề CSS CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS Văn bản CSS Phông chữ CSS Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients Bóng CSS Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Giới thiệu CSS


CSS là ngôn ngữ chúng tôi sử dụng để tạo kiểu cho một trang Web.


CSS là gì?

  • CSS là viết tắt của Cascading Style Sheets
  • CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương tiện khác
  • CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc
  • Các bảng định kiểu bên ngoài được lưu trữ trong các tệp CSS

CSS Demo - Một trang HTML - Nhiều kiểu!

Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với bốn bảng đị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 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 {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 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 một trang web!

HTML được tạo ra để mô tả nội dung của một trang web, như:

<h1> Đây là một tiêu đề </h1>

<p> Đây là một đoạn văn. </p>

Khi các thẻ như <font> và các thuộc tính màu được thêm vào đặc tả HTML 3.2, nó bắt đầu một cơn ác mộng đối với các nhà phát triển web. Việc phát triển các trang web lớn, nơi các 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 thường được lưu trong các tệp .css bên ngoài.

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 chỉ bằng cách thay đổi một tệp!