Bộ câu hỏi phỏng vấn CSS dành cho lập trình viên

Top 63 câu hỏi phỏng vấn CSS

CSS là gì?

CSS, viết tắt của "Cascading Style Sheets," là một ngôn ngữ tạo kiểu được sử dụng để xác định cách trình bày và thiết kế của một tài liệu được viết bằng ngôn ngữ đánh dấu như HTML hoặc XML. CSS là một trong những công nghệ nền tảng của World Wide Web, cùng với HTML và JavaScript. CSS được thiết kế để cho phép sự tách biệt giữa nội dung và trình bày, bao gồm bố cục, màu sắc, và phông chữ. Sự tách biệt này có thể cải thiện khả năng truy cập nội dung; cung cấp nhiều linh hoạt và kiểm soát hơn trong việc xác định đặc điểm trình bày; cho phép nhiều trang web chia sẻ định dạng bằng cách xác định CSS liên quan trong một tệp .css riêng biệt, giảm độ phức tạp và lặp lại trong nội dung cấu trúc; và cho phép tệp .css được lưu trong bộ nhớ cache để cải thiện tốc độ tải trang giữa các trang chia sẻ tệp và định dạng của nó.

CSS giúp giải quyết một vấn đề lớn mà HTML không được thiết kế để chứa các thẻ định dạng trang web. HTML được tạo ra để mô tả nội dung của một trang web, nhưng khi các thẻ như <font>, và các thuộc tính màu sắc được thêm vào trong thông số kỹ thuật HTML 3.2, nó đã bắt đầu một cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi thông tin về phông chữ và màu sắc được thêm vào mỗi trang đơn lẻ, trở thành một quá trình dài và tốn kém. Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra CSS. CSS đã loại bỏ định dạng kiểu từ trang HTML.

CSS được sử dụng để định nghĩa kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể trong hiển thị cho các thiết bị và kích thước màn hình khác nhau. CSS giúp tiết kiệm rất nhiều công sức bằng cách kiểm soát bố cục của nhiều trang web cùng một lúc. Các định nghĩa kiểu thường được lưu trong các tệp .css bên ngoài. Với một tệp kiểu bên ngoài, bạn có thể thay đổi vẻ ngoài của toàn bộ trang web chỉ bằng cách thay đổi một tệp duy nhất.

Có những các nào thêm CSS vào trang web?

Có ba cách phổ biến để thêm CSS vào trang web của bạn trong HTML:

1. Inline CSS

Inline CSS là cách thêm CSS trực tiếp vào thẻ HTML cần định dạng. Bạn sẽ sử dụng thuộc tính style của thẻ để khai báo các style CSS.

Ưu điểm: Áp dụng style nhanh chóng cho một đối tượng HTML cụ thể.

Nhược điểm: Không thể tái sử dụng cho nhiều thẻ HTML; làm tăng kích thước của tài liệu HTML và có thể làm giảm khả năng bảo trì.

Ví dụ:

html

<p style="color: red">Đây là đoạn văn có màu đỏ.</p>

2. Internal CSS

Internal CSS được thêm vào trong phần <head> của tài liệu HTML, sử dụng thẻ <style>. Phương pháp này cho phép bạn định dạng nhiều thẻ HTML trong một tài liệu.

Ưu điểm: Phân biệt rõ ràng giữa CSS và nội dung HTML; có thể sử dụng cho nhiều thẻ trong một tài liệu.

Nhược điểm: Chỉ áp dụng được trong phạm vi một tài liệu cụ thể; không thể tái sử dụng cho các trang khác.

Ví dụ:

html

<head>
<style>
  h1 {
    font-size: 18px;
    color: orange;
  }
</style>
</head>

3. External CSS

External CSS được viết trong một tập tin riêng biệt với phần mở rộng .css và sau đó được liên kết với tài liệu HTML thông qua thẻ <link> trong phần <head>.

Ưu điểm: Dễ dàng quản lý và tái sử dụng cho nhiều trang web; giảm kích thước của tài liệu HTML và cải thiện thời gian tải trang.

Nhược điểm: Trình duyệt cần thêm thời gian để tải tập tin CSS.

Ví dụ:

html

<head>
<link rel="stylesheet" href="styles.css">
</head>

Mỗi phương pháp có ưu và nhược điểm riêng, tùy thuộc vào mục tiêu và yêu cầu cụ thể của dự án mà bạn có thể chọn phương pháp phù hợp nhất

Bạn biết các đơn vị đo độ dài nào trong CSS và hãy giải thích về chúng?

Trong CSS, đơn vị đo độ dài được chia thành hai loại chính: tuyệt đối (absolute) và tương đối (relative). Mỗi loại có những đơn vị cụ thể với các ứng dụng và mục đích khác nhau. Dưới đây là một số đơn vị đo độ dài phổ biến trong CSS và giải thích về chúng:

Đơn vị tuyệt đối

Đơn vị tuyệt đối đại diện cho một đo lường cố định và không thay đổi tùy theo môi trường hiển thị:

px (Pixels): Đơn vị pixel là đơn vị phổ biến nhất trong CSS, với 1px được định nghĩa là 1/96 của 1 inch. Đơn vị này thường được sử dụng cho màn hình vì nó cho phép kiểm soát chính xác kích thước của các phần tử.
cm (Centimeters), mm (Millimeters), in (Inches), pt (Points), pc (Picas): Các đơn vị này dựa trên đo lường vật lý và thường được sử dụng trong thiết kế in ấn hơn là trên màn hình.

Đơn vị tương đối

Đơn vị tương đối đại diện cho một đo lường linh hoạt, thay đổi tùy theo một số yếu tố như kích thước của phần tử cha, kích thước màn hình, hoặc kích thước font chữ:

em: Đơn vị này tương đối với kích thước font của phần tử cha. Ví dụ, nếu kích thước font của phần tử cha là 16px, thì 1em sẽ tương đương với 16px.
rem: Tương tự như em, nhưng rem tương đối với kích thước font của phần tử gốc của tài liệu (thường là thẻ <html>).
vw (Viewport Width) và vh (Viewport Height): Đơn vị này tương đối với 1% của chiều rộng hoặc chiều cao của viewport (cửa sổ trình duyệt).
% (Phần trăm): Đơn vị này tương đối với kích thước của phần tử cha hoặc một số thuộc tính cụ thể khác tùy thuộc vào thuộc tính CSS đang được áp dụng.

Sử dụng đơn vị tương đối cho phép tạo ra các thiết kế web linh hoạt và phản hồi tốt trên các thiết bị và kích thước màn hình khác nhau. Trong khi đó, đơn vị tuyệt đối cung cấp sự kiểm soát chính xác hơn cho các tình huống cần đến đo lường cố định, như thiết kế cho in ấn.

Bạn biết những loại CSS selector nào?

Trong CSS, các selector (bộ chọn) là các mẫu được sử dụng để chọn các phần tử bạn muốn áp dụng kiểu dáng. Dưới đây là một số loại selector phổ biến:

Simple Selectors (Bộ chọn đơn giản)

