Video: Học lập trình Web A-Z - jQuery UI - Bài 12 - Làm đẹp thẻ select, checkbox và radio 2025
Ở phía trên bảng điều khiển thuộc tính CSS Designer, được sử dụng để tạo bố cục trang. Bạn sử dụng các tùy chọn này để chỉ định chiều cao, chiều rộng, căn chỉnh, định vị và khoảng cách. Các cài đặt này lý tưởng cho việc tạo bố cục trang với kiểu lớp và ID để thực hiện những việc như sắp xếp hình ảnh và thẻ vị trí để tạo bố cục nhiều cột.
Chiều rộng:-
Chỉ định chiều rộng cho bất kỳ phần tử nào có thể có kích thước được chỉ định, chẳng hạn như một thẻ. Các tùy chọn kích thước là pixel (px), điểm (pt), pica (pc), phần trăm (%), em, rem, cũ, và ch. Chiều cao:
-
Chỉ định chiều cao cho bất kỳ phần tử nào có thể có kích thước được chỉ định. Tối thiểu và Tối đa
-
Chiều rộng: Chỉ định chiều rộng tối thiểu và tối đa cho các thẻ và các phần tử khối khác. Các tùy chọn này hữu ích khi bạn chỉ định độ rộng theo phần trăm của cửa sổ trình duyệt. Ví dụ: bạn có thể thiết lập chiều rộng thiết kế ở 80 phần trăm của cửa sổ trình duyệt, và sau đó đặt một Chiều rộng Tối đa là 1000 px để ngăn bố cục của bạn không bị kéo dài hơn 1000 pixel.
-
Chỉ định chiều cao tối thiểu và tối đa cho các thẻ và các phần tử khối khác. Margin:
-
Đặt khoảng không gian xung quanh một phần tử. Lề có thể được sử dụng để tạo không gian giữa cạnh của một phần tử và các phần tử khác trên trang, chẳng hạn như giữa một hình ảnh và văn bản hoặc giữa hai thẻ. Bạn có thể đặt lề riêng cho phía trên, bên phải, dưới cùng và bên trái. Padding được đo bằng pixel, điểm, inch, cm, milimet, picas, ems, exs và tỷ lệ phần trăm.
-
Thiết lập số lượng không gian bên trong các đường viền của một phần tử. Ví dụ: bạn có thể sử dụng đệm để tạo không gian giữa các đường biên của thẻ và nội dung của nó. Bạn có thể đặt padding riêng cho đầu trang, phải, dưới cùng và trái. Padding được đo bằng pixel, điểm, inch, cm, milimet, picas, ems, exs và tỷ lệ phần trăm. Việc đặt khoảng đệm và khoảng cách giữa các cạnh có thể rất khôn lanh. Khi bạn thêm margin và padding vào một phần tử, chẳng hạn như một hình ảnh hoặc một tag, bạn sẽ tăng kích thước tổng thể của phần tử đó và lượng không gian mà nó yêu cầu trong layout.
Vị trí:
-
-
Tùy chọn Vị trí, có sẵn từ phần dưới của phần Giao diện của bảng thuộc tính, thay đổi cách các phần tử được đặt trên một trang. Định vị có thể thay đổi đáng kể cách các phần tử cấp độ khối (như bảng, danh sách, tiêu đề, đoạn văn và thẻ) xuất hiện trong trình duyệt. Thừa kế:
-
Bạn không cần chỉ định tùy chọn mặc định này. Trừ khi một tùy chọn khác được chọn, mỗi phần tử kế thừa vị trí của phần tử cha của nó. Tĩnh:
-
Đặt nội dung ở vị trí của nó trong dòng chảy của tài liệu. Theo mặc định, tất cả các phần tử HTML có có thể được định vị là tĩnh. Tuyệt đối:
-
Sử dụng tọa độ phía trên và bên trái để điều khiển vị trí của một phần tử liên quan đến góc trên bên trái của cửa sổ trình duyệt hoặc góc trên bên trái của phần tử chứa phần tử. Cố định:
-
Vị trí một phần tử liên quan đến góc trên bên trái của trình duyệt. Nội dung của một phần tử sử dụng định vị cố định vẫn không đổi ngay cả khi người dùng cuộn xuống hoặc trên trang. Tương đối:
-
Sử dụng vị trí tương đối so với điểm mà bạn chèn phần tử vào trang hoặc tương đối với vùng chứa của nó. Phao:
-
Căn chỉnh các phần tử, chẳng hạn như hình ảnh và thẻ, sang trái hoặc phải của một trang hoặc vùng chứa khác làm cho văn bản hoặc các phần tử khác quấn quanh nó. Nhấp vào biểu tượng trong trường Float để xác định bốn tùy chọn sau: Inherit, Right, Left, hoặc None. Xóa:
-
Chặn nội dung nổi bằng cách chồng chéo khu vực sang trái hoặc phải hoặc với cả hai mặt của một phần tử. Tùy chọn này rất hữu ích khi một phần tử được thả nổi, chẳng hạn như thẻ được sử dụng để tạo thanh bên, chồng chéo một phần tử cấp khối khác, chẳng hạn như một thẻ được sử dụng để tạo chân trang của một trang. Overflow-x và -y:
-
Cho trình duyệt biết cách hiển thị nội dung của một phần tử nếu vùng chứa, chẳng hạn như một thẻ, không thể khớp với toàn bộ chiều cao hoặc chiều rộng của phần tử. Tùy chọn tràn là Hiển thị:
-
Giữ nội dung, chẳng hạn như hình ảnh hoặc văn bản, có thể nhìn thấy được, ngay cả khi nó mở rộng vượt quá chiều cao hoặc chiều rộng được xác định của một thùng chứa. Ẩn:
-
Xóa nội dung nếu vượt quá kích thước của vùng chứa. Tùy chọn này không cung cấp thanh cuộn. Cuộn:
-
Thêm thanh cuộn vào vùng chứa bất kể nội dung của nó vượt quá kích thước của phần tử. Tự động:
-
Tạo thanh cuộn chỉ xuất hiện khi nội dung của vùng chứa vượt quá ranh giới của nó. Hiển thị:
-
-
Chỉ rõ nếu, hoặc làm thế nào, để hiển thị một phần tử trong một trình duyệt. Ví dụ: bạn thay đổi vị trí của một danh sách không có thứ tự từ ngang sang dọc bằng cách chọn Inline hoặc ẩn một phần tử, làm cho nó vô hình, bằng cách chọn None. Bạn có thể sử dụng tùy chọn Hiển thị với một ngôn ngữ kịch bản để thay đổi hiển thị các phần tử động. Tầm nhìn:
-
Kiểm soát xem trình duyệt có hiển thị một phần tử hay không. Các tùy chọn hiển thị là Thừa kế:
-
Phần tử có khả năng hiển thị của phần tử trong đó nó chứa (mặc định). Hiển thị:
-
Phần tử được hiển thị. Ẩn:
-
Phần tử không được hiển thị. Thu gọn:
-
Để sử dụng với bảng HTML. Thu gọn có thể được sử dụng để loại bỏ một cột hoặc hàng mà không ảnh hưởng đến phần còn lại của bảng bố trí. Z-Index:
-
-
Kiểm soát vị trí của một phần tử trên tọa độ Z, điều khiển thứ tự xếp chồng lên các phần tử trong mối quan hệ với nhau.Các phần tử có số cao hơn chồng chéo các phần tử có số dưới. Độ mờ:
-
Kiểm soát mức độ trong suốt cho một phần tử từ 0 đến 0. 0 (hoàn toàn trong suốt). Ví dụ: nếu bạn nhập. 5 trong trường độ mờ, độ mờ của một phần tử sẽ giảm xuống còn 50 phần trăm.