使用手冊 取消

擷取 Extract CSS | Illustrator

搜尋
Illustrator

Illustrator

在網頁上開啟
  1. Illustrator 使用手冊
  2. 認識 Illustrator
    1. Illustrator 簡介
      1. Illustrator 新增功能
      2. 常見問題
      3. Illustrator 系統需求
      4. 適用於 Apple Silicon 的 Illustrator
      5. GPU 效能
    2. 工作區
      1. 工作區基本介紹
      2. 建立文件
      3. 使用 Illustrator 探索面板加快學習
      4. 使用「相關工作列」加速工作流程
      5. 工具列
      6. 預設的鍵盤快速鍵
      7. 自訂鍵盤快速鍵
      8. 工作區域簡介
      9. 管理工作區域
      10. 自訂工作區
      11. 屬性面板
      12. 設定偏好設定
      13. 觸控工作區
      14. Illustrator 中的 Microsoft Surface Dial 支援
      15. 還原編輯和管理設計歷史記錄
      16. 旋轉檢視
      17. 尺標、格點和參考線
      18. Illustrator 協助工具
      19. 檢視圖稿
      20. 搭配 Illustrator 使用 Touch Bar
      21. 檔案和範本
    3. Illustrator 中的工具
      1. 工具一覽
      2. 選取工具
        1. 選取範圍
        2. 直接選取
        3. 群組選取
        4. 魔術棒
        5. 套索
        6. 工作區域
      3. 導覽工具
        1. 手形
        2. 旋轉檢視
        3. 縮放顯示
      4. 上色工具
        1. 漸層
        2. 網格
        3. 形狀建立程式
      5. 文字工具
        1. 文字
        2. 路徑文字
        3. 垂直文字
      6. 繪圖工具
        1. 鋼筆
        2. 增加錨點
        3. 刪除錨點
        4. 錨點
        5. 曲線
        6. 線段區段
        7. 矩形
        8. 圓角矩形
        9. 橢圓
        10. 多邊形
        11. 星形
        12. 繪圖筆刷
        13. 點滴筆刷
        14. 鉛筆
        15. Shaper
        16. 切片
      7. 修改工具
        1. 旋轉
        2. 鏡射
        3. 縮放
        4. 傾斜
        5. 寬度
        6. 任意變形
        7. 滴管
        8. 漸變
        9. 橡皮擦
        10. 剪刀
        11. 尺寸
    4. 生成式 AI (在中國大陸無法使用)
      1. 使用文字提示產生場景、主體和圖示
      2. 使用文字提示產生向量圖樣
      3. 使用文字提示產生向量形狀填色
      4. 使用文字提示為圖稿重新上色
    5. 快速動作
      1. 復古文字
      2. 霓虹光文字
      3. 老式文字
      4. 重新上色
      5. 將素描轉換為向量
  3. iPad 版 Illustrator
    1. iPad 版 Illustrator 簡介
      1. iPad 版 Illustrator 概觀
      2. iPad 版 Illustrator 常見問題集
      3. 系統需求 | iPad 版 Illustrator
      4. 在 iPad 版 Illustrator 上可以和不可以做的事
    2. 工作區
      1. iPad 版 Illustrator 工作區
      2. 觸控快捷鍵與手勢
      3. iPad 版 Illustrator 鍵盤快捷鍵
      4. 管理您的應用程式設定
    3. 文件
      1. 在 iPad 版 Illustrator 中處理文件
      2. 讀入 Photoshop 和 Fresco 文件
    4. 選取和排列物件
      1. 建立重複物件
      2. 建立漸變物件
    5. 繪圖
      1. 繪製及編輯路徑
      2. 繪製及編輯形狀
    6. 文字
      1. 使用類型和字型
      2. 沿路徑建立文字設計
      3. 新增自有字型
    7. 處理影像
      1. 將點陣圖向量化
    8. 顏色
      1. 套用顏色和漸層
  4. 雲端文件
    1. 基本概念
      1. 使用 Illustrator 雲端文件
      2. 共用 Illustrator 雲端文件並進行共同作業
      3. 共用文件以供審核
      4. 升級 Adobe Illustrator 的雲端儲存空間
      5. Illustrator 雲端文件 | 常見問題
    2. 疑難排解
      1. 疑難排解 Illustrator 雲端文件的建立或儲存問題
      2. 疑難排解 Illustrator 雲端文件問題
  5. 新增並編輯內容
    1. 繪圖
      1. 繪圖基本介紹
      2. 編輯路徑
      3. 繪製像素級最佳化線條圖
      4. 使用筆型、曲線或鉛筆工具繪圖
      5. 繪製簡單線條和形狀
      6. 繪製矩形和放射網格
      7. 繪製及編輯反光
      8. 描繪影像
      9. 簡化路徑
      10. 符號工具和符號組
      11. 調整路徑區段
      12. 以 5 個簡單步驟設計花朵
      13. 建立和編輯透視格點
      14. 在透視格點上繪製和修改物件
      15. 使用物件作為重複使用的符號
      16. 繪製網頁工作流程的像素對齊路徑
    2. 測量
      1. 測量和繪製尺寸
    3. 3D 物件和素材
      1. 關於 Illustrator 的 3D 效果
      2. 製作 3D 圖形
      3. 將圖稿對應到 3D 物件
      4. 建立 3D 文字
      5. 建立 3D 物件
    4. 顏色
      1. 關於色彩
      2. 選取顏色
      3. 使用及建立色票
      4. 調整顏色
      5. 使用「Adobe Color 主題」面板
      6. 顏色群組 (調協)
      7. 顏色主題面板
      8. 重新上色您的圖稿
    5. 上色
      1. 關於上色
      2. 使用填色與筆畫上色
      3. 即時上色群組
      4. 漸層
      5. 筆刷
      6. 透明度和漸變模式
      7. 將筆畫套用至物件
      8. 建立和編輯圖樣
      9. 網格
      10. 圖樣
    6. 選取和排列物件
      1. 選取物件
      2. 圖層
      3. 展開物件、將物件組成群組及解散物件群組
      4. 移動、對齊和均分物件
      5. 在路徑上對齊、排列和移動物件
      6. 將物件靠齊字符
      7. 將物件靠齊日文字符
      8. 堆疊物件    
      9. 鎖定、隱藏及刪除物件
      10. 複製及重複物件
      11. 旋轉及鏡射物件
      12. 交織物件
      13. 製作擬真的藝術模型
    7. 改變物件外框
      1. 裁切影像
      2. 將物件變形
      3. 組合物件
      4. 剪下、分割和剪裁物件
      5. 操控彎曲
      6. 縮放、傾斜及扭曲物件
      7. 建立漸變物件
      8. 使用封套改變外框
      9. 使用效果改變物件外框
      10. 使用 Shaper 和形狀建立程式工具建立形狀
      11. 使用即時轉角
      12. 增強型改變外框工作流程和觸控支援
      13. 編輯剪裁遮色片
      14. 即時形狀
      15. 使用「形狀建立程式」工具建立形狀
      16. 整體編輯
    8. 文字
      1. 新增文字並使用文字物件
      2. 重排檢視器
      3. 建立項目符號和編號清單
      4. 管理文字區域
      5. 字型和印刷樣式
      6. 將影像內的文字轉換為可編輯的文字
      7. 新增基本格式至文字
      8. 新增進階格式至文字
      9. 讀入和轉存文字
      10. 格式化段落
      11. 特殊字元
      12. 建立路徑文字
      13. 字元與段落樣式
      14. 定位點
      15. 從 Adobe Fonts 新增遺失的字型
      16. 阿拉伯文和希伯來文文字
      17. 字型 | 常見問題集和疑難排解提示
      18. 創意印刷樣式設計
      19. 縮放與旋轉文字
      20. 行和字元間距
      21. 連字和分行符號
      22. 拼字及語言字典
      23. 設定亞洲字元格式
      24. 亞洲撰寫程式字體
      25. 使用漸變物件建立文字設計
      26. 使用影像描圖建立文字海報
    9. 建立特效
      1. 使用效果
      2. 繪圖樣式
      3. 外觀屬性
      4. 建立素描和馬賽克
      5. 陰影、光暈和羽化
      6. 效果摘要
    10. 網頁圖形
      1. 建立網頁圖形的最佳作法
      2. 圖表
      3. SVG
      4. 切片和影像地圖
  6. 讀入、轉存及儲存
    1. 讀入
      1. 置入多個檔案
      2. 管理連結檔案和嵌入的檔案
      3. 連結資訊
      4. 取消嵌入影像
      5. 從 Photoshop 讀入圖稿
      6. 讀入點陣影像
      7. 讀入 Adobe PDF 檔案
      8. 讀入 EPS、DCS 及 AutoCAD 檔案
    2. Illustrator 中的 Creative Cloud Libraries
      1. Illustrator 中的 Creative Cloud Libraries
    3. 儲存和轉存
      1. 儲存圖稿
      2. 轉存圖稿
      3. 建立 Adobe PDF 檔案
      4. Adobe PDF 選項
      5. 在 Photoshop 中使用 Illustrator 圖稿
      6. 以批次方式收集資產及轉存
      7. 封裝檔案
      8. 擷取 Extract CSS | Illustrator CC
      9. 文件資訊面板
  7. 列印
    1. 準備列印
      1. 設定列印的文件
      2. 變更頁面大小和方向
      3. 指定剪裁或對齊的裁切標記
      4. 開始使用大型畫布
    2. 列印
      1. 疊印
      2. 使用色彩管理進行列印
      3. PostScript 列印
      4. 列印預設集
      5. 印表機的標記和出血
      6. 列印和儲存透明圖稿
      7. 補漏白
      8. 分色列印
      9. 列印漸層、網格及色彩漸變
      10. 白色疊印
  8. 自動化工作
    1. 使用「變數」面板進行資料合併
    2. 以指令碼自動化
    3. 以動作自動化
  9. 疑難排解 
    1. 已修正的問題
    2. 已知問題
    3. 當機問題
    4. 當機後復原檔案
    5. 安全模式
    6. 檔案問題
    7. 支援的檔案格式
    8. GPU 裝置驅動程式問題
    9. Wacom 裝置問題
    10. DLL 檔案問題
    11. 記憶體問題
    12. 偏好設定檔案問題
    13. 字型問題
    14. 印表機問題
    15. 與 Adobe 分享當機報告
    16. 改善 Illustrator 的效能