Universal Selector (*): Chọn tất cả các phần tử.
Type Selector (element): Chọn tất cả các phần tử của một loại nhất định, ví dụ p.
Class Selector (.class): Chọn tất cả các phần tử có class nhất định, ví dụ .intro.
ID Selector (#id): Chọn một phần tử có ID nhất định, ví dụ #firstname.
Attribute Selector ([attribute=value]): Chọn các phần tử dựa trên thuộc tính và giá trị của nó, ví dụ [target="_blank"].

Combinator Selectors (Bộ chọn kết hợp)

Descendant Selector (element element): Chọn tất cả các phần tử con của một phần tử nhất định, ví dụ div p.
Child Selector (element>element): Chọn tất cả các phần tử con trực tiếp của một phần tử nhất định, ví dụ div > p.
Adjacent Sibling Selector (element+element): Chọn phần tử ngay sau một phần tử nhất định, cùng cấp với nó, ví dụ div + p.
General Sibling Selector (element~element): Chọn tất cả các phần tử cùng cấp sau một phần tử nhất định, ví dụ p ~ ul.

Pseudo-class Selectors (Bộ chọn giả lớp)

:first-child: Chọn mỗi phần tử là con đầu tiên của cha mẹ của nó.
:last-child: Chọn mỗi phần tử là con cuối cùng của cha mẹ của nó.
:nth-child(n): Chọn mỗi phần tử là con thứ n của cha mẹ của nó.
:nth-last-child(n): Chọn mỗi phần tử là con thứ n từ cuối lên của cha mẹ của nó.
:not(selector): Chọn mỗi phần tử không phải là phần tử được chỉ định bởi bộ chọn.

Pseudo-elements Selectors (Bộ chọn giả phần tử)

::first-letter: Chọn chữ cái đầu tiên của mỗi phần tử p.
::first-line: Chọn dòng đầu tiên của mỗi phần tử p.
::before: Chèn nội dung trước nội dung của mỗi phần tử được chọn.
::after: Chèn nội dung sau nội dung của mỗi phần tử được chọn

Grouping Selectors (Bộ chọn nhóm)

Selector List (,): Cho phép bạn áp dụng cùng một kiểu cho nhiều bộ chọn bằng cách liệt kê chúng và phân tách bằng dấu phẩy, ví dụ h1, h2, p

Các selector này cho phép bạn chọn các phần tử HTML dựa trên tên, ID, class, loại, thuộc tính, trạng thái, và mối quan hệ với các phần tử khác trong tài liệu. Sử dụng chúng một cách hiệu quả có thể giúp bạn tinh chỉnh kiểu dáng của trang web một cách chính xác.

Điểm khác nhau của ID selector và Class selector trong CSS là gì?

Trong CSS, ID selector và Class selector là hai loại bộ chọn được sử dụng để áp dụng các quy tắc kiểu cho các phần tử HTML, nhưng chúng có những điểm khác biệt cơ bản sau:

ID Selector

Độc nhất: Mỗi phần tử HTML trên một trang chỉ có thể có một ID duy nhất, và mỗi ID chỉ được sử dụng cho một phần tử trên trang[3].
Cú pháp: ID selector bắt đầu bằng ký tự # theo sau là tên ID. Ví dụ: #header sẽ chọn phần tử có id="header".
Độ ưu tiên cao: Trong CSS, ID selector có độ ưu tiên cao hơn so với class selector và các loại selector khác (ngoại trừ inline styles và !important).
Sử dụng hạn chế: Do tính độc nhất và độ ưu tiên cao, ID selector thường được sử dụng cho các phần tử cần một kiểu định dạng đặc biệt và không lặp lại trên trang.

Class Selector

Không độc nhất: Một class có thể được áp dụng cho nhiều phần tử HTML trên cùng một trang.
Cú pháp: Class selector bắt đầu bằng ký tự . theo sau là tên class. Ví dụ: .menu sẽ chọn tất cả các phần tử có class="menu".
Độ ưu tiên thấp hơn: Class selector có độ ưu tiên thấp hơn so với ID selector trong việc áp dụng các quy tắc CSS.
Sử dụng linh hoạt: Class selector thường được sử dụng để định dạng kiểu cho các phần tử có chung một nhóm tính chất hoặc kiểu dáng, và có thể được tái sử dụng trên nhiều phần tử.

Kết luận

Sử dụng ID selector khi bạn muốn định dạng một phần tử duy nhất và đặc biệt trên trang.
Sử dụng Class selector khi bạn muốn định dạng một nhóm phần tử có tính chất hoặc kiểu dáng tương tự và có khả năng tái sử dụng trên trang.

Sự khác biệt giữa inline, block và inline-block trong CSS là gì?

Trong CSS, inline, block, và inline-block là các giá trị của thuộc tính display mà xác định cách một phần tử được hiển thị trên trang web. Dưới đây là sự khác biệt giữa chúng:

Inline:

Phần tử inline không bắt đầu trên một dòng mới và chỉ chiếm không gian cần thiết cho nội dung của nó.
Không thể đặt chiều rộng và chiều cao trên các phần tử inline; chúng sẽ bị bỏ qua.
Margin và padding chỉ áp dụng theo chiều ngang (trái và phải), nhưng không ảnh hưởng đến chiều cao của dòng, ngoại trừ margin-top và margin-bottom, chúng không ảnh hưởng đến các phần tử inline.

Block:

Phần tử block bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (tức là, nó trải dài từ cạnh trái đến cạnh phải của phần tử chứa nó).
Có thể đặt chiều rộng và chiều cao trên các phần tử block.
Margin và padding áp dụng cho cả bốn hướng (trên, dưới, trái, phải), và margin-top và margin-bottom thực sự ảnh hưởng đến các phần tử block.

Inline-Block:

Phần tử inline-block là một sự kết hợp giữa inline và block. Nó đặt các phần tử trên cùng một dòng, giống như inline, nhưng vẫn cho phép đặt chiều rộng và chiều cao, giống như block.
Margin và padding hoạt động trên cả bốn hướng giống như block.
Inline-block rất hữu ích khi bạn muốn các phần tử nằm cạnh nhau và vẫn muốn kiểm soát kích thước của chúng.

Sự lựa chọn giữa inline, block, và inline-block phụ thuộc vào bố cục mà bạn muốn đạt được trong thiết kế trang web của mình.

Thẻ div và thẻ span khác nhau thế nào?

Thẻ span với thuộc tính display: inline và thẻ div với thuộc tính display:block. Chúng ta thường dùng thẻ span khi muốn các element nằm trên cùng 1 line. Không được đặt thẻ block vào trong thẻ inline được, nhưng ngược lại có thể đặt thẻ inline trong thẻ block. Ví dụ:

html

<div>
  Hi<span
    >I'm the start of the span element
    <div>I'm illegal</div>,
    I'm the end of the span</span
  >
  Bye I'm the end of the div
</div>

Thuộc tính !important trong CSS để làm gì?

Thuộc tính !important trong CSS được sử dụng để thêm trọng lượng (tầm quan trọng) hơn cho một thuộc tính/giá trị so với bình thường. Khi sử dụng !important, nó sẽ ghi đè lên TẤT CẢ các quy tắc định kiểu trước đó cho thuộc tính cụ thể đó trên phần tử.

Ví dụ, nếu có một quy tắc CSS đặt màu nền cho tất cả các đoạn văn bản là xanh, nhưng một quy tắc khác sử dụng !important để đặt màu nền là đỏ, thì màu nền đỏ sẽ được áp dụng bất chấp quy tắc xanh:

css

p {
  background-color: blue;
}

p {
  background-color: red !important;
}

Trong ví dụ trên, tất cả các đoạn văn bản sẽ có màu nền đỏ, ngay cả khi có các bộ chọn ID hoặc class có độ ưu tiên cao hơn.

Tuy nhiên, việc sử dụng !important nên được hạn chế vì nó có thể làm cho mã CSS trở nên rối rắm và khó debug, đặc biệt là khi có một style sheet lớn. Nó cũng có thể gây khó khăn trong việc bảo trì mã và làm giảm khả năng tái sử dụng mã CSS. Thay vào đó, nên cố gắng giải quyết các vấn đề về độ ưu tiên và đặc tính bằng cách sử dụng quy tắc độ ưu tiên và đặc tính CSS một cách tự nhiên.

Một số trường hợp sử dụng !important có thể chấp nhận được, chẳng hạn như khi bạn cần ghi đè một style không thể ghi đè theo cách khác, ví dụ như khi làm việc với một Hệ thống Quản lý Nội dung (CMS) mà bạn không thể chỉnh sửa mã CSS.

Thuộc tính nào được sử dụng để thay đổi dạng phông chữ trong CSS?

Thuộc tính được sử dụng để thay đổi dạng phông chữ trong CSS là font-family. Thuộc tính này cho phép bạn chỉ định dạng phông chữ cho một phần tử. Bạn có thể chỉ định một danh sách các phông chữ, được phân tách bằng dấu phẩy, để trình duyệt chọn sử dụng nếu phông chữ trước đó không khả dụng. Ví dụ:

css

p {
  font-family: "Times New Roman", Times, serif;
}

Trong ví dụ trên, nếu trình duyệt không thể hiển thị "Times New Roman", nó sẽ thử Times, và nếu Times cũng không khả dụng, nó sẽ chuyển sang sử dụng bất kỳ phông chữ serif nào khác có sẵn.

Đơn vị vh/vm trong CSS là gì?

Trong CSS, vh và vw là các đơn vị đo lường dựa trên kích thước của viewport (khung nhìn):

VH (Viewport Height): 1vh tương đương với 1% chiều cao của viewport. Ví dụ, nếu chiều cao viewport là 900px, 1vh sẽ bằng 9px.
VW (Viewport Width): 1vw tương đương với 1% chiều rộng của viewport. Ví dụ, nếu chiều rộng viewport là 1200px, 1vw sẽ bằng 12px.

Các đơn vị này rất hữu ích khi bạn muốn thiết kế giao diện web phản hồi (responsive design), vì chúng cho phép bạn đặt kích thước của các phần tử dựa trên tỷ lệ phần trăm của kích thước màn hình hiện tại, thay vì kích thước cố định.

Ngoài ra, còn có hai đơn vị liên quan khác là vmin và vmax:

VMIN (Viewport Minimum): 1vmin tương đương với 1% của kích thước nhỏ nhất giữa chiều cao và chiều rộng của viewport.
VMAX (Viewport Maximum): 1vmax tương đương với 1% của kích thước lớn nhất giữa chiều cao và chiều rộng của viewport.

Các đơn vị này giúp bạn có thêm sự linh hoạt khi thiết kế các phần tử để chúng phù hợp với màn hình hiển thị ở các kích thước khác nhau.

Có những cách nào để ẩn một phần tử trong CSS?

Có nhiều cách để ẩn một phần tử trong CSS, mỗi cách có những đặc điểm và ứng dụng riêng:

opacity: Đặt giá trị opacity của phần tử về 0 để làm cho phần tử trở nên trong suốt và không thể nhìn thấy, nhưng vẫn giữ nguyên vị trí và kích thước của nó trong bố cục trang.
css
```
element {
  opacity: 0;
}
```
display: Sử dụng display: none; để loại bỏ hoàn toàn phần tử khỏi bố cục trang, không chiếm không gian và không thể tương tác.
css
```
element {
  display: none;
}
```
visibility: Đặt visibility: hidden; để ẩn nội dung của phần tử nhưng vẫn giữ lại không gian mà phần tử đó chiếm trên trang.
css
```
element {
  visibility: hidden;
}
```
position: Sử dụng thuộc tính position kết hợp với left hoặc top để di chuyển phần tử ra khỏi màn hình.
css
```
element {
  position: absolute;
  left: -9999px;
}
```
transform: Sử dụng transform: scale(0); hoặc các biến thể khác của transform để làm cho phần tử không nhìn thấy được.
css
```
element {
  transform: scale(0);
}
```
clip-path: Áp dụng clip-path với giá trị làm cho phần tử không hiển thị.
css
```
element {
  clip-path: circle(0);
}
```
color Alpha Transparency: Sử dụng mã màu rgba() hoặc hsla() với giá trị alpha (độ trong suốt) là 0 để làm cho màu sắc của phần tử trở nên trong suốt.
css
```
element {
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
}
```

Mỗi phương pháp có những ưu và nhược điểm riêng, tùy thuộc vào mục đích sử dụng (ví dụ: ẩn mà vẫn giữ chỗ, ẩn hoàn toàn không chiếm chỗ, ẩn nhưng vẫn có thể tương tác, v.v.) và cần được chọn lựa sao cho phù hợp nhất với yêu cầu của bố cục trang web hoặc ứng dụng.

Margin và padding trong CSS khác nhau thế nào?

Trong CSS, margin và padding là hai thuộc tính quan trọng trong mô hình hộp (box model), nhưng chúng có những chức năng và ứng dụng khác nhau:

Margin:
- Đại diện cho khoảng cách bên ngoài của một phần tử, tức là khoảng trống xung quanh phần tử đó.
- Margin kiểm soát khoảng cách giữa các phần tử (các hộp) khác nhau và giữa phần tử với mép của màn hình.
- Margin có thể có giá trị âm, cho phép các phần tử chồng lên nhau hoặc di chuyển ra khỏi vị trí thông thường của chúng.
- Margin là hoàn toàn trong suốt và không ảnh hưởng bởi màu nền hoặc hình ảnh nền của phần tử.
Padding:
- Đại diện cho khoảng cách bên trong của một phần tử, tức là khoảng trống giữa nội dung của phần tử và biên (border) của nó.
- Padding kiểm soát không gian nội bộ xung quanh nội dung, có thể ảnh hưởng đến cách mà màu nền hoặc hình ảnh nền được hiển thị xung quanh nội dung.
- Padding không thể có giá trị âm và luôn tăng kích thước tổng thể của phần tử nếu được tăng lên.
- Padding ảnh hưởng bởi màu nền của phần tử, làm cho màu nền hoặc hình ảnh nền mở rộng ra theo không gian padding.

Khi nào sử dụng Margin và Padding:

Sử dụng margin để tạo khoảng cách giữa các phần tử với nhau hoặc với mép của màn hình, hoặc để căn chỉnh phần tử trong một bố cục.
Sử dụng padding để tạo không gian xung quanh nội dung bên trong phần tử, làm tăng kích thước hiển thị của phần tử đó hoặc để cải thiện khả năng đọc của nội dung bằng cách tạo ra không gian thoáng đãng.

Như vậy, sự khác biệt chính giữa margin và padding nằm ở vị trí của chúng liên quan đến phần tử: margin nằm bên ngoài biên của phần tử, trong khi padding nằm bên trong biên, giữa biên và nội dung của phần tử.

Trong CSS, làm sao để căn giữa một thẻ div trong một thẻ div khác?

Để căn giữa một thẻ div trong một thẻ div khác, có một số phương pháp khác nhau mà bạn có thể sử dụng tùy thuộc vào yêu cầu cụ thể của bạn và hỗ trợ trình duyệt. Dưới đây là một số cách phổ biến:

Sử dụng Flexbox

Flexbox là một cách hiện đại và linh hoạt để căn giữa các phần tử:

css

.parent {
  display: flex;
  justify-content: center; /* Căn ngang */
  align-items: center; /* Căn dọc */
}

.child {
  /* Chiều rộng và chiều cao có thể được thiết lập nếu cần */
}

Trong đoạn mã trên, .parent là class của thẻ div bên ngoài và .child là class của thẻ div bên trong.

Sử dụng Grid

CSS Grid cũng cung cấp một cách đơn giản để căn giữa các phần tử:

css

.parent {
  display: grid;
  place-items: center; /* Căn ngang và dọc */
}

.child {
  /* Chiều rộng và chiều cao có thể được thiết lập nếu cần */
}

Ở đây, place-items: center sẽ căn giữa .child cả về chiều ngang và chiều dọc bên trong .parent.

Sử dụng Position và Transform

Nếu bạn muốn sử dụng thuộc tính position, bạn có thể làm như sau:

css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Phương pháp này sử dụng transform để điều chỉnh vị trí của .child sao cho nó được căn giữa từ tâm của .parent.

Sử dụng Text-align và Margin Auto

Đối với việc căn ngang, bạn có thể sử dụng text-align: center trên .parent và margin: auto trên .child:

css

.parent {
  text-align: center;
}

.child {
  display: inline-block;
  margin: auto;
}

Lưu ý rằng text-align: center chỉ hoạt động với các phần tử nội tuyến hoặc inline-block, không với các phần tử block.

Chọn phương pháp phù hợp với yêu cầu của bạn và hỗ trợ trình duyệt mà bạn cần. Flexbox và Grid là các phương pháp hiện đại và được khuyến nghị sử dụng nếu hỗ trợ trình duyệt không phải là vấn đề.

Làm thế nào để chỉ định màu trong CSS?

Trong CSS, có nhiều cách để chỉ định màu sắc cho các phần tử HTML, bao gồm sử dụng tên màu, giá trị RGB, HEX, HSL, RGBA, và HSLA. Dưới đây là một số phương pháp phổ biến:

1. Sử dụng Tên Màu

Bạn có thể chỉ định màu sắc bằng cách sử dụng tên màu tiếng Anh được xác định trước. Ví dụ: red, blue, green.

css

p {
  color: blue;
}

2. Sử dụng Giá trị RGB

Màu sắc có thể được xác định bằng cách sử dụng kết hợp màu RGB, với giá trị từ 0 đến 255 cho mỗi màu đỏ (Red), xanh lá (Green), và xanh dương (Blue).

css

p {
  color: rgb(255, 0, 0); /* Màu đỏ */
}

3. Sử dụng Giá trị HEX

Màu sắc cũng có thể được xác định bằng giá trị HEX, bắt đầu bằng dấu # và theo sau là 6 ký tự (hoặc 3 ký tự nếu có thể gút gọn). Mỗi cặp ký tự đại diện cho một màu trong RGB.

css

p {
  color: #ff0000; /* Màu đỏ */
}

4. Sử dụng Giá trị HSL

Màu sắc có thể được xác định bằng cách sử dụng HSL (Hue, Saturation, Lightness), cho phép bạn chỉ định một màu dựa trên màu sắc (hue), độ bão hòa (saturation), và độ sáng (lightness).

css

p {
  color: hsl(0, 100%, 50%); /* Màu đỏ */
}

5. Sử dụng Giá trị RGBA và HSLA

Các giá trị RGBA và HSLA tương tự như RGB và HSL nhưng thêm một tham số alpha để chỉ định độ trong suốt của màu sắc.

css

p {
  color: rgba(255, 0, 0, 0.5); /* Màu đỏ với độ trong suốt 50% */
}

Mỗi phương pháp có ưu điểm riêng và việc lựa chọn phụ thuộc vào nhu cầu cụ thể của dự án. Sử dụng tên màu là cách đơn giản nhất nhưng kém linh hoạt. Giá trị RGB và HEX cho phép bạn chỉ định một phạm vi rộng lớn các màu sắc, trong khi HSL và HSLA cung cấp cách tiếp cận dựa trên màu sắc, độ bão hòa và độ sáng, giúp dễ dàng điều chỉnh màu sắc. RGBA và HSLA thêm khả năng điều chỉnh độ trong suốt, mang lại thêm lựa chọn cho việc thiết kế giao diện người dùng.

Kể tên bốn loại thuộc tính @media?

All -> Thuộc tính mặc định dùng cho tất cả thiết bị.
Screen -> sử dụng màn hình máy tính, điện thoại.
Print -> Sử dụng cho máy in.
Speech -> Sử dụng cho màn hình người đọc.

Các CSS selector sau đây có nghĩa là gì?

css

* div, p
* div p
* div ~ p
* div + p
* div > p

Ý nghĩa của chúng như sau:

div, p: Selector này ngụ ý chọn tất cả các phần tử div và tất cả các phần tử p.

html

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p> <!-- Will be selected -->
</div>
<p> paragraph 2</p> 
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Ở đây, tất cả các phần tử div và phần tử p sẽ được trình duyệt chọn bất kể cha mẹ của chúng hay chúng được đặt ở đâu. Các thẻ còn lại như h1 và span bị bỏ qua.

div p: Selector cho biết chọn tất cả các phần tử p nằm bên trong các phần tử div. Hãy xem xét một ví dụ dưới đây:

html

<h1>Heading 1</h1>
<div>
    Division 1
    <p> paragraph 1</p> <!-- Will be selected -->
    <div>
        <p> Inner Div Paragraph </p> <!-- Will be selected -->
    </div>
</div>
<p> paragraph 2</p>
<p> paragraph 3</p>
<div>
    Division 2
</div>
<span> Span 1 </span>

Ở dây, <p> paragraph 1</p> và <p> Inner Div Paragraph </p> sẽ được chọn bởi trình duyệt và thuộc tính được áp dụng. Phần còn lại sẽ không được chọn.

div ~ p: Selector này chọn tất cả các phần tử p có phần tử div đứng trước ở bất kỳ đâu.

html

<h1>Heading 1</h1>
<div>
   Division 1
   <p> paragraph 1</p>
</div>
<p> paragraph 2</p> <!-- Will be selected -->
<p> paragraph 3</p> <!-- Will be selected -->
<div>
   Division 2
</div>
<span> Span 1 </span>

Ở đây, các phần tử của paragraph 2 và paragraph 3 sẽ được chọn như được đánh dấu trong đoạn code trên.

div + p: Selector nàychọn tất cả các phần tử p được đặt ngay sau phần tử div.

html

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p>
</div>
<p> paragraph 2</p> <!-- Will be selected -->
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Trong trường hợp này, chúng ta có phần tử paragraph 2 ngay sau thẻ div. Do đó, chỉ phần tử đó sẽ được chọn.

div > p: Selector này chọn tất cả các phần tử p có div là cha trực tiếp. Trong cùng một ví dụ dưới đây:

html

<h1>Heading 1</h1>
<div>
	Division 1
	<p> paragraph 1</p> <!-- Will be selected -->
</div>
<p> paragraph 2</p> 
<p> paragraph 3</p> 
<div>
	Division 2
</div>
<span> Span 1 </span>

Chỉ <p> paragraph 1</p> được chọn trong trường hợp này vì nó có div là cha trực tiếp.

* { box-sizing: border-box } trong CSS để làm gì?

Thuộc tính * { box-sizing: border-box; } trong CSS được sử dụng để thay đổi cách tính toán chiều rộng và chiều cao tổng cộng của các phần tử. Khi sử dụng border-box, chiều rộng và chiều cao của phần tử sẽ bao gồm nội dung, padding và border, nhưng không bao gồm margin[6][7].

Sử dụng * làm bộ chọn phổ quát để áp dụng box-sizing: border-box cho tất cả các phần tử trên trang, bao gồm cả các pseudo-elements ::before và ::after. Điều này giúp cho việc thiết kế trở nên dễ dàng hơn vì bạn không cần phải thực hiện các phép tính phức tạp để tính toán chiều rộng cuối cùng của phần tử khi có padding và border[5].

Ưu điểm của việc sử dụng `box-sizing: border-box`:

Dễ dàng tính toán kích thước: Khi thiết kế, bạn không cần phải lo lắng về việc padding và border sẽ làm thay đổi kích thước cuối cùng của phần tử.
Nhất quán trong hiển thị: Phần tử sẽ chiếm không gian như bạn mong đợi, giúp bố cục trở nên dễ dàng hơn để quản lý và nhất quán trên các trình duyệt.
Tiết kiệm thời gian: Giảm thời gian cần thiết để debug và sửa chữa các vấn đề liên quan đến bố cục, đặc biệt là khi làm việc với các phần tử có padding và border.

Nhược điểm:

Không phải là mặc định: Mặc dù border-box mang lại nhiều lợi ích, nhưng nó không phải là giá trị mặc định (content-box là mặc định), do đó bạn cần phải đặt rõ ràng nó để thay đổi hành vi mặc định.
Cần phải áp dụng cho tất cả phần tử: Để đạt được sự nhất quán, bạn cần phải đảm bảo rằng box-sizing: border-box; được áp dụng cho tất cả các phần tử, điều này có thể không mong muốn trong một số trường hợp cụ thể.

:root pseudo-class trong CSS để làm gì?

Trong CSS, :root là một pseudo-class selector được sử dụng để chọn phần tử gốc cao nhất của một tài liệu. Trong HTML, phần tử gốc này luôn là phần tử <html>.

Sử dụng :root mang lại một số lợi ích:

Ưu tiên cao hơn: :root có độ ưu tiên (specificity) cao hơn so với việc sử dụng selector thông thường như html do nó được coi là một pseudo-class. Điều này có nghĩa là các quy tắc CSS được áp dụng thông qua :root sẽ có độ ưu tiên cao hơn trong trường hợp có sự xung đột.
Tính linh hoạt: Mặc dù trong HTML, :root tương đương với phần tử <html>, nhưng :root cũng có thể được sử dụng trong các ngữ cảnh khác như SVG hoặc XML, nơi phần tử gốc có thể không phải là <html>. Trong SVG, ví dụ, phần tử gốc sẽ là <svg>
Sử dụng với CSS Custom Properties: :root thường được sử dụng để khai báo các CSS Custom Properties (biến CSS), giúp tạo ra một tập hợp các giá trị có thể tái sử dụng trên toàn bộ tài liệu. Điều này giúp quản lý và cập nhật các giá trị màu sắc, font chữ, và các giá trị khác một cách dễ dàng

Ví dụ về việc sử dụng :root để khai báo biến CSS:

css

:root {
  --primary-color: #0000ff;
  --body-fonts: 'Helvetica', 'Arial', sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

Trong ví dụ trên, :root được sử dụng để khai báo một số biến CSS, sau đó các biến này được sử dụng trong các quy tắc CSS khác thông qua hàm var(). Điều này giúp quản lý các giá trị một cách trung tâm và dễ dàng thay đổi chúng khi cần

Tóm lại, :root là một công cụ mạnh mẽ trong CSS, cho phép bạn tăng cường tính linh hoạt và quản lý các giá trị CSS một cách hiệu quả trên toàn bộ tài liệu.

Giải thích khái niệm specificity trong CSS?

Trong CSS, specificity là một hệ thống xếp hạng hoặc điểm số xác định quy tắc kiểu nào sẽ được áp dụng cho một phần tử khi có nhiều quy tắc CSS cùng chỉ đến phần tử đó. Nếu có hai hoặc nhiều quy tắc CSS cùng áp dụng cho cùng một phần tử, quy tắc có giá trị specificity cao nhất sẽ "chiến thắng" và được áp dụng.

Specificity Hierarchy (Thứ tự ưu tiên)

Mỗi bộ chọn CSS có một vị trí trong thứ tự ưu tiên specificity dựa trên bốn danh mục sau:

Inline styles: Áp dụng trực tiếp trên thuộc tính style của phần tử HTML, có giá trị specificity là 1,000 điểm.
IDs: Bộ chọn dựa trên ID, ví dụ #navbar, có giá trị specificity là 100 điểm cho mỗi ID.
Classes, pseudo-classes, attribute selectors: Bộ chọn dựa trên class, pseudo-class, hoặc bộ chọn thuộc tính, ví dụ .test, :hover, [href], có giá trị specificity là 10 điểm cho mỗi class, pseudo-class, hoặc bộ chọn thuộc tính.
Elements and pseudo-elements: Bộ chọn dựa trên loại phần tử hoặc pseudo-element, ví dụ p, ::before, có giá trị specificity là 1 điểm cho mỗi phần tử hoặc pseudo-element.

Cách Tính Specificity

Để tính specificity, bạn bắt đầu từ 0 và cộng dồn điểm số dựa trên các loại bộ chọn:

Thêm 100 điểm cho mỗi ID.
Thêm 10 điểm cho mỗi class, pseudo-class, hoặc bộ chọn thuộc tính.
Thêm 1 điểm cho mỗi bộ chọn phần tử hoặc pseudo-element.

Quy tắc `!important`

Một ngoại lệ cho quy tắc specificity là sử dụng !important, nó sẽ ghi đè tất cả các quy tắc khác, kể cả inline styles. Tuy nhiên, việc sử dụng !important thường không được khuyến khích vì nó phá vỡ hành vi tự nhiên của bảng kiểu và làm cho việc bảo trì và gỡ lỗi trở nên khó khăn hơn.

Ví dụ

Nếu một phần tử HTML được chỉ định bởi cả bộ chọn ID và bộ chọn class, vì bộ chọn ID có specificity cao hơn, kiểu CSS thuộc về bộ chọn ID sẽ được áp dụng cho phần tử thay vì bộ chọn class.

Khi Các Quy Tắc Có Specificity Bằng Nhau

Nếu các quy tắc CSS có cùng specificity, quy tắc xuất hiện sau cùng trong tài liệu sẽ được áp dụng.

Specificity là một khái niệm quan trọng trong CSS vì nó giúp xác định cách các quy tắc CSS được áp dụng và làm thế nào để ghi đè các quy tắc khi cần thiết. Hiểu rõ về specificity giúp bạn viết CSS một cách hiệu quả hơn và tránh được các vấn đề phức tạp khi các quy tắc CSS xung đột với nhau.

Calc trong CSS dùng để làm gì?

Trong CSS, hàm calc() cho phép bạn thực hiện các phép tính khi xác định giá trị cho các thuộc tính CSS. Hàm này có thể được sử dụng với các giá trị như <length>, <frequency>, <angle>, <time>, <percentage>, <number>, hoặc <integer>. Hàm calc() nhận một biểu thức duy nhất làm tham số, và kết quả của biểu thức này sẽ được sử dụng làm giá trị cho một thuộc tính CSS.

Cách Hoạt Động

Biểu thức: Bạn có thể kết hợp các toán hạng trong biểu thức sử dụng các toán tử như +, -, *, /. Khi biểu thức chứa nhiều toán hạng, calc() sẽ áp dụng các quy tắc ưu tiên toán tử tiêu chuẩn.
Kết hợp đơn vị: Một trong những tính năng mạnh mẽ của calc() là khả năng kết hợp các đơn vị đo lường khác nhau trong cùng một biểu thức, ví dụ như kết hợp phần trăm và pixel.

Ứng Dụng

Điều chỉnh kích thước: calc() thường được sử dụng để điều chỉnh kích thước của các phần tử dựa trên các giá trị động, như trừ đi một khoảng cách cố định từ 100% chiều rộng của phần tử cha.
Tạo bố cục đáp ứng: Sử dụng calc() kết hợp với đơn vị viewport như vh và vw để tạo ra các bố cục đáp ứng, điều chỉnh kích thước phần tử dựa trên kích thước của viewport.

Lưu Ý

Tính tương thích trình duyệt: calc() được hỗ trợ rộng rãi bởi các trình duyệt hiện đại. Tuy nhiên, các trình duyệt cũ hơn như IE8 và bên dưới không hỗ trợ hàm này.
Sử dụng với các thuộc tính khác nhau: calc() có thể được sử dụng với nhiều thuộc tính CSS khác nhau, bao gồm width, height, margin, padding, font-size, và nhiều hơn nữa.

Ví dụ về sử dụng calc():

css

/* Điều chỉnh chiều rộng của một phần tử, trừ đi 80px */
.element {
  width: calc(100% - 80px);
}

/* Điều chỉnh kích thước font dựa trên viewport và một giá trị cố định */
.text {
  font-size: calc(1rem + 2vw);
}

Như vậy, calc() là một công cụ linh hoạt và mạnh mẽ trong CSS, giúp tạo ra các bố cục và kiểu dáng đáp ứng và tinh tế mà không cần phải viết mã CSS cứng nhắc và phức tạp

Có những cách nào để ẩn một phần tử với CSS?

Có nhiều cách để ẩn một phần tử trong CSS, mỗi cách có những ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến:

Sử dụng display: none;:
- Ẩn hoàn toàn phần tử khỏi trang và không chiếm không gian.
- Phần tử không thể tương tác và không ảnh hưởng đến bố cục của các phần tử khác.
Sử dụng visibility: hidden;:
- Ẩn phần tử nhưng vẫn chiếm không gian trong bố cục.
- Phần tử không thể tương tác nhưng không gian của nó vẫn được giữ nguyên.
Sử dụng opacity: 0;:
- Làm cho phần tử trở nên trong suốt nhưng vẫn chiếm không gian và có thể tương tác.
- Có thể sử dụng cho hiệu ứng chuyển đổi mờ dần.
Sử dụng position: absolute; hoặc position: fixed; kết hợp với thuộc tính left hoặc top để di chuyển phần tử ra khỏi màn hình:
- Phần tử vẫn chiếm không gian trong bố cục nhưng được di chuyển ra khỏi vùng nhìn thấy của người dùng.
- Cách này ít được sử dụng hơn vì có thể gây ra vấn đề với bố cục trang.
Sử dụng clip hoặc clip-path để cắt phần tử:
- Cắt một phần của phần tử để nó không hiển thị.
- Cách này thường được sử dụng cho mục đích thiết kế hoặc hiệu ứng đặc biệt.
Sử dụng transform: scale(0);:
- Thu nhỏ phần tử đến điểm không thể nhìn thấy.
- Phần tử vẫn chiếm không gian nhưng không hiển thị.

Mỗi phương pháp có những ứng dụng và hậu quả khác nhau đối với bố cục và tương tác của trang. Lựa chọn phương pháp phù hợp tùy thuộc vào mục đích cụ thể của bạn khi muốn ẩn phần tử

Làm sao để căn chỉnh nội dung của thẻ <p> nằm ngay trung tâm của thẻ <div> trong CSS?

Để căn chỉnh nội dung của thẻ <p> nằm ngay trung tâm của thẻ <div>, bạn cần căn chỉnh cả theo chiều ngang (horizontal) và chiều dọc (vertical). Dưới đây là một số cách thực hiện:

Sử dụng Flexbox

Flexbox là một cách hiện đại và linh hoạt để căn chỉnh các phần tử. Bạn có thể sử dụng display: flex trên thẻ <div> và sau đó sử dụng justify-content: center để căn ngang và align-items: center để căn dọc.

css

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Hoặc bất kỳ giá trị nào bạn muốn */
}

Sử dụng Position và Transform

Một cách khác là sử dụng position: relative cho thẻ <div> và position: absolute cùng với transform: translate(-50%, -50%) cho thẻ <p>. Điều này sẽ đặt thẻ <p> chính giữa thẻ <div>.

css

div {
  position: relative;
  height: 100px; /* Hoặc bất kỳ giá trị nào bạn muốn */
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sử dụng Text-Align và Padding (Chỉ căn ngang)

Nếu bạn chỉ muốn căn ngang, bạn có thể sử dụng text-align: center cho thẻ <div>. Để căn dọc, bạn có thể thêm padding cho thẻ <p> nhưng phương pháp này chỉ hiệu quả khi bạn biết chính xác kích thước của nội dung.

css

div {
  text-align: center;
  height: 100px; /* Hoặc bất kỳ giá trị nào bạn muốn */
}

p {
  padding-top: 40px; /* Điều chỉnh giá trị này dựa trên nhu cầu */
}

Lưu ý rằng, để các phương pháp trên hoạt động hiệu quả, bạn cần đảm bảo rằng thẻ <div> có một chiều cao xác định. Flexbox là phương pháp được khuyến nghị nhất vì nó dễ dàng và linh hoạt hơn trong việc căn chỉnh các phần tử, đặc biệt khi làm việc với các layout phức tạp

Opacity được quy định như thế nào trong CSS3?

Trong CSS3, thuộc tính opacity được sử dụng để xác định độ mờ của một phần tử. Độ mờ là mức độ mà nội dung phía sau một phần tử bị ẩn đi, và là ngược lại của tính minh bạch. Giá trị của thuộc tính opacity có thể là một số trong khoảng từ 0.0 đến 1.0 hoặc một phần trăm trong khoảng từ 0% đến 100%, biểu diễn độ mờ của kênh (tức là giá trị của kênh alpha của nó). Bất kỳ giá trị nào nằm ngoài khoảng này, mặc dù hợp lệ, cũng sẽ được điều chỉnh về giới hạn gần nhất trong khoảng.

Giá trị 0 có nghĩa là phần tử hoàn toàn trong suốt (tức là, không thấy được).
Bất kỳ giá trị số nào nằm giữa 0 và 1 có nghĩa là phần tử mờ đi (tức là, nội dung phía sau phần tử có thể được nhìn thấy).
Giá trị 1 (giá trị mặc định) có nghĩa là phần tử hoàn toàn không trong suốt (có vẻ ngoài đặc).

Thuộc tính opacity áp dụng cho toàn bộ phần tử, bao gồm cả nội dung của nó, mặc dù giá trị không được kế thừa bởi các phần tử con. Do đó, phần tử và các phần tử con của nó đều có cùng độ mờ so với nền của phần tử, ngay cả khi chúng có độ mờ khác nhau so với nhau.

Nêu những điểm khác nhau giữa CSS và CSS3?

CSS và CSS3 đều là công cụ thiết kế web quan trọng, giúp tạo kiểu và bố cục cho các trang web. Tuy nhiên, có một số điểm khác biệt cơ bản giữa chúng:

CSS (Cascading Style Sheets)

Mục đích chính: Cung cấp kiểu dáng và bố cục cho trang web, bao gồm màu sắc, bố cục, hình nền, kiểu chữ và thuộc tính đường viền.
Tính năng: CSS cung cấp khả năng kiểm soát nội dung, tăng cường khả năng truy cập, cải thiện linh hoạt và kiểm soát đặc điểm trình bày.
Hỗ trợ: CSS được hỗ trợ bởi tất cả các trình duyệt hiện đại nhưng có thể gặp vấn đề tương thích với các phiên bản trình duyệt cũ.

CSS3 (Cascading Style Sheets Level 3)

Mục đích chính: Là phiên bản nâng cao của CSS, CSS3 được sử dụng cho cùng mục đích nhưng với các tính năng cập nhật và hiện đại hơn.
Tính năng mới: CSS3 bổ sung nhiều tính năng mới như animations, gradients, transitions, và hỗ trợ thiết kế đáp ứng (responsive design).
Module: CSS3 được chia thành nhiều module, giúp dễ dàng học và sử dụng hơn. Các module này bao gồm Box Model, Text Effects, Animations, và nhiều hơn nữa.
Hỗ trợ màu sắc và gradient: CSS3 hỗ trợ màu sắc RGBA, HSLA và gradient, cung cấp nhiều lựa chọn hơn cho việc thiết kế.
Tương thích: CSS3 tương thích ngược với CSS, nghĩa là mã CSS vẫn hợp lệ trong CSS3. CSS3 được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Điểm Khác Biệt Chính

Tính năng: CSS3 cung cấp các tính năng nâng cao và hiện đại hơn so với CSS, bao gồm animations, gradients, và hỗ trợ thiết kế đáp ứng.
Module: CSS3 được chia thành các module riêng biệt, làm cho việc học và sử dụng các tính năng trở nên dễ dàng hơn.
Hỗ trợ màu sắc: CSS3 hỗ trợ một loạt màu sắc và gradient phong phú hơn so với CSS.
Tương thích: CSS3 tương thích ngược với CSS, đảm bảo rằng mã CSS vẫn có thể chạy trên CSS3 mà không gặp vấn đề.

Tóm lại, CSS3 là phiên bản nâng cao và cập nhật của CSS, mang lại nhiều tính năng mới và hiện đại hơn, giúp việc thiết kế web trở nên linh hoạt và đa dạng hơn.

File splitting trong CSS là gì?

File splitting trong CSS là quá trình chia mã CSS của bạn thành nhiều tập tin nhỏ hơn thay vì giữ tất cả trong một tập tin lớn duy nhất. Mục đích của việc này là để cải thiện quản lý mã nguồn, tối ưu hóa việc tải trang và cải thiện hiệu suất bằng cách chỉ tải những phần CSS cần thiết cho một trang cụ thể.

Các lợi ích của file splitting bao gồm:

Dễ dàng quản lý và bảo trì: Khi mã CSS được chia thành các tập tin nhỏ hơn, việc tìm kiếm và bảo trì mã nguồn trở nên dễ dàng hơn. Bạn có thể nhanh chóng xác định và chỉnh sửa mã cho các phần cụ thể của trang web.
Tối ưu hóa hiệu suất: Khi chỉ tải những phần CSS cần thiết cho một trang, bạn giảm thiểu lượng dữ liệu cần tải xuống, giảm thời gian phân tích và render trang, từ đó cải thiện hiệu suất trang web.
Tận dụng bộ nhớ cache của trình duyệt: Khi một tập tin CSS không thay đổi, nó có thể được lưu trong bộ nhớ cache của trình duyệt, giúp tải trang nhanh hơn trong những lần truy cập sau.
Hợp tác làm việc: Trong một đội ngũ phát triển, việc chia mã CSS thành các tập tin riêng biệt giúp giảm thiểu xung đột khi nhiều người cùng làm việc trên cùng một dự án.

Để thực hiện file splitting, bạn có thể sử dụng các thẻ <link> khác nhau trong tài liệu HTML để liên kết với các tập tin CSS riêng biệt:

html

<link rel="stylesheet" type="text/css" href="header.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="footer.css" />

Tuy nhiên, cần lưu ý rằng việc chia tập tin CSS thành nhiều tập tin nhỏ hơn có thể dẫn đến việc tăng số lượng yêu cầu HTTP, điều này có thể ảnh hưởng đến thời gian tải trang nếu không được quản lý đúng cách. Với sự ra đời của HTTP/2, vấn đề này ít nghiêm trọng hơn do khả năng tải song song nhiều tài nguyên.

Giải thích CSS box model và các thành phần bố cục trong nó?

CSS Box Model là một mô hình quan trọng trong CSS, được sử dụng để thiết kế và bố cục các phần tử trên trang web. Nó bao gồm bốn thành phần chính: nội dung (content), đệm (padding), viền (border), và lề (margin)[3].

Các thành phần của CSS Box Model:

Content (Nội dung): Đây là khu vực chứa nội dung thực tế của phần tử, bao gồm văn bản, hình ảnh, hoặc các phương tiện truyền thông khác. Kích thước của khu vực nội dung có thể được điều chỉnh thông qua các thuộc tính width (chiều rộng) và height (chiều cao).
Padding (Đệm): Đệm là khoảng không gian xung quanh khu vực nội dung và bên trong viền. Đệm có thể được áp dụng cho tất cả các cạnh hoặc cho từng cạnh cụ thể (trên, phải, dưới, trái). Đệm là trong suốt và không hiển thị nội dung, nhưng nó ảnh hưởng đến kích thước tổng thể của phần tử.
Border (Viền): Viền bao quanh đệm và nội dung. Viền có thể được áp dụng cho tất cả các cạnh hoặc cho từng cạnh cụ thể. Viền có thể có màu sắc, kiểu dáng và độ rộng khác nhau.
Margin (Lề): Lề là khoảng không gian bên ngoài viền. Lề không có màu nền của riêng nó và hoàn toàn trong suốt. Lề hiển thị màu nền của phần tử, như phần tử body. Lề được sử dụng để tạo khoảng cách giữa các phần tử với nhau.

Khi bạn thiết lập các thuộc tính width và height cho một phần tử, bạn chỉ đang thiết lập kích thước của khu vực nội dung. Để tính toán kích thước tổng thể của phần tử, bạn cần phải bao gồm cả đệm và viền. Ví dụ, nếu một phần tử có width: 320px, height: 50px, padding: 10px, border: 5px solid gray, và margin: 0, thì kích thước tổng thể của phần tử sẽ là width: 350px (320 + 10 + 10 + 5 + 5) và height: 80px (50 + 10 + 10 + 5 + 5).

Lưu ý rằng thuộc tính margin cũng ảnh hưởng đến tổng không gian mà phần tử chiếm trên trang, nhưng lề không được tính vào kích thước thực tế của phần tử. Kích thước tổng thể của phần tử dừng lại ở viền và không mở rộng vào lề.

Hiểu rõ về CSS Box Model là chìa khóa để có thể tạo ra các bố cục phức tạp hơn với CSS, hoặc để căn chỉnh các phần tử với nhau.

margin-top hoặc margin-bottom có ảnh hưởng đến các phần tử inline không? Tại sao?

Không, các thuộc tính margin-top và margin-bottom không ảnh hưởng đến các phần tử inline. Lý do chính là do bản chất của các phần tử inline trong CSS và cách chúng được hiển thị và xử lý trong mô hình bố cục của trang web.

Các phần tử inline được thiết kế để chảy trong một dòng văn bản, không làm gián đoạn dòng văn bản đó. Chúng chỉ chiếm không gian theo chiều ngang (từ trái sang phải) và không bắt đầu trên một dòng mới. Do đó, việc áp dụng margin-top hoặc margin-bottom không thay đổi vị trí dọc của các phần tử inline trong dòng văn bản, và vì vậy, không có tác động đến cách chúng được hiển thị.

Tuy nhiên, margin-left và margin-right vẫn có thể được sử dụng để điều chỉnh khoảng cách giữa các phần tử inline theo chiều ngang. Điều này cho phép tạo khoảng cách giữa các phần tử inline mà không cần phải chuyển chúng sang phần tử block hoặc inline-block.

Nếu bạn muốn áp dụng khoảng cách trên hoặc dưới một phần tử inline, bạn có thể chuyển đổi phần tử đó thành inline-block hoặc block. Phần tử inline-block giữ tính chất inline nhưng cho phép áp dụng margin và padding theo cả chiều ngang và chiều dọc, trong khi phần tử block sẽ chiếm toàn bộ chiều rộng của phần tử cha và bắt đầu trên một dòng mới.

css

.inline-element {
  display: inline-block; /* Hoặc display: block; tùy thuộc vào nhu cầu */
  margin-top: 10px;
  margin-bottom: 10px;
}

Việc chọn lựa giữa inline, inline-block, và block phụ thuộc vào bố cục và mục tiêu thiết kế của bạn.

Điểm khác biệt giữa width: auto và width: 100% trong CSS là gì?

Trong CSS, width: auto và width: 100% đều là các thuộc tính liên quan đến chiều rộng của một phần tử, nhưng chúng hoạt động khác nhau:

Width: Auto

Khi giá trị của width là auto, phần tử sẽ tự động điều chỉnh chiều rộng của mình để phù hợp với nội dung bên trong hoặc sử dụng không gian có sẵn, sau khi đã trừ đi các khoảng cách như margin, padding và border.
Đây là giá trị mặc định cho các phần tử cấp block, nghĩa là chúng sẽ mở rộng để chiếm toàn bộ không gian ngang có sẵn trong phần tử cha của chúng, trừ khi có các khoảng cách khác được áp đặt.
width: auto có thể được sử dụng để "hủy" một giá trị chiều rộng cố định đã được thiết lập trước đó và trả về hành vi mặc định của phần tử.

Width: 100%

Khi bạn thiết lập width: 100% cho một phần tử, bạn đang chỉ định rằng chiều rộng của phần tử đó sẽ bằng 100% chiều rộng của phần tử cha của nó.
Điều này có nghĩa là phần tử sẽ cố gắng chiếm toàn bộ không gian ngang có sẵn, không tính đến các khoảng cách như margin hoặc padding, trừ khi bạn sử dụng box-sizing: border-box, khi đó padding và border sẽ được tính vào chiều rộng.
Sử dụng width: 100% có thể gây ra hiện tượng tràn nếu phần tử có các khoảng cách như margin hoặc padding mà không được tính đến.

Khi Nào Sử Dụng Mỗi Thuộc Tính

width: auto thường được sử dụng khi bạn muốn phần tử tự động điều chỉnh chiều rộng dựa trên nội dung của nó hoặc khi bạn muốn phần tử chiếm không gian còn lại mà không gây tràn.
width: 100% thường được sử dụng khi bạn muốn phần tử chiếm toàn bộ chiều rộng của phần tử cha, ví dụ như với các phần tử header, footer hoặc khi bạn muốn ghi đè một giá trị chiều rộng cố định nào đó.

Tóm lại, width: auto làm cho phần tử chiếm không gian dựa trên nội dung hoặc không gian có sẵn, trong khi width: 100% làm cho phần tử chiếm 100% chiều rộng của phần tử cha, có thể gây ra tràn nếu không cẩn thận với các khoảng cách như margin và padding.

Trong CSS z-index là gì? Nó hoạt động như thế nào?

Trong CSS, z-index là một thuộc tính quy định thứ tự xếp chồng (stack order) của một phần tử. Phần tử có thứ tự xếp chồng cao hơn luôn nằm phía trước phần tử có thứ tự xếp chồng thấp hơn. Điều này cho phép các nhà phát triển kiểm soát phần tử nào sẽ hiển thị trên cùng khi các phần tử trùng lặp hoặc chồng lên nhau.

Cách Hoạt Động

Chỉ áp dụng cho phần tử đã được định vị: z-index chỉ hoạt động trên các phần tử đã được định vị (positioned elements), bao gồm position: absolute, position: relative, position: fixed, hoặc position: sticky và các phần tử con trực tiếp của display: flex.
Giá trị: z-index có thể được thiết lập bằng một số nguyên (integer), bao gồm cả số âm. Một giá trị cao hơn đồng nghĩa với việc phần tử sẽ nằm trên các phần tử có giá trị z-index thấp hơn trong không gian ba chiều.
Tạo stacking context: Một phần tử với z-index không phải là auto sẽ tạo ra một stacking context mới, nghĩa là z-index của các phần tử con sẽ được so sánh với nhau trong phạm vi của phần tử đó, không phải với các phần tử bên ngoài.

Ví Dụ

Thay đổi thứ tự xếp chồng: Bạn có thể sử dụng z-index để thay đổi thứ tự xếp chồng của các phần tử chồng lên nhau. Ví dụ, nếu bạn muốn một phần tử div nằm trên một phần tử khác, bạn có thể đặt z-index của nó cao hơn.

Lưu Ý

Không ảnh hưởng nếu không định vị: Nếu không định vị phần tử (position: static, là giá trị mặc định), z-index sẽ không có tác dụng.
Thứ tự mặc định: Nếu hai phần tử chồng lên nhau mà không có z-index được chỉ định, phần tử được định nghĩa sau cùng trong mã HTML sẽ hiển thị phía trên[4].

z-index là một công cụ mạnh mẽ trong CSS, cho phép các nhà phát triển web kiểm soát cách các phần tử được xếp chồng lên nhau trên trang, từ đó tạo ra các hiệu ứng trực quan phức tạp và tinh tế.

Trong CSS, làm thế nào để khôi phục giá trị mặc định của thuộc tính?

Trong CSS, để khôi phục giá trị mặc định của một thuộc tính, bạn có thể sử dụng một trong các từ khóa sau:

initial: Đặt giá trị của thuộc tính về giá trị khởi tạo mặc định của nó theo đặc tả CSS.
css
```
element {
  display: initial;
}
```
inherit: Đặt giá trị của thuộc tính để kế thừa từ phần tử cha.
css
```
element {
  display: inherit;
}
```
unset: Nếu thuộc tính là có thể kế thừa, unset sẽ đặt giá trị của nó để kế thừa từ phần tử cha; nếu không, nó sẽ đặt giá trị về giá trị khởi tạo mặc định.
css
```
element {
  display: unset;
}
```
revert: Đặt giá trị của thuộc tính về giá trị mà nó sẽ có nếu không có các quy tắc CSS tác động lên nó, tức là giá trị mặc định của trình duyệt hoặc giá trị do người dùng đặt, hoặc giá trị kế thừa, hoặc giá trị khởi tạo.
css
```
element {
  display: revert;
}
```

Trong đó, revert là từ khóa mới và hữu ích trong việc khôi phục các giá trị mặc định của trình duyệt, và nó được hỗ trợ bởi tất cả các trình duyệt hiện đại kể từ năm 2020. Đối với việc áp dụng cho tất cả các thuộc tính của một phần tử, bạn có thể sử dụng thuộc tính all kết hợp với một trong các từ khóa trên:

css

element {
  all: revert;
}

Lưu ý rằng việc sử dụng initial có thể không phản ánh chính xác giá trị mặc định của trình duyệt vì nó đặt giá trị về giá trị khởi tạo mặc định theo đặc tả CSS, không phải giá trị mặc định của trình duyệt

Sự khác biệt giữa CSS grid và flexbox trong CSS là gì?

CSS Grid và Flexbox là hai mô hình bố cục trong CSS được sử dụng để sắp xếp và căn chỉnh các phần tử trên trang web. Mặc dù chúng có thể được sử dụng cùng nhau, nhưng có những khác biệt quan trọng giữa hai mô hình này:

CSS Grid

Hai chiều (2D): CSS Grid cung cấp khả năng sắp xếp các phần tử theo cả chiều ngang và chiều dọc, tạo ra một hệ thống lưới hai chiều.
Cấu trúc lưới: Grid cho phép bạn tạo ra các lưới phức tạp với hàng và cột, và bạn có thể định vị chính xác các phần tử trong lưới này.
Tốt cho bố cục lớn: Grid thích hợp cho việc thiết kế bố cục lớn của trang web, như bố cục chính của một trang hoặc các phần tử phức tạp cần sắp xếp theo hàng và cột.

Flexbox

Một chiều (1D): Flexbox là một mô hình bố cục một chiều, nghĩa là nó tập trung vào việc sắp xếp các phần tử theo một trục duy nhất, hoặc là hàng (row) hoặc là cột (column).
Căn chỉnh và phân phối không gian: Flexbox cung cấp khả năng căn chỉnh và phân phối không gian giữa các phần tử trong một container một cách linh hoạt.
Tốt cho các thành phần UI: Flexbox thường được sử dụng cho các thành phần giao diện người dùng như thanh điều hướng, thanh công cụ, hoặc cho việc căn chỉnh các phần tử con bên trong một phần tử cha.

Khi nào sử dụng Grid và khi nào sử dụng Flexbox?

Sử dụng Grid: Khi bạn cần một bố cục phức tạp với nhiều hàng và cột, hoặc khi bạn cần định vị chính xác các phần tử trong một hệ thống lưới.
Sử dụng Flexbox: Khi bạn cần căn chỉnh các phần tử theo một trục duy nhất hoặc khi bạn cần một bố cục linh hoạt mà không cần đến cấu trúc lưới cố định.

Cả hai mô hình đều có thể tạo ra các bố cục đáp ứng và linh hoạt, nhưng việc lựa chọn giữa Grid và Flexbox phụ thuộc vào yêu cầu cụ thể của bố cục bạn đang thiết kế. Grid thường được ưu tiên cho bố cục tổng thể của trang, trong khi Flexbox thích hợp cho việc căn chỉnh các phần tử hoặc tạo bố cục cho các thành phần nhỏ hơn và linh hoạt hơn.

Trong CSS, phần tử Pseudo và các lớp Pseudo là gì?

Trong CSS, pseudo-elements và pseudo-classes là hai loại bộ chọn đặc biệt giúp bạn áp dụng kiểu dáng cho các phần tử HTML dựa trên các đặc điểm cụ thể của chúng mà không cần thêm các class hoặc ID vào mã HTML.

Pseudo-elements

Mục đích: Pseudo-elements cho phép bạn tạo kiểu cho một phần cụ thể của một phần tử, chẳng hạn như dòng đầu tiên hoặc chữ cái đầu tiên của một đoạn văn.
Cú pháp: Sử dụng hai dấu hai chấm :: theo sau là tên của pseudo-element. Ví dụ: p::first-line sẽ áp dụng kiểu dáng cho dòng đầu tiên của mỗi phần tử <p>.
Giới hạn: Bạn chỉ có thể sử dụng một pseudo-element trong một bộ chọn và nó phải xuất hiện sau tất cả các thành phần khác trong bộ chọn phức tạp hoặc hợp hợp mà nó là một phần.

Pseudo-classes

Mục đích: Pseudo-classes cho phép bạn chọn các phần tử dựa trên trạng thái cụ thể của chúng, chẳng hạn như khi chúng được hover bởi con trỏ chuột hoặc là phần tử đầu tiên của loại của mình.
Cú pháp: Sử dụng một dấu hai chấm : theo sau là tên của pseudo-class. Ví dụ: button:hover sẽ chọn một nút khi con trỏ chuột di chuyển qua nút đó.
Linh hoạt: Pseudo-classes có thể mô tả một loạt các trạng thái khác nhau và có thể được kết hợp với các bộ chọn khác để tạo ra các quy tắc kiểu dáng phức tạp.

Sự Khác Biệt Chính

Pseudo-elements được sử dụng để tạo kiểu cho một phần cụ thể của một phần tử, như là thêm nội dung trước hoặc sau nội dung của phần tử, hoặc tạo kiểu cho dòng đầu tiên hoặc chữ cái đầu tiên của một đoạn văn.
Pseudo-classes được sử dụng để tạo kiểu cho các phần tử dựa trên trạng thái của chúng, như khi chúng được hover, được focus, hoặc là phần tử đầu tiên hoặc cuối cùng trong một nhóm.

Cả hai đều là công cụ mạnh mẽ trong CSS, giúp bạn tạo kiểu dáng mà không cần thay đổi cấu trúc HTML của bạn

Các thuộc tính của overflow trong CSS? giải thích chúng?

Trong CSS, thuộc tính overflow quy định cách thức xử lý nội dung khi nó vượt quá kích thước của phần tử chứa (parent element). Thuộc tính này có thể được thiết lập với một số giá trị khác nhau để kiểm soát việc hiển thị nội dung vượt quá:

Các Giá Trị của Thuộc Tính `overflow`

visible: Đây là giá trị mặc định. Nội dung vượt quá sẽ không bị cắt bỏ và có thể hiển thị bên ngoài phần tử chứa.
css
```
overflow: visible;
```
hidden: Nội dung vượt quá sẽ bị cắt bỏ và không hiển thị. Không có thanh cuộn được thêm vào.
css
```
overflow: hidden;
```
scroll: Nội dung vượt quá sẽ bị cắt bỏ và thanh cuộn sẽ được thêm vào để xem phần nội dung bị ẩn, bất kể nội dung có vượt quá hay không.
css
```
overflow: scroll;
```
auto: Tương tự như scroll, nhưng thanh cuộn chỉ được thêm vào khi nội dung vượt quá kích thước của phần tử chứa.
css
```
overflow: auto;
```
clip: Nội dung vượt quá sẽ bị cắt bỏ, tương tự như hidden, nhưng không tạo ra một block formatting context mới.

Sử Dụng `overflow` với Hai Hướng

Thuộc tính overflow có thể được chỉ định bằng một hoặc hai giá trị từ các giá trị trên. Nếu chỉ định một giá trị, nó sẽ áp dụng cho cả hai hướng (ngang và dọc). Nếu chỉ định hai giá trị, giá trị đầu tiên áp dụng cho hướng ngang (overflow-x), và giá trị thứ hai áp dụng cho hướng dọc (overflow-y).

Lưu Ý

overflow chỉ hoạt động trên các phần tử block có kích thước xác định.
Trong một số trường hợp, như trên macOS, thanh cuộn có thể được ẩn mặc định và chỉ hiển thị khi sử dụng.
Sử dụng overflow-x và overflow-y để kiểm soát riêng lẻ việc hiển thị nội dung vượt quá theo hướng ngang hoặc dọc.

Ví dụ, để ẩn thanh cuộn ngang và thêm thanh cuộn dọc khi cần thiết, bạn có thể sử dụng:

css

element {
  overflow-x: hidden;
  overflow-y: auto;
}

Thuộc tính overflow và các giá trị của nó cung cấp sự linh hoạt trong việc kiểm soát cách thức hiển thị nội dung vượt quá, giúp tạo ra trải nghiệm người dùng tốt hơn trên các trang web và ứng dụng web.

Sự khác nhau giữa các thuộc tính position Fixed, Absolute, Relative, Static trong CSS là gì?

Trong CSS, thuộc tính position xác định cách một phần tử được định vị trong tài liệu. Có bốn giá trị chính cho thuộc tính này: static, relative, absolute, và fixed. Dưới đây là sự khác nhau giữa chúng:

Static:

Đây là giá trị mặc định cho mọi phần tử. Phần tử có position: static; sẽ theo dòng chảy bình thường của trang, và không bị ảnh hưởng bởi các thuộc tính top, right, bottom, và left.

Relative:

Phần tử có position: relative; được định vị tương đối so với vị trí bình thường của nó. Bạn có thể sử dụng top, right, bottom, và left để di chuyển phần tử từ vị trí ban đầu của nó, nhưng không làm ảnh hưởng đến vị trí của các phần tử khác.

Absolute:

Phần tử có position: absolute; sẽ bị loại bỏ khỏi dòng chảy bình thường của trang và không chiếm không gian. Nó sẽ được định vị tương đối so với tổ tiên gần nhất có position không phải là static. Nếu không có tổ tiên như vậy, nó sẽ định vị tương đối so với <html>.

Fixed:

Phần tử có position: fixed; sẽ được định vị tương đối so với viewport, nghĩa là nó sẽ luôn ở cùng một vị trí ngay cả khi người dùng cuộn trang. Phần tử fixed cũng không chiếm không gian trong dòng chảy bình thường của trang.

Mỗi giá trị position này có những ứng dụng khác nhau tùy thuộc vào mục đích định vị và bố cục mà bạn muốn đạt được trong thiết kế web của mình.

CSS framework là gì?

CSS Framework là một bộ mã nguồn CSS đã được viết sẵn, bao gồm một số chức năng nhất định và được khai báo vào các class riêng. Mục đích của CSS Framework là hỗ trợ các nhà thiết kế và lập trình viên web trong việc thiết kế giao diện website một cách nhanh chóng, đẹp mắt và hiệu quả với thời gian ngắn. CSS Framework cung cấp một cấu trúc cơ bản, giúp người dùng dễ dàng áp dụng vào dự án của họ bằng cách thêm class của thành phần muốn sử dụng vào phần tử HTML cần thiết kế, ví dụ như thêm style cho một nút bấm.

CSS Framework thường được chia thành hai loại chính:

Grid System: Chỉ hỗ trợ chia cột trong website, giúp người dùng nhanh chóng tạo layout cho trang web mà không cần phải viết đi viết lại mã CSS. Thông thường, mỗi Grid System sẽ có từ 12 hoặc 24 cột trong một hàng, và người dùng có thể chỉ định một hàng sử dụng bao nhiêu cột trong grid system.
CSS UI Framework: Cung cấp một bộ các thành phần UI (User Interface) hoàn chỉnh, bao gồm CSS cho các nút bấm, menu, form, và thậm chí là các hiệu ứng Javascript. Loại framework này giúp xây dựng giao diện website một cách toàn diện, bao gồm cả file CSS và Javascript (nếu có) cùng với một tài liệu HTML mẫu.

Cách sử dụng CSS Framework thường bao gồm các bước sau:

Tải bộ framework về máy.
Nhúng các file CSS của framework vào tài liệu HTML cần thiết kế với thẻ <link>.
Thêm class của framework vào các phần tử HTML muốn sử dụng.

CSS Framework giúp tiết kiệm thời gian phát triển, đảm bảo tính tương thích giữa các trình duyệt, và giúp tạo ra các trang web responsive một cách dễ dàng. Tuy nhiên, việc sử dụng CSS Framework cũng đòi hỏi người dùng phải hiểu rõ về cấu trúc và cách thức hoạt động của framework để có thể tùy chỉnh và sử dụng một cách hiệu quả nhất.

rule set trong CSS là gì?

Trong CSS, một ruleset (đôi khi còn được gọi là rule) bao gồm một bộ chọn (selector) theo sau là một khối khai báo (declaration block). Mục đích của ruleset là áp dụng một tập hợp các thuộc tính với các giá trị cụ thể cho một hoặc một nhóm các phần tử cụ thể trong trang HTML liên kết.

Cấu trúc của một Ruleset:

Selector: Chỉ ra phần tử HTML mà bạn muốn áp dụng kiểu dáng.
Declaration Block: Là một khối bao gồm một hoặc nhiều khai báo (declarations), mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bởi dấu hai chấm và kết thúc bằng dấu chấm phẩy.
Declarations: Mỗi cặp tên thuộc tính/giá trị, được phân tách bởi dấu hai chấm và kết thúc bằng dấu chấm phẩy, là một khai báo.

Ví dụ về một Ruleset:

css

/* Đây là một ruleset */
p {
  color: red; /* Khai báo 1 */
  text-align: center; /* Khai báo 2 */
}

Trong ví dụ trên, p là selector, và khối bên trong dấu ngoặc nhọn { color: red; text-align: center; } là declaration block, bao gồm hai declarations: một đặt màu chữ là đỏ và một căn giữa văn bản.

Rulesets là những khối xây dựng cơ bản của một stylesheet CSS và là phần quan trọng nhất trong việc định nghĩa cách các phần tử HTML được hiển thị trên trang web.

Sự khác biệt giữa nth-child() và nth-of-type() trong CSS là gì?

Trong CSS, :nth-child() và :nth-of-type() là hai pseudo-class được sử dụng để chọn các phần tử dựa trên vị trí của chúng trong một nhóm các phần tử con của phần tử cha. Tuy nhiên, chúng có sự khác biệt quan trọng:

nth-child()

:nth-child() chọn tất cả các phần tử là con thứ n của phần tử cha của chúng, bất kể loại phần tử là gì.
Ví dụ, p:nth-child(2) sẽ chọn phần tử <p> nếu nó là phần tử con thứ hai của phần tử cha, không quan tâm đến loại của các phần tử con khác.

nth-of-type()

:nth-of-type() chọn tất cả các phần tử là con thứ n của một loại cụ thể trong phần tử cha của chúng.
Ví dụ, p:nth-of-type(2) sẽ chọn phần tử <p> thứ hai trong phần tử cha, không quan tâm đến vị trí tổng thể của nó trong số tất cả các phần tử con.

Sự Khác Biệt Chính

Khi sử dụng :nth-child(), bạn đang chọn phần tử dựa trên vị trí tổng thể của nó trong nhóm các phần tử con của phần tử cha, không phụ thuộc vào loại phần tử.
Khi sử dụng :nth-of-type(), bạn đang chọn phần tử dựa trên vị trí của nó trong số các phần tử cùng loại trong phần tử cha, không quan tâm đến các phần tử con khác không phải là loại đó.

Ví Dụ

Nếu cấu trúc HTML của bạn là:

html

<section>
  <h1>Words</h1>
  <p>Little</p>
  <p>Piggy</p>
  <!-- We want this one -->
</section>

p:nth-child(2) sẽ không chọn phần tử <p> nào cả vì phần tử con thứ hai là <h1>.
p:nth-of-type(2) sẽ chọn phần tử <p> thứ hai vì nó là phần tử <p> thứ hai trong phần tử cha.

Như vậy, :nth-of-type() thường ít "mong manh" hơn và hữu ích hơn trong nhiều trường hợp, bất chấp việc :nth-child() được sử dụng phổ biến hơn.

Normallizing trong CSS là gì?

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ, ngoài ra thì nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin,…và một cái quan trọng là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.

Do vậy khi viết CSS cho website, bạn nên đưa tất cả các giá trị của các phần tử trên website về bằng 0 hết và xóa một số định dạng có sẵn để khi cần chúng ta sẽ dùng CSS viết lại theo ý của mình để đảm bảo nó hiển thị tốt trên tất cả các trình duyệt. Việc làm này người ta gọi là Reset CSS.

Reset CSS như thế nào?

Nếu bạn muốn tự reset CSS đơn giản nhất thì hãy viết đoạn sau vào tập tin CSS là có thể đưa toàn bộ giá trị liên quan tới Box Model về 0.

css

* {
  padding: 0;
  margin: 0;
  border: none;
}

Nhưng như vậy có vẻ không tối ưu cho lắm, thay vì reset CSS như vậy thì chúng ta sẽ dùng các bộ Reset CSS có sẵn mà nhiều designer/developer chuyên nghiệp thường sử dụng.

Một số bộ Reset CSS thông dụng

Bạn có thể sử dụng các bộ reset CSS thông dụng dưới đây để tiết kiệm thời gian và tối ưu hơn. Cách sử dụng là copy code bỏ vào đầu file CSS của bạn.

normalize.css: Đây là bộ reset CSS thông dụng nhất hiện tại, phù hợp với cả HTML5 và CSS3. Đặc điểm của bộ này là sẽ điều chỉnh các phần tử trong website hiển thị phù hợp với tất cả các trình duyệt thông dụng, xóa bỏ toàn bộ margin và padding mặc định, có sẵn style cho các thẻ khá có ích như <sub>, <sup>, <code>,...

Reset CSS 2.0 by Eric Meyer: Nếu bạn cần một đoạn reset CSS đưa toàn bộ các phần tử website về “thời đồ đá”, không có bất cứ một định dạng gì thì có thể sử dụng bộ này. Bộ reset CSS này thích hợp cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc thiết lập kích thước chữ cho các thẻ tiêu đề.

Trong CSS, tại sao nên sử dụng import trên đầu tập tin?

Sử dụng @import ở đầu tập tin CSS có thể không phải là lựa chọn tốt nhất về mặt hiệu suất. Mặc dù @import có thể được sử dụng để nhập các tập tin CSS khác và có thể hữu ích trong một số trường hợp như sử dụng các media queries để áp dụng các style khác nhau cho các thiết bị khác nhau, hoặc khi nhập các font từ Google Fonts, nhưng nó cũng có thể gây ra một số vấn đề về hiệu suất.

Khi sử dụng @import, các tập tin CSS được nhập sẽ được tải một cách tuần tự, không phải song song, điều này có thể làm chậm quá trình tải trang. Điều này đặc biệt quan trọng khi các tập tin CSS được nhập chứa các nguồn lực quan trọng cho việc hiển thị trang, vì chúng có thể trở thành các nguồn lực chặn việc render, làm chậm thời điểm bắt đầu render của trang.

Một số nguồn khuyến nghị tránh sử dụng @import vì lý do hiệu suất và thay vào đó sử dụng thẻ <link> trong HTML để tải các tập tin CSS. Thẻ <link> cho phép trình duyệt tải các tập tin CSS một cách song song, giảm thiểu thời gian chờ và cải thiện thời gian tải trang.

Nếu bạn không thể chỉnh sửa tập tin CSS chứa @import, bạn có thể sử dụng thẻ <link rel="preload"> để giúp trình duyệt phát hiện (và tải) nguồn lực được nhập sớm hơn.

Tóm lại, việc sử dụng @import có thể chậm hơn so với việc sử dụng thẻ <link> vì nó tạo ra các yêu cầu HTTP tuần tự thay vì song song. Điều này có thể làm tăng thời gian tải trang và ảnh hưởng đến trải nghiệm người dùng. Do đó, nếu mục tiêu là tối ưu hóa hiệu suất, bạn nên cân nhắc sử dụng thẻ <link> hoặc các phương pháp khác để nhập CSS.

Trong CSS, border-box khác với content-box khác nhau như thế nào?

content-box là thuộc tính xác định giá trị mặc định cho kích thước hộp. Thuộc tính width và height chỉ bao gồm nội dung bằng cách loại trừ border và padding. Hãy xem xét một ví dụ như sau:

css

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
}

Ở đây, kích thước hộp cho phần tử div được cung cấp dưới dạng content-box. Điều đó có nghĩa là height và width được xem xét cho nội dung div sẽ loại trừ padding và border. Chúng ta sẽ nhận được đầy đủ các thông số chiều cao và chiều rộng được chỉ định cho nội dung như trong hình bên dưới.

border-box là thuộc tính bao gồm nội dung và padding, border trong thuộc tính height và width. Hãy xem ví dụ sau:

css

div{
    width:300px;
    height:200px;
    padding:15px;
    border: 5px solid grey;
    margin:30px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Ở đây, kích thước hộp cho phần tử div được cung cấp dưới dạng border-box. Điều đó có nghĩa là height và width được xem xét cho nội dung div cũng sẽ bao gồm phần border và padding. Điều này có nghĩa là chiều cao thực của nội dung div sẽ là:

CSS Preprocessor là gì?

CSS Preprocessor là một công cụ giúp lập trình viên viết mã CSS một cách nhanh chóng, hiệu quả và có cấu trúc rõ ràng hơn. Nó là một ngôn ngữ kịch bản mở rộng của CSS, cho phép sử dụng các biến, hàm, mixins, nesting, inheritance, và nhiều tính năng khác không có sẵn trong CSS thuần túy. CSS Preprocessor sau đó sẽ biên dịch (compile) mã nguồn này thành CSS thuần túy để trình duyệt có thể hiểu và áp dụng cho trang web.

Các CSS Preprocessor phổ biến bao gồm SASS/SCSS, LESS, Stylus, và PostCSS. SASS và SCSS là hai cú pháp khác nhau của cùng một preprocessor, với SCSS có cú pháp gần giống với CSS hơn và SASS có cú pháp ngắn gọn hơn.

Sử dụng CSS Preprocessor giúp lập trình viên có thể:

Tái sử dụng mã: thông qua việc sử dụng biến và mixins.
Tổ chức mã: bằng cách chia nhỏ mã thành nhiều file nhỏ hơn và sử dụng @import để kết hợp chúng.
Tối ưu hóa quy trình làm việc: với các tính năng như nesting, inheritance, và các hàm tiền xử lý khác.
Dễ dàng bảo trì và cập nhật: do cấu trúc mã nguồn rõ ràng và có tổ chức.

Ví dụ về cách sử dụng mixin trong SASS:

scss

@mixin colorVsStyle($color, $fontStyle) {
  color: $color;
  font-style: $fontStyle;
}

.navbar {
  ul.menu {
    list-style: none;
    li {
      padding: 5px;
      a {
        text-decoration: none;
        @include colorVsStyle(#000, italic);
      }
    }
  }
}

Và cách sử dụng @import để tổ chức mã:

scss

// _header.scss
#header {
  // viết code sass ở đây
}

// _body.scss
#body {
  // viết code sass ở đây
}

// _footer.scss
#footer {
  // viết code sass ở đây
}

