Thủ thuật CSS và những mẹo hay dành cho developer

0

CSS ra đời để giúp chúng ta thiết kế một giao diện website đẹp và linh hoạt. Tuy nhiên, thực tế cho thấy không phải ai cũng có thể sử dụng thành thạo CSS để xây dựng web. Bài viết này sẽ cung cấp cho bạn một số mẹo, kiến ​​thức và thủ thuật CSS tuyệt vời mà bạn nên nắm vững để có thể thành thạo CSS một cách dễ dàng.

Sử dụng bố cục Flexbox

Khi làm việc với CSS, một trong những yếu tố quan trọng nhất cần xem xét là phản hồi. Để làm điều này, sử dụng bố cục Flexbox sẽ được tối ưu hóa và đơn giản hơn so với inline và float.

Về cơ bản, Flexbox là một kiểu bố cục trang sẽ tự động cân bằng kích thước của các phần tử bên trong để có thể hiển thị đầy đủ nội dung trên mọi thiết bị.

Để định dạng những thùng đựng hàng như flexbox, chúng tôi sử dụng cấu trúc:

.thùng đựng hàng {

hiển thị: flex;

/ * Đừng quên thêm tiền tố trình duyệt Safari * /

hiển thị: -webkit-flex;

}

Ngày nay, các thuộc tính của Flexbox hoàn toàn phù hợp với các trình duyệt web của mọi thiết bị. Bạn cũng có thể điều chỉnh linh hoạt rất nhiều khi sử dụng thành thạo Flexbox. Khi đó, việc thiết kế giao diện website responsive sẽ vô cùng đơn giản.

Chi tiết về cách bố trí với Flexbox, bạn có thể tham khảo bài viết trên blog của Thachpham: https://thachpham.com/web-development/html-css/huong-dan-css3-flexbox-toan-tap.html

Sử dụng hộp viền cho mọi phần tử

Border-box là một loại giá trị của thuộc tính box-sizing. Những người mới chơi thường không biết giá trị này, mặc dù nó khá hữu ích. Sử dụng hộp viền cho tất cả các phần tử trên trang giúp việc tạo kiểu mọi thứ trở nên dễ dàng hơn và ít gặp vấn đề hơn.

Để hiểu những lợi ích của hộp viền, hãy cùng khám phá hai loại giá trị của thuộc tính kích thước hộp:

Hộp nội dung (giá trị mặc định): Bản thân nội dung đóng vai trò là hộp. Khi chúng ta đặt chiều rộng và chiều cao cho một phần tử, nội dung sẽ hiển thị kích thước đó. Ví dụ: khi phần tử có width = 100px và padding = 10px, nó sẽ chiếm diện tích 100 2 * 10 = 120px.

Hộp viền: cả phần đệm và đường viền đều được bao gồm chiều rộng và chiều cao. Với hộp đường viền, Phần tử có width = 100px và padding 10px tương tự như trường hợp trên, khi đó giá trị chiều rộng của phần tử chính xác là 100px.

Mình nghĩ bạn cần xem =>  Cách cài đặt, kết nối và sử dụng chuột trên iPad, iPhone

Luôn sử dụng border-box cho mọi phần tử sẽ giúp bạn tránh được nhiều rắc rối không đáng có khi thiết kế giao diện web.

Chỉ sử dụng lề dọc

Một trong những lời khuyên hữu ích nhất dành cho người mới bắt đầu học CSS là Chỉ sử dụng lề theo một hướng: trên hoặc dưới. Nhiều người có xu hướng chia đều lề cho hai phần tử trên dưới để hiển thị một khoảng cách nhất định. Tuy nhiên, đây là một cách làm sai lầm và sẽ không đạt được kết quả như mong muốn.

Không giống như hầu hết các thuộc tính CSS, margin có thuộc tính tự động kết hợp theo chiều dọc. Đó là khi phần đầu bên lề của một phần tử chạm vào phần bên dưới phần bên của phần tử khác, CSS sẽ chỉ hiển thị lợi nhuận lớn hơn của 2 lề trên, thay vì cộng chúng lại với nhau.

Hãy xem xét ví dụ:

HTML

CSS:

.Quảng trường {

chiều rộng: 80px;

chiều cao: 80px;

}

.red {

màu nền: # F44336;

margin-bottom: 40px;

}

.màu xanh da trời {

màu nền: # 2196F3;

margin-top: 30px;

}

Chúng tôi sẽ nhận được kết quả sau:

Hình vuông màu đỏ có lề đáy là 40 pixel, hình vuông màu xanh lục có lề đáy là 30. Tuy nhiên, thay vì hiển thị khoảng cách 70 pixel, CSS chỉ hiển thị khoảng cách 40 px, nghĩa là lề có giá trị lớn hơn.

Mặc dù có nhiều cách để giải quyết vấn đề này, nhưng cách đơn giản nhất là luôn sử dụng lề dọc theo một hướng trên trang: trên cùng hoặc dưới cùng. Thói quen của tôi là sử dụng margin-bottom.

Sử dụng CSS-reset

Giao diện web hiển thị khác nhau trên các trình duyệt khác nhau là điều không ai mong muốn. Tuy nhiên, điều này thường xảy ra khi chúng ta sử dụng các lệnh CSS không tương thích với một số trình duyệt nhất định.

