Tác dụng

- Nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
- Hình ảnh dưới đây cho ta thấy 1 phần nhỏ những điều mà css mang lại:

html-css-webpage.png

Viết CSS trong file DIC

- Đa phần css của trang được viết trong thư mục web/skin/Tên skin sử dụng.Tuy nhiên với từng file ta cũng có thể tự định nghĩa css cho nó. Ở bài viết này,tôi sẽ giúp bạn 1 số cách để tự viết css trong từng trang.

Viết CSS trong Field.

// Có thể thấy sự khác biệt của việc sử dụng và không sử dụng CSS trong ảnh sau//

dif%201.png

Có thể nhận thấy việc thêm css vào Wak cũng tương tự như việc ta thêm css theo kiểu inline vào trong trang html.

  • HTML
<h1 style="color:blue;">This is a Blue Heading</h1>
  • WAK
        Extra==style="color:red;"

External CSS

  • Với 1 file HTML thông thường,việc viết sẵn file CSS ở ngoài và định nghĩa phần tử/trang đó theo style đó được thực hiện theo cú pháp :
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Thì với WAK cú pháp được sử dụng là sử dụng node CssClass.Node này sẽ được sử dụng ngay trước node Layout.
CssClass==data_table

Trong đó data_table là style CSS được định nghĩa trong web/skin/tên skin.css

Viết CSS trong node Layout

- Có thể khai báo bằng cách sử dụng LayoutExtra==style=" your style css"

Layout==Simple
    Panel
        Layout==Simple
            Control==CODE
            Panel
                Layout==DropDown
                    Control==LY_MODULE_TYPE_ID
                        LayoutExtra==style="padding:10px;"

Ta thấy có sự khác biệt khi xem ảnh sau
layout%20css.png

Viết CSS trong node Query

  • Để sử dụng ta sẽ sử dụng cặp thẻ OpenHtml-CloseHtml. Ví dụ như sau:
        CODE==CODE
            OpenHtml==<div style="color:red;">
            Closehtml==</div>
query%20css.png

Như trên ta thấy 1 cột "Mã" đã được đánh dấu màu đỏ,khác biệt so với các ô khác.

Comment