// style.scss
@import 'header';
@import 'body';
@import 'footer';

Như vậy, CSS Preprocessor giúp việc viết và quản lý CSS trở nên dễ dàng và hiệu quả hơn, đặc biệt là trong các dự án lớn và phức tạp.

Thuộc tính float trong CSS thường dùng để làm gì?

Thuộc tính float trong CSS thường được sử dụng để định vị và định dạng nội dung, ví dụ như cho phép một hình ảnh nổi (float) về một phía của văn bản trong một container. Thuộc tính này có thể có một trong các giá trị sau: left, right, none, hoặc inherit. Khi một phần tử được đặt để nổi về một phía, nó sẽ được loại bỏ khỏi dòng chảy bình thường của trang, nhưng vẫn giữ một phần trong dòng chảy đó, cho phép văn bản và các phần tử nội tuyến bao quanh nó.

left: Phần tử sẽ nổi về phía bên trái của container của nó.
right: Phần tử sẽ nổi về phía bên phải của container của nó.
none: Phần tử sẽ không nổi, và sẽ được hiển thị ngay tại vị trí nó xuất hiện trong văn bản. Đây là giá trị mặc định.
inherit: Phần tử sẽ kế thừa giá trị float từ phần tử cha của nó.

Lưu ý rằng các phần tử được định vị tuyệt đối sẽ bỏ qua thuộc tính float. Ngoài ra, để tránh việc các phần tử tiếp theo bị ảnh hưởng bởi phần tử nổi, bạn có thể sử dụng thuộc tính clear hoặc kỹ thuật clearfix.

