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

有了 Illustrator CC,當您建立 HTML 頁面的配置時,您也可以產生和轉存基本 CSS 代碼,這些代碼決定了頁面上元件和物件的外觀。CSS 可讓您控制文字和物件的外觀 (類似字元和圖形樣式)。您可以選擇轉存個別物件的 CSS 代碼,或轉存在 Illustrator 中設計的整個配置。   

CSS 屬性面板 (Window > CSS 屬性) 可以讓使用者進行下列作業:

  • 檢視選取物件的 CSS 代碼
  • 複製選取物件的 CSS 代碼
  • 轉存一個、多個或全部的 Illustrator 元素到 CSS 檔案。
  • 轉存所使用的可點陣化圖片
  • 產生特定瀏覽器專用的 CSS 代碼

視訊:Illustrator CC 中的 CSS 摘取

視訊:Illustrator CC 中的 CSS 摘取
瞭解如何讓 Illustrator CC 為您產生 CSS 代碼 — 不論是文字、物件,或甚至是整個配置,更快建立網站。
Rufus Deuchler

檢視和摘取 CSS 代碼

註解:

若要產生 CSS 代碼,可採用下列其中一項做法:

  • 確定 Illustrator 文件中的物件,在「圖層」面板中有名稱。
  • 按一下 Window > CSS 屬性 > 彈出選單 > 轉存選項,然後選取產生未命名物件的 CSS 核取方塊。

  1. 選取 Window > CSS 屬性

    A. 警告,如果某些樣式無法轉換為 CSS 代碼 B. 「CSS 轉存選項」對話框 C. 轉存選取的 CSS 為檔案 D. 拷貝所選項目樣式到剪貼簿 E. 產生 CSS F. 彈出選單 G. 所選物件使用的樣式 H. CSS 代碼 
  2. 在開啟的 Illustrator 文件中,執行下列其中一個作業:

    • 選取一個物件。在 CSS 屬性 面板中會顯示該物件的 CSS 代碼。
    • 按住 Shift,選取多個物件,然後按一下 CSS 屬性面板中的產生 CSS 按鈕。
    • 按 Ctrl/Cmd + A 選取所有物件,然後按一下 CSS 屬性面板中的產生 CSS 按鈕。

    隨即顯示產生的 CSS 代碼。

  3. 若要取得已產生的 CSS 代碼,執行下列其中一個作業:

    • 若要複製選取的代碼,選取特定代碼,然後:
      • 若要複製到剪貼簿,按一下複製選取的樣式
      • 若要轉存到檔案,按一下彈出式選單,然後按一下轉存選取的 CSS
    • 若要複製全部代碼,不要選取 CSS 代碼中任何部分,然後:
      • 若要複製到剪貼簿,按一下複製選取的樣式
      • 若要轉存到檔案,按一下彈出式選單,然後按一下全部轉存
  4. 將 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;
}

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策