Sử dụng CSS

CSS là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML). Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên trang web như việc tạo ra các đoạn văn bản, các tiêu đề, hình ảnh,… thì CSS sẽ giúp chúng ta trang điểm lại các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…

pxemrem%

  • px không responsive.
  • em linh hoạt + có thể mở rộng + được dịch sang px.
    • Liên quan đến phần tử mà nó được sử dụng.
    • 1em = 16px (kích thước phông chữ mặc định của Google Chrome).
    • Thường được sử dụng cho headings, paragraphs, texts, các yếu tố liên quan đến (padding, margin).
  • rem linh hoạt + có thể mở rộng + được dịch sang px.
    • Liên quan đến kích thước phông chữ của HTML gốc.
    • Thay đổi kích thước phông chữ gốc -> thay đổi dự án giữ.
  • % liên quan với thành phần khác.
    • Thường được sử dụng cho các thuộc tính height, width,

CSS Property

text-transform

Ví dụ Mô tả
text-transform: none; Trả văn bản về dạng mặc định ban đầu.
text-transform: capitalize; Chữ cái đầu tiên của mỗi từ là chữ in hoa.
text-transform: uppercase; Tất cả chữ trong văn bản thành chữ in hoa.
text-transform: lowercase; Tất cả chữ trong văn bản thành chữ thường.
text-transform: inherit; Thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

display flex

Ví dụ Mô tả
display flex: flex; Giúp các thành phần linh hoạt.
display flex: inline-flex; Giúp các thành phần linh hoạt dưới dạng các inline.

Bootstrap

FontAwesome 5

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

.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

@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

$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

/* 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

.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;
    }
  }
}

Tham khảo thêm

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.