ĐịNh vị Các thuộc tính của CSS (Cascading Style Sheets) - những núm vú

Các thuộc tính định vị của CSS được sử dụng chủ yếu để định kiểu các lớp bằng cách sử dụng thẻ, mặc dù bạn cũng có thể sử dụng chúng để định vị vị trí của một phần tử hình ảnh, vùng chứa hoặc khối cấp Trình duyệt. Đối với các lớp, cả nội dung cũng như vùng chứa có thể được tạo kiểu với các thuộc tính trong danh mục này.

position: Xác định cách thức đặt một phần tử theo kiểu trong một cửa sổ trình duyệt. Chỉ định vị trí là tuyệt đối, cố định, tương đối, hoặc tĩnh.

tuyệt đối: Đặt vị trí của phần tử hoàn toàn dựa trên các giá trị số được nhập cho vị trí của phần tử liên quan đến cạnh trên bên trái của cửa sổ trình duyệt, hoặc đến phần tử gốc hoàn toàn hoặc vị trí tương đối gần nhau.

cố định: Đặt vị trí của phần tử hoàn toàn dựa trên các giá trị số được nhập cho vị trí của phần tử tương ứng với cạnh trên bên trái của cửa sổ trình duyệt.

• relative: Thiết lập vị trí của phần tử theo các giá trị số được nhập cho vị trí của đối tượng liên quan đến vị trí của phần tử được tạo kiểu trong luồng văn bản của tệp tin.

  tĩnh: Đặt phần tử ở vị trí chính xác trong luồng văn bản.

• chiều rộng: Sử dụng thuộc tính này để đặt chiều rộng của một phần tử, chẳng hạn như một lớp hoặc vùng chứa khác, bằng cách sử dụng px, pt, in, cm, mm, pc, em, ex,% hoặc tự động.

Mức độ hiển thị {height: 100px;}

: Thuộc tính này xác định giá trị hiển thị ban đầu của một phần tử, có thể được thiết lập để ẩn, kế thừa hoặc hiển thị, khi trang đầu tiên mở trong cửa sổ trình duyệt.

Không nên nhầm lẫn hiển thị với thuộc tính hiển thị, xác định xem một phần tử có được coi như là một khối hoặc một phần tử nội tuyến hay bị bỏ qua hoàn toàn bởi trình duyệt với màn hình hiển thị: không ai; thuộc tính. Với khả năng hiển thị, bạn đang xử lý trạng thái hiển thị ban đầu của một phần tử, chẳng hạn như một lớp, khi trang đầu tiên tải trong trình duyệt.

Thuộc tính này cũng có thể được bật và tắt bằng cách sử dụng JavaScript để ẩn và hiển thị các phần tử trên trang, do đó cho phép một chút tương tác với trang cho khách truy cập.

Để sửa đổi chế độ hiển thị của phần tử của bạn, hãy thêm thuộc tính khả năng hiển thị vào trình chọn CSS của bạn với một trong các giá trị sau:

ẩn: tùy chọn này sẽ ẩn lớp khỏi hiển thị khi một trang ban đầu mở ra trong trình duyệt.

thừa kế: Tùy chọn này sẽ tạo ra bất kỳ lớp kế thừa khả năng hiển thị của một lớp cha mẹ; nếu cha mẹ không tồn tại, lớp sẽ được hiển thị. Khi khả năng hiển thị không xác định, thừa kế là thuộc tính mặc định.

hiển thị: Chọn tùy chọn này để bắt buộc lớp hiển thị, bất kể cài đặt hiển thị của lớp cha mẹ nào, khi trang đầu tiên mở trong cửa sổ trình duyệt.

z-index: Thuộc tính này chỉ định thứ tự xếp hàng của lớp liên quan đến bất kỳ lớp nào khác trên trang khi chúng được xem trong trình duyệt.

