使用 IntraWeb (10) - CSS

IW 會把大多數的視覺屬性轉換為 CSS; 我們主動使用 CSS 要分兩步:

---

第一步:

---

{通過窗體的 StyleSheet 屬性指定要鏈接的 CSS 文件}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  StyleSheet.Filename := 'MyCss1.css'; //CSS 文件須放在 wwwroot 下
//  StyleSheet.URL := 'http://...';    //外鏈
end;

{假如站點級的 CSS ... TIWServerController.OnCreate}
procedure TIWServerController.IWServerControllerBaseCreate(Sender: TObject);
begin
  StyleSheet.Filename := 'MyCss1.css'; //CSS 文件須放在 wwwroot 下
//  StyleSheet.URL := 'http://...';    //外鏈
end;

---

第二步:

---

{為要使用樣式的控件指定 Css 屬性}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  StyleSheet.Filename := 'MyCss1.css';
  IWMemo1.Css := 'Class1'; //假如 MyCss1.css 中有個 Class1 的類, 如: .Class {font-size: 32px; }

  IWMemo1.StyleRenderOptions.RenderFont := False; //一般情況下, 還需要同時調整下 StyleRenderOptions 屬性
end;

{------------------------------------------------------------------
關於 StyleRenderOptions 屬性: 

如果我們給控件使用了 CSS, 就有可能和控件本身的屬性發生沖突, 用哪一個呢? 這需要控件的 StyleRenderOptions 屬性來決定!

它也是個類(IWTypes.TIWStyleRenderOptions < TPersistent < TObject), 該類只有幾個布爾屬性:
property RenderSize: Boolean       //
property RenderPosition: Boolean   //
property RenderFont: Boolean       //
property RenderZIndex: Boolean     //
property RenderVisibility: Boolean //
property RenderStatus: Boolean     //Enabled
property RenderPadding: Boolean    //
property RenderBorder: Boolean     //
property RenderAbsolute: Boolean   //
property UseDisplay: Boolean       //

當對應值為 False 時才可以使用相應的 CSS.
-------------------------------------------------------------------}

---

CSS 的諸多操作類似與 JavaScript, 譬如:

---

procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  IWServerController.HTMLHeaders('<link type="text/css" rel="stylesheet" href="MyCss1.css"/>');
  Self.PreHeader.Add('<link type="text/css" rel="stylesheet" href="MyCss2.css"/>');
  Self.ExtraHeader.Add('<link type="text/css" rel="stylesheet" href="MyCss3.css"/>');

  IWServerController.ContentFiles.Add('MyCss4.css');
  Self.ContentFiles.Add('MyCss5.css');
end;

---

有沒有可能直接在代碼中寫入 CSS 呢?

---

{使用 ExtraTagParams 屬性}
IWLabel1.ExtraTagParams.Add('style = color: #f00; font-size:22px;');

{使用 OnHTMLTag 事件, 需要 uses IWHTMLTag}
procedure TIWForm1.IWLabel1HTMLTag(ASender: TObject; ATag: TIWHTMLTag);
begin
  ATag.AddStringParam('style', 'color: #f00; font-size:22px;');
end;

---