了解如何為單一物件或在 Illustrator 中設計的整個版面，擷取和匯出 CSS 程式碼。

您可以在 Illustrator 中建立 HTML 頁面的設計。這對網路開發人員是很好的視覺引導，他們可以在 HTML 編輯器中將配置、樣式、物件的程式碼寫入頁面。不過，完全複製元件和物件的外觀和位置是一件耗時乏味的事。

有了 Illustrator ，當您建立 HTML 頁面的配置時，您也可以產生和匯出基本 CSS 程式碼，這些程式碼決定了頁面上元件和物件的外觀。CSS 可讓您控制文字和物件的外觀 (類似字元和圖形樣式)。   

檢視和擷取 CSS 程式碼

「CSS 屬性」面板可讓使用者執行以下操作：

  • 檢視並複製所選物件的 CSS 程式碼。
  • 匯出一個、多個或全部的 Illustrator 元素到 CSS 檔案。
  • 匯出所使用的可點陣化圖片。
  • 產生特定瀏覽器專用的 CSS 程式碼。
CSS 屬性程式碼

A. 警告，如果某些樣式無法轉換為 CSS 程式碼 B. CSS 匯出選項對話框 C. 匯出選取的 CSS 為檔案 D. 拷貝所選項目樣式到剪貼簿 E. 產生 CSS F. CSS 屬性面板選單 G. 所選物件使用的樣式 H. CSS 程式碼 

