Hướng dẫn css only websites - trang web chỉ 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. Show
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ươngHướ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;} H2 {& nbsp; & nbsp; màu: màu trắng; & nbsp; & nbsp; văn bản-align: trung tâm; } p {& nbsp; Phông chữ-gia đình: Verdana; & nbsp; & nbsp; kích thước phông chữ: 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ụ CSSTì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 menuChú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 CSSChú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 CSSCâu đố CSSKiể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ôiTheo 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 CSSTạ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 W3SchoolScertified.2022
Trong lúc mình có gắn cái khung nhận ý tưởng viết bài theo yêu cầu có độc giả, thì trong đó có đến 7% các yêu cầu viết bài liên quan đến việc cho giao diện website hiển thị theo dạng Responsive. Từ đó mình nhận thấy có rất nhiều độc giả ở đây vẫn chưa nắm được cách một giao diện website có thể hiển thị Responsive là như thế nào, nên trong bài này mình sẽ giải thích và hướng dẫn các bạn áp dụng Responsive vào website của mình. Yêu cầu kiến thứcTrong bài này mình chỉ nói qua Responsive nên các kiến thức cơ bản mình sẽ không nói qua, do vậy bạn cần chuẩn bị kiến thức HTML và CSS căn bản để có thể hiểu được trọn vẹn.HTML và CSS căn bản để có thể hiểu được trọn vẹn. Responsive là gì?Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ thông thường nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được. là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ thông thường nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được. Có thể bạn cho rằng chúng ta có thể gán giá trị chiều rộng từ tuyệt đối (800px) sang kiểu giá trị tương đối là phần trăm (%) thì có thể sẽ hiển thị tương ứng được. Điều này cũng đúng, nhưng giả sử website bạn có 3 cột trên một hàng thì liệu rằng trên trình duyệt di động, mắt thường của con người có thể thấy chi tiết mà không cần phóng to màn hình hay không? Do vậy, chúng ta sẽ muốn giao diện sẽ được hiển thị khác đi một xíu trên trình duyệt nhỏ hơn các trình duyệt thông thường, và Responsive là giải pháp làm việc này nhanh nhất và dễ nhất. Responsive hoạt động bằng cách chúng ta sẽ viết CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn bạn có thể thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa là 320px (điện thoại). Điều này có nghĩa là Responsive là một kỹ thuật thiết kế được xử lý từ client-side chứ không hề gửi truy vấn nào đến máy chủ để xử lý (server-side) nên nó có một nhược điểm là làm trình duyệt của bạn phải mất nhiều thời gian hơn để xử lý CSS. Vậy làm thế nào để áp dụng Responsive lên giao diện website?Để cho website của bạn trở thành Responsive, chúng ta có hai bước như sau: Bước 1. Khai báo meta viewportTrước tiên bạn cần đặt thẻ này vào cặp trên trong mã HTML của website. meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive. Ngoài ra thẻ meta viewport này còn có các giá trị như:
Tại sao lại sử dụng meta viewport? Hãy cứ xem ví dụ của một nội dung có meta viewport và không có meta viewport nhé. Bước 2. Viết CSS cho chiều rộng của thiết bịNgay tại bước này, chúng ta sẽ tiến hành viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel. Nhiều người có thể tính dựa trên đơn vị là em, rem, DPI, phần trăm,…nhưng nếu bạn là người mới thì cứ dùng pixel cho dễ nhé. Để viết CSS tương ứng cho chiều rộng của trình duyệt, chúng ta sẽ sử dụng thẻ truy vấn
Điều này có nghĩa là website của bạn mặc định sẽ có nền (background) màu trắng, nhưng khi thu nhỏ trình duyệt xuống còn từ 0px đến 320px thì nó sẽ có nền là màu xám với mã màu #e7e7e7. Trong đoạn trên, đoạn Ngoài ra, bạn cũng có thể thiết lập thêm nhiều điều kiện như: @media only screen and (min-width: 320px) and (max-width: 860px) {…} Tức là query này sẽ chỉ áp dụng cho màn hình desktop, máy tính bảng, smartphone và có kích thước màn hình tối thiểu là 320px nhưng nhỏ hơn 860px. Về các giá trị của media type và media features trong @media query, bạn có thể tham khảo thêm tại W3Schools cho đầy đủ hơn nhưng thông thường ta cứ viết CSS cho media type là screen và media features chỉ quanh quẩn min-width, max-width mà thôi. Làm sao để kiểm tra Responsive?Khi làm việc, bạn có thể kiểm tra Responsive bằng cách co giãn kích thước trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Mà mình sẽ khuyến khích các bạn sử dụng các công cụ hỗ trợ để kiểm tra, một trong những công cụ kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ sử dụng và gọn nhẹ. Hãy xem cách sử dụng bằng ảnh dưới: Danh sách các kích thước màn hình thiết bịKhi viết CSS cho giao diện Responsive, việc quan trọng nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông dụng để có thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng. Bạn có thể tham khảo các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:
Ví dụ cấu trúc CSS của một giao diện Responsive thông thường
Khái niệm Mobile-FirstKhi nói về làm giao diện Responsive thì bạn cũng cần nên biết qua khái niệm Mobile-first vì nó sẽ giúp quy trình làm giao diện Responsive của bạn nhanh hơn rất nhiều. Mobile-first nghĩa là tên một quy trình thiết kế mà chúng ta sẽ bắt đầu thiết kế cho giao diện ở điện thoại trước và sử dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng, desktop, retina,… Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng media features là min-width chứ không sử dụng cái gì khác. Mình có ví dụ sau: @media all and (min-width: 320px) { Điều này có nghĩa là các thiết bị có chiều rộng tối thiểu là 320px sẽ áp dụng các CSS bên trong, dĩ nhiên nó cũng sẽ bao gồm luôn giao diện máy tính bảng, desktop,… Và khi sử dụng quy trình mobile-first thì CSS của bạn sẽ có cấu trúc thế này: /* Dành cho điện thoại */ Thế tại sao lại nên sử dụng mobile-first? Có rất nhiều lý do như:
Một số kiến thức cần biết khi viết CSS Responsive
Cơ bản là chỉ vậy thôi, thực ra Responsive thì chỉ căng nhất là phần làm menu nhưng khi thực hành bạn sẽ nắm rõ chi tiết hơn. Lời kếtTrong bài này mình đã nói chi tiết qua khái niệm Responsive và cách triển khai một giao diện Responsive là như thế nào. Bây giờ bạn có thể thực hành bằng cách tạo một tập tin HTML đơn giản, rồi khai báo thẻ meta viewport rồi thử viết CSS để nắm rõ hơn về cách hoạt động của nó nhé. Hy vọng trong tương lai, mình sẽ có một tutorial làm một giao diện website HTML dạng Responsive hoàn chỉnh để bạn có thể tự thực hành. Và khi mà bạn đã nắm được cách làm một giao diện Responsive rồi thì việc làm theme WordPress hỗ trợ Responsive không còn quá khó khăn nữa. Mọi thứ sẽ được mình trình bày từ từ. Thạch PhạmBé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain". Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. |