Css thêm dòng trống

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ểu

Each 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ảnh

Cá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

If a property of a node is initialized by calling the set method of the property, the CSS implementation will see this as a user set value and the value will not be overwritten by a style from a user agent style sheet.  

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

Css thêm dòng trống

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

Css thêm dòng trống

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"'<
'this is a \'string\''

Một chuỗi không thể trực tiếp chứa một dòng mới. Để bao gồm một dòng mới trong một chuỗi, hãy sử dụng một lối thoát đại diện cho ký tự nguồn cấp dữ liệu theo tiêu chuẩn ISO-10646 (U+000A), chẳng hạn như "\A" hoặc "\00000a". Ký tự này đại diện cho khái niệm chung về "dòng mới" trong CSS. Xem thuộc tính 'nội dung' để biết ví dụ

Một số loại giá trị có thể có giá trị số nguyên (ký hiệu là) hoặc giá trị số thực (ký hiệu là). Số thực và số nguyên chỉ được chỉ định trong ký hiệu thập phân. Bao gồm một hoặc nhiều chữ số "0" đến "9". Có thể là một hoặc có thể là 0 hoặc nhiều chữ số theo sau là dấu chấm (. ) theo sau bởi một hoặc nhiều chữ số. Cả số nguyên và số thực đều có thể đặt trước dấu "-" hoặc "+" để chỉ dấu. -0 tương đương với 0 và không phải là số âm

[+. -]? . [0-9]*". "[0-9]+]

Lưu ý rằng nhiều thuộc tính cho phép một số nguyên hoặc số thực làm giá trị thực sự hạn chế giá trị ở một số phạm vi, thường là giá trị không âm

Kích thước là một với đơn vị hoặc Nếu đơn vị không được chỉ định thì 'px' được chỉ định

[ px. mm. cm. Trong. điểm. máy tính. em. Ví dụ ]?

Không cho phép khoảng trắng giữa số và đơn vị nếu được cung cấp. Một số đơn vị là tương đối và một số khác là tuyệt đối

Quan hệ

  • px. pixel, so với thiết bị xem
  • em. 'cỡ chữ' của phông chữ có liên quan
  • Ví dụ. 'chiều cao x' của phông chữ có liên quan

tuyệt đối

  • Trong. inch - 1 inch bằng 2. 54 cm
  • cm. centimet
  • mm. mi-li-mét
  • điểm. điểm — các điểm được sử dụng bởi CSS 2. 1 bằng 1/72 inch
  • máy tính. picas — 1 pica bằng 12 điểm

Đây là tỷ lệ phần trăm của một số chiều dài, thường là chiều rộng hoặc chiều cao của nút

[ % ]

Góc là a có một trong các đơn vị sau

[ độ. rad. tốt nghiệp. xoay ]

  • độ. góc theo độ - tất cả các đơn vị góc khác được chuyển đổi thành độ
  • rad. góc tính bằng radian
  • tốt nghiệp. góc tính bằng gradien
  • xoay. góc lần lượt

Một điểm là tọa độ {x,y}

[ []. [. ] ]

Điểm dừng theo cú pháp dừng màu W3C

