Cách dùng ChatGPT viết CSS
Bùi Tấn Lực - 107
- 03/10/2026
CSS là phần quyết định cách một trang web hiển thị trên màn hình, từ màu sắc, khoảng cách, kích thước chữ cho đến bố cục, hiệu ứng và khả năng thích ứng với nhiều thiết bị. Tuy nhiên, khi giao diện có nhiều thành phần, việc tự viết từng đoạn CSS có thể mất khá nhiều thời gian, đặc biệt khi cần xử lý các trường hợp như responsive, flexbox, grid hoặc trạng thái tương tác.
ChatGPT có thể hỗ trợ viết CSS nhanh hơn bằng cách chuyển yêu cầu mô tả bằng ngôn ngữ tự nhiên thành mã CSS cụ thể. Điểm quan trọng không nằm ở việc yêu cầu công cụ “viết CSS” một cách chung chung, mà là cung cấp đủ bối cảnh để mã được tạo ra phù hợp với HTML, cấu trúc giao diện và mục đích sử dụng thực tế.
Nếu biết cách đặt yêu cầu, bạn có thể dùng ChatGPT để tạo CSS mới, sửa lỗi, tối ưu đoạn mã đang có, chuyển giao diện sang responsive hoặc giải thích nguyên nhân khiến một thành phần không hiển thị đúng. Bài viết này hướng dẫn quy trình sử dụng theo hướng thực tế, ưu tiên mã dễ kiểm soát và có thể đưa vào dự án web.
ChatGPT có thể hỗ trợ viết CSS như thế nào?
ChatGPT không chỉ phù hợp với việc tạo một đoạn CSS từ đầu. Nó có thể tham gia vào nhiều công việc khác nhau trong quá trình xây dựng giao diện. Chẳng hạn, bạn có thể đưa cấu trúc HTML hiện tại và yêu cầu tạo CSS tương ứng, hoặc cung cấp đoạn CSS đang gặp vấn đề để tìm nguyên nhân.
Một số công việc thường phù hợp gồm:
- Tạo CSS cho một thành phần giao diện mới.
- Viết bố cục bằng Flexbox hoặc CSS Grid.
- Tạo giao diện responsive cho máy tính, máy tính bảng và điện thoại.
- Chỉnh màu sắc, font chữ, kích thước, khoảng cách và đường viền.
- Tạo hiệu ứng hover, focus, transition và animation.
- Sửa lỗi CSS khiến phần tử bị lệch hoặc không hiển thị như mong muốn.
- Rút gọn hoặc tổ chức lại CSS đang có.
- Giải thích tác dụng của từng thuộc tính CSS trong một đoạn mã.
Tuy nhiên, mã được tạo ra vẫn cần được kiểm tra trong chính dự án. CSS phụ thuộc rất nhiều vào HTML, thứ tự khai báo, độ ưu tiên của selector, CSS framework đang sử dụng và những quy tắc khác đã tồn tại trong website.
Cách yêu cầu ChatGPT viết CSS chính xác hơn
Yêu cầu càng cụ thể thì khả năng nhận được đoạn CSS phù hợp càng cao. Một câu như “viết CSS cho website đẹp hơn” cung cấp quá ít thông tin để xác định giao diện cần tạo.
Thay vào đó, nên mô tả thành phần cần xử lý, cấu trúc HTML, kích thước mong muốn, màu sắc, cách bố trí và những hành vi cần có trên các thiết bị khác nhau.
Xác định rõ thành phần cần tạo
Trước tiên, hãy nói chính xác bạn muốn ChatGPT xử lý thành phần nào. Ví dụ, thay vì chỉ yêu cầu tạo CSS cho một trang web, có thể mô tả rằng cần tạo giao diện cho một thẻ sản phẩm gồm ảnh, tên sản phẩm, giá và nút mua hàng.
Cách mô tả này giúp phạm vi công việc rõ ràng hơn. Khi CSS chỉ phục vụ một thành phần cụ thể, việc kiểm tra selector và tránh ảnh hưởng đến những phần khác trong website cũng dễ dàng hơn.
Cung cấp HTML hiện tại nếu đã có cấu trúc
Nếu website đã có HTML, nên đưa cấu trúc đó cho ChatGPT thay vì yêu cầu tạo CSS độc lập. CSS cần bám vào class, id hoặc cấu trúc phần tử thực tế thì mới có thể áp dụng chính xác.
Ví dụ, với một nút có class btn-primary, bạn có thể yêu cầu tạo kiểu cho chính class đó thay vì để ChatGPT tự đặt tên selector mới.
<button class="btn-primary">Đăng ký</button>
Từ cấu trúc này, yêu cầu có thể cụ thể như: tạo CSS cho nút có nền màu cam, chữ trắng, bo góc, có hiệu ứng khi rê chuột và không làm thay đổi kích thước bố cục xung quanh.
Nêu rõ yêu cầu về giao diện
Những đặc điểm như màu nền, màu chữ, độ bo góc, kích thước, khoảng cách, căn giữa hay căn trái đều nên được mô tả nếu chúng quan trọng với giao diện.
Ví dụ, yêu cầu “tạo một hộp thông báo đẹp” vẫn khá mơ hồ. Một yêu cầu tốt hơn có thể xác định hộp rộng tối đa bao nhiêu, có nền màu gì, khoảng cách bên trong bao nhiêu, tiêu đề nằm ở đâu và trên màn hình nhỏ cần thay đổi như thế nào.
Không nhất thiết phải biết tên thuộc tính CSS. Bạn có thể mô tả bằng ngôn ngữ thông thường, sau đó để ChatGPT chuyển yêu cầu thành CSS.
Mẫu yêu cầu giúp tạo CSS sát với giao diện thực tế
Một yêu cầu tốt nên cung cấp đủ bốn nhóm thông tin: thành phần cần xử lý, cấu trúc hiện tại, giao diện mong muốn và các giới hạn cần tuân thủ.
Có thể xây dựng yêu cầu theo cách sau:
- Nêu thành phần cần thiết kế.
- Cung cấp HTML liên quan nếu đã có.
- Mô tả giao diện mong muốn.
- Nêu hành vi trên màn hình nhỏ.
- Yêu cầu chỉ trả về CSS nếu bạn muốn dễ sao chép.
- Yêu cầu không thay đổi HTML nếu cấu trúc HTML đã cố định.
Ví dụ, nếu đang có một danh sách sản phẩm và muốn hiển thị dạng lưới, bạn có thể yêu cầu ChatGPT tạo CSS dựa trên cấu trúc HTML hiện tại thay vì yêu cầu thiết kế lại toàn bộ thành phần.
Điều này đặc biệt hữu ích với những website đã hoạt động lâu và có hệ thống HTML cố định. Khi đó, việc thay đổi cấu trúc có thể ảnh hưởng đến JavaScript, PHP hoặc các phần khác của website.
Dùng ChatGPT viết CSS từ HTML có sẵn
Đây là một trong những trường hợp thực tế nhất khi sử dụng ChatGPT. Bạn có thể cung cấp một phần HTML và yêu cầu tạo giao diện tương ứng.
Ví dụ, cấu trúc có thể gồm một khối chứa tiêu đề, đoạn mô tả và nút hành động:
<div class="card">
<h2>Thiết kế website</h2>
<p>Giải pháp website phù hợp với nhu cầu kinh doanh.</p>
<a href="#" class="card-button">Xem chi tiết</a>
</div>
Thay vì chỉ yêu cầu “viết CSS cho đoạn HTML trên”, bạn nên mô tả rõ kết quả muốn đạt được. Chẳng hạn, yêu cầu thẻ có chiều rộng tối đa, nền sáng, bo góc, đổ bóng nhẹ, tiêu đề nổi bật và nút nằm bên dưới phần mô tả.
ChatGPT khi đó có thể xây dựng selector dựa trên các class đã tồn tại. Cách làm này giảm nguy cơ tạo ra HTML mới không cần thiết và giúp CSS dễ tích hợp hơn vào dự án.
Cách dùng ChatGPT viết CSS responsive
Responsive là một trong những phần ChatGPT có thể hỗ trợ đáng kể, nhưng đây cũng là nơi bạn cần đưa ra yêu cầu cụ thể. Một giao diện không chỉ cần “co lại” trên điện thoại mà còn phải thay đổi bố cục phù hợp với không gian hiển thị.
Ví dụ, một danh sách bốn sản phẩm có thể hiển thị thành bốn cột trên màn hình rộng, hai cột trên máy tính bảng và một cột trên điện thoại. Bạn có thể mô tả chính xác quy tắc này trong yêu cầu.
ChatGPT có thể sử dụng media query để tạo các điểm thay đổi bố cục. Một đoạn CSS minh họa có thể có dạng:
.product-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 992px) {
.product-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.product-list {
grid-template-columns: 1fr;
}
}
Điều đáng chú ý là không nên chỉ yêu cầu ChatGPT “làm responsive”. Hãy cho biết bố cục mong muốn ở từng nhóm màn hình. Nếu website có breakpoint riêng, hãy cung cấp luôn các mốc đó để CSS được xây dựng theo hệ thống đang sử dụng.
Yêu cầu responsive mà không làm vỡ bố cục
Một lỗi phổ biến khi tạo CSS responsive là chỉ tập trung vào việc giảm chiều rộng. Trong thực tế, khi màn hình nhỏ hơn, khoảng cách, kích thước chữ, số cột, thứ tự thành phần và kích thước nút cũng có thể cần thay đổi.
Do đó, có thể yêu cầu ChatGPT kiểm tra đồng thời các vấn đề như:
- Không tạo thanh cuộn ngang ngoài ý muốn.
- Không để chữ bị tràn khỏi container.
- Không cố định chiều cao khiến nội dung bị che.
- Hình ảnh không vượt quá chiều rộng phần tử chứa.
- Các nút vẫn đủ vùng bấm trên màn hình cảm ứng.
- Khoảng cách giữa các thành phần được điều chỉnh khi không gian hẹp.
Những yêu cầu này giúp kết quả gần với giao diện thực tế hơn thay vì chỉ thay đổi số cột.
Dùng ChatGPT tạo bố cục bằng Flexbox và Grid
Flexbox và CSS Grid thường khiến người mới viết CSS mất nhiều thời gian vì có khá nhiều thuộc tính liên quan. ChatGPT có thể giải thích từng thuộc tính và đồng thời tạo đoạn mã dựa trên bố cục bạn mô tả.
Với Flexbox, bạn có thể yêu cầu tạo một khu vực trong đó logo nằm bên trái, menu nằm ở giữa và nút liên hệ nằm bên phải. Với Grid, bạn có thể mô tả số cột, khoảng cách giữa các ô và cách bố trí khi màn hình thay đổi.
Ví dụ, một yêu cầu có thể là: “Tạo CSS Grid cho danh sách bài viết, màn hình lớn hiển thị ba cột, máy tính bảng hai cột, điện thoại một cột, khoảng cách giữa các phần tử là 20px và không thay đổi HTML hiện tại”.
Cách mô tả này tốt hơn việc yêu cầu ChatGPT tự thiết kế một layout không có bối cảnh, bởi kết quả đã có những ràng buộc rõ ràng ngay từ đầu.
Cách nhờ ChatGPT sửa lỗi CSS
Trong thực tế, việc sửa CSS có thể quan trọng hơn việc tạo CSS mới. Khi một phần tử không nằm đúng vị trí, màu không được áp dụng hoặc responsive hoạt động sai, hãy cung cấp đoạn CSS liên quan cùng HTML nếu có thể.
Không nên chỉ nói “CSS bị lỗi”. Hãy mô tả hiện tượng quan sát được và kết quả mong muốn.
Ví dụ, thay vì yêu cầu chung chung, có thể nêu rằng một nút đáng lẽ nằm bên phải nhưng lại xuống dòng, hoặc một phần tử có position: absolute đang được định vị theo phần tử cha không đúng.
ChatGPT có thể dựa vào hiện tượng đó để kiểm tra các nguyên nhân như selector không khớp, độ ưu tiên CSS, kích thước phần tử cha, flexbox, grid, position hoặc các thuộc tính kích thước.
Cho ChatGPT biết kết quả hiện tại và kết quả mong muốn
Đây là thông tin rất hữu ích khi sửa CSS. “Không đẹp” là mô tả chủ quan và khó chuyển thành quy tắc cụ thể. Ngược lại, “hai phần tử đang nằm dọc nhưng tôi muốn chúng nằm cùng một hàng và cách nhau 20px” là một yêu cầu có thể chuyển trực tiếp thành CSS.
Nếu có ảnh chụp giao diện, bạn cũng có thể dùng hình ảnh làm cơ sở mô tả vấn đề trong những trường hợp giao diện thực tế khác với dự kiến. Tuy nhiên, ảnh chỉ cho biết kết quả hiển thị; mã HTML và CSS hiện tại vẫn rất quan trọng nếu mục tiêu là tìm đúng nguyên nhân.
Không nên phụ thuộc hoàn toàn vào CSS do ChatGPT tạo
ChatGPT có thể tạo ra mã hợp lệ về mặt cú pháp nhưng chưa chắc mã đó phù hợp hoàn toàn với website của bạn. Một đoạn CSS chỉ nhìn riêng có thể hoạt động tốt nhưng khi đưa vào dự án lại bị ảnh hưởng bởi các selector hoặc thư viện CSS đã có.
Ví dụ, một selector tổng quát như button có thể vô tình thay đổi toàn bộ nút trên website thay vì chỉ thay đổi nút bạn đang muốn thiết kế. Vì vậy, khi đưa CSS vào dự án thực tế, cần xem xét phạm vi tác động của selector.
Bạn cũng nên yêu cầu ChatGPT giải thích những phần quan trọng khi đoạn CSS có nhiều quy tắc. Việc hiểu lý do một thuộc tính được sử dụng sẽ giúp bạn tự sửa giao diện về sau thay vì phải phụ thuộc vào công cụ cho từng thay đổi nhỏ.
Một cách làm hiệu quả là yêu cầu ChatGPT tạo CSS trước, sau đó tiếp tục yêu cầu kiểm tra các vấn đề như selector quá rộng, thuộc tính dư thừa, xung đột với CSS hiện tại, responsive và khả năng bảo trì.
Cách yêu cầu ChatGPT tối ưu CSS đã có
Khi một website phát triển trong thời gian dài, CSS thường xuất hiện nhiều đoạn mã được thêm vào ở những thời điểm khác nhau. Có thể cùng một thành phần được khai báo ở nhiều vị trí, một số thuộc tính bị ghi đè hoặc xuất hiện các quy tắc không còn được sử dụng. Đây là lúc ChatGPT có thể hỗ trợ rà soát và tổ chức lại mã.
Thay vì yêu cầu “tối ưu CSS”, nên cung cấp đoạn CSS cần xử lý và nêu rõ mục tiêu. Chẳng hạn, bạn có thể yêu cầu giữ nguyên giao diện hiện tại nhưng loại bỏ thuộc tính trùng lặp, gom những quy tắc liên quan và hạn chế selector quá rộng.
Nếu CSS đang hoạt động ổn định, không nên yêu cầu thay đổi toàn bộ chỉ để làm mã ngắn hơn. Một đoạn CSS ngắn chưa chắc dễ bảo trì hơn. Điều quan trọng là mã phải dễ đọc, có phạm vi tác động rõ ràng và không làm thay đổi hành vi hiện tại của website.
Rà soát selector trước khi rút gọn CSS
Selector quyết định phần tử nào chịu tác động của một quy tắc. Khi tối ưu CSS, đây là một trong những phần cần kiểm tra đầu tiên.
Ví dụ, một quy tắc áp dụng trực tiếp cho tất cả thẻ p có thể ảnh hưởng đến nhiều khu vực ngoài thành phần đang cần chỉnh sửa. Nếu chỉ muốn thay đổi đoạn văn trong một khu vực cụ thể, có thể giới hạn selector theo container tương ứng.
ChatGPT có thể giúp phát hiện những selector quá rộng và đề xuất cách giới hạn phạm vi. Tuy nhiên, cần đối chiếu với HTML thực tế trước khi thay thế vì việc tăng độ cụ thể của selector đôi khi cũng khiến CSS khó ghi đè hơn về sau.
Dùng ChatGPT tạo hiệu ứng CSS mà không cần thư viện
Đối với các hiệu ứng giao diện đơn giản, CSS thuần thường đã đủ đáp ứng nhu cầu. ChatGPT có thể tạo các hiệu ứng như đổi màu khi rê chuột, chuyển động nhẹ, làm nổi bật nút, thay đổi độ trong suốt hoặc tạo animation cho một thành phần.
Ví dụ, nếu muốn nút thay đổi màu một cách mượt mà khi người dùng di chuyển chuột lên, có thể kết hợp transition với trạng thái :hover.
.card-button {
background: #d3801f;
color: #ffffff;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.card-button:hover {
background: #b96812;
transform: translateY(-2px);
}
Điểm quan trọng là nên mô tả hiệu ứng mong muốn thay vì chỉ yêu cầu “làm animation đẹp”. Ví dụ, bạn có thể yêu cầu hiệu ứng nhẹ, thời gian chuyển động khoảng 200 mili giây và không làm thay đổi kích thước bố cục.
Kiểm soát animation để tránh hiệu ứng quá mức
Không phải thành phần nào cũng cần chuyển động. Nếu yêu cầu ChatGPT tạo quá nhiều animation, giao diện có thể trở nên rối và làm người dùng mất tập trung.
Khi cần hiệu ứng, nên xác định rõ thành phần nào được phép chuyển động, chuyển động trong trạng thái nào và mức độ thay đổi ra sao. Đối với các thành phần quan trọng như nút hành động hoặc thông báo, hiệu ứng ngắn và có chủ đích thường dễ kiểm soát hơn.
Bạn cũng có thể yêu cầu ChatGPT xem xét trạng thái prefers-reduced-motion để hạn chế chuyển động đối với người dùng đã thiết lập giảm hiệu ứng chuyển động trên thiết bị.
Cách dùng ChatGPT xử lý màu sắc và kiểu chữ
ChatGPT có thể hỗ trợ xây dựng hệ thống màu và kiểu chữ cho giao diện thay vì chỉ đặt màu riêng lẻ cho từng thành phần. Điều này đặc biệt hữu ích khi website có nhiều trang và cần duy trì sự thống nhất về mặt hình ảnh.
Bạn có thể cung cấp màu thương hiệu, màu nền, màu chữ chính, màu chữ phụ và màu dành cho trạng thái như thành công hoặc cảnh báo. Sau đó yêu cầu xây dựng các biến CSS để những giá trị này có thể được quản lý tập trung.
:root {
--color-primary: #d3801f;
--color-text: #222222;
--color-muted: #666666;
--color-background: #ffffff;
--color-border: #dddddd;
}
.button-primary {
background-color: var(--color-primary);
color: #ffffff;
}
Cách tổ chức này giúp việc thay đổi màu thương hiệu về sau đơn giản hơn. Thay vì tìm và sửa hàng chục giá trị màu khác nhau, bạn có thể điều chỉnh biến dùng chung.
Nhờ ChatGPT viết CSS theo cấu trúc HTML có sẵn
Trong các dự án PHP hoặc website được phát triển theo cấu trúc riêng, HTML có thể đã được tạo từ template hoặc mã nguồn phía máy chủ. Khi đó, việc thay đổi HTML chỉ để phù hợp với CSS không phải lúc nào cũng là lựa chọn tốt.
Hãy nói rõ rằng cấu trúc HTML không được thay đổi và yêu cầu ChatGPT chỉ tạo CSS dựa trên class hoặc id hiện có. Nếu cần chỉnh HTML, hãy yêu cầu công cụ đưa ra phần thay đổi riêng để bạn kiểm tra trước.
Cách này giúp hạn chế tình trạng ChatGPT tự tạo thêm class, đổi tên class hoặc thay đổi cấu trúc DOM khiến CSS mới không còn tương thích với JavaScript và mã nguồn hiện tại.
Cách kiểm tra CSS do ChatGPT tạo trước khi đưa lên website
Đừng đưa ngay đoạn CSS mới vào website đang hoạt động mà không kiểm tra. Một quy trình đơn giản có thể giúp phát hiện nhiều vấn đề trước khi mã được sử dụng chính thức.
- Kiểm tra selector có đúng phần tử cần tác động hay không.
- Kiểm tra thuộc tính có bị CSS khác ghi đè hay không.
- Kiểm tra bố cục trên nhiều kích thước màn hình.
- Kiểm tra văn bản dài, hình ảnh lớn và nội dung thực tế.
- Kiểm tra trạng thái hover, focus và các trạng thái tương tác cần thiết.
- Kiểm tra xem CSS mới có làm thay đổi những khu vực khác hay không.
- Xóa hoặc điều chỉnh những quy tắc không thực sự cần thiết.
Đặc biệt, đừng chỉ kiểm tra trường hợp nội dung ngắn. Một giao diện có thể trông hoàn hảo khi tiêu đề chỉ có một dòng nhưng bị vỡ bố cục khi tiêu đề dài hơn, hình ảnh có tỷ lệ khác hoặc nội dung được lấy động từ cơ sở dữ liệu.
Cách yêu cầu ChatGPT giải thích một đoạn CSS khó hiểu
Nếu gặp CSS được viết bởi người khác hoặc một đoạn mã cũ mà bạn chưa hiểu, bạn có thể đưa trực tiếp đoạn mã cho ChatGPT và yêu cầu giải thích theo từng nhóm chức năng.
Thay vì chỉ hỏi “đoạn CSS này làm gì?”, có thể yêu cầu phân tích selector, giải thích từng thuộc tính quan trọng, chỉ ra quy tắc nào có thể ghi đè lẫn nhau và mô tả kết quả dự kiến trên giao diện.
Cách giải thích theo cấu trúc giúp bạn hiểu quan hệ giữa các thuộc tính thay vì chỉ nhận một bản diễn giải chung chung. Đây cũng là phương pháp phù hợp khi bạn đang học CSS và muốn hiểu tại sao một bố cục lại hoạt động theo cách đó.
Những lỗi thường gặp khi dùng ChatGPT viết CSS
Việc tạo CSS bằng AI nhanh nhưng không có nghĩa mọi đoạn mã được sinh ra đều phù hợp với dự án. Một số lỗi thường xuất hiện khi yêu cầu quá chung hoặc sao chép mã mà không kiểm tra.
Yêu cầu quá ít thông tin
Nếu chỉ nói “tạo CSS cho trang bán hàng”, ChatGPT không biết cấu trúc HTML, phong cách thiết kế, kích thước, màu sắc hay breakpoint mà website đang sử dụng. Kết quả vì thế dễ mang tính minh họa hơn là mã có thể tích hợp trực tiếp.
Không cung cấp CSS hiện tại khi cần sửa lỗi
Nếu vấn đề xuất phát từ xung đột giữa nhiều selector, chỉ mô tả hiện tượng có thể chưa đủ. Cung cấp phần CSS liên quan sẽ giúp quá trình tìm nguyên nhân chính xác hơn.
Để selector quá rộng
CSS dùng selector tổng quát có thể vô tình ảnh hưởng đến những thành phần không liên quan. Khi tạo mã cho một khu vực riêng, nên yêu cầu giới hạn phạm vi selector và kiểm tra những phần tử khác trên trang.
Sao chép mã mà không kiểm tra responsive
Một đoạn CSS có thể hiển thị đúng trên màn hình máy tính nhưng không phù hợp với điện thoại. Responsive nên được kiểm tra bằng nội dung thực tế và nhiều kích thước viewport thay vì chỉ nhìn một trạng thái.
Cách xây dựng quy trình viết CSS với ChatGPT
Thay vì dùng ChatGPT theo kiểu hỏi từng đoạn CSS rời rạc, bạn có thể xây dựng một quy trình nhất quán cho mỗi thành phần giao diện.
- Xác định thành phần cần xây dựng.
- Cung cấp HTML và CSS hiện tại nếu đã có.
- Mô tả giao diện và hành vi mong muốn.
- Yêu cầu tạo phiên bản CSS đầu tiên.
- Kiểm tra giao diện trên nội dung thực tế.
- Gửi lại lỗi hoặc phần chưa đúng để điều chỉnh.
- Yêu cầu rà soát selector và CSS dư thừa.
- Kiểm tra responsive trước khi đưa vào website chính thức.
Quy trình này có lợi thế là mỗi lần chỉnh sửa đều dựa trên phiên bản trước. Bạn cũng dễ xác định thay đổi nào đã giải quyết vấn đề và thay đổi nào có thể gây ra lỗi mới.
ChatGPT viết CSS hiệu quả nhất khi bạn kiểm soát yêu cầu
Điểm mạnh của ChatGPT khi hỗ trợ CSS nằm ở khả năng chuyển yêu cầu bằng ngôn ngữ tự nhiên thành các quy tắc kỹ thuật, giải thích mã và đưa ra nhiều hướng xử lý cho cùng một vấn đề. Tuy nhiên, chất lượng kết quả phụ thuộc đáng kể vào thông tin mà bạn cung cấp.
Muốn có CSS sát với website thực tế, hãy cung cấp HTML liên quan, mô tả kết quả mong muốn, xác định các giới hạn không được thay đổi và nói rõ yêu cầu responsive. Khi mã đã được tạo, cần kiểm tra selector, độ ưu tiên, khả năng tương thích với CSS hiện tại và giao diện trên nhiều kích thước màn hình.
Thay vì xem ChatGPT như công cụ chỉ để “viết code”, bạn có thể sử dụng nó như một trợ lý trong toàn bộ quá trình từ thiết kế quy tắc CSS, tìm lỗi, giải thích thuộc tính cho đến tổ chức lại mã. Cách làm này giúp tiết kiệm thời gian nhưng vẫn giữ được quyền kiểm soát đối với giao diện và mã nguồn của website.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
