Mẹo CSS mà mọi lập trình viên đều cần biết

• 1 0

  Dùng text-transform

  Bạn có thể định dạng text thành dạng viết hoa, viết thường hoặc viết hoa toàn bộ bằng thuộc tính CSS text-transform.

  Viết hoa

  Code HTML:

  <p class="uppercase">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Code CSS:

  .uppercase {
  text-transform: uppercase;
  }

  Viết thường

  Code HTML:

  <p class="lowercase">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Code CSS:

  .lowercase {
  text-transform: lowercase;
  }

  Chữ in hoa

  Code HTML:

  <p class="capitalize">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Code CSS:

  .capitalize {
  text-transform: capitalize;
  }

• 2 0

  Cắt ngắn văn bản bằng dấu chấm lửng

  Bạn có thể cắt ngắn văn bản bị tràn ra ngoài bằng một dấu chấm lửng (…) nhờ thuộc tính CSS text-overflow.

  Code HTML:

  <p class="text">
  Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.
  </p>

  Code CSS:

  .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  }

• 3 0

  Ghi đè toàn bộ Style

  Bạn có thể ghi đè tất cả khai báo kiểu Style của một thuộc tính (bao gồm cả các kiểu nội tuyến) bằng cách dùng chỉ thị !important ở cuối của giá trị.

  Code HTML:

  <p class="className" id="idName" style="background-color: orange;">
  Hello World!
  </p>

  Code CSS:

  p {
  background-color: yellow;
  }
  .className {
  background-color: blue !important;
  }
  #idName {
  background-color: green;
  }

  Ở ví dụ này, quy tắc !important ghi đè tất cả khai báo background-color khác và đảm bảo mầu nền sẽ được tô màu xanh lam, không phải xanh lá.

• 4 0

  Chỉnh lại kích thước ảnh vừa khít với container div

  Bạn có thể chỉnh lại kích thước ảnh vừa khít một container div bằng các thuộc tính height, width và object-fit.

  Code HTML:

  <img class="random-image" src="https://picsum.photos/200/300" />

  Code CSS:

  .random-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
  }

• 5 0

  Hiệu ứng di chuột

  Bạn có thể thêm hiệu ứng di chuột vào một nhân tố HTML bằng :hover.

  Ví dụ: Thêm hiệu ứng di chuột vào một nút bấm.

  Code HTML:

  <button>Hover Over Me</button>

  Code CSS:

  button:hover {
  color: #0062FF;
  border: #0062FF solid 1px;
  background: #FFFF99;
  }

  Bạn có thể tùy chỉnh code này, thêm hiệu ứng như fade-in, grow-in, skew…

  Hiệu ứng làm mờ khi di chuột

  button{
  opacity:0.5;
  }
  button:hover{
  opacity:1;
  }

  Hiệu ứng làm trỏ chuột to dần

  button:hover{
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  }

• Trên đây là một số mẹo CSS cơ bản mà mọi lập trình viên đều nên biết. Hãy chia sẻ cùng độc giả Eballsviet.com những thủ thuật CSS khác mà bạn biết nhé!