Cách trích xuất CSS trong Illustrator

Tìm hiểu cách trích xuất và xuất mã CSS cho các đối tượng riêng lẻ hoặc cho toàn bộ bố cục được thiết kế trong Illustrator.

Với Illustrator, khi bạn tạo bố cục cho một trang HTML, bạn cũng có thể tạo và xuất mã CSS cơ bản điều chỉnh giao diện của các thành phần và đối tượng trên trang. CSS cho phép bạn điều khiển giao diện của văn bản và đối tượng (tương tự như kiểu ký tự và kiểu đồ họa).

Xem và trích xuất mã CSS

Bảng thuộc tính CSS cho phép người dùng thực hiện các công việc sau:
  • Xem và sao chép mã CSS cho các đối tượng được chọn.
  • Xuất một hoặc nhiều hoặc tất cả các thành phần Illustrator được chọn vào một tệp CSS.
  • Xuất các hình ảnh có thể được chuyển đổi thành raster.
  • Tạo mã CSS cụ thể cho từng trình duyệt.
Mã thuộc tính CSS:

css.jpeg


A. Cảnh báo, nếu một số kiểu không thể chuyển đổi thành mã CSS
B. Hộp thoại Tùy chọn Xuất CSS
C. Xuất CSS đã chọn vào tệp
D. Sao chép kiểu đã chọn vào clipboard
E. Tạo mã CSS
F. Menu Bảng Thuộc tính CSS
G. Các kiểu được sử dụng trong các đối tượng đã chọn
H. Mã CSS

Để xem và trích xuất mã CSS, làm theo các bước sau:

1. Chọn Window > CSS Properties.

Lưu ý: Đảm bảo các đối tượng trong tài liệu Illustrator của bạn đã được đặt tên trong bảng Layer.

2. Để hiển thị mã CSS đã được tạo:

  • Đối với một đối tượng:
Chọn một đối tượng. Mã CSS cho đối tượng sẽ được hiển thị trong bảng CSS Properties.​

  • Đối với nhiều đối tượng:
Nhấn và giữ phím Shift, chọn nhiều đối tượng và sau đó chọn Generate CSS trong bảng CSS Properties.​

  • Đối với tất cả các đối tượng:
Nhấn Ctrl/Cmd + A để chọn tất cả các đối tượng, sau đó chọn Generate CSS trong bảng CSS Properties.​

3. Để lấy mã CSS đã được tạo, làm một trong những điều sau đây:

  • Để sao chép mã đã chọn:
Chọn một mã cụ thể và chọn Copy Selected Style để sao chép vào clipboard.Chọn menu CSS Properties Panel và chọn Export Selected CSS để xuất ra một tệp.​
  • Để sao chép tất cả các mã:
Không chọn gì trong mã CSS và chọn Copy Selected Style để sao chép vào clipboard.Chọn menu CSS Properties Panel và chọn Export All để xuất ra một tệp.​

Khi lưu mã CSS vào một tệp, chọn từ các tùy chọn trong hộp thoại CSS Export Options.

css-export.jpeg
 
Back
Bên trên