若要檢視和擷取 CSS 程式碼，請按照以下步驟操作：

  1. 選取「視窗 > CSS 屬性」。

    註解：

    確定 Illustrator 文件中的物件在「圖層」面板中有名稱。

  2. 若要顯示產生的 CSS 程式碼：

    對於一個物件：

    選取一個物件。「CSS 屬性」面板會顯示該物件的 CSS 程式碼。

    對於多個物件：

    按住 Shift，選取多個物件，然後選取「CSS 屬性」面板中的「產生 CSS」。

    對於所有物件：

    按 Ctrl/Cmd + A 以選取所有物件，然後選取「CSS 屬性」面板中的「產生 CSS」。

  3. 若要取得已產生的 CSS 程式碼，執行下列其中一個作業：

    若要複製所選的程式碼：

    • 選擇特定程式碼並選取「複製所選樣式」將其複製到剪貼簿。
    • 選取「CSS 屬性面板」選單，然後選取「匯出所選 CSS」以匯出到檔案。

    若要複製所有程式碼：

    • 不選取 CSS 程式碼，然後選取「複製所選樣式」將其複製到剪貼簿。
    • 選取「CSS 屬性面板」選單，然後選取「全部匯出」以匯出到檔案。

  4. 將 CSS 程式碼儲存到檔案時，在「CSS 匯出選項」對話框中選擇選項。

    CSS 匯出選項對話框
    CSS 匯出選項

