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 cũng có một số phần mở rộng cho CSS để hỗ trợ các tính năng cụ thể của JavaFX. 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. To this end, all JavaFX property names have been prefixed with a vendor extension of "-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
CSS styles are applied asynchronously. That is, CSS styles are loaded and values are converted and assigned some time after a scene graph object has been created and added to the scene graph, but before the scene graph is first laid out and painted. In addition, if the styles that apply to an object have changed [for example, because its pseudo-class has changed], values from the newly applied styles will not be applied immediately. Instead, they will be applied sometime after the object's state has changed but before the scene is next painted. It is possible that a style might apply to a variable in a JavaFX object that had been assigned a value by a JavaFX program. Since CSS styles are applied asynchronously, it's possible that values might be assigned by a program and used for some time before being overwritten by CSS at an arbitrary time later
Each node in the scene graph has a styleClass variable, a List. This is analogous to the class=". " attribute that can appear on HTML elements. Supplying a string for a node's styleClass variable causes style properties for that style class to applied to this node. Styles for style classes can be specified using the ". styleclass" selector syntax in a style sheet. Lưu ý rằng một nút có thể có nhiều hơn một lớp kiểuEach node in the scene graph has an id variable, a string. This is analogous to the id=". " attribute that can appear HTML elements. Supplying a string for a node's id variable causes style properties for this node to be looked up using that id. Styles for specific ids can be specified using the "#nodeid" selector syntax in a style sheet
Each node honors a set of properties that depends on the node's JavaFX class [as distinct from its styleClass]. The properties honored by each node class are shown in detail in tables later in this document. The property value that is actually applied depends on the precedence of the origin of the rule, as described above, as well as the specificity of the rule's selector as described in 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 đà", tức 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
At this time, the programming interfaces necessary for a class to declare support for CSS properties, to convert and load these values from CSS style sheets into object variables, and to declare and notify changes to an object's pseudo-classes, are considered internal interfaces and are not accessible directly to applications
CSS also provides for certain properties to be inherited by default, or to be inherited if the property value is 'inherit'. If a value is inherited, it is inherited from the computed value of the element's parent in the document tree. In JavaFX, inheritance is similar, except that instead of elements in the document tree, inheritance occurs from parent nodes in the scene graph
The following properties inherit by default. Any property can be made to inherit by giving it the value "inherit"
ClassPropertyCSS PropertyInitial Valuejavafx. scene. Nodecursor-fx-cursorjavafx. scene. Cursor. DEFAULTjavafx. scene. text. TexttextAlignment-fx-text-alignmentjavafx. scene. text. TextAlignment. LEFTjavafx. sân khấu. 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"'