Ghi đè css là gì?

Chủ đề này mô tả cách sử dụng biểu định kiểu xếp tầng (CSS) với các ứng dụng JavaFX. Sử dụng CSS để tạo giao diện tùy chỉnh cho ứng dụng của bạn

Biểu định kiểu chứa các định nghĩa kiểu kiểm soát giao diện của các phần tử giao diện người dùng. Sử dụng CSS trong các ứng dụng JavaFX tương tự như sử dụng CSS trong HTML. JavaFX CSS dựa trên W3C CSS phiên bản 2. 1 (có sẵn tại

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

6) với một số bổ sung từ công việc hiện tại trên phiên bản 3 của đặc tả và một số tiện ích mở rộng hỗ trợ các tính năng JavaFX cụ thể

Giao diện người dùng của bạn bằng JavaFX CSS cho phép bạn thay đổi giao diện người dùng được hiển thị trong Hình 1 thành giao diện người dùng được hiển thị trong Hình 2 chỉ bằng cách thay đổi biểu định kiểu được sử dụng

Biểu định kiểu mặc định

Biểu định kiểu mặc định cho các ứng dụng JavaFX là caspian. css, được tìm thấy trong tệp JAR thời gian chạy JavaFX, jfxrt. cái lọ. Biểu định kiểu này xác định kiểu cho nút gốc và điều khiển giao diện người dùng. Để xem tệp này, hãy chuyển đến thư mục \jre\lib trong thư mục cài đặt Bộ công cụ phát triển Java (JDK). Sử dụng lệnh sau để trích xuất biểu định kiểu từ tệp JAR

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

Hình 3 cho thấy giao diện người dùng mẫu trông như thế nào với biểu định kiểu mặc định

Tạo biểu định kiểu

Bạn có thể tạo một hoặc nhiều biểu định kiểu của riêng mình để ghi đè các kiểu trong biểu định kiểu mặc định và để thêm các kiểu của riêng bạn. Thông thường các biểu định kiểu mà bạn tạo có phần mở rộng là

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

7 và được đặt trong cùng thư mục với lớp chính cho ứng dụng JavaFX của bạn

Bảng định kiểu controlStyle1. css cung cấp giao diện như trong Hình 1. Bảng định kiểu controlStyle2. css cung cấp giao diện như trong Hình 2

Các biểu định kiểu được áp dụng cho các đối tượng

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

8 như trong Ví dụ 1, trong đó đường dẫn là cấu trúc thư mục phản ánh vị trí của biểu định kiểu của bạn và biểu định kiểu là tên của biểu định kiểu của bạn. Ví dụ: đường dẫn và tên của biểu định kiểu cho Hình 2 là uicontrolcss/controlStyle2. css

Ví dụ 1 Thêm một Style Sheet

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

Xác định kiểu

Định nghĩa kiểu bao gồm tên của kiểu, còn được gọi là bộ chọn và một loạt các quy tắc đặt thuộc tính cho kiểu. Các quy tắc cho một định nghĩa được đặt trong dấu ngoặc nhọn ({}). Ví dụ 2 hiển thị định nghĩa cho một phong cách có tên là

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

9

Ví dụ 2 Định nghĩa kiểu mẫu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

Ghi chú

Kích thước của phông chữ có thể được chỉ định theo điểm (pt) hoặc pixel (px). Độ phân giải 96 điểm trên mỗi inch (dpi) được giả định, vì vậy 1px = 0. 75 điểm

Bộ chọn

Một số loại phong cách có thể được xác định. Mỗi loại kiểu có quy ước riêng cho bộ chọn

Các lớp kiểu tương ứng với tên lớp. Theo quy ước, các tên lớp kiểu bao gồm nhiều hơn một từ sử dụng dấu gạch nối (-) giữa các từ. Bộ chọn lớp kiểu có trước dấu chấm (. )

Ví dụ về bộ chọn lớp

.button
.check-box
.scroll-bar

Bạn cũng có thể xác định các kiểu được liên kết với một nút thông qua ID của nút. ID được đặt bằng phương pháp

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