Thuộc tính flexbox trong CSS là gì?

Flexbox Layout (hay còn gọi là Flexible Box) là một kiểu bố cục trang có khả năng tự cân đối kích thước, thay đổi chiều rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Với bố cục thông thường, bạn cần phải thiết lập kích thước của phần tử, thiết lập hiển thị dạng block hay inline, cho nó float, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.

Các thuộc tính flexbox:

flex-direction: Thuộc tính này giúp xác định hướng container sẽ xếp chồng các mục cho linh hoạt. Các giá trị của thuộc tính này có thể là:
- row: xếp các mục theo chiều ngang từ trái sang phải trong flex container.
- column: xếp các mục theo chiều dọc từ trước ra sau trong flex container.
- row-reverse: xếp các mục theo chiều ngang từ phải sang trái trong flex container.
- column-reverse: xếp các mục theo chiều dọc từ sau ra trước trong flex container.
flex-wrap: Thuộc tính này chỉ định các mục flex nên được bọc hay không. Giá trị có thể là:
- wrap: mục flex nên được bọc.
- nowrap: giá trị mặc định này là mục không được bọc.
- wrap-reverse: chỉ định này cho biết mục sẽ được bọc nếu cần nhưng theo thứ tự ngược.
flex-flow: thuộc tính này thiết lập cả flex-direction và flex-wrap trong một dòng.
justify-content: dùng cho căn chỉnh mục. Các giá trị có thể:
- center: có nghĩa là các mục hiện ở trung tâm của container.
- flex-start: đây là giá trị mặc định, sẽ được căn chỉnh từ điểm bắt đầu container.
- flex-end: các mục sẽ được căn chỉnh từ điểm cuối của container.
- space-around: các mục sẽ được căn chỉnh với khoảng trắng giữa, trước và xung quanh các mục.
- space-between: các mục sẽ được căn chỉnh với khoảng trắng giữa các mục.
align-items: sử dụng cho căn chỉnh mục flex.
align-content: sử dụng cho căn chỉnh dòng flex.

