Sử dụng CSS

CSS là một ngôn ngữ được sử dụng để định dạng và tạo kiểu cho các tài liệu HTML, XHTML, XML và SVG. Nó được sử dụng để thay đổi màu sắc, kiểu chữ, kích thước, khoảng cách, độ dày, vị trí và nhiều thuộc tính khác của các thành phần trên trang web, bao gồm cả văn bản, hình ảnh, các khu vực chứa nội dung và các đối tượng khác.

CSS cho phép thiết lập các quy tắc kiểu được áp dụng cho các phần tử HTML bằng cách sử dụng các chọn lọc và khai báo kiểu. Nó cũng cho phép các kiểu được áp dụng cho các phần tử được xác định bởi ID hoặc lớp và cho phép kế thừa kiểu từ các phần tử cha.

CSS cung cấp các tính năng cho phép tạo các hiệu ứng động và các kiểu tương tác trên trang web, bao gồm cả các hiệu ứng chuyển động, độ mờ, chuyển tiếp và độ lớn khi người dùng tương tác với trang web.

CSS là một phần quan trọng của việc thiết kế web hiện đại và được sử dụng rộng rãi trong các trang web, ứng dụng web và các nền tảng khác.

px, em, rem và %

• px không responsive.
• em linh hoạt + có thể mở rộng + được quy đổi sang px.
  1. Liên quan đến phần tử mà nó được sử dụng.
  2. 1em = 16px (kích thước phông chữ mặc định của Google Chrome).
  3. Thường được sử dụng cho headings, paragraphs, texts, các yếu tố liên quan đến (padding, margin).
• rem Kích thước của các phần tử sử dụng đơn vị rem sẽ được quy đổi sang px phụ thuộc vào kích thước font chữ của phẩn tử gốc của trang (phần tử html) Ví dụ: html có font-size: 10px; vậy thì một phần tử trong đó có width: 10rem; đổi ra sẽ có width: 100px;
• % liên quan với thành phần khác, nó thường được sử dụng cho các thuộc tính height, width.
• Hãy sử dụng công cụ chuyển đổi đơn vị CSS dưới đây nếu cần.

CSS Units converter

CSS Property

text-transform

display flex

Tham khảo thêm cách sử dụng flexbox trong css.

Bootstrap

FontAwesome 5

Tham khảo thêm tại đây.

Copy to clipboard
.login:before {
  content: '\f007';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

SCSS/SASS

Xem tài liệu tham khảo chính thức. Bạn cũng có thể xem cách biên dịch scss sang css.

Mixin trong SASS

Copy to clipboard
@mixin column-count($ncol) {
  column-count: $ncol;
  -webkit-column-count: $ncol;
  -moz-column-count: $ncol;
  -moz-column-count: $ncol;
}

/* usage */
.custom {
  @include column-count(3);
}

Loop - Vòng lặp

Copy to clipboard
$imgage-sizes: 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;

@each $size in $imgage-sizes {
  .img-full-#{$size} {
    width: $size/100 * 100%;
  }
}

Đánh số Heading

Copy to clipboard
/* don't count h1, from h2 only */
body {
  counter-reset: h2counter;
}

.post-content {
  h1 {
    counter-reset: h2counter;
  }
  h2 {
    counter-reset: h3counter;
  }
  h3 {
    counter-reset: h4counter;
  }

  h2:before {
    content: counter(h2counter) '.\0000a0\0000a0';
    counter-increment: h2counter;
  }

  h3:before {
    content: counter(h2counter) '.' counter(h3counter) '.\0000a0\0000a0';
    counter-increment: h3counter;
  }

  h4:before {
    content: counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '.\0000a0\0000a0';
    counter-increment: h4counter;
  }
}

Đánh số Table of Content

Copy to clipboard
.post-content {
  counter-reset: item;
  list-style-type: none;
  ol {
    counter-reset: item;
    list-style-type: none;
  }
  li {
    &::before {
      content: counters(item, '.') '. ';
      counter-increment: item;
    }
  }
}

Sử dụng hình ảnh thay thế con trỏ chuột

Bạn đã từng thử sử dụng hình ảnh làm con trỏ chuột chưa?

Đây thực sự là một kỹ thuật thú vị, cho phép bạn biến một hình ảnh thành con trỏ chuột với tùy chọn dự phòng nếu hình ảnh không hoạt động.

Copy to clipboard
body {
  cursor: url(cursor.png), auto;
}

Tham khảo thêm

• Một số cách tốt nhất để căn giữa các phần tử trong CSS.
• Cách tạo một Loading Animation bằng CSS.
• Một số cách biên dịch SCSS sang CSS.
• Tùy chỉnh Google Custom Search với CSS.
• Một số kiểu CSS khi sử dụng <table>.