Top 7 mẹo CSS tất cả người mới học CSS phải biết

CSS thực sự rất thú vị. Khi bạn đã học qua những điều cơ bản về CSS, chắc chắn bạn muốn lập tức chuyển sang level tiếp theo.

Tuy nhiên, ngoài việc thú vị, viết CSS cũng khá khó khăn. Vì vậy, bạn chắc cũng vấp phải những khó khăn thì thực hành viết CSS. Ở đây mình đã biên soạn một danh sách một số thủ thuật và kỹ thuật CSS rất hữu ích.

Mình sẽ liệt kê TOP 7 Mẹo CSS này vì mình thấy nó thực sự sẽ giúp bạn nhiều trong việc viết CSS..

Top 7 mẹo CSS tất cả người mới học CSS phải biết

#Mẹo CSS 1: Định vị tuyệt đối (Absolute positioning)

Nếu muốn kiểm soát chính xác vị trí của một phần tử trên trang web? Bạn có thể làm điều này bằng cách sử dụng định vị tuyệt đối (position: absolute;).

Ở đây cửa sổ trình duyệt sẽ được xem như một vùng giới hạn. Với mẹo CSS này, bạn có thể kiểm soát chính xác vị trí của các phần tử. Bạn có thể sử dụng top, right, bottom, left để xác định tọa độ cho phần tử đó.

.element1 {
  position:absolute;
  top:15px;
  right:15px

}

>>> Xem thêm ngay: CSS Nâng cao: Định vị Nâng cao (Advanced Positioning)

#Mẹo CSS 2: Sử dụng *+selector

Dấu * cho phép bạn chọn tất cả các phần tử của bộ chọn. Hãy xem xét *p làm ví dụ. Chỉ cần thêm một số style CSS vào *p và bạn sẽ thấy rằng tất cả các thành phần của bộ chọn trong document đều bị ảnh hưởng.

#Mẹo CSS 3: Ghi đè CSS

Chỉ sử dụng thủ thuật này khi thực sự cần thiết. Nếu bạn đang sử dụng nó liên tục, mã CSS của bạn sau này sẽ khó sửa chữa, bảo trì.

Khi bạn muốn ghi đè một số kiểu CSS, bạn có thể sử dụng !important với style đó.

Ví dụ:

.section h1 {color:blue !important;}

#Mẹo CSS 4: Căn giữa

Thủ thuật CSS này là khó. Nó phụ thuộc rất nhiều vào những gì bạn muốn căn giữa. Hãy cùng xem một số ví dụ:

Đối với Text:


Text-align:center;

Nếu bạn muốn căn giữa div hoặc một số phần tử khác, bạn cần thêm thuộc tính block và sau đó sử dụng margin: auto;

#div {
  display:block;
  margin:auto;
  …….
  …….
}

#Mẹo CSS 5: Căn dọc (Vertival Alignment)

Bạn sẽ cần sử dụng đến thủ thuật CSS này trong việc CSS menu điều hướng. Điều này được sử dụng để làm cho line-hight của văn bản và height của menu giống nhau.

.nav li {
  line-height:40px;
  height:50px;
}

#Mẹo CSS 6: Hiệu ứng Hover

Các di hiệu ứng được sử dụng cho các text link, buttons, icons, back sections của các trang web và nhiều hơn nữa.

Hiệu ứng này thay đổi màu sắc của một yếu tố di chuột qua nó. Bạn có thể thêm :hover để CSS.

Ví dụ:

.entry h1 {
  font-size: 24px;
  color: #000;
  font-weight: 600;
}

Chúng ta thêm hiệu ứng khi hover như sau:

.entry h1:hover {
  color: #f00;
}

Khi di chuột vào h1, màu sắc của nó bị thay đổi từ #000 sang #f00

#Mẹo CSS 7: Trạng thái liên kết (Link state)

Rất nhiều front-end Dev đã bỏ lỡ thủ thuật này. Không sử dụng thủ thuật này sẽ tạo ra các vấn đề về khả năng sử dụng với người dùng trang web.

:link pesudo-class xử lý style của các liên kết mà người dùng trang web chưa nhấp vào.

:visited pesuto-class được truy cập kiểm soát style của các liên kết đã được truy cập bởi người dùng trang web. Với trạng thái liên kết này, bạn có thể cho người dùng biết rằng họ đã truy cập một liên kết này trước đó.

Bạn có thể thực hiện như sau:

a:link {

  color: blue;
}

a:visited {
  color: purple:
}

Trên đây là Top 7 Mẹo CSS mà mình nghĩ tất cả người mới học CSS đề cần phải biết. Kể cả những người có kinh nghiệm nếu quên thì có thể xem lại để củng cố cách làm hiệu quả hơn.

>>> Tham khảo thêm: 12 Mẹo CSS Nâng cao