Chiến lược mobile-first là gì?

Để reponsive một trang web có nghĩa là các phần tử sẽ thay đổi kích thước hoặc chức năng tuỳ theo kích thước màn hình của thiết bị, thường là thay đổi chiều rộng (width), thông qua các truy vấn media CSS, chẳng hạn như làm nhỏ kích thước phông chữ trên các thiết bị nhỏ hơn.

css

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}
@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Chiến lược mobile-first là một reponsive mà ta nên xác định các style trên thiết bị di động và chỉ thay đổi quy tắc cho các thiết bị khác sau. Ví dụ như:

css

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Chiến lược mobile-first có hai ưu điểm:

Nó hoạt động hiệu quả hơn trên thiết bị di động, vì tất cả các quy tắc áp dụng cho chúng không cần phải được xác thực dựa trên bất kỳ truy vấn media nào.
Nó buộc phải viết code rõ ràng hơn liên quan đến các quy tắc CSS reponsive.

Ví dụ

html

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Media Query</title>
  <style>
    body {
        background-color: lightgreen;
    }

    @media only screen and (max-width: 800px) {
        body {
            background-color: rgb(233, 50, 18);
        }
    }
  </style>
  </head>
<body>
    <h1>Resize the browser window</h1>
    <h2>When the width of this document is 800px or less, the background-color is "green", 
      otherwise it is "Red".</h2>
