Tạo CSS từ lớp

Cập nhật gần đây nhất vào 2 thg 11, 2026

Tìm hiểu cách trích xuất mã CSS từ lớp hình dạng và lớp văn bản để dịch các thuộc tính thiết kế thành bảng định kiểu sẵn sàng sử dụng cho web trong Adobe Photoshop.

Tính năng Copy CSS tạo ra các thuộc tính CSS (Cascading Style Sheet) trực tiếp từ các lớp trong Photoshop, nắm bắt các thông số thiết kế mà bạn có thể dán vào tập tin bảng định kiểu của mình. Quy trình làm việc này giúp kết nối thiết kế trực quan với việc triển khai mã, đặc biệt hữu ích khi bạn chuẩn bị tài sản cho các dự án web hoặc hợp tác với nhà phát triển cần các thông số kiểu chính xác.

Sử dụng Copy CSS khi bạn cần dịch các yếu tố thiết kế trực quan thành khai báo kiểu sẵn sàng cho mã. Tính năng này hoạt động với từng lớp hình dạng, lớp văn bản hoặc nhóm lớp chứa các yếu tố này. Tính năng này tạo ra CSS mà bạn có thể dán trực tiếp vào bảng định kiểu, nắm bắt các thuộc tính thiết kế với độ chính xác đến từng pixel. Để có quy trình làm việc từ thiết kế sang web toàn diện hơn, hãy khám phá hiệu ứng và kiểu lớp để có thêm các tùy chọn tạo kiểu và xuất tài sản cho các định dạng đầu ra khác.

Thuộc tính CSS được trích xuất từ các lớp

Copy CSS trích xuất các thuộc tính khác nhau tùy thuộc vào loại lớp mà bạn chọn.

Các lớp shape tạo CSS cho:

Tọa độ kích thước và vị trí
Màu đường bao
Màu tô, bao gồm định nghĩa gradient
Hiệu ứng đổ bóng

Lớp văn bản nắm bắt thuộc tính hình dạng cùng với các thông số kiểu chữ:

Họ phông chữ
Kích thước và độ đậm phông chữ
Chiều cao dòng
Trang trí văn bản (gạch chân, gạch xóa)
Căn chỉnh theo chiều dọc (chỉ số trên, chỉ số dưới)
Căn chỉnh văn bản

Nhóm lớp tạo ra các lớp CSS có cấu trúc đại diện cho quan hệ cha-con. Bản thân nhóm trở thành một div cha, còn mỗi lớp trong nhóm tạo ra một div con. Các giá trị vị trí trên cùng và bên trái của phần tử con được tính theo phần tử chứa gốc, giống với cách định vị CSS tiêu chuẩn.

Giới hạn của Copy CSS

Copy CSS không hoạt động với Smart Objects.Nếu lớp của bạn là Smart Object, hãy bấm đúp để chỉnh sửa nội dung của lớp đó và sao chép CSS từ các lớp bên trong tài liệu Smart Object, hoặc chuyển lớp thành ảnh bitmap trước nếu điều đó phù hợp với quy trình làm việc của bạn.

Tính năng này không thể xử lý nhiều lớp hình dạng hoặc lớp văn bản được chọn đồng thời, trừ khi các lớp đó được nhóm lại.Để sao chép CSS từ nhiều lớp cùng lúc, hãy nhóm các lớp đó lại trước.

Tạo mã CSS từ các lớp của bạn

Trong bảng điều khiển Layers, nhấp chuột phải vào lớp hình dạng, lớp văn bản hoặc nhóm lớp, sau đó chọn Copy CSS trong menu ngữ cảnh.Ngoài ra, bạn có thể chọn lớp, sau đó chọn Copy CSS trong menu của bảng điều khiển Layers.

Mở tài liệu stylesheet của bạn và dán mã đã tạo bằng Ctrl+V (Windows) hoặc Command+V (macOS).

Mã CSS hiện đã có trong khay nhớ tạm và sẵn sàng để tích hợp vào dự án web của bạn.Hãy xem lại các thuộc tính được tạo để đảm bảo chúng phù hợp với yêu cầu phát triển của bạn và điều chỉnh giá trị khi cần cho thiết kế responsive hoặc khả năng tương thích với trình duyệt.

Tạo những hình ảnh tuyệt đẹp với Photoshop
Chỉnh sửa, chấm sửa và biến đổi ảnh với các công cụ sáng tạo hàng đầu trong ngành mà bạn đã biết và yêu thích.

Mở ứng dụng

Làm việc với Ghi chú trong Photoshop

Học hỏi

Học qua video hướng dẫn từng bước và hướng dẫn thực hành ngay trong ứng dụng.

Cộng đồng

Tham gia thảo luận, tìm câu trả lời, học hỏi từ các chuyên gia và chia sẻ kiến thức của bạn.

Trang chủ Adobe

Truy cập các ứng dụng Creative Cloud yêu thích, dịch vụ, quản lý tập tin và nhiều hơn nữa.