Hướng dẫn w3c css - w3c css

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

CSS mô tả cách hiển thị các phần tử HTML.

Hướng dẫn này sẽ dạy bạn CSS từ cơ bản đến nâng cao.

Bắt đầu học CSS ngay bây giờ »

Ví dụ trong mỗi chương

Hướng dẫn CSS này chứa hàng trăm ví dụ CSS.

Với trình soạn thảo trực tuyến của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Ví dụ CSS

Body {& nbsp; & nbsp; màu nền: lightBlue;}
  background-color: lightblue;
}

H2 {& nbsp; & nbsp; màu: màu trắng; & nbsp; & nbsp; văn bản-align: trung tâm; }
  color: white;
  text-align: center;
}

p {& nbsp; Phông chữ-gia đình: Verdana; & nbsp; & nbsp; kích thước phông chữ: 20px; }
  font-family: verdana;
  font-size: 20px;
}

Hãy tự mình thử »

Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.

Ví dụ CSS

Tìm hiểu từ hơn 300 ví dụ! Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Đi đến ví dụ CSS!

Sử dụng menu

Chúng tôi khuyên bạn nên đọc hướng dẫn này, trong chuỗi được liệt kê trong menu.

Nếu bạn có một màn hình lớn, menu sẽ luôn có mặt ở bên trái.

Nếu bạn có một màn hình nhỏ, hãy mở menu bằng cách nhấp vào dấu hiệu Menu trên cùng.☰.

Mẫu CSS

Chúng tôi đã tạo một số mẫu W3.CSS đáp ứng để bạn sử dụng.

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của bạn.

Mẫu CSS miễn phí!

Bài tập CSS

Câu đố CSS

Kiểm tra kỹ năng CSS của bạn với một bài kiểm tra.

Bắt đầu câu đố CSS!

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools.

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm!

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi.

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

Khởi động sự nghiệp của bạn

Được chứng nhận bằng cách hoàn thành khóa họcthe course

Được chứng nhận

• tag#tênid { thuộc tính: giá trị; }
• Bắt buộc phải có ký tự dấu "#" và tênid
• Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }

Bắt buộc phải có ký tự dấu "." và tênclass

Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

• Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
• Trong file HTML bên trên, trong phần content và navi đều có tồn tại thành phần nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:
• Chúng ta có thể xem thêm các bộ chọn khác tại phần tham khảo.

Cách viết một comment trong file CSS

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

Trang chủ

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS
• Sử dụng CSS

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

• Html

  • index.html

  • css

    • style.css

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Tiêu đề trang web



Tiêu đề trang web

...Phần thân viết ở đây...
...Phần thân viết ở đây...

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

Html



Tiêu đề trang web

index.html
...Phần thân viết ở đây...

css

• style.css
• Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Tiêu đề trang web

...Phần thân viết ở đây...

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

p { color: red; float: left; padding-left: 10px; }

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Tiêu đề trang web

...Phần thân viết ở đây...

Html



Tiêu đề trang web

index.html

css

Nội dung navi