Để khắc phục sự cố này, bạn có thể đặt lại giá trị CSS của tất cả các phần tử về giá trị mặc định của chúng. Điều này giữ cho biểu định kiểu “sạch” trở lại và hiển thị nhất quán trên tất cả các trình duyệt.

Một số thư viện làm tốt điều này là normalize.css, minireset và ress. Nó giúp sửa các điểm không nhất quán được hiển thị trong trình duyệt phía người dùng. Nếu bạn không muốn sử dụng các thư viện trên, bạn có thể tự đặt lại CSS bằng cách tắt margin và padding:

Mình nghĩ bạn cần xem =>  Hướng dẫn cài đặt Rkhunter quét rootkit trên CentOS

* {

lề: 0;

đệm: 0;

box-sizing: border-box;

}

Việc tắt lề và đệm sẽ xóa khoảng cách giữa các phần tử (nếu có). Sau đó, bạn có thể thoải mái tạo kiểu theo ý muốn.

Ngoài ra thuộc tính box-sizing: border-box sẽ tạo điều kiện cho khoảng cách giữa các thuộc tính (như đã đề cập ở trên).

Mẹo tạo đường viền cho bảng

Nếu bạn đã từng vật lộn với việc tạo kiểu bảng trong HTML thì bạn không đơn độc. Trên thực tế, các bảng HTML hoàn toàn không phản hồi và rất khó tạo kiểu.

Ví dụ: khi bạn muốn thêm đường viền vào bảng và các ô, bạn rất có thể gặp lỗi sau:

Tiêu đề Sự miêu tả
Chụp ảnh tự sướng với JavaScript Hướng dẫn nhanh bao gồm một cách thuần JavaScript để chụp ảnh trực tiếp trong trình duyệt bằng cách sử dụng các API gốc khác nhau và các kỹ thuật JS thú vị.
20 thư viện PHP tuyệt vời < / td>

Một bộ sưu tập thủ công gồm 20 thư viện mã nguồn mở chứa một số tài nguyên PHP hữu ích nhất và chất lượng hàng đầu.

bàn {

chiều rộng: 600px;

viền: 1px solid # 505050;

margin-bottom: 15px;

Màu: # 505050;

}

td {

viền: 1px solid # 505050;

đệm: 10px;

}

Vấn đề xảy ra là có quá nhiều thuộc tính biên giới ở khắp mọi nơi, lặp lại. Và chúng ta rất khó quản lý đường viền cho bảng trong trường hợp này.

Cách tốt nhất để đối phó với nó là thêm biên giới-sụp đổ: sụp đổ vào bảng như sau:

bàn {

chiều rộng: 600px;

viền: 1px solid # 505050;

margin-bottom: 15px;

Màu: # 505050;

biên giới-sụp đổ: sụp đổ; // dòng thêm viền-sập: sập;

}

td {

viền: 1px solid # 505050;

đệm: 10px;

}

Thành tích:

Sử dụng kebab-case

Một trong những lưu ý cho người mới bắt đầu làm CSS là về cú pháp:

– Các từ trong tên lớp và id phải được nối bằng dấu gạch ngang (-) nếu chứa nhiều hơn một chữ cái.

CSS không phân biệt chữ hoa chữ thường.

– Ban đầu, dấu gạch dưới (_) được sử dụng, nhưng ngày này không còn được hỗ trợ. Thay vào đó dấu gạch ngang mới là tiêu chuẩn (-)

/* Đúng */

.footer-column-left {}

/* Sai lầm */

.footerColumnLeft {}

.footer_column_left {}

Sử dụng nhận xét hiệu quả trong CSS

Một trong những chìa Key thành công của các nhà phát triển web sử dụng CSS là họ sử dụng CSS linh hoạt trong khi vẫn quản lý chặt chẽ các File CSS của họ. Để quản lý các File CSS cho việc xem xét và chỉnh sửa mã, bên cạnh việc tổ chức các File CSS hợp lý, bạn cần có thói quen sử dụng các chú thích một cách hiệu quả. Sau đó, nếu bạn cần xem lại mã, bạn sẽ biết mọi thứ nằm ở đâu, dùng để làm gì và cần phải làm gì để cải thiện.

Đối với các phần quan trọng của CSS, chẳng hạn như các thành phần chính hoặc truy vấn phương tiện, hãy sử dụng các chú thích cách điệu để dễ dàng nhận ra. Ví dụ:

/ * —————

#Header

————— * /

tiêu đề {}

điều hướng tiêu đề {}

/ * —————

#Trình chiếu

————— * /

.trình chiếu {}

Những chi tiết nhỏ hơn và ít quan trọng hơn, hãy bình luận đơn giản. Ví dụ:

/ * Nút chân trang * /

nút .footer {}

nút .footer: hover {}

Ngoài ra, hãy nhớ rằng CSS không có một dòng chú thích // duy nhất, vì vậy khi bình luận, bạn vẫn cần chú ý đến việc sử dụng cú pháp //.

/ * Nên * /

p {

đệm: 15px;

/ * border: 1px solid # 222; * /

}

/* Không nên */

p {

đệm: 15px;

// border: 1px solid # 222;

}

Theo Rapidsharefiles tổng hợp

>> Có thể bạn quan tâm: Bố cục trang linh hoạt hơn với CSS Flexbox

✤ Top 20 bài viết Thủ Thuật mới nhất :

Xem thêm nhiều Thủ Thuật mới hay

Leave A Reply

Your email address will not be published.