</body>
</html>

Hệ thống grid trong CSS là gì?

CSS Grid layout là một hệ thống layout 2 chiều (x,y) được dùng trong thiết kế UI. Theo định nghĩa từ Mozilla, grid (lưới) là một tổ hợp của những đường ngang và dọc cắt nhau – một nhóm xác định các cột và nhóm kia xác định các hàng. Các phần tử có thể được đặt lên grid, dựa vào các đường hàng và cột này.

Grid Item: Phần container bao gồm các grid items.
Grid Line: Đường thẳng theo chiều dọc và ngang để xây dựng cấu trúc grid.
Grid Cell: Đơn vị nhỏ nhất trong grid. Nó là không gian giữa các hàng và cột.
Rows: Là đường nằm ngang trong grid.
Columns: Là đường nằm dọc trong grid.
Gutter: Là độ rộng không gian của hàng hay cột trong grid.

Hãy giải thích sự khác biệt giữa các thuộc tính box-sizing trong CSS?

Trong CSS, thuộc tính box-sizing xác định cách tính toán chiều rộng và chiều cao tổng cộng của một phần tử. Có hai giá trị chính cho thuộc tính này là content-box và border-box.

`content-box` (Giá trị mặc định)

content-box là giá trị mặc định của thuộc tính box-sizing.
Khi sử dụng content-box, chiều rộng và chiều cao của phần tử chỉ áp dụng cho phần nội dung của nó, không bao gồm padding và border.
Điều này có nghĩa là padding và border sẽ được thêm vào bên ngoài chiều rộng và chiều cao đã xác định, làm tăng kích thước tổng cộng của phần tử trên màn hình.

`border-box`

border-box cho phép chiều rộng và chiều cao của phần tử bao gồm cả nội dung, padding và border.
Khi sử dụng border-box, kích thước tổng cộng của phần tử (bao gồm nội dung, padding và border) sẽ phù hợp với giá trị chiều rộng và chiều cao đã xác định.
Điều này giúp việc quản lý kích thước phần tử trở nên dễ dàng hơn, vì bạn không cần phải thực hiện các phép tính phức tạp để tính toán kích thước tổng cộng khi thêm padding và border.

So sánh và Lựa chọn

Sử dụng content-box có thể khiến việc quản lý kích thước phần tử trở nên phức tạp hơn, đặc biệt khi bạn muốn phần tử có kích thước chính xác sau khi thêm padding và border.
border-box thường được ưa chuộng trong phát triển web hiện đại vì nó giúp quản lý kích thước phần tử dễ dàng hơn và hỗ trợ tốt cho thiết kế đáp ứng.
Một số nhà phát triển chọn áp dụng border-box cho tất cả các phần tử trên trang bằng cách sử dụng bộ chọn phổ quát (*, *::before, *::after { box-sizing: border-box; }) để đơn giản hóa việc quản lý kích thước và bố cục.

Tóm lại, sự khác biệt chính giữa content-box và border-box nằm ở cách tính toán kích thước tổng cộng của phần tử, với border-box cung cấp một cách tiếp cận thực tế và dễ quản lý hơn cho việc thiết kế web.

Làm cách nào để tự động đánh số giá trị heading của section hay category bằng CSS?

Ta có thể dùng khái niệm CSS counter (bộ đếm). Điều này cho phép chúng ta điều chỉnh hình thức của nội dung dựa trên vị trí trong document. Để sử dụng nó, trước tiên chúng ta cần khởi tạo giá trị của thuộc tính counter-reset, giá trị này là 0 theo mặc định. Thuộc tính tương tự cũng được sử dụng để thay đổi giá trị thành bất kỳ số nào mà chúng ta cần. Sau khi khởi tạo, giá trị của bộ đếm có thể tăng hoặc giảm bằng cách sử dụng thuộc tính counter-increment. Tên của bộ đếm không được là các từ khóa CSS như none, initial, inherit, v.v. Nếu các từ khóa CSS được sử dụng, thì khai báo sẽ bị bỏ qua.

Ví dụ:

css

body {
  	counter-reset: header;   /* define counter named 'header' whose initial value is 0 by default */
}

h2::before {
	counter-increment: header;   /* The value of header counter by 1.*/
	content: "Header " counter(header) ": ";  /* To display word Header and the value of the counter with colon before it.*/
}

Liệt kê những ưu điểm và nhược điểm của External Style Sheets?

Ưu điểm của External Style Sheets

Kiểm soát phong cách của nhiều tài liệu từ một file: Sử dụng External Style Sheets cho phép bạn quản lý phong cách của nhiều trang web từ một file CSS duy nhất.
Tái sử dụng và tổ chức mã: Các class có thể được tạo ra để sử dụng trên nhiều loại phần tử HTML trong nhiều tài liệu.
Nhất quán về trải nghiệm người dùng: Đảm bảo sự nhất quán về trải nghiệm người dùng trên nhiều trang web.
Dễ dàng bảo trì và cập nhật hiệu quả: Chỉ cần thay đổi một vài dòng mã trong file CSS trung tâm để điều chỉnh phông chữ, màu sắc và bố cục mà không cần chỉnh sửa từng phần tử HTML.
Tiết kiệm thời gian và tăng tốc độ tải trang: Trình duyệt web có thể lưu cache thông tin phong cách, giúp tải trang nhanh hơn và hiệu quả hơn.
Tối ưu hóa thiết kế và thiết kế đáp ứng: CSS cung cấp nhiều khả năng thiết kế và cho phép thiết kế web đáp ứng, thích ứng với nhiều kích thước màn hình và thiết bị.
Thân thiện với SEO: Mã CSS sạch và có cấu trúc có thể cải thiện SEO của trang web.
Khả năng truy cập và trang in thân thiện: CSS cho phép tạo ra các phiên bản trang web thân thiện với máy in.

Nhược điểm của External Style Sheets

Vấn đề tương thích trình duyệt: Các trình duyệt khác nhau có thể hiển thị CSS không nhất quán, dẫn đến sự không đồng nhất trong cách trang web hiển thị.
Đường cong học tập: Có thể mất thời gian để học cách sử dụng CSS hiệu quả và tránh các vấn đề tương thích trình duyệt.
Mối quan tâm về bảo mật: Có những lo ngại về bảo mật khi sử dụng CSS, đặc biệt là khi thông tin phong cách được lưu trữ bên ngoài.
Bố cục phức tạp và hạn chế: CSS có thể gặp khó khăn khi tạo ra các bố cục phức tạp hoặc không hỗ trợ một số tính năng.
Cần tải thêm: Khi sử dụng External Style Sheets, cần phải tải thêm thông tin phong cách cho mỗi tài liệu, có thể làm chậm quá trình tải trang.
Không hiển thị đúng cho đến khi CSS được tải: Trang web có thể không được hiển thị đúng cho đến khi file CSS bên ngoài được tải xong.
Không khả thi cho số lượng nhỏ định nghĩa phong cách: Đối với một số lượng nhỏ định nghĩa phong cách, việc sử dụng External Style Sheets có thể không hiệu quả.

Sự khác biệt giữa adaptive design và responsive design là gì?

Adaptive Design	Responsive Design
Tập trung vào thiết kế trang web dựa trên nhiều kích thước bố cục cố định	Tập trung vào việc hiển trị nội dung trên cơ sở không gian trình duyệt có sẵn
Khi một trang web được phát triển bằng cách sử dụng thiết kế adaptive được mở trên trình duyệt máy tính để bàn, trước tiên không gian có sẵn sẽ được phát hiện và sau đó bố cục có kích thước phù hợp nhất sẽ được chọn và sử dụng để hiển thị nội dung. Thay đổi kích thước của cửa sổ trình duyệt không ảnh hưởng đến thiết kế	Khi một trang web được phát triển bằng cách sử dụng thiết kế responsive được mở trên trình duyệt trên máy tính để bàn và khi ta thay đổi kích thước cửa sổ trình duyệt, nội dung của trang web được sắp xếp động và tối ưu để phù hợp với cửa sổ
Thông thường, các thiết kế adaptive sử dụng sáu chiều rộng màn hình tiêu chuẩn - 320px, 480px, 760px, 960px, 1200px, 1600 . Các kích thước này được phát hiện và các bố cục thích hợp được tải	Thiết kế này sử dụng các truy vấn CSS để thay đổi kiểu tùy thuộc vào thuộc tính thiết bị mục tiêu để thích ứng với các màn hình khác nhau
Đầu tiên phải mất rất nhiều thời gian và nỗ lực để xem xét các lựa chọn và thực tế của người dùng cuối, sau đó thiết kế các giải pháp thích ứng tốt nhất có thể cho họ	Nói chung, thiết kế responsive cần ít công việc hơn để xây dựng và thiết kế các trang web linh hoạt có thể chứa nội dung từ màn hình tùy thuộc vào kích thước màn hình
Cung cấp nhiều quyền kiểm soát thiết kế để phát triển các trang web cho các màn hình cụ thể	Không có nhiều quyền kiểm soát thiết kế được cung cấp ở đây

Trong CSS, position: absolute hoạt động như thế nào?

Trong CSS, position: absolute được sử dụng để định vị một phần tử tương đối so với tổ tiên được định vị gần nhất của nó (không phải là static). Khi một phần tử được đặt với position: absolute, nó được loại bỏ khỏi dòng chảy thông thường của tài liệu và không chiếm không gian trong bố cục trang. Các phần tử khác sẽ hành xử như thể phần tử đó không tồn tại trong tài liệu.

Phần tử với position: absolute sẽ được định vị dựa trên các thuộc tính top, right, bottom, và left mà bạn chỉ định. Các giá trị này xác định vị trí cuối cùng của phần tử đối với tổ tiên được định vị của nó. Nếu không có tổ tiên nào được định vị, phần tử sẽ được định vị tương đối so với phần tử <html>.

Để một phần tử với position: absolute được định vị tương đối so với một phần tử cha, phần tử cha đó phải có một giá trị position khác static, thường là position: relative. Nếu không có tổ tiên nào được định vị, phần tử sẽ được định vị tương đối so với phần tử <body> và di chuyển cùng với việc cuộn trang.

Ví dụ, nếu bạn muốn định vị một phần tử .child bên trong một phần tử .parent với position: absolute, bạn cần đặt position: relative (hoặc một giá trị position khác không phải là static) cho .parent:

css

.parent {
  position: relative;
  width: 500px; /* Chiều rộng ví dụ */
  height: 300px; /* Chiều cao ví dụ */
}

.child {
  position: absolute;
  top: 50px; /* Định vị cách đỉnh 50px */
  left: 0; /* Định vị cách cạnh trái 0px */
}

Trong ví dụ trên, .child sẽ được định vị cách đỉnh của .parent 50px và cạnh trái 0px, không phụ thuộc vào vị trí của .parent trong dòng chảy thông thường của tài liệu

CSS Sprites là gì?

CSS Sprites là một kỹ thuật trong CSS, nơi nhiều hình ảnh được kết hợp thành một file hình ảnh duy nhất để sử dụng trên một website, giúp cải thiện hiệu suất. Kỹ thuật này giảm số lượng yêu cầu HTTP mà trình duyệt cần thực hiện để tải các hình ảnh, do đó giảm thời gian tải trang và tiết kiệm băng thông.

Cách hoạt động:

Kết hợp Hình Ảnh: Các hình ảnh nhỏ (như biểu tượng, nút, v.v.) được kết hợp thành một hình ảnh lớn duy nhất.
Sử dụng CSS để Hiển Thị: Sử dụng thuộc tính background và background-position trong CSS để chỉ định phần nào của hình ảnh lớn được hiển thị cho mỗi phần tử.

Ưu điểm:

Giảm Số Lượng Yêu Cầu HTTP: Giảm đáng kể số lượng yêu cầu đến máy chủ, giúp tăng tốc độ tải trang.
Tiết Kiệm Băng Thông: Kết hợp nhiều hình ảnh vào một file duy nhất giúp giảm tổng kích thước dữ liệu cần tải xuống.
Cải Thiện Hiệu Suất: Cải thiện thời gian phản hồi của trang và tăng trải nghiệm người dùng.

Nhược điểm:

Quản Lý Khó Khăn: Quản lý một hình ảnh lớn có thể khó khăn hơn so với việc quản lý nhiều hình ảnh nhỏ riêng lẻ.
Thiết Kế Phức Tạp: Cần phải cẩn thận khi thiết kế sprite để đảm bảo rằng các hình ảnh không bị chồng chéo hoặc cắt xén không đúng cách.
Cập Nhật Khó Khăn: Thêm hoặc loại bỏ hình ảnh từ sprite có thể yêu cầu chỉnh sửa hình ảnh lớn và cập nhật CSS tương ứng, làm tăng công việc.

CSS Sprites là một kỹ thuật mạnh mẽ để tối ưu hóa hiệu suất trang web, nhưng cần được sử dụng một cách cẩn thận để tránh tăng độ phức tạp và khó khăn trong quản lý và bảo trì.

Sự khác biệt giữa reset css và normalize css là gì?