Đặt z-index tự động khi số không quan trọng, đặt nó làm thừa kế để làm cho lớp kế thừa giá trị z-index của lớp cha hoặc nhập số dương hoặc số âm cụ thể, chẳng hạn như 1, 15, hoặc 100, khi số này quan trọng tương đối so với các lớp khác trên trang.

• Số càng cao, càng gần lớp xuất hiện ở phía trước hoặc trên cùng của trang gần khách truy cập nhất; số càng thấp, càng gần lớp xuất hiện với nền của trình duyệt.

• #lastchance {z-index: 4;}

• Hình minh hoạ cho thấy một ví dụ về một vài lớp trên một trang với các giá trị z-index khác nhau.

tràn: Thiết lập tràn có thể được sử dụng để xác định điều gì xảy ra với bất kỳ nội dung nào trong một lớp vượt quá kích thước của lớp như được xác định trong CSS. Ví dụ: nếu một lớp có kích thước 200px x 200px nhưng chứa một trang đầy đủ của văn bản, cài đặt tràn sẽ xác định cách văn bản sẽ lấp đầy lớp. Đặt thuộc tính tràn thành tự động, ẩn, di chuyển hoặc hiển thị.

#aboutus {overflow: scroll;}

Dưới đây là mô tả của mỗi giá trị tràn bạn có thể sử dụng:

auto: Chọn tùy chọn này để trình duyệt tự động thêm thanh cuộn vào lớp nếu và chỉ nếu nội dung vượt quá chiều rộng và chiều cao xác định của lớp.

ẩn: Khi tùy chọn này được chọn, kích thước của một lớp được duy trì và bất kỳ nội dung nào vượt quá kích thước đó bị cắt hoặc cắt khỏi chế độ xem trong cửa sổ trình duyệt.

cuộn: Chọn cuộn để thêm thanh cuộn vào lớp, bất kể nội dung phù hợp hoặc vượt quá chiều rộng và chiều rộng của lớp. Thuộc tính này không được hỗ trợ thống nhất bởi tất cả các trình duyệt, vì vậy hãy chắc chắn kiểm tra nó trước khi xuất bản.

visible: Chọn tùy chọn này để mở lớp theo chiều dọc và sau đó theo chiều ngang, nếu cần, để phù hợp với bất kỳ nội dung nào vượt quá chiều rộng và chiều cao của lớp được chỉ định sao cho tất cả nội dung có thể nhìn thấy.

Vị trí (trái, trên cùng, phải, dưới cùng): Sử dụng thuộc tính vị trí để xác định kích thước chính xác và vị trí (dựa trên loại được chỉ định) của một phần tử được tạo kiểu trong cửa sổ trình duyệt.

• Theo mặc định, kích thước pixel và vị trí của một phần tử được chỉ định cho cạnh trên, bên trái, phía dưới và bên phải. Tuy nhiên, bạn có thể sử dụng các đơn vị khác (bao gồm pt, in, cm, mm, pc, em, ex, hoặc%) nếu muốn hoặc đặt giá trị cho bất kỳ bên nào tự động. Đối với các lớp, nếu nội dung bên trong lớp đó vượt quá kích thước được chỉ định, lớp sẽ mở rộng để phù hợp với nội dung.

• #specialitems {left: 500px; trên cùng: 300px; phải: 0; bottom: 0;}

• clip: Sử dụng thuộc tính này để xác định diện tích hình chữ nhật nhỏ hơn trong một lớp liên quan đến cạnh trên bên trái của lớp đó.Khi được cắt bớt, khu vực ẩn có thể được thao tác bằng JavaScript hoặc các chương trình khác để tạo các hiệu ứng đặc biệt có thể ẩn và hiển thị nội dung ẩn.

• Đặt các giá trị cho vùng được cắt bớt lên trên đỉnh, trái, phải, và dưới cùng của lớp bằng cách sử dụng px (pixels), pc (picas), pt (điểm), in (inch), mm (millimetre) cm (cm), em (ems), ex (exs), hoặc% (phần trăm), hoặc giá trị tự động.

#nơigame {clip: rect (10px, 100px, 0px, 60px);}