Sử dụng CSS – Phan Nhật Chánh

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,…

px và em và rem và %

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.
Hãy sử dụng công cụ chuyển đổi Đơn vị CSS dưới đây nếu cần.

CSS Units converter

Công cụ chuyển đổi Đơn vị CSS

EM (Relative to the font-size of the element)

REM (Relative to font-size of the root element)

Pixel (1px = 1/96th of 1in)

Percent (Relative to the parent element)

Point (1pt = 1/72nd of 1in)

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;`	Giúp các thành phần linh hoạt.
`display: inline-flex;`	Giúp các thành phần linh hoạt dưới dạng các inline.

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

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