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

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 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;text-transform: none;`	Trả văn bản về dạng mặc định ban đầu.
`text-transform: capitalize;text-transform: capitalize;`	Chữ cái đầu tiên của mỗi từ là chữ in hoa.
`text-transform: uppercase;text-transform: uppercase;`	Tất cả chữ trong văn bản thành chữ in hoa.
`text-transform: lowercase;text-transform: lowercase;`	Tất cả chữ trong văn bản thành chữ thường.
`text-transform: inherit;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;display: flex;`	Giúp các thành phần linh hoạt.
`display: inline-flex;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;
}

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

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

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

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

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