[ [. ]?

Trong một loạt các giá trị khoảng cách dừng phải được. Ngoài ra, giá trị if được sử dụng thì giá trị khoảng cách cho điểm dừng đầu tiên và điểm dừng cuối cùng trong chuỗi phải được chỉ định. Hạn chế này có thể được gỡ bỏ trong một bản phát hành trong tương lai

"đỏ, trắng 70%, xanh dương" là hợp lệ vì khoảng cách cho màu đỏ và xanh lam được giả định lần lượt là 0% và 100%

"đỏ 10, trắng, xanh 90" là hợp lệ. Vì khoảng cách của màu đỏ và màu xanh lần lượt là 10 và 90 nên có thể tính được khoảng cách cho màu trắng

"đỏ, trắng 70, xanh" không hợp lệ vì các đơn vị khoảng cách không đồng nhất

"đỏ, trắng, xanh" là hợp lệ. Các điểm dừng được phân bổ đều giữa 0% và 100%

url ( [\"\']?

Ví dụ: [\"\']? ) có thể là một URI tuyệt đối

url(http. //thí dụ. com)
url('http. //thí dụ. com')
url("http. //thí dụ. com")

hoặc nó có thể liên quan đến vị trí của tệp CSS

JavaFX CSS hiện hỗ trợ các hiệu ứng DropShadow và InnerShadow từ nền tảng JavaFX. Xem tài liệu lớp trong javafx. sân khấu. effect để biết thêm chi tiết về ngữ nghĩa của các tham số hiệu ứng khác nhau

Bóng đổ

Hiệu ứng cấp cao hiển thị bóng của nội dung đã cho phía sau nội dung

bóng đổ (, , , , , )

= [ gaussian. hộp một lần. ba-pass-box. two-pass-box ]
Màu bóng.
Bán kính của nhân làm mờ bóng tối. Trong khoảng [0. 0. 127. 0], giá trị điển hình 10.
Sự lan rộng của bóng tối. Mức chênh lệch là phần bán kính mà phần đóng góp của nguyên liệu nguồn sẽ là 100%. Phần còn lại của bán kính sẽ có một đóng góp được kiểm soát bởi hạt nhân mờ. Mức chênh lệch 0. 0 sẽ dẫn đến sự phân bố của bóng được xác định hoàn toàn bởi thuật toán làm mờ. Mức chênh lệch 1. 0 sẽ dẫn đến sự tăng trưởng vững chắc bên ngoài độ mờ đục của vật liệu nguồn đến giới hạn của bán kính với một đường cắt rất sắc nét đối với độ trong suốt ở bán kính. Các giá trị phải nằm trong phạm vi [0. 0. 1. 0].
Độ lệch của bóng theo hướng x, tính bằng pixel.
Độ lệch của bóng theo hướng y, tính bằng pixel.

bóng tối bên trong

Hiệu ứng cấp cao hiển thị bóng bên trong các cạnh của nội dung đã cho

bóng tối bên trong (, , , , , )

= [ gaussian. hộp một lần. ba-pass-box. two-pass-box ]
Màu bóng.
Bán kính của nhân làm mờ bóng tối. Trong khoảng [0. 0. 127. 0], giá trị điển hình 10.
Cái nghẹt thở của cái bóng. Cuộn cảm là phần bán kính nơi đóng góp của nguyên liệu nguồn sẽ là 100%. Phần còn lại của bán kính sẽ có một đóng góp được kiểm soát bởi hạt nhân mờ. một nghẹt thở của 0. 0 sẽ dẫn đến sự phân bố của bóng được xác định hoàn toàn bởi thuật toán làm mờ. một nghẹt thở của 1. 0 sẽ dẫn đến sự phát triển vững chắc về phía trong của bóng từ các cạnh đến giới hạn của bán kính với một đường cắt rất sắc nét để đạt được độ trong suốt bên trong bán kính. Các giá trị phải nằm trong phạm vi [0. 0. 1. 0].
Độ lệch của bóng theo hướng x, tính bằng pixel.
Độ lệch của bóng theo hướng y, tính bằng pixel.

JavaFX CSS hỗ trợ khả năng chỉ định phông chữ bằng cách sử dụng các thuộc tính họ, kích thước, kiểu và trọng lượng riêng biệt, cũng như khả năng chỉ định phông chữ bằng một thuộc tính tốc ký duy nhất. Có bốn loại giá trị liên quan đến phông chữ cộng với thuộc tính tốc ký bao gồm cả bốn thuộc tính. Các loại liên quan đến phông chữ như sau

Tên chuỗi của họ phông chữ. Có thể sử dụng một họ phông chữ thực tế có sẵn trên hệ thống hoặc có thể sử dụng một trong các họ phông chữ chung sau đây

  • 'serif' (e. g. , Thời đại)
  • 'sans-serif' (e. g. , Helvetic)
  • 'chữ thảo' (e. g. , Zapf-Chancery)
  • 'tưởng tượng' (e. g. , Miền Tây)
  • 'đơn cách' (e. g. , Chuyển phát nhanh)

Kích thước của phông chữ, sử dụng cú pháp

Kiểu chữ, sử dụng cú pháp sau.
[ bình thường. chữ nghiêng. xiên ]

Độ đậm của phông chữ, sử dụng cú pháp sau.
[ bình thường. in đậm. táo bạo hơn. bật lửa. 100. 200. 300. 400. 500. 600. 700. 800. 900 ]

Thuộc tính tốc ký phông chữ này có thể được sử dụng thay cho các thuộc tính trên. Nó sử dụng cú pháp sau.
[[. ]?]

Thuộc tính phông chữ

Hầu hết các lớp sử dụng văn bản sẽ hỗ trợ các thuộc tính phông chữ sau. Trong một số trường hợp, một bộ thuộc tính tương tự sẽ được hỗ trợ nhưng có tiền tố khác thay vì "-fx-font"

Các giá trị sơn có thể là một màu đơn sắc được chỉ định trong một trong các cú pháp màu hoặc chúng có thể là một dải màu tuyến tính hoặc xuyên tâm

||

Độ dốc tuyến tính

độ dốc tuyến tính ( [ [từ đến]. [ đến], ]? . phản ánh ], ]?

ở đâu = [trái. bên phải]. [đứng đầu. đáy]

Chuyển màu tuyến tính tạo ra một chuyển màu đi qua tất cả các màu dừng dọc theo đường giữa "từ" và "đến". Nếu các điểm là tỷ lệ phần trăm, thì chúng có liên quan đến kích thước của khu vực được lấp đầy. Tỷ lệ phần trăm và kích thước chiều dài không thể được trộn lẫn trong một chức năng gradient duy nhất

Nếu không lặp lại cũng như không phản ánh được đưa ra, thì CycleMethod sẽ mặc định là "NO_CYCLE".
Nếu cả [từ đến] và [đến] đều không được cung cấp, thì hướng chuyển màu sẽ mặc định là 'đến dưới cùng'.
Các điểm dừng theo cú pháp dừng màu của W3C và được chuẩn hóa tương ứng.

Ví dụ này sẽ tạo một dải màu từ trên cùng bên trái xuống dưới cùng bên phải của vùng được tô màu với màu đỏ ở góc trên cùng bên trái và màu đen ở dưới cùng bên phải

linear-gradient (đến dưới cùng bên phải, đỏ, đen)

Điều này tương đương với

linear-gradient(từ 0% 0% đến 100% 100%, đỏ 0%, đen 100%)

Ví dụ phức tạp hơn này sẽ tạo một thanh cao 50px ở trên cùng với dải màu 3 màu với màu trắng bên dưới cho phần còn lại của khu vực được lấp đầy

độ dốc tuyến tính (từ 0px 0px đến 0px 50px, xám, xám đậm 50%, mờ 99%, trắng)

Cú pháp sau cho độ dốc tuyến tính không tuân theo ngữ pháp CSS và không được dùng trong JavaFX 2. 0. JavaFX 2. 0 Trình phân tích cú pháp CSS hỗ trợ cú pháp nhưng hỗ trợ này có thể bị xóa trong các bản phát hành sau

tuyến tính (,) đến (,) dừng [ (,) ]+ [ lặp lại. phản ánh ]?

Độ dốc xuyên tâm

radial-gradient([ tiêu điểm góc , ]? [ tiêu điểm khoảng cách , ]? [ trung tâm , ]? bán kính [. ] [ [ nói lại. phản ánh ], ]?

Nếu không lặp lại cũng như không phản ánh được đưa ra, thì CycleMethod sẽ mặc định là "NO_CYCLE".
Các điểm dừng theo cú pháp dừng màu của W3C và được chuẩn hóa tương ứng.

Sau đây là các ví dụ về việc sử dụng radial-gradient

radial-gradient(bán kính 100%, đỏ, xám đậm, đen)

radial-gradient(góc lấy nét 45 độ, khoảng cách lấy nét 20%, tâm 25% 25%, bán kính 50%, phản chiếu, xám, xám đậm 75%, mờ)

Cú pháp sau cho độ dốc xuyên tâm không tuân theo ngữ pháp CSS và không được dùng trong JavaFX 2. 0. JavaFX 2. 0 Trình phân tích cú pháp CSS hỗ trợ cú pháp nhưng hỗ trợ này có thể bị xóa trong các bản phát hành sau

xuyên tâm [góc lấy nét. ] ]? . phản ánh ]?

||||

Màu sắc được đặt tên

CSS hỗ trợ một loạt các màu không đổi được đặt tên. Ví dụ, các màu được đặt tên có thể được chỉ định bằng tên không được trích dẫn của chúng

.button {
    -fx-background-color. màu đỏ;
}

Các màu được đặt tên có sẵn trong CSS là

aliceblue = #f0f8ffantiquewhite = #faebd7aqua = #00ffffaquamarine = #7fffd4azure = #f0ffffbeige = #f5f5dcbisque = #ffe4c4black = #000000blanchedalmond = #ffebcdblue = #0000ffblueviolet = #8a2be2brown = #a52a2aburlywood = #deb887cadetblue = #5f9ea0chartreuse = #7fff00chocolate = #d2691ecoral =

Tra cứu màu sắc

Với các màu đã tra cứu, bạn có thể tham khảo bất kỳ thuộc tính màu nào khác được đặt trên nút hiện tại hoặc bất kỳ nút cha nào của nó. Đây là một tính năng rất mạnh mẽ, vì nó cho phép một bảng màu chung được chỉ định trên cảnh, sau đó được sử dụng trong suốt ứng dụng. Nếu bạn muốn thay đổi một trong các màu của bảng đó, bạn có thể làm như vậy ở bất kỳ cấp độ nào trong cây cảnh và nó sẽ ảnh hưởng đến nút đó và tất cả các phần tử phụ của nó. Các màu đã tra cứu không được tra cứu cho đến khi chúng được áp dụng, vì vậy chúng tồn tại và phản ứng với bất kỳ thay đổi kiểu nào có thể xảy ra, chẳng hạn như thay thế màu bảng màu trong thời gian chạy bằng thuộc tính "kiểu" trên một nút

Trong ví dụ sau, tất cả màu nền của tất cả các nút sử dụng màu tra cứu "abc"

.root { abc: #f00 }
. nút { -fx-background-color. abc }

Màu RGB

Mô hình màu RGB được sử dụng trong thông số kỹ thuật màu số. Nó có một số hình thức được hỗ trợ khác nhau

#
. #
. rgb( , , )
. rgb(%, %, %)
. rgba( , , , )
. rgba( % , % , %, )

Tất cả các ví dụ này chỉ định cùng một màu cho phần điền văn bản của Nhãn

  • nhãn { -fx-text-fill. #f00 } /* #rgb */
  • nhãn { -fx-text-fill. #ff0000 } /* #rrggbb */
  • nhãn { -fx-text-fill. rgb(255,0,0) }
  • nhãn { -fx-text-fill. rgb(100%, 0%, 0%) }
  • nhãn { -fx-text-fill. rgba(255,0,0,1) }

Lục giác RGB. Định dạng của một giá trị RGB trong ký hiệu thập lục phân là một '#' ngay sau đó là ba hoặc sáu ký tự thập lục phân. Ký hiệu RGB ba chữ số (#rgb) được chuyển đổi thành dạng sáu chữ số (#rrggbb) bằng cách sao chép các chữ số, không phải bằng cách thêm số không. Ví dụ: #fb0 mở rộng thành #ffbb00. Điều này đảm bảo rằng màu trắng (#ffffff) có thể được chỉ định bằng ký hiệu ngắn (#fff) và loại bỏ mọi phụ thuộc vào độ sâu màu của màn hình

RGB Thập phân hoặc Phần trăm. Định dạng của giá trị RGB trong ký hiệu chức năng là 'rgb(', theo sau là danh sách ba giá trị số được phân tách bằng dấu phẩy (ba giá trị số nguyên thập phân hoặc ba giá trị phần trăm) theo sau là ')'. Giá trị số nguyên 255 tương ứng với 100% và với F hoặc FF trong ký hiệu thập lục phân. rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Các ký tự khoảng trắng được phép xung quanh các giá trị số

RGB + Alpha. Đây là phần mở rộng của mô hình màu RGB để bao gồm giá trị 'alpha' chỉ định độ mờ của màu. Điều này được thực hiện thông qua một cú pháp hàm có dạng rgba(. ) có tham số thứ tư là giá trị alpha. Giá trị alpha phải là một số trong phạm vi 0. 0 (đại diện cho hoàn toàn trong suốt) và 1. 0 (hoàn toàn mờ đục). Như với hàm rgb(), các giá trị màu đỏ, xanh lá cây và xanh lam có thể là số nguyên thập phân hoặc tỷ lệ phần trăm. Các ví dụ sau đều chỉ định cùng một màu

  • nhãn { -fx-text-fill. rgb(255,0,0) } /* dãy số nguyên 0 - 255*/
  • nhãn { -fx-text-fill. rgba(255,0,0,1) /* giống nhau, với độ mờ rõ ràng là 1 */
  • nhãn { -fx-text-fill. rgb(100%,0%,0%) } /* phạm vi float 0. 0% - 100. 0% */
  • nhãn { -fx-text-fill. rgba(100%,0%,0%,1) } /* giống nhau, với độ mờ rõ ràng là 1 */

Màu sắc HSB

Màu sắc có thể được chỉ định bằng cách sử dụng mô hình màu HSB (đôi khi được gọi là HSV), như sau

hsb( , % , % ). hsba( , % , % , )

Số đầu tiên là hue, một số trong phạm vi từ 0 đến 360 độ. Số thứ hai là độ bão hòa, tỷ lệ phần trăm trong khoảng từ 0% đến 100%. Số thứ ba là độ sáng, cũng là tỷ lệ phần trăm trong khoảng từ 0% đến 100%. hsba(. ) có tham số thứ tư ở cuối là giá trị alpha trong phạm vi 0. 0 đến 1. 0, xác định tương ứng là hoàn toàn trong suốt và hoàn toàn mờ đục

Chức năng màu

JavaFX hỗ trợ một số chức năng tính toán màu sắc. Những màu này tính toán các màu mới từ các màu đầu vào tại thời điểm kiểu màu được áp dụng. Điều này cho phép chỉ định một chủ đề màu bằng cách sử dụng một màu cơ bản duy nhất và có các màu biến thể được tính từ màu cơ bản đó. Có hai chức năng màu. dẫn xuất () và bậc thang ()

|

Lấy được

lấy được( , % )

Hàm dẫn xuất lấy một màu và tính toán phiên bản sáng hơn hoặc tối hơn của màu đó. Tham số thứ hai là độ lệch sáng, nằm trong khoảng từ -100% đến 100%. Tỷ lệ phần trăm dương biểu thị màu sáng hơn và tỷ lệ phần trăm âm biểu thị màu tối hơn. Giá trị -100% nghĩa là đen hoàn toàn, 0% nghĩa là không thay đổi độ sáng và 100% nghĩa là trắng hoàn toàn

Thang

thang(, [, ]+)

Hàm thang nội suy giữa các màu. Hiệu ứng như thể một dải màu được tạo bằng cách sử dụng các điểm dừng được cung cấp và sau đó độ sáng của dải màu được cung cấp được sử dụng để lập chỉ mục một giá trị màu trong dải màu đó. Ở độ sáng 0%, màu ở 0. 0 cuối của gradient được sử dụng; . 0 cuối của gradient được sử dụng; . 5, điểm giữa của gradient, được sử dụng. Lưu ý rằng không có độ dốc nào thực sự được hiển thị. Đây chỉ đơn thuần là một hàm nội suy dẫn đến một màu duy nhất

Các điểm dừng theo cú pháp dừng màu của W3C và được chuẩn hóa tương ứng

Ví dụ: bạn có thể sử dụng cách sau nếu bạn muốn màu văn bản là đen hoặc trắng tùy thuộc vào độ sáng của nền

nền. trắng;
-fx-text-fill. thang(nền, trắng 49%, đen 50%);

Giá trị -fx-text-fill kết quả sẽ có màu đen, vì nền (màu trắng) có độ sáng 100% và màu ở mức 1. 0 trên gradient có màu đen. Nếu chúng ta thay đổi màu nền thành đen hoặc xám đậm, độ sáng sẽ nhỏ hơn 50%, cho giá trị -fx-text-fill là màu trắng

Cú pháp sau cho độ dốc xuyên tâm không tuân theo ngữ pháp CSS và không được dùng trong JavaFX 2. 0. JavaFX 2. 0 Trình phân tích cú pháp CSS hỗ trợ cú pháp nhưng hỗ trợ này có thể bị xóa trong các bản phát hành sau

thang() dừng [ ( , ) ]+

Tập đoàn

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultCommentsGroup mở rộng cấp độ gốc. Nhóm không thêm bất kỳ thuộc tính CSS bổ sung nào. Cũng có tất cả các thuộc tính của Parent

Node

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultRangeComments-fx-blend-mode[thêm. màu xanh da trời. cháy màu. màu Dodge. làm tối. Sự khác biệt. loại trừ. màu xanh lá. đèn rất sáng. làm nhẹ. nhân. lớp phủ. màu đỏ. màn hình. ánh sáng mềm mại. src-trên đỉnh. src-in. src-ra. src-over ]null-fx-cursor[ null. chữ thập. mặc định. tay. di chuyển. thay đổi kích thước điện tử. thay đổi kích thước h. thay đổi kích thước. thay đổi kích thước nw. thay đổi kích thước n. thay đổi kích thước. thay đổi kích thước sw. thay đổi kích thước s. thay đổi kích thước w. thay đổi kích thước v. chữ. Chờ đã ]. nullinherits-fx-effectnull-fx-focus-traversablefalse-fx-opacity1[0. 0. 1. 0]Độ mờ có thể được coi là một hoạt động hậu xử lý về mặt khái niệm. Về mặt khái niệm, sau khi nút (bao gồm cả nút con của nó) được hiển thị thành hình ảnh ngoài màn hình RGBA, cài đặt độ mờ chỉ định cách kết hợp kết xuất ngoài màn hình vào kết xuất tổng hợp hiện tại. -fx-rotate0Đây là góc quay theo độ. 0 độ ở vị trí 3 giờ (ngay bên phải). Giá trị góc là dương theo chiều kim đồng hồ. Xoay quanh tâm. -fx-scale-x1scale về center-fx-scale-y1scale về center-fx-scale-z1scale về center-fx-translate-x0-fx-translate-y0-fx-translate-z0visibility[ có thể nhìn thấy. ẩn giấu. sụp đổ. kế thừa ]visibleXem thuộc tính khả năng hiển thị của W3C

lớp giả

CSS Pseudo-classCommentsdisabledáp dụng khi biến bị vô hiệu hóa là truefocusedáp dụng khi biến focus là truehoveráp dụng khi biến hover là truepressáp dụng khi biến được nhấn là trueshow-mnemonicapples khi khả năng ghi nhớ (thường là dấu gạch dưới) sẽ được hiển thị

Cha mẹ

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultCommentsParent mở rộng Nút. Cha mẹ không thêm bất kỳ thuộc tính CSS bổ sung nào. Cũng có tất cả các thuộc tính của Nút

Cảnh

đẳng cấp phong cách. không áp dụng

Đối tượng Scene không có thuộc tính CSS có thể thiết lập, cũng như không có bất kỳ lớp giả nào. Tuy nhiên, nút gốc của cảnh được gán lớp kiểu "gốc" (ngoài các lớp kiểu đã được gán cho nút). Điều này rất hữu ích vì nút gốc của Cảnh là bộ chứa gốc cho tất cả các nút biểu đồ cảnh đang hoạt động. Do đó, nó có thể đóng vai trò là nơi chứa các thuộc tính được kế thừa hoặc tra cứu

ImageView

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-imagenullCác URL tương đối được phân giải theo URL của biểu định kiểu. Cũng có tất cả thuộc tính của Node

AnchorPane

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultCommentsAnchorPane mở rộng Pane và không thêm bất kỳ thuộc tính CSS bổ sung nào. Cũng có tất cả các thuộc tính của Pane

khung viền

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultCommentsBorderPane mở rộng Ngăn và không thêm bất kỳ thuộc tính CSS bổ sung nào. Cũng có tất cả thuộc tính của Pane

FlowPane

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-hgap0-fx-vgap0-fx-alignment[ trên-trái. Trung tâm hàng đầu. trên cùng bên phải. trung tâm bên trái. trung tâm. giữa-phải-dưới-trái. Trung tâm trên. góc phải ở phía dưới. đường cơ sở bên trái. trung tâm đường cơ sở. đường cơ sở bên phải] trên cùng bên trái-fx-cột-căn chỉnh [ bên trái. trung tâm. phải ]center-fx-row-valignment[ top. trung tâm. đường cơ sở. phía dưới ]hướng trung tâm fx[ ngang. vertical ]horizontal Cũng có tất cả các thuộc tính của Pane

ô lưới

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-hgap0-fx-vgap0-fx-alignment[ trên-trái. Trung tâm hàng đầu. trên cùng bên phải. trung tâm bên trái. trung tâm. giữa-phải-dưới-trái. Trung tâm trên. góc phải ở phía dưới. đường cơ sở bên trái. trung tâm đường cơ sở. baseline-right ]top-left-fx-grid-lines-visiblefalseCũng có tất cả các thuộc tính của Pane

HBox

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-spacing0-fx-alignment[ trên-trái. Trung tâm hàng đầu. trên cùng bên phải. trung tâm bên trái. trung tâm. giữa-phải-dưới-trái. Trung tâm trên. góc phải ở phía dưới. đường cơ sở bên trái. trung tâm đường cơ sở. đường cơ sở bên phải] trên cùng bên trái-fx-fill-heightfalseCũng có tất cả các thuộc tính của Pane

Pane

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultCommentsPane extends Region to expose Region's children. Pane does not add any addtional CSS properties. Also has all properties of Region

Region

đẳng cấp phong cách. trống theo mặc định

A Region is a Node (extending from Parent) with backgrounds and borders that are styleable via CSS. A Region is typically a rounded rectangle, though this can be modified through CSS to be an arbitrary shape. Regions can contain other Region objects (sub-regions) or they can contain sub-controls. All Regions have the same set of CSS properties as described below

Each Region consists of several layers, painted from bottom to top, in this order

  1. background fills
  2. background images
  3. contents
  4. border strokes
  5. border images

The background and border mechanisms are patterned after the CSS 3 draft backgrounds and borders module. See [4] for a detailed description

Background fills are specified with the properties -fx-background-color, -fx-background-radius and -fx-background-insets. The -fx-background-color property is a series of one or more comma-separatedvalues. The number of values in the series determines the number of background rectangles that are painted. Background rectangles are painted in the order specified using the givenvalue. Each background rectangle can have different radii and insets. The -fx-background-radius and -fx-background-insets properties are series of comma-separated values (or sets of values). The radius and insets values used for a particular background are the found in the corresponding position in the -fx-background-radius and -fx-background-insets series. For example, suppose a series of three values is given for the -fx-background-color property. A series of three values should also be specified for the -fx-background-radius and -fx-background-insets properties. Nền đầu tiên sẽ được vẽ bằng cách sử dụng giá trị bán kính thứ nhất và giá trị chèn đầu tiên, nền thứ hai sẽ được vẽ bằng giá trị bán kính thứ hai và giá trị chèn thứ hai, v.v.

Cũng lưu ý rằng các thuộc tính như -fx-background-radius và -fx-background-insets có thể chứa một chuỗi giá trị hoặc bộ bốn giá trị. A set of values is separated by whitespace, whereas the values or sets-of-values in a series are separated by commas. For -fx-background-radius, a single value indicates that the value should be used for the radius of all four corners of the background rectangle. A set of four values indicates that different radius values are to be used for the top-left, top-right, bottom-right, and bottom-left corners, in that order. Similarly, the -fx-background-insets property can also contain a series of values or sets of values. A set of four values for -fx-background-insets indicates that different insets are to be used for the top, right, bottom, and left edges of the rectangle, in that order

Background images are specified with the properties -fx-background-image, -fx-background-repeat, -fx-background-position and -fx-background-size. The number of images in the series of -fx-background-image values determines the number of background images that are painted. The -fx-background-repeat, -fx-background-position, and -fx-background-size properties each can contain a series of values. For each item in the -fx-background-image series, the corresponding items in the -fx-background-repeat, -fx-background-position, and -fx-background-size properties are applied to that background image

Stroked borders are specified with the properties -fx-border-color, -fx-border-style, -fx-border-width, -fx-border-radius and -fx-border-insets. Each property contains a series of items. The number of items in the-fx- border-color property determines the number of borders that are painted. Each border in the series is painted using information from the corresponding series item of the -fx-border-style, -fx-border-width, -fx-border-radius, and -fx-border-insets properties

Đường viền hình ảnh được chỉ định với các thuộc tính -fx-biên-hình-ảnh-nguồn, -fx-biên-hình-lặp lại, -fx-biên-hình-lát-lát, -fx-biên-hình-rộng và -fx-biên-hình- . Each property contains a series of items. The number of items in the -fx-border-image-source property determines the number of images that are painted. Each image in the series is painted using information from the corresponding series items of the -fx-border-image-repeat, -fx-border-image-slice, -fx-border-image-width, and -fx-border-image-insets properties

The region's contents are a sequence of nodes, like any other container. The contents are set programmatically and cannot be set via CSS

CSS PropertyValuesDefaultCommentsBACKGROUND FILLS (see CSS Backgrounds and Borders Module Level 3. Backgrounds)-fx-background-color[ , ]*nullA series of paint values separated by commas. -fx-background-insets. [ , [ . ] ]*null

A series of size values or sets of four size values, separated by commas. A single size value means all insets are the same. Otherwise, the four values for each inset are given in the order top, right, bottom, left. Each comma-separated value or set of values in the series applies to the corresponding background color

-fx-background-radius. [ , [ . ] ]*null

A series of radius values or sets of four radius values, separated by commas. A single radius value means the radius of all four corners is the same. Otherwise, the four values in the set determine the radii of the top-left, top-right, bottom-right, and bottom-left corners, in that order. Each comma-separated value or set of values in the series applies to the corresponding background color

BACKGROUND IMAGES (see CSS Backgrounds and Borders Module Level 3. Background Image)-fx-background-image[ , ]*nullA series of image URIs separated by commas. -fx-background-position

[ ,]*
where= [
    [ [ . left . center . right ] [ . top . center . bottom ]? ]
    . [ [ center . [ left . bên phải ] ? . [ center . [ đứng đầu. bottom ] ? ]
]

vô giá trị

A series ofvalues separated by commas. Mỗi mục vị trí bg trong chuỗi áp dụng cho hình ảnh tương ứng trong chuỗi hình nền

-fx-background-repeat[ ,]*
where= repeat-x. lặp lại-y. [nói lại. không gian. vòng. căng ra. không lặp lại]{1,2}null

Một loạt các giá trị được phân tách bằng dấu phẩy. Each repeat-style item in the series applies to the corresponding image in the background-image series

-fx-background-size[ ,]*
= [ . auto ]{1,2} . cover . contain . stretchnull

A series ofvalues separated by commas. Each bg-size item in the series applies to the corresponding image in the background-image series

STROKED BORDERS (see CSS Backgrounds and Borders Module Level 3. Borders)-fx-border-color. [ , [. ] ]*null

A series of paint values or sets of four paint values, separated by commas. For each item in the series, if a single paint value is specified, then that paint is used as the border for all sides of the region; and if a set of four paints is specified, they are used for the top, right, bottom, and left borders of the region, in that order. If the border is not rectangular, only the first paint value in the set is used

-fx-border-insets. [ , [ . ] ]*null

A series of inset or sets of four inset values, separated by commas. For each item in the series, a single inset value means that all insets are the same; and if a set of four inset values is specified, they are used for the top, right, bottom, and left edges of the region, in that order. Each item in the series of insets applies to the corresponding item in the series of border colors

-fx-border-radius. [ , [ . ] ]*null

A series of radius or sets of four radius values, separated by commas. For each item in the series, a single radius value means that all corner radii are the same; and if a set of four radius values is specified, they are used as the radii of the top-left, top-right, bottom-right, and bottom-left corners, in that order. Each item in the series of radii applies to the corresponding item in the series of border colors

-fx-border-style

[ ,]*
where=[phase]? [centered . inside . outside]? [line-join [miter . bevel . round]]? [line-cap [square . butt . round]]?
where= [ none . solid . dotted . dashed . segments(,[,]*) ]

vô giá trị

A series of border style values, separated by commas. Each item in the series applies to the corresponding item in the series of border colors

The segments dash-style defines a sequence representing the lengths of the dash segments. Alternate entries in the sequence represent the lengths of the opaque and transparent segments of the dashes. This corresponds to the strokeDashArray variable of Shape

Tham số pha tùy chọn xác định điểm trong mẫu gạch ngang sẽ tương ứng với điểm bắt đầu của nét. This corresponds to the strokeDashOffset variable of Shape

-fx-border-width. [ , [ . ] ]*null

A series of width or sets of four width values, separated by commas. For each item in the series, a single width value means that all border widths are the same; and if a set of four width values is specified, they are used for the top, right, bottom, and left border widths, in that order. If the border is not rectangular, only the first width value is used. Each item in the series of widths applies to the corresponding item in the series of border colors

BORDER IMAGES (see CSS Backgrounds and Borders Module Level 3. Border Images)-fx-border-image-source[ , ]*null

A series of image URIs, separated by commas

-fx-border-image-insets. [ , [ . ] ]*null

A series of inset or sets of four inset values, separated by commas. For each item in the series, a single inset value means that all insets are the same; and if a set of four inset values is specified, they are used for the top, right, bottom, and left edges of the region, in that order. Each item in the series of insets applies to the corresponding image in the series of border images

-fx-border-image-repeat[ ,]*
where= repeat-x . repeat-y . [repeat . space . round . no-repeat]{1,2}null

A series of repeat-style values, separated by commas. Each item in the series applies to the corresponding image in the series of border images

-fx-border-image-slice

[. ] fill? [ , [ . ] fill? ]*

vô giá trị

A series of image slice values or sets of four values, separated by commas. Each item in the series applies to the corresponding image in the series of border images. For each item in the series, if four values are given, they specify the size of the top, right, bottom, and left slices. This effectively divides the image into nine regions. an upper left corner, a top edge, an upper right corner, a right edge, a lower right corner, a bottom edge, a lower left corner, a left edge and a middle. If one value is specified, this value is used for the slice values for all four edges. If 'fill' is present, the middle slice is preserved, otherwise it is discarded. Percentage values may be used here, in which case the values are considered proportional to the source image

-fx-border-image-width. [ , [ . ] ]*null

A series of width or sets of four width values, separated by commas. For each item in the series, a single width value means that all border widths are the same; and if a set of four width values is specified, they are used for the top, right, bottom, and left border widths, in that order. If the border is not rectangular, only the first width value is used. Each item in the series of widths applies to the corresponding item in the series of border images. Percentage values may be used here, in which case the values are considered proportional to the border image area

OTHER-fx-padding. null

A sets of four padding values, separated by commas. For each item in the series, a single padding value means that all padding are the same; and if a set of four padding values is specified, they are used for the top, right, bottom, and left edges of the region, in that order

-fx-position-shapetrueIf true means the shape centered within the region's width and height, otherwise the shape is positioned at its source position. Has no effect if a shape string is not specified. -fx-scale-shapetrueIf true means the shape is scaled to fit the size of the region, otherwise the shape is at its source size, and its position depends on the value of the position-shape property. Has no effect if a shape string is not specified. -fx-shape""nullAn SVG path string. By specifying a shape here the region takes on that shape instead of a rectangle or rounded rectangle. The syntax of this path string is specified in [3]. -fx-snap-to-pixeltrueDefines whether this region rounds position/spacing and ceils size values to pixel boundaries when laying out its children. -fx-background-fillsnullThis property is set by specifying -fx-background-color, optionally -fx-background-insets, and optionally -fx-background-radius. In order to set the background fill to null, specify the style "-fx-background-color. vô giá trị;". There is no shorthand notation for -fx-background-fills at this time. -fx-background-imagesnullThis property is set by specifying -fx-background-image, optionally -fx-background-position, optionally -fx-background-repeat, and optionally -fx-background-size. There is no shorthand notation for -fx-background-images at this time. -fx-stroke-bordersnullThis property is set by specifying -fx-border-color with the optional -fx-border-insets, -fx-border-radius, -fx-border-style and -fx-border-width. There is no shorthand notation for -fx-stroke-borders at this time. -fx-image-bordersnullThuộc tính này được đặt bằng cách chỉ định -fx-border-image-source với -fx-border-image-insets, -fx-border-image-repeat, -fx-border-image-slice và -fx . Không có ký hiệu tốc ký cho -fx-image-biên giới tại thời điểm này. Also has all properties of Parent

StackPane

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-alignment[ top-left . top-center . trên cùng bên phải. center-left . center . center-right bottom-left . bottom-center . góc phải ở phía dưới. baseline-left . baseline-center . baseline-right ]top-leftAlso has all properties of Pane

TilePane

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-orientation[ horizontal . vertical ]horizontal-fx-pref-rows5-fx-pref-columns5-fx-pref-tile-width-1-fx-pref-tile-height-1-fx-hgap0-fx-vgap0-fx-alignment[ top-left . Trung tâm hàng đầu. top-right . center-left . center . center-right bottom-left . bottom-center . bottom-right . baseline-left . baseline-center . baseline-right ]top-left-fx-tile-alignment[ top-left . top-center . top-right . center-left . center . giữa-phải-dưới-trái. bottom-center . bottom-right . baseline-left . baseline-center . baseline-right ]centerAlso has all properties of Pane

VBox

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-spacing0-fx-alignment[ top-left . top-center . top-right . center-left . center . center-right bottom-left . bottom-center . bottom-right . baseline-left . baseline-center . baseline-right ]top-left-fx-fill-widthtrueAlso has all properties of Pane

Shape

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-fillBLACK-fx-smoothtrue-fx-strokenull-fx-stroke-type[ inside . ngoài. centered ]centered-fx-stroke-dash-array[ ]+null-fx-stroke-dash-offset0-fx-stroke-line-cap[ square . butt . round ]square-fx-stroke-line-join[ miter . bevel . round ]miter-fx-stroke-miter-limit10-fx-stroke-width1Also has all properties of Node

Arc

đẳng cấp phong cách. trống theo mặc định

The Arc node has all the properties of Shape and Node

Circle

đẳng cấp phong cách. trống theo mặc định

The Circle node has all the properties of Shape and Node

CubicCurve

đẳng cấp phong cách. trống theo mặc định

The CubicCurve node has all the properties of Shape and Node

Ellipse

đẳng cấp phong cách. trống theo mặc định

The Ellipse node has all the properties of Shape and Node

Line

đẳng cấp phong cách. trống theo mặc định

The Line node has all the properties of Shape and Node

Path

đẳng cấp phong cách. trống theo mặc định

The Path node has all the properties of Shape and Node

Polygon

đẳng cấp phong cách. trống theo mặc định

The Polygon node has all the properties of Shape and Node

QuadCurve

đẳng cấp phong cách. trống theo mặc định

The QuadCurve node has all the properties of Shape and Node

Rectangle

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-arc-height0-fx-arc-width0Also has all properties of Shape

SVGPath

đẳng cấp phong cách. trống theo mặc định

The SVGPath node has all the properties of Shape and Node

Text

đẳng cấp phong cách. trống theo mặc định

CSS PropertyValuesDefaultComments-fx-fontFont. DEFAULTinherits-fx-font-smoothing-type[ gray . lcd ]gray-fx-strikethroughfalse-fx-text-alignment[ left . center . right . justify ]leftinherits-fx-text-origin[ baseline . top . bottom ]baseline-fx-underlinefalseAlso has font properties and all properties of Shape

WebView

Style class. web-view

CSS PropertyValuesDefaultComments-fx-context-menu-enabledtrue-fx-font-smoothing-type[ gray . lcd ]lcd-fx-font-scale1-fx-min-width0-fx-min-height0-fx-pref-width800-fx-pref-height600-fx-max-widthDouble. MAX_VALUE-fx-max-heightDouble. MAX_VALUEAlso has all properties of Parent

In JavaFX 2. 0 the default skins for all controls support styling from CSS. This is accomplished by building the skins from layout objects called Regions. Most of the style properties for a control are provided by the Region objects that comprise the control's skin. Each Region object of the skin's substructure has its own style class so that it can be styled specifically. The control itself will sometimes provide CSS properties in addition to those provided by its Regions. Finally, controls may also define pseudo-classes such as "vertical" and "horizontal" in addition to those defined by Node