0 của nút. Tên kiểu là ID đứng trước ký hiệu băm (#). Ví dụ: một nút có ID

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

1 được tạo giao diện theo kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

2

Ví dụ về bộ chọn kiểu ID

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

1

Bộ chọn hợp chất cũng có thể. Một số lớp bao gồm các phần tử có thể có định nghĩa kiểu riêng của chúng, được gọi là lớp con cháu. Ví dụ: nhiều điều khiển giao diện người dùng có lớp hậu duệ cho nhãn. Các định nghĩa này được xác định bởi bộ chọn cho lớp và bộ chọn cho lớp con cháu được phân tách bằng dấu cách

Ví dụ về bộ chọn cho các lớp hậu duệ

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

2

Các lớp giả cho phép bạn tùy chỉnh các trạng thái của một nút, chẳng hạn như khi một nút có tiêu điểm. Các định nghĩa này được xác định bởi bộ chọn cho lớp và tên cho trạng thái được phân tách bằng dấu hai chấm (. )

Ví dụ về bộ chọn cho lớp giả

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

3

Quy tắc và Thuộc tính

Các quy tắc cho định nghĩa kiểu gán giá trị cho các thuộc tính được liên kết với lớp. Tên thuộc tính quy tắc tương ứng với tên của thuộc tính cho một lớp. Quy ước cho tên thuộc tính có nhiều từ là tách các từ bằng dấu gạch nối (-). Tên thuộc tính cho các kiểu trong biểu định kiểu JavaFX được đặt trước bởi

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

3. Tên thuộc tính và giá trị được phân tách bằng dấu hai chấm (. ). Các quy tắc được kết thúc bằng dấu chấm phẩy (;)

Ví dụ về các quy tắc

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

5

Lớp kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 được áp dụng cho nút gốc của thể hiện

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

8. Bởi vì tất cả các nút trong đồ thị cảnh là hậu duệ của nút gốc, các kiểu trong lớp kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 có thể được áp dụng cho bất kỳ nút nào

Lớp kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 bao gồm các thuộc tính có thể được sử dụng bởi các kiểu khác để cung cấp tính nhất quán trong giao diện người dùng. Ví dụ: thuộc tính

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

8 được xác định theo kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4. Thuộc tính này được sử dụng bởi các kiểu cho các điều khiển giao diện người dùng khác làm màu cho điều khiển khi nó có tiêu điểm. Định nghĩa sau đây cho thấy cách thuộc tính này được sử dụng trong kiểu cho lớp

.button
.check-box
.scroll-bar

0

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

3

lột da cảnh

Bạn có thể nhanh chóng thay đổi giao diện UI của mình chỉ bằng cách tùy chỉnh lớp kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4. Cả hai biểu định kiểu mẫu đều đặt kích thước và họ phông chữ, màu cơ bản mà các màu khác được lấy từ đó và màu nền của cảnh. Ví dụ 3 hiển thị kiểu

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 từ controlStyle2. css

Ví dụ 3 Kiểu gốc từ controlStyle2. css

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

6

Chỉ với phong cách này, bạn tạo giao diện cơ bản của Hình 2. Điều này có thể thực hiện được vì các điều khiển giao diện người dùng tích hợp sử dụng các thuộc tính được đặt cho nút gốc để lấy màu và phông chữ của riêng chúng

Kiểm soát lột da

Bạn có thể tùy chỉnh thêm giao diện người dùng của mình bằng cách xác định kiểu cho các điều khiển khác nhau mà bạn đang sử dụng. Bạn có thể ghi đè các định nghĩa trong biểu định kiểu mặc định hoặc tạo kiểu lớp hoặc ID mới. Bạn cũng có thể xác định kiểu cho một nút trong mã của mình

Ghi đè kiểu mặc định

Bạn có thể ghi đè một kiểu trong biểu định kiểu mặc định bằng cách đưa kiểu đó vào biểu định kiểu của bạn và gán cho nó các thuộc tính khác nhau. Ví dụ 4 hiển thị kiểu cho lớp

.button
.check-box
.scroll-bar

3 từ controlStyle2. css

Ví dụ 4 Ghi đè một Kiểu

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

0

Màu phông chữ, màu đường viền, bán kính đường viền và phần đệm được chọn từ định nghĩa này. Màu của nút và kiểu phông chữ của nhãn được chọn từ định nghĩa

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 từ Ví dụ 3. Các nút có kiểu dáng này trông giống như trong hình sau

Mô tả về hình minh họa button_style2. png

Ghi chú

Nếu một lớp không có kiểu được xác định trong caspian. css, hãy xác định kiểu trong biểu định kiểu của bạn và gán nó cho từng thể hiện của lớp như trong Ví dụ 6. Ví dụ: các ngăn bố cục không có các kiểu được xác định trong caspian. biểu định kiểu css. Xem Bảng bố cục tạo kiểu bằng CSS để biết thông tin về cách tạo kiểu cho các lớp như

.button
.check-box
.scroll-bar

5 và

.button
.check-box
.scroll-bar

6

Tạo kiểu lớp

Bạn có thể tạo một kiểu lớp bằng cách thêm một định nghĩa cho nó vào biểu định kiểu của bạn. Ví dụ 5 định nghĩa một kiểu mới trong controlStyle1. css được gọi là

.button
.check-box
.scroll-bar

7

Ví dụ 5 Xác định một Style mới

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

1

Bất kỳ nút nào mà kiểu này được thêm vào sẽ trông giống như trong hình sau. Lưu ý rằng phông chữ của nhãn được chọn từ định nghĩa

.custom-button {
    -fx-font: 16px "Serif";
    -fx-padding: 10;
    -fx-background-color: #CCFF99;
}

4 trong controlStyle1. css

Mô tả về nút minh họa_style1. png

Để gán kiểu lớp này cho một nút, hãy sử dụng chuỗi phương thức

.button
.check-box
.scroll-bar

9. Ví dụ 6 hiển thị kiểu

.button
.check-box
.scroll-bar

7 được gán cho nút Chấp nhận

Ví dụ 6 Chỉ định một kiểu lớp

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

2

Xin lưu ý rằng việc thêm kiểu vào nút là tích lũy. Sau khi thêm lớp kiểu dáng

.button
.check-box
.scroll-bar

7 vào nút

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

12, nút được hiển thị bằng cách sử dụng các quy tắc từ cả kiểu dáng

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

13 và

.button
.check-box
.scroll-bar

7

Tạo kiểu ID

Bạn có thể xác định kiểu cho một nút riêng lẻ bằng cách tạo kiểu và gán kiểu cho nút đó. Tên kiểu là ID đứng trước ký hiệu băm (#). Ví dụ 7 tạo định nghĩa cho một kiểu tên là

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

15

Ví dụ 7 Xác định kiểu ID

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

3

Nút được gán ID

jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

16 trông giống như trong hình dưới đây

Mô tả về hình minh họa button_style_id. png

Ví dụ 8 chỉ ra cách gán kiểu ID cho một nút

Ví dụ 8 Gán kiểu ID

Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");

4

Đặt kiểu trong mã

Bạn cũng có tùy chọn đặt thuộc tính kiểu cho một nút trong mã cho ứng dụng của mình. Các quy tắc được đặt trong mã được ưu tiên hơn các kiểu từ biểu định kiểu. Ví dụ 9 hướng dẫn cách thay đổi màu nền, màu chữ cho nút bấm