Khái niệm Reset CSS và Normalize CSS đều liên quan đến việc tạo ra một cơ sở đồng nhất cho các kiểu dáng trên các trình duyệt khác nhau, nhưng chúng có những phương pháp tiếp cận khác nhau:

Reset CSS

Mục đích: Mục tiêu của Reset CSS là loại bỏ tất cả các kiểu mặc định của trình duyệt, từ margin, padding, font sizes, và các kiểu dáng khác, để tạo ra một điểm khởi đầu đồng nhất cho việc thiết kế web.
Cách thức hoạt động: Reset CSS "xóa sạch" tất cả các kiểu mặc định của trình duyệt bằng cách thiết lập chúng về một giá trị đồng nhất, thường là 0 hoặc một giá trị tương đương, để đảm bảo rằng không có kiểu mặc định nào ảnh hưởng đến bố cục trang web của bạn.
Hậu quả: Khi sử dụng Reset CSS, bạn sẽ cần phải tái khai báo kiểu dáng cho hầu hết các phần tử HTML mà bạn sử dụng trong trang web của mình.

Normalize CSS

Mục đích: Normalize CSS nhằm mục đích cải thiện sự nhất quán giữa các trình duyệt bằng cách giữ lại các kiểu mặc định hữu ích và chỉ loại bỏ hoặc sửa đổi những kiểu mặc định gây ra sự không nhất quán hoặc lỗi.
Cách thức hoạt động: Thay vì loại bỏ tất cả các kiểu mặc định, Normalize CSS điều chỉnh các kiểu mặc định để chúng hoạt động tốt hơn và nhất quán hơn trên các trình duyệt khác nhau. Nó cũng sửa chữa một số lỗi phổ biến và cung cấp một cơ sở kiểu dáng tốt hơn cho việc xây dựng trang web của bạn.
Hậu quả: Sử dụng Normalize CSS giúp bạn giữ lại một số kiểu mặc định hữu ích của trình duyệt, giảm bớt nhu cầu phải tái khai báo kiểu dáng cho các phần tử cơ bản.

Kết luận

Reset CSS là phương pháp "slash and burn" nhằm loại bỏ hoàn toàn các kiểu mặc định của trình duyệt, đòi hỏi bạn phải tái khai báo nhiều kiểu dáng hơn từ đầu.
Normalize CSS là một cách tiếp cận ít cực đoan hơn, nhằm mục đích cải thiện sự nhất quán giữa các trình duyệt mà không mất đi các kiểu mặc định hữu ích, giúp việc phát triển web trở nên dễ dàng hơn.

Lựa chọn giữa Reset CSS và Normalize CSS phụ thuộc vào mục tiêu cụ thể của dự án và sở thích cá nhân của nhà phát triển.

Hạn chế của CSS là gì?

Mặc dù CSS (Cascading Style Sheets) là một công cụ mạnh mẽ và không thể thiếu trong việc thiết kế web, nó vẫn có một số hạn chế:

Khả năng Tương Thích Trình Duyệt:
- Các trình duyệt khác nhau có thể hiển thị CSS một cách khác nhau, dẫn đến sự không nhất quán trong trải nghiệm người dùng. Các nhà phát triển thường phải viết mã CSS bổ sung để đảm bảo tính tương thích trên trình duyệt.
Quản Lý Mã:
- Trong các dự án lớn, việc quản lý các tệp CSS có thể trở nên phức tạp. Việc duy trì và cập nhật CSS có thể trở nên khó khăn, đặc biệt là khi có nhiều tệp CSS hoặc khi CSS được viết bởi nhiều nhà phát triển.
Hiệu Suất:
- Việc sử dụng quá nhiều quy tắc CSS hoặc selector phức tạp có thể ảnh hưởng đến hiệu suất tải trang. Các tệp CSS lớn cũng có thể làm tăng thời gian tải trang.
Giới Hạn Trong Các Tính Năng:
- CSS có những giới hạn về việc tạo ra một số hiệu ứng đồ họa và tương tác phức tạp. Mặc dù CSS3 đã giới thiệu nhiều tính năng mới và mở rộng khả năng của CSS, nhưng vẫn có những giới hạn so với việc sử dụng JavaScript hoặc các công nghệ khác.
Khả năng Kiểm Soát Tính Toàn Vẹn Dữ Liệu:
- CSS không thể kiểm soát hoặc xác minh tính toàn vẹn dữ liệu nhập vào từ người dùng. Nó chỉ đóng vai trò trong việc thiết kế và trình bày nội dung.
Khó Khăn Trong Debugging:
- Việc tìm và sửa lỗi trong CSS có thể khó khăn, đặc biệt là trong các dự án lớn với nhiều tệp CSS. Các công cụ phát triển trình duyệt có thể giúp, nhưng quá trình này vẫn có thể mất thời gian.
Cần Cập Nhật Liên Tục:
- Các tiêu chuẩn web và CSS liên tục phát triển, yêu cầu các nhà phát triển phải cập nhật kiến thức của mình thường xuyên để tận dụng tốt nhất các tính năng mới và thực hành tốt nhất.

Mặc dù có những hạn chế, CSS vẫn là một phần không thể thiếu của phát triển web hiện đại, cung cấp khả năng kiểm soát mạnh mẽ đối với trình bày và thiết kế của các trang web.

Sử dụng biến trong CSS như thế nào?

Trong CSS, biến (còn được gọi là custom properties) cho phép bạn tái sử dụng các giá trị trên toàn bộ tài liệu CSS của mình, giúp mã nguồn dễ quản lý và cập nhật hơn. Để sử dụng biến trong CSS, bạn cần thực hiện hai bước chính: khai báo biến và sử dụng biến đó.

Khai báo Biến

Biến trong CSS được khai báo bằng cách sử dụng hai dấu gạch ngang (--) trước tên biến. Bạn có thể khai báo biến ở mức độ toàn cục bằng cách đặt chúng trong pseudo-class :root, hoặc ở mức độ cục bộ bên trong bất kỳ selector nào khác.

css

:root {
  --primary-color: #1e90ff;
  --secondary-color: #ffffff;
}

Trong ví dụ trên, hai biến --primary-color và --secondary-color được khai báo ở mức độ toàn cục, có nghĩa là chúng có thể được sử dụng ở bất cứ đâu trong tài liệu CSS.

Sử dụng Biến

Để sử dụng một biến, bạn sẽ sử dụng hàm var() và truyền vào tên biến. Nếu biến không được tìm thấy, bạn có thể cung cấp một giá trị dự phòng như một tham số thứ hai cho hàm var().

css

body {
  background-color: var(--primary-color);
}

h2 {
  color: var(--secondary-color);
}

Trong ví dụ trên, background-color của body và color của h2 được thiết lập sử dụng giá trị của các biến đã được khai báo trước đó.

Lợi ích của việc sử dụng Biến trong CSS

Dễ dàng cập nhật: Khi bạn muốn thay đổi một giá trị được sử dụng ở nhiều nơi, bạn chỉ cần cập nhật giá trị của biến tại một nơi.
Tính tái sử dụng cao: Biến có thể được sử dụng lại ở nhiều nơi trong tài liệu CSS, giúp giảm lượng mã cần viết và bảo trì.
Tính linh hoạt: Biến có thể được thay đổi thông qua JavaScript, cho phép bạn tạo ra các hiệu ứng động hoặc tùy chỉnh giao diện người dùng dựa trên hành động của người dùng.

Biến trong CSS là một công cụ mạnh mẽ giúp tối ưu hóa quá trình phát triển web bằng cách giảm thiểu sự lặp lại và tăng cường khả năng bảo trì của mã nguồn.

Khi nào thì xảy ra DOM reflow?

DOM reflow, còn được biết đến với các tên gọi khác như layout shift hoặc layout reflow, là một quá trình trong đó trình duyệt tính toán lại bố cục của tài liệu. Điều này bao gồm việc tính toán lại kích thước và vị trí của các phần tử trên trang. Reflow có thể xảy ra vì nhiều lý do và thường xảy ra nhiều hơn bạn mong đợi. Dưới đây là một số tình huống phổ biến khiến DOM reflow xảy ra:

Thay đổi trong DOM: Khi bạn chèn, xóa hoặc cập nhật một phần tử trong DOM.
Thay đổi nội dung: Ví dụ, thay đổi văn bản trong một hộp nhập liệu.
Di chuyển một phần tử DOM: Khi một phần tử được di chuyển từ vị trí này sang vị trí khác.
Hoạt hóa một phần tử DOM: Ví dụ, thông qua hoạt động.
Lấy kích thước hoặc vị trí của một phần tử: Sử dụng các thuộc tính như offsetHeight hoặc phương thức như getComputedStyle.
Thay đổi một thuộc tính CSS: Bất kỳ thay đổi nào đối với thuộc tính CSS có thể gây ra reflow.
Thay đổi lớp của một phần tử: Thêm hoặc xóa một lớp CSS.
Thêm hoặc xóa một bảng style: Khi một bảng style được thêm vào hoặc xóa khỏi tài liệu.
Thay đổi kích thước cửa sổ: Khi cửa sổ trình duyệt được thay đổi kích thước.
Cuộn trang: Khi người dùng cuộn trang.
Thay đổi font: Khi font được thay đổi, có thể gây ra reflow do thay đổi kích thước văn bản.
Kích hoạt các pseudo-classes CSS: Ví dụ như :hover.

Reflow là một quá trình tốn kém về mặt hiệu suất vì nó có thể làm chậm thời gian tải trang và ảnh hưởng đến trải nghiệm người dùng. Để giảm thiểu tác động của reflow, bạn nên cố gắng hạn chế số lượng thay đổi DOM và CSS, sử dụng các kỹ thuật như batch updates (cập nhật theo lô), và tránh sử dụng các thuộc tính hoặc phương thức gây ra reflow một cách không cần thiết.

Sự khác biệt của biến CSS và biến preprocessor (SASS, LESS, Stylus) là gì?

Biến CSS và biến preprocessor (như SASS, LESS, Stylus) đều cho phép lưu trữ giá trị để tái sử dụng trong các tệp kiểu, nhưng chúng khác nhau về cách thức hoạt động và khả năng:

Biến CSS

Biến CSS, còn được gọi là Custom Properties, là một tính năng của CSS thuần túy và được hỗ trợ trực tiếp bởi các trình duyệt hiện đại.
Chúng được khai báo trong phạm vi của một phần tử (thường là :root để áp dụng toàn cục) và có cú pháp như --my-variable: value;.
Biến CSS có thể được cập nhật tại thời điểm chạy, cho phép các tương tác động như thay đổi chủ đề màu sắc thông qua JavaScript.
Chúng có thể được truy cập và sử dụng bởi các phần tử con thông qua cú pháp var(--my-variable).

Biến Preprocessor

Biến preprocessor là một phần của các ngôn ngữ như SASS, LESS và Stylus, và không được trình duyệt hiểu trực tiếp.
Chúng được sử dụng trong quá trình phát triển và cần phải được "biên dịch" hoặc "chuyển đổi" thành CSS thuần túy trước khi trình duyệt có thể hiểu được.
Biến preprocessor thường có cú pháp giống như các biến trong các ngôn ngữ lập trình truyền thống, ví dụ $my-variable: value; trong SASS hoặc @my-variable: value; trong LESS.
Chúng không thể được cập nhật tại thời điểm chạy vì giá trị của chúng đã được xác định trong quá trình biên dịch.

Sự Khác Biệt Chính

Khả năng tương tác: Biến CSS có thể được thay đổi tại thời điểm chạy, trong khi biến preprocessor không thể.
Phạm vi hỗ trợ: Biến CSS được hỗ trợ trực tiếp bởi trình duyệt, trong khi biến preprocessor cần một bước biên dịch để chuyển đổi chúng thành CSS.
Cú pháp: Biến CSS sử dụng cú pháp --variable-name, trong khi biến preprocessor sử dụng cú pháp $variable-name hoặc @variable-name tùy thuộc vào ngôn ngữ.
Tích hợp với JavaScript: Biến CSS có thể được tương tác với JavaScript một cách dễ dàng hơn so với biến preprocessor.

Lựa chọn giữa việc sử dụng biến CSS hoặc biến preprocessor phụ thuộc vào yêu cầu cụ thể của dự án, sự hỗ trợ trình duyệt, và quy trình làm việc của nhóm phát triển. Biến CSS thường được ưa chuộng cho các tương tác động và dự án không cần bước biên dịch, trong khi biến preprocessor thường được sử dụng trong các dự án lớn hơn với các quy trình làm việc phức tạp hơn và cần các tính năng mở rộng của các ngôn ngữ preprocessor.

Trong CSS phông chữ web-safe và fallback là gì?

Trong CSS, web-safe fonts là những phông chữ được hỗ trợ rộng rãi bởi hầu hết các trình duyệt web và hệ điều hành, giúp đảm bảo rằng nội dung văn bản sẽ hiển thị một cách nhất quán trên các thiết bị khác nhau mà không cần phải tải phông chữ từ máy chủ bên ngoài. Các ví dụ về web-safe fonts bao gồm Arial, Verdana, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, và Brush Script MT.

Fallback fonts là một kỹ thuật trong CSS cho phép bạn chỉ định một danh sách các phông chữ thay thế để sử dụng trong trường hợp phông chữ chính không khả dụng. Mục đích của việc sử dụng fallback fonts là để cải thiện khả năng tương thích và đảm bảo rằng nội dung vẫn có thể được đọc một cách rõ ràng, ngay cả khi phông chữ chính không được hỗ trợ bởi trình duyệt hoặc hệ điều hành của người dùng. Các fallback fonts thường được chia theo 5 loại gia đình phông chữ chung: Serif, Sans-serif, Monospace, Cursive, và Fantasy.

Khi sử dụng fallback fonts, bạn nên sắp xếp các phông chữ theo thứ tự ưu tiên, từ phông chữ mong muốn nhất đến các phông chữ thay thế và kết thúc bằng một gia đình phông chữ chung. Điều này giúp trình duyệt chọn phông chữ thay thế phù hợp nhất nếu phông chữ mong muốn không khả dụng. Ví dụ:

css

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Trong ví dụ trên, nếu "Helvetica Neue" không khả dụng, trình duyệt sẽ thử Helvetica tiếp theo, sau đó là Arial, và cuối cùng là bất kỳ phông chữ sans-serif nào có sẵn

Làm sao để biết trình duyệt có hỗ trợ một thuộc tính CSS hay không?

Để biết trình duyệt có hỗ trợ một thuộc tính CSS hay không, bạn có thể sử dụng một số phương pháp sau:

Sử dụng JavaScript: Bạn có thể kiểm tra sự hỗ trợ của thuộc tính CSS bằng cách sử dụng phương thức CSS.supports() trong JavaScript. Phương thức này cho phép bạn kiểm tra cả thuộc tính và giá trị.
javascript
```
if (CSS.supports('display', 'grid')) {
  // Code nếu trình duyệt hỗ trợ display: grid
}
```
Hoặc bạn cũng có thể kiểm tra chỉ với thuộc tính:
javascript
```
if (CSS.supports('display: grid')) {
  // Code nếu trình duyệt hỗ trợ display: grid
}
```
Sử dụng CSS @supports Rule: Trong CSS, bạn có thể sử dụng at-rule @supports để kiểm tra sự hỗ trợ của thuộc tính và áp dụng các quy tắc kiểu dáng chỉ khi thuộc tính được hỗ trợ[3].
css
```
@supports (display: grid) {
  div {
    display: grid;
  }
}
```
Sử dụng các công cụ trực tuyến: Trang web như "Can I use" cung cấp bảng hỗ trợ cho nhiều tính năng HTML5, CSS3, v.v., và bạn có thể sử dụng nó để kiểm tra sự hỗ trợ của các thuộc tính CSS trên các trình duyệt khác nhau.
Kiểm tra bằng cách đặt và đọc giá trị: Một cách khác là đặt thuộc tính và sau đó đọc giá trị để xem trình duyệt có giữ giá trị đó hay không. Điều này thường được thực hiện bằng JavaScript
javascript
```
var div = document.createElement('div');
div.style.setProperty('display', 'grid');
if (div.style.display === 'grid') {
  // Trình duyệt hỗ trợ display: grid
}
```

Sử dụng một trong các phương pháp trên, bạn có thể xác định xem một thuộc tính CSS cụ thể có được hỗ trợ bởi trình duyệt mà người dùng đang sử dụng hay không.

Việc kiểm tra trang web trên các trình duyệt khác nhau có quan trọng không? Tại sao?

