JavaFX Cascading Style Sheets (CSS) dựa trên W3C CSS phiên bản 2. 1 [1] với một số bổ sung từ công việc hiện tại trên phiên bản 3 [2]. JavaFX CSS also has some extensions to CSS in support of specific JavaFX features. The goal for JavaFX CSS is to allow web developers already familiar with CSS for HTML to use CSS to customize and develop themes for JavaFX controls and scene graph objects in a natural way. The JavaFX CSS support and extensions have been designed to allow JavaFX CSS style sheets to be parsed cleanly by any compliant CSS parser, even though it might not support JavaFX extensions. This enables the mixing of CSS styles for JavaFX and for other purposes (such as for HTML pages) into a single style sheet. Cuối cùng, tất cả các tên thuộc tính JavaFX đã được thêm tiền tố với phần mở rộng của nhà cung cấp là "-fx-". Even properties that might seem to be compatible with standard HTML CSS have been prefixed, because JavaFX has somewhat different semantics for their values
JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code. In addition, CSS support for HTML-specific elements such as Tables are not supported since there is no equivalent construct in JavaFX
JavaFX has a rich set of extensions to CSS in support of features such as color derivation, property lookup, and multiple background colors and borders for a single node. These features add significant new power for developers and designers and are described in detail in this document
The structure of this document is as follows. First, there is a description of all value types for JavaFX CSS properties. Where appropriate, this includes a grammar for the syntax of values of that type. Then, for each scene graph node that supports CSS styles, a table is given that lists the properties that are supported, along with type and semantic information. The pseudo-classes for each class are also given. The description of CSS properties continues for the controls. For each control, the substructure of that control's skin is given, along with the style class names for the Region objects that implement that substructure
CSS styles are applied to nodes in the JavaFX scene graph in a way similar to the way CSS styles are applied to elements in the HTML DOM. Styles are first applied to the parent, then to its children. The code is written such that only those branches of the scene graph that might need CSS reapplied are visited. A node is styled after it is added to the scene graph. Styles are reapplied when there is a change to the node's pseudo-class state, style class, id, inline style, or parent
Kiểu CSS được áp dụng không đồng bộ. Nghĩa là, các kiểu CSS được tải và các giá trị được chuyển đổi và gán một thời gian sau khi một đối tượng biểu đồ cảnh được tạo và thêm vào biểu đồ cảnh, nhưng trước khi biểu đồ cảnh được bố trí và vẽ lần đầu tiên. Ngoài ra, nếu các kiểu áp dụng cho một đối tượng đã thay đổi (ví dụ: vì lớp giả của nó đã thay đổi), các giá trị từ các kiểu mới được áp dụng sẽ không được áp dụng ngay lập tức. Thay vào đó, chúng sẽ được áp dụng sau khi trạng thái của đối tượng đã thay đổi nhưng trước khi cảnh được vẽ tiếp theo. Có thể một kiểu có thể áp dụng cho một biến trong đối tượng JavaFX đã được gán một giá trị bởi chương trình JavaFX. Vì các kiểu CSS được áp dụng không đồng bộ, nên có thể các giá trị có thể được gán bởi một chương trình và được sử dụng trong một thời gian trước khi bị CSS ghi đè vào một thời điểm tùy ý sau đó
Mỗi nút trong đồ thị cảnh có một biến styleClass, một Danh sách. Điều này tương tự với class=". " thuộc tính có thể xuất hiện trên phần tử HTML. Việc cung cấp một chuỗi cho biến styleClass của một nút khiến các thuộc tính kiểu cho lớp kiểu đó được áp dụng cho nút này. Các kiểu cho các lớp kiểu có thể được chỉ định bằng cách sử dụng lệnh ". styleclass" cú pháp bộ chọn trong biểu định kiểu. Lưu ý rằng một nút có thể có nhiều hơn một lớp kiểuMỗi nút trong đồ thị cảnh có một biến id, một chuỗi. Điều này tương tự với id=". " thuộc tính có thể xuất hiện các phần tử HTML. Việc cung cấp một chuỗi cho biến id của một nút khiến các thuộc tính kiểu cho nút này được tra cứu bằng cách sử dụng id đó. Có thể chỉ định kiểu cho các id cụ thể bằng cách sử dụng cú pháp bộ chọn "#nodeid" trong biểu định kiểu
Mỗi nút tôn vinh một tập hợp các thuộc tính phụ thuộc vào lớp JavaFX của nút (khác với styleClass của nó). Các thuộc tính được vinh danh bởi mỗi lớp nút được hiển thị chi tiết trong các bảng ở phần sau của tài liệu này. Giá trị thuộc tính thực sự được áp dụng phụ thuộc vào mức độ ưu tiên của nguồn gốc của quy tắc, như được mô tả ở trên, cũng như tính đặc hiệu của bộ chọn quy tắc như được mô tả trong CSS 2 [1]. Cuối cùng, một chuỗi giá trị thuộc tính được chuyển đổi thành một giá trị JavaFX của loại thích hợp và sau đó được gán cho một biến thể hiện của đối tượng JavaFX
Các kiểu CSS có thể đến từ biểu định kiểu hoặc kiểu nội tuyến. Biểu định kiểu được tải từ các URL được chỉ định trong biến biểu định kiểu của đối tượng Cảnh. Nếu biểu đồ cảnh chứa Điều khiển, biểu định kiểu tác nhân người dùng mặc định sẽ được tải. Các kiểu nội tuyến được chỉ định thông qua API Node setStyle. Kiểu nội tuyến tương tự như style=". " thuộc tính của một phần tử HTML. Các kiểu được tải từ biểu định kiểu của Cảnh được ưu tiên hơn các quy tắc từ biểu định kiểu tác nhân người dùng. Các kiểu nội tuyến được ưu tiên hơn các kiểu bắt nguồn từ nơi khác. Thứ tự ưu tiên của các quy tắc kiểu có thể được sửa đổi bằng cách sử dụng ". quan trọng" trong một tuyên bố phong cách.
Bắt đầu với JavaFX 2. 1, lớp Parent có thuộc tính stylesheets, cho phép đặt style sheet trên một container. Điều này cho phép một nhánh của biểu đồ cảnh có một bộ kiểu riêng biệt. Bất kỳ trường hợp nào của Parent đều có thể có biểu định kiểu. Một đứa trẻ sẽ lấy các kiểu của nó từ các kiểu nội tuyến của chính nó, các biểu định kiểu của tất cả các tổ tiên của nó và bất kỳ biểu định kiểu nào từ Cảnh
URL biểu định kiểu có thể là URL tuyệt đối hoặc URL tương đối. Nếu một URL tương đối được cung cấp, nó sẽ được giải quyết dựa trên URL cơ sở của Trình tải lớp của lớp Ứng dụng cụ thể. Ví dụ: nếu có một lớp chính com.wicked.cool.ui.Main mở rộng Ứng dụng, thì URL tương đối "com/wicked/cool/resources/styles. css" sẽ giải quyết chính xác. URL tương đối ". /tài nguyên/phong cách. css" sẽ không vì đường dẫn ". " liên quan đến thư mục gốc không phải là đường dẫn hợp lệ. Việc sử dụng ClassLoader của một số lớp để tìm tài nguyên thường dễ dàng hơn. Ví dụ: nếu "phong cách. css" nằm trong cùng gói với Main, đoạn mã sau sẽ cung cấp URL chính xác. com.wicked.cool.ui.Main.class.getResource("styles.css").toExternalForm()
Lưu ý rằng, bắt đầu với JavaFX 2. 1, một URL chỉ bao gồm một đường dẫn tuyệt đối (không có sơ đồ hoặc quyền hạn) được giải quyết tương ứng với URL cơ sở của ClassLoader của lớp mở rộng Ứng dụng. Nói cách khác, "/com/wicked/cool/resources/styles. css" được coi là "com/wicked/cool/resources/styles. css". Điều này phù hợp với FXML
Việc triển khai cho phép các nhà thiết kế tạo kiểu cho ứng dụng bằng cách sử dụng biểu định kiểu để ghi đè các giá trị thuộc tính được đặt từ mã. Điều này có ý nghĩa đối với dòng thác; . Kiểu nội tuyến có mức độ ưu tiên cao nhất. Các biểu định kiểu từ một phiên bản Cha mẹ được coi là cụ thể hơn các biểu định kiểu đó từ các biểu định kiểu CảnhCác quy ước đặt tên đã được thiết lập để lấy tên lớp kiểu CSS từ tên lớp JavaFX và để lấy tên thuộc tính CSS từ tên biến JavaFX. Lưu ý rằng đây chỉ là quy ước đặt tên; . Hầu hết các tên JavaFX sử dụng "kiểu hoa lạc đà", nghĩa là các tên kiểu chữ hỗn hợp được hình thành từ các từ ghép, trong đó chữ cái đầu tiên của mỗi từ phụ được viết hoa. Hầu hết các tên CSS trong thế giới HTML đều là chữ thường, với các từ ghép được phân tách bằng dấu gạch nối. Do đó, quy ước là lấy các tên lớp JavaFX và tạo thành tên lớp kiểu CSS tương ứng của chúng bằng cách tách các từ ghép bằng dấu gạch nối và hội tụ các chữ cái thành tất cả chữ thường. Ví dụ: lớp ToggleButton của JavaFX sẽ có một lớp kiểu là "nút chuyển đổi". Quy ước ánh xạ tên biến JavaFX thành tên thuộc tính CSS là tương tự, với việc thêm tiền tố "-fx-". Ví dụ: biến BlendMode sẽ có tên thuộc tính CSS tương ứng là "-fx-blend-mode"
Mặc dù trình phân tích cú pháp CSS JavaFX sẽ phân tích cú pháp CSS hợp lệ, nhưng nó không phải là trình phân tích cú pháp CSS tuân thủ đầy đủ. Người ta không nên mong đợi trình phân tích cú pháp xử lý cú pháp không được chỉ định trong tài liệu này
câu lệnh @-keyword bị bỏ qua
Các ". con đầu lòng" và ". lang" lớp giả không được hỗ trợ. Các ". dòng đầu tiên", ". chữ cái đầu tiên", ". sau" và ". before" các phần tử giả không được hỗ trợ
Các ". đang hoạt động" và ". focus" các lớp giả động không được hỗ trợ. Tuy nhiên, các Nút có hỗ trợ ". nhấn" và ". tập trung" các lớp giả, tương tự
Các ". liên kết" và ". thăm" các lớp giả không được hỗ trợ nói chung. Tuy nhiên, các đối tượng Siêu kết nối có thể được tạo kiểu và chúng hỗ trợ định dạng ". thăm" lớp giả
JavaFX CSS không hỗ trợ chuỗi tên họ phông chữ được phân tách bằng dấu phẩy trong thuộc tính -fx-font-family. Tham số chiều cao dòng tùy chọn khi chỉ định phông chữ không được hỗ trợ. Không có giá trị tương đương cho thuộc tính biến thể phông chữ
JavaFX CSS sử dụng mô hình màu HSB thay vì mô hình màu HSL
Có thể sử dụng tên lớp JavaFX làm bộ chọn loại, tuy nhiên, việc sử dụng như vậy không được khuyến nghị. Ví dụ: có thể chỉ định kiểu cho ToggleButton bằng cú pháp "ToggleButton {. }". Việc sử dụng như vậy không được khuyến nghị vì tên được sử dụng để khớp với bộ chọn loại là tên lớp cụ thể thực tế được sử dụng trong chương trình JavaFX. Tên lớp này có thể thay đổi trong trường hợp phân lớp. Nếu ứng dụng là phân lớp của lớp ToggleButton, các kiểu này sẽ không còn được áp dụng nữa
Tại thời điểm này, các giao diện lập trình cần thiết cho một lớp để khai báo hỗ trợ cho các thuộc tính CSS, chuyển đổi và tải các giá trị này từ biểu định kiểu CSS thành các biến đối tượng, đồng thời khai báo và thông báo các thay đổi đối với lớp giả của đối tượng, được coi là các giao diện bên trong và
Nếu một thuộc tính của nút được khởi tạo bằng cách gọi phương thức đã đặt của thuộc tính, thì quá trình triển khai CSS sẽ xem đây là giá trị do người dùng đặt và giá trị sẽ không bị ghi đè bởi một kiểu từ biểu định kiểu tác nhân người dùng.CSS cũng cung cấp các thuộc tính nhất định được kế thừa theo mặc định hoặc được kế thừa nếu giá trị thuộc tính là 'kế thừa'. Nếu một giá trị được kế thừa, thì nó được kế thừa từ giá trị được tính toán của phần tử cha trong cây tài liệu. Trong JavaFX, tính kế thừa cũng tương tự, ngoại trừ thay vì các phần tử trong cây tài liệu, tính kế thừa xảy ra từ các nút cha trong biểu đồ cảnh
Các thuộc tính sau kế thừa theo mặc định. Bất kỳ thuộc tính nào cũng có thể được tạo để kế thừa bằng cách đặt cho nó giá trị "inherit"
ClassPropertyCSS PropertyInitial Valuejavafx. bối cảnh. Nodecursor-fx-cursorjavafx. bối cảnh. con trỏ. MẶC ĐỊNHjavafx. bối cảnh. chữ. TexttextAlignment-fx-text-alignmentjavafx. bối cảnh. chữ. Căn chỉnh văn bản. TRÁIjavafx. bối cảnh. chữ. Phông chữphông chữ-fx-phông chữ. MẶC ĐỊNH (hệ thống 12px)
Trong hệ thống phân cấp của các lớp JavaFX (ví dụ: Hình chữ nhật là một lớp con của Hình dạng, đến lượt nó là một lớp con của Nút), các thuộc tính CSS của tổ tiên cũng là các thuộc tính CSS của hậu duệ. Điều này có nghĩa là một lớp con sẽ phản hồi cùng một tập hợp các thuộc tính như các lớp cha của nó và đối với các thuộc tính bổ sung mà nó tự định nghĩa. Vì vậy, Hình dạng hỗ trợ tất cả các thuộc tính của Nút cộng với một số tính năng khác và Hình chữ nhật hỗ trợ tất cả các thuộc tính của Hình dạng cộng với một số tính năng khác. Tuy nhiên, vì việc sử dụng tên lớp JavaFX làm bộ chọn loại là khớp chính xác, nên việc cung cấp các khai báo kiểu cho Hình dạng sẽ không khiến Hình chữ nhật sử dụng các giá trị đó (trừ khi. giá trị css cho thuộc tính của Hình chữ nhật là "kế thừa")
Hãy xem xét ứng dụng JavaFX đơn giản sau đây
Cảnh cảnh = Cảnh mới(Nhóm mới());
cảnh. getStylesheets(). thêm("kiểm tra. css”);
Rectangle rect = new Rectangle(100,100);
rect. setLayoutX(50);
rect. setLayoutY(50);
rect. getStyleClass(). add("my-rect");
((Nhóm)scene. getRoot()). getTrẻ em (). thêm(rect);
Không có bất kỳ kiểu nào, điều này sẽ hiển thị một hình chữ nhật màu đen đơn giản. nếu kiểm tra. css chứa những điều sau đây
my-rect { -fx-fill. màu đỏ;
hình chữ nhật sẽ có màu đỏ thay vì màu đen
nếu kiểm tra. css chứa những điều sau đây
.my-rect {
-fx-fill. màu vàng;
-fx-stroke. màu xanh lục;
-fx-stroke-width. 5;
-fx-stroke-dash-array. 12 2 4 2;
-fx-stroke-dash-offset. 6;
-fx-stroke-line-cap. mông;
}
kết quả sẽ là một hình chữ nhật màu vàng với đường viền màu xanh lục nét đứt đẹp mắt
Khi trình phân tích cú pháp JavaFX CSS gặp lỗi cú pháp, một thông báo cảnh báo sẽ được phát ra truyền tải càng nhiều thông tin càng tốt để giúp giải quyết lỗi. Ví dụ
CẢNH BÁO. com. mặt trời. javafx. css. trình phân tích cú pháp. Tuyên bố CSSParser Dự kiến '' trong khi phân tích cú pháp '-fx-background-color' tại ?[1,49]
Mật mã '?[1,49]' liên quan đến vị trí xảy ra lỗi. Định dạng của chuỗi vị trí là
[dòng, vị trí]
Nếu tìm thấy lỗi trong khi phân tích tệp, URL của tệp sẽ được cung cấp. Nếu lỗi là do kiểu nội tuyến (như trong ví dụ trên), thì URL được cung cấp dưới dạng dấu chấm hỏi. Dòng và vị trí cung cấp phần bù vào tệp hoặc chuỗi nơi mã thông báo bắt đầu. Xin lưu ý rằng dòng và vị trí có thể không chính xác trong các bản phát hành trước JavaFX 2. 2
Các ứng dụng cần phát hiện lỗi từ trình phân tích cú pháp có thể thêm trình nghe vào thuộc tính lỗi của com. mặt trời. javafx. css. StyleManager. Đây không phải là API công khai và có thể thay đổi
Mỗi thuộc tính có một loại, xác định loại giá trị nào và cú pháp để chỉ định các giá trị đó. Ngoài ra, mỗi thuộc tính có thể có một giá trị 'kế thừa' được chỉ định, có nghĩa là, đối với một nút nhất định, thuộc tính có cùng giá trị được tính toán như thuộc tính cho cha của nút. Giá trị 'kế thừa' có thể được sử dụng trên các thuộc tính thường không được kế thừa
Nếu giá trị 'kế thừa' được đặt trên phần tử gốc, thì thuộc tính được gán giá trị ban đầu
Các giá trị Boolean có thể có giá trị chuỗi là "true" hoặc "false", các giá trị này không phân biệt chữ hoa chữ thường vì tất cả CSS đều phân biệt chữ hoa chữ thường
Chuỗi có thể được viết bằng dấu nháy kép hoặc dấu nháy đơn. Dấu ngoặc kép không thể xảy ra bên trong dấu ngoặc kép, trừ khi thoát (e. g. , dưới dạng '\"' hoặc '\22'). Tương tự cho dấu nháy đơn (e. g. , "\'" hoặc "\27")
"đây là 'chuỗi'"
"đây là \"chuỗi\""
'đây là "chuỗi"'