範例 CSS 程式碼

漸層的矩形 (適用於所有瀏覽器)

.GRADIENT_BOX { background : -moz-linear-gradient(0% 50% 0deg,rgba(255, 242, 0, 1) 0%,rgba(254, 236, 1, 1) 10.31%,rgba(253, 218, 4, 1) 24.34%,rgba(251, 190, 9, 1) 40.51%,rgba(247, 150, 15, 1) 58.28%,rgba(243, 99, 24, 1) 77.37%,rgba(238, 37, 34, 1) 97.27%,rgba(237, 28, 36, 1) 100%); background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : -o-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -ms-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200', endColorstr='#ED1C24' ,GradientType=0)"; background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF200',endColorstr='#ED1C24' , GradientType=1);
}

漸層的矩形 (適用於 Webkit 型瀏覽器)

.GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}

多個物件

.NormalCharacterStyle { font-family : Myriad Pro; font-size : 12px; } .st0 { border-style : Solid; border-color : #FFFFFF; border-color : rgba(255, 255, 255, 1); border-width : 0px; } .GRADIENT_BOX { background : -webkit-linear-gradient(0deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(255, 242, 0, 1) ),color-stop(0.1031,rgba(254, 236, 1, 1) ),color-stop(0.2434,rgba(253, 218, 4, 1) ),color-stop(0.4051,rgba(251, 190, 9, 1) ),color-stop(0.5828,rgba(247, 150, 15, 1) ),color-stop(0.7737,rgba(243, 99, 24, 1) ),color-stop(0.9727,rgba(238, 37, 34, 1) ),color-stop(1,rgba(237, 28, 36, 1) )); background : linear-gradient(90deg, rgba(255, 242, 0, 1) 0%, rgba(254, 236, 1, 1) 10.31%, rgba(253, 218, 4, 1) 24.34%, rgba(251, 190, 9, 1) 40.51%, rgba(247, 150, 15, 1) 58.28%, rgba(243, 99, 24, 1) 77.37%, rgba(238, 37, 34, 1) 97.27%, rgba(237, 28, 36, 1) 100%); border-style : Solid; border-color : #231F20; border-color : rgba(35, 31, 32, 1); border-width : 1px;
}

相關主題

有任何疑問或意見嗎？

諮詢社群

如果您有任何疑問或想分享想法，歡迎加入 Adobe Illustrator 社群。我們很樂意聽取您的意見。

更快、更輕鬆地獲得協助

新的使用者？

快速連結

檢視您的所有計劃 管理您的計劃
檢視快速連結
隱藏快速連結

法律注意事項    |    線上隱私政策