Việc kiểm tra trang web trên các trình duyệt khác nhau, hay còn gọi là kiểm tra tương thích trình duyệt (cross-browser testing), là một bước quan trọng trong quá trình phát triển web. Mục tiêu chính của kiểm tra này là đảm bảo rằng ứng dụng web hoạt động như mong đợi trên nhiều hệ điều hành, thiết bị và trình duyệt khác nhau, bất kể người dùng sử dụng trình duyệt nào để truy cập.

Tại sao việc kiểm tra trên các trình duyệt khác nhau lại quan trọng?

Khác biệt về cách hiển thị và chức năng: Mỗi trình duyệt có thể hiển thị và xử lý mã web một cách khác nhau do sự khác biệt trong cài đặt mặc định, cài đặt do người dùng định nghĩa, khả năng phần cứng, và động cơ xử lý web. Điều này có thể dẫn đến sự khác biệt về hiển thị và chức năng của trang web trên các trình duyệt khác nhau.
Tối ưu hóa trải nghiệm người dùng: Kiểm tra tương thích trình duyệt giúp tạo ra trải nghiệm người dùng tích cực trên trang web của bạn, không phụ thuộc vào trình duyệt hoặc thiết bị mà khách truy cập sử dụng. Điều này có thể dẫn đến tỷ lệ chuyển đổi cao hơn và doanh thu tăng lên cho doanh nghiệp của bạn
Cải thiện khả năng phát hiện trang web: Trải nghiệm người dùng ảnh hưởng đến thứ hạng của trang web trên công cụ tìm kiếm. Nếu trang web không hoạt động tốt trên di động hoặc trên một số trình duyệt nhất định, điểm số Core Web Vitals có thể giảm, ảnh hưởng đến khả năng xếp hạng tốt trong kết quả tìm kiếm tự nhiên, dẫn đến việc mất cơ hội và giảm doanh thu.
Đảm bảo tính bao phủ rộng rãi: Kiểm tra tương thích trình duyệt giúp bạn hiểu cách trang web của mình hoạt động trên các kênh khác nhau và thông báo trước cho khách hàng về các tính năng chỉ có sẵn trên một số trình duyệt nhất định. Điều này giúp đảm bảo rằng bạn không loại trừ một phần lớn đối tượng mục tiêu của mình chỉ vì trang web không hoạt động trên trình duyệt họ sử dụng.

Tóm lại, kiểm tra tương thích trình duyệt là một phần không thể thiếu trong quá trình phát triển web, giúp đảm bảo rằng trang web của bạn cung cấp trải nghiệm người dùng tốt nhất trên mọi trình duyệt và thiết bị, từ đó tối ưu hóa tỷ lệ chuyển đổi và tăng cường khả năng phát hiện trang web.

Mô tả chi tiết cách CSS hoạt động?

Ngôn ngữ CSS được thiết kế để sử dụng cùng với ngôn ngữ "đánh dấu" như HTML. CSS xác định cách các phần tử HTML được định dạng - kiểm soát bố cục, màu sắc, phông chữ của chúng, ... Khi trình duyệt hiển thị một document, nó phải kết hợp nội dung của document với thông tin style của nó. Nó xử lý document theo một số giai đoạn, mà chúng ta đã liệt kê bên dưới.

Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
Nó chuyển đổi HTML thành DOM.
Sau đó, trình duyệt sẽ tìm nạp hầu hết các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh và video được nhúng và CSS được liên kết.
Trình duyệt phân tích cú pháp CSS đã nạp và sắp xếp các quy tắc khác nhau theo kiểu selector của chúng thành các "nhóm" khác nhau, ví dụ: phần tử, lớp, ID, ... Dựa trên các selector mà nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây render).
Cây render được bố trí trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
Hiển thị trực quan của trang được hiển thị trên màn hình.

Sơ đồ sau đây cũng cung cấp một cái nhìn đơn giản về quy trình:

DOM và CSSOM

DOM có cấu trúc giống như cây. Mỗi phần tử, thuộc tính và đoạn văn bản trong ngôn ngữ đánh dấu sẽ trở thành một nút DOM trong cấu trúc cây. Các nút được xác định bởi mối quan hệ của chúng với các nút DOM khác. Một số phần tử là nút cha của các nút con và các nút con có anh chị em. Trình duyệt trải qua một quá trình bao gồm conversion, tokenization, lexing và parsing, cuối cùng tạo nên DOM và CSSOM.

Conversion: Đọc các byte raw của HTML và CSS trên đĩa hoặc mạng.
Tokenization: Chia nhỏ đầu vào thành nhiều đoạn (ví dụ: thẻ bắt đầu, thẻ kết thúc, tên thuộc tính, giá trị thuộc tính), loại bỏ các ký tự không liên quan như khoảng trắng và ngắt dòng.
Lexing: Giống như tokenizer, nhưng nó cũng xác định loại của mỗi mã thông báo (một số, một chuỗi ký tự hay một toán tử bình đẳng).
Parsing: Lấy dòng mã thông báo từ lexer, diễn giải mã thông báo bằng cách sử dụng một ngữ pháp cụ thể và biến nó thành một cây cú pháp trừu tượng.

Ví dụ:

html

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Trong DOM, nút tương ứng với phần tử <p> là cha. Các con của nó là nút text và 3 nút tương ứng là phần tử <span>. Quan hệ phân cấp của nó như sau:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

Áp dụng CSS vào DOM:

css

span {
  border: 1px solid black;
  background-color: lime;
}

Khi cả hai cấu trúc cây được tạo, công cụ render sau đó sẽ gắn các cấu trúc dữ liệu vào cái được gọi là cây render như một phần của quá trình bố trí. Cây render là một biểu diễn trực quan của document cho phép vẽ nội dung của trang theo đúng thứ tự của chúng.

Cây render xây dựng theo thứ tự sau:

Bắt đầu từ gốc của cây DOM, đi qua từng nút hiển thị.
Bỏ qua các nút không hiển thị.
Đối với mỗi nút hiển thị, hãy tìm các quy tắc CSSOM phù hợp và áp dụng chúng.
Phát ra các nút hiển thị với nội dung và kiểu tính toán của chúng.
Cuối cùng, xuất một cây render chứa cả thông tin nội dung và style của tất cả nội dung hiển thị trên màn hình.

Progressive rendering là gì?

Progressive rendering là một kỹ thuật sử dụng để cải thiện hiệu suất trang web (cụ thể là cải thiện thời gian tải web) để render nội dung cho hiển thị nhanh nhất có thể.

Ta có thể triển khai progressive rendering bằng cách lazy loading với hình ảnh. Ta sử dụng Intersection Observer API cho lazy load ảnh. API giúp đơn giản hoá việc phát hiện một phần tử đi vào viewport và thực hiện hành động khi phần tử đó thực hiện hành động. Khi image vào viewport, ta mới bắt đầu tải ảnh.

Ví dụ:

html

<img class="lazy"
src="placeholder-image.jpg"
data-src="image-to-lazy-load-1x.jpg"
data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x"
alt="I'm an image!">

document.addEventListener("DOMContentLoaded", function() {
	var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

	if ("IntersectionObserver" in window) {
		let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
			entries.forEach(function(entry) {
				if (entry.isIntersecting) {
				let lazyImage = entry.target;
				lazyImage.src = lazyImage.dataset.src;
				lazyImage.srcset = lazyImage.dataset.srcset;
				lazyImage.classList.remove("lazy");
				lazyImageObserver.unobserve(lazyImage);
				}
			});
		});

		lazyImages.forEach(function(lazyImage) {
			lazyImageObserver.observe(lazyImage);
		});
	} else {
		// Possibly fall back to event handlers here
	}
});

Tweening trong CSS?

Tweening là quá trình lấp đầy khoảng trống giữa các chuỗi khóa, tức là giữa các keyframes đã được tạo. Keyframes là những frame đại diện cho điểm bắt đầu và điểm kết thúc của hành động hoạt ảnh. Tweening liên quan đến việc tạo keyframe giữa hai hình ảnh để tạo ấn tượng rằng hình ảnh đầu tiên đã di chuyển mượt mà sang hình ảnh thứ hai. Với mục đích này, chúng ta sử dụng các thuộc tính như transforms - matrix, translate, scale, rotate,...

Trong đoạn code bên dưới, ta tạo frame trung gian của các phần tử <p> để chuyển từ đầu đến phía bên trái của trình duyệt.

css

p {
	animation-duration: 2s;
	animation-name: slidethrough;
}

@keyframes slidethrough {
	from {
		margin-left: 100%;
		width: 300%; 
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

Ở đây, phần tử đoạn văn chỉ định rằng quá trình hoạt ảnh sẽ mất 2 giây để thực hiện từ đầu đến cuối. Điều này được thực hiện bằng cách sử dụng thuộc tính animation-duration. Tên hoạt ảnh của @keyframes được xác định bằng cách sử dụng thuộc tính animation-name. Keyframe trung gian được xác định bằng cách sử dụng quy tắc @keyframes.

Trong ví dụ, chúng ta chỉ có 2 keyframe. Keyframe đầu tiên bắt đầu ở 0% và chạy cho đến lề trái 100%, là cạnh ngoài cùng bên phải của phần tử container. Keyframe thứ hai bắt đầu ở 100% trong đó lề trái được đặt là 0% và chiều rộng được đặt là 100%, kết quả là kết thúc hoạt ảnh nghiêng về phía bên trái của container.

DOM là gì và cách nó liên kết với CSS như thế nào?

DOM (Document Object Model) là một interface lập trình cho HTML và XML. Nó xác định cấu trsuc của document và cách mà document được hiển thị và quản lý. Document này cho phép javascript truy cập và quản lý phần tử và style của web. Mô hình được xây dựng theo cấu trúc cây đối tượng và xác định:

Các phần tử HTML là đối tượng
Thuộc tính của tất cả phần tử HTML
Phương thức truy cập đến tất cả phần tử HTML
Sự kiện với tất cả phần tử HTML

DOM Document

Là chủ sở hữu tất cả đối tượng trong web. Nếu bạn muốn truy cập đến bất kỳ phần tử nào đều phải bắt đầu với document. Nó còn chứa các thuộc tính và phương thức quan trọng cho truy cập và chỉnh sửa trang web.

Tìm kiếm phần tử HTML

Phương thức	Mô tả
getElementById()	Dùng để lấy các phần tử đơn theo id
getElementsByClassName()	Dùng để lấy mảng phần tử theo tên lớp
getElementsByTagName()	Dùng để lấy phần tử đơn theo tên tag
querySelector()	Trả về phần tử đầu tiến ứng với một Selector cụ thể. Nó có thể lấy theo id, lớp, tag hay bất cứ selector nào hợp lệ trong CSS
querySelectorAll()	Giống với querySelector() ngoại trừ việc nó trả về tất cả phần tử phù hợp với CSS Selector

Thay đổi phần tử HTML

Thuộc tính innerHTML có thể dùng cho thay đổi nội dung của phần tử HTML. Trong ví dụ này ta lấy phần tử với id của header và thiết lập nội dung trong nó là "Hello World"

// Example: Using text
document.getElementById("#header").innerHTML = "Hello World!";

// Example: Using text with tag
document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

Thay đổi giá trị thuộc tính

Ta cũng có thể thay đổi giá trị thuộc tính như sau:

document.getElementsByTag("img").src = "image.jpg";

Thay đổi style

Để đổi style cho một phần tử HTML ta cần thay đổi thuộc tính style của phần tử. Ta có thể viết như sau:

document.getElementsByTag("h1").style.borderBottom = "solid 3px #000";

Thêm và xoá phần tử

Thêm phần tử: tạo một phần tử div sử dụng phương thức createElement() để lấy tên tag như tham số và lưu nó vào biến. Sau đó ta thêm nội dung và chèn nó vào DOM

var div = document.createElement("div");

var newContent = document.createTextNode("Hello World!"); 
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Ở đây ta dùng phương thức createTextNode() để lấy một chuỗi làm tham số sau đó chèn phần tử div mới trước một div đã tồn tại trong document.

Xoá phần tử: dùng phương thức removeChild()

var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);

Thay thế phần tử

var div = document.querySelector('#div');
var newDiv = document.createElement('div');

newDiv.innerHTML = "Hello World2";
div.parentNode.replaceChild(newDiv, div);

Ở đây ta dùng phương thức replaceChild() nhận tham số thứ nhất là phần tử mới và tham số thứ hai là phần tử cần thay thế.

Viết trức tiếp vào HTML output string

Ta có thể viết biểu thức HTML và JS trức tiếp vào HTML output stream bằng cách phương thức write(). Phương thức write() có thế nhận nhiều tham số sẽ xuất hiện trong document theo thứ tự của chúng.

// HTML Content
document.write("<h1>Hello World!</h1><p>This is a paragraph!</p>");

// date object
document.write(Date());

Xử lý sự kiện

HTML DOM cho phép JavaScript phản ứng với sự kiện HTML, ví dụ tải trang, nhập trường input, click chuột,...

Gán sự kiện

document.getElementById("btn").onclick = changeText();

Lắng nghe sự kiện

document.getElementById("btn").addEventListener('click', runEvent);

Quan hệ giữa các nút

Các nút(node) trong DOM có hệ phân cấp quan hệ với các nút khác. Điều này có nghĩa là nút được cấu trúc như cây. Ta sử dụng thuật ngữ nút cha, nút anh và nút con để mô tả mối quan hệ giữa chúng.

Nút cao nhất được gọi là root và không có cha. Root trong HTML thường là thẻ <tag> vì nó không có thẻ nào trên nó.

Để di chuyển giữa các nút, ta có thể dùng các thuộc tính:

parentNode
childNodes
firstChild
lastChild
nextSibling

Ví dụ:

var parent = document.getElementById("heading").parentNode

Top 63 câu hỏi phỏng vấn CSS

1. Inline CSS

2. Internal CSS

3. External CSS

Đơn vị tuyệt đối

Đơn vị tương đối

Simple Selectors (Bộ chọn đơn giản)

Combinator Selectors (Bộ chọn kết hợp)

Pseudo-class Selectors (Bộ chọn giả lớp)

Pseudo-elements Selectors (Bộ chọn giả phần tử)

Grouping Selectors (Bộ chọn nhóm)

ID Selector

Class Selector

Kết luận

Sử dụng Flexbox

Sử dụng Grid

Sử dụng Position và Transform

Sử dụng Text-align và Margin Auto

1. Sử dụng Tên Màu

2. Sử dụng Giá trị RGB

3. Sử dụng Giá trị HEX

4. Sử dụng Giá trị HSL

5. Sử dụng Giá trị RGBA và HSLA

Ưu điểm của việc sử dụng box-sizing: border-box:

Nhược điểm:

Specificity Hierarchy (Thứ tự ưu tiên)

Cách Tính Specificity

Quy tắc !important

Ví dụ

Khi Các Quy Tắc Có Specificity Bằng Nhau

Cách Hoạt Động

Ứng Dụng

Lưu Ý

Sử dụng Flexbox

Sử dụng Position và Transform

Sử dụng Text-Align và Padding (Chỉ căn ngang)

CSS (Cascading Style Sheets)

CSS3 (Cascading Style Sheets Level 3)

Điểm Khác Biệt Chính

Các thành phần của CSS Box Model:

Width: Auto

Width: 100%

Khi Nào Sử Dụng Mỗi Thuộc Tính

Cách Hoạt Động

Ví Dụ

Lưu Ý

CSS Grid

Flexbox

Khi nào sử dụng Grid và khi nào sử dụng Flexbox?

Pseudo-elements

Pseudo-classes

Sự Khác Biệt Chính

Các Giá Trị của Thuộc Tính overflow

Sử Dụng overflow với Hai Hướng

Lưu Ý

Cấu trúc của một Ruleset:

Ví dụ về một Ruleset:

nth-child()

nth-of-type()

Sự Khác Biệt Chính

Ví Dụ

content-box (Giá trị mặc định)

border-box

So sánh và Lựa chọn

Ưu điểm của External Style Sheets

Nhược điểm của External Style Sheets

Cách hoạt động:

Ưu điểm:

Nhược điểm:

Reset CSS

Normalize CSS

Kết luận

Khai báo Biến

Sử dụng Biến

Lợi ích của việc sử dụng Biến trong CSS

Biến CSS

Biến Preprocessor

Sự Khác Biệt Chính

Tại sao việc kiểm tra trên các trình duyệt khác nhau lại quan trọng?

DOM và CSSOM

Ưu điểm của việc sử dụng `box-sizing: border-box`:

Quy tắc `!important`

Các Giá Trị của Thuộc Tính `overflow`

Sử Dụng `overflow` với Hai Hướng

`content-box` (Giá trị mặc định)

`border-box`