Đang tải... (xem toàn văn)
Trong CSS, có ba loại vị trí là normal, absolute, relative.Thuộc tính position trong CSS được dùng để xác định vị trí của nội dung.Giá trị mặc định của thuộc tính position là static, có nghĩa là nội dung trang Web được đặt theo thứ tự được chỉ ra trong tập tin mã nguồn HTML.
Thuộc tính CSS nâng cao NexTGen Web Bài 06: Một số thuộc tính khác Style Sheet Mục tiêu Vị trí CSS. Giả lớp (pseudo class) phần tử. Bảng Danh sách. Thuộc tính giao diện người dùng. Building Dynamic Web © Aptech Ltd. Sites / of 25 Định vị (Positioning) Trong CSS, có ba loại vị trí normal, absolute, relative. Thuộc tính position CSS dùng để xác định vị trí nội dung. Giá trị mặc định thuộc tính position static, có nghĩa nội dung trang Web đặt theo thứ tự tập tin mã nguồn HTML. Building Dynamic Web © Aptech Ltd. Sites / of 25 Định vị tương đối (Relative position) Vị trí tương đối nội dung phần tử định vị theo góc bên trái phần tử chứa (lấy góc bên trái phần tử cha làm gốc tọa độ để định vị). Để định vị trí nội dung bên phần tử theo vị trí tương đối, bạn thiết lập giá trị relative cho thuộc tính position. bottom left Hai hình minh họa dùng thuộc tính top, left right, bottom để định vị. right Hình màu đỏ (phần tử con) lấy góc bên trái hình màu đen (phần tử cha chứa phần tử màu đỏ) làm gốc tọa độ để định vị. top Building Dynamic Web © Aptech Ltd. Sites / of 25 Định vị tương đối (Relative position) #mauvang{ width:300px; height: 100px; border: 5px solid yellow; } #mauden{ width:300px; top: 50px height: 300px; border: 10px solid black; } #hopmaudo{ position: relative; right: 80px; right:80px bottom: 100px; width:150px; height: 150px; border: 1px solid red; background:red; } Building Dynamic Web © Aptech Ltd. Sites / of 25 Định vị tuyệt đối (Absolute positioning) Định vị trí tuyệt đối cho phép bạn định vị phần tử có liên quan đến phần tử cha định vị gần nó. Nếu không tồn phần tử cha, phần tử html body sử dụng phần từ cha(tùy thuộc vào trình duyệt) Để định vị trí cho nội dung bên phần tử định vị tuyệt đối, thiết lập giá trị absolute cho thuộc tính position. Vị trí tuyệt đối thay đổi vị trí xuất nội dung phần tử theo cửa sổ trình duyệt (phần tử BODY). left Các góc phần tử định vị theo góc phần tử cha. right top top bottom bottom © Aptech Ltd. left right Định vị tuyệt đối (Absolute positioning) Ví dụ [...]... Ltd Sites / 20 of 25 Thuộc tính giao diện người dùng (User Interface) Thuộc tính scrollbar Thuộc tính cursor Thuộc tính zoom Building Dynamic Web © Aptech Ltd Sites / 21 of 25 Thuộc tính Scrollbar Dùng thuộc tính scrollbar của CSS, bạn có thể tùy biến hình thức của thanh cuộn Thuộc tính scrollbar không có trong CSS 2.0, nhưng vẫn được hỗ trợ bởi trình duyệt Internet Explorer từ phiên bản... kê list -style- position Chỉ ra vị trí của bullet list -style- type Chỉ ra kiểu bullet BuildingDynamic Web © Aptech Ltd Sites / 18 of 25 Thuộc tính Table Thuộc tính table cho phép bạn xác định cấu trúc và trình bày bảng Cấu trúc của bảng bao gồm nhiều thuộc tính như khoảng cách giữa các dòng và các cột, khoảng cách đường viền …vv Thuộc tính table-layout Mô tả Xác định cách hiển thị dòng, cột, ô của bảng... kiểu class thay vì id, một điểm chú ý là id chỉ sử dụng một lần trong trang, còn class sử dụng nhiều lần theo yêu cầu © Aptech Ltd HTML5 /Giới thiệu về CSS3 17 Thuộc tính List Thuộc tính list cho phép áp dụng các style khác nhau cho danh sách liệt kê (list) CSS cung cấp tùy chọn để có thể định dạng bullet ở phần đầu mỗi mục liệt kê Thuộc tính Mô tả list -style- image Chỉ ra một ảnh nhỏ làm bullet phần... áp dụng để tạo style khác biệt tới phần tử khi một sự kiện nào đó xảy ra Ví dụ tạo hiệu ứng RollOver khi người dùng đưa con trỏ chuột qua các liên kết Cú pháp khai báo giả lớp: Tên_bộ_chọn:trạng_thái {thuộc_ tính: giá_trị; } Bảng liệt kê trạng thái khác nhau của một phần tử Trạng thái Mô tả active hover Định nghĩa một style khác cho phần tử khi con trỏ chuột di qua nó link Định nghĩa style cho liên... Ltd HTML5 /Giới thiệu về CSS3 13 Mục đích của các giả phần tử Xem xét một kịch bản mà bạn đang thiết kế một trang web giải thích các thuật ngữ các thuật ngữ quan trọng Trong khi xác định điều kiện như vậy, bạn có thể cảm thấy cần phải nhấn mạnh thêm về các chữ cái đầu tiên bằng cách áp dụng kiểu khác nhau Phần tử giả cung cấp cho bạn một sự linh hoạt để áp dụng kiểu cho một phần cụ thể của nội... tiên của nội dung đoạn tiên của nội dung đoạn font-family: “fantasy”; font-size: xx-large; font-weight: bold; } © Aptech Ltd HTML5 /Giới thiệu về CSS3 16 Các kiểu cho Hyperlinks CSS có thể được sử dụng để thay đổi sự xuất hiện và hành vi của các siêu liên kết Có hai cách khác để gán kiểu siêu liên kết cụ thể là, div cụ thể và link cụ thể Nêu các kiểu của hyperlink được gán cho một div cụ thể thì tất cả... Dynamic Web © Aptech Ltd Sites / 22 of 25 Thuộc tính Scrollbar Body { scrollbar-3dlight-color:#ffd700; scrollbar-arrow-color:#ff0; scrollbar-base-color:#ff6347; scrollbar-darkshadow-color:#ffa500; scrollbar-face-color:#008080; scrollbar-highlight-color:#ff69b4; scrollbar-shadow-color:#f0f } Building Dynamic Web © Aptech Ltd Sites / 23 of 25 Thuộc tính cursor Thuộc tính cursor cho phép thay đổi hình thức... Thuộc tính cursor cho phép thay đổi hình thức con trỏ khi di chuột qua nội dung phần tử Bảng giá trị cho thuộc tính Giá trị Mô tả Giá trị Mô tả crosshair ne-resize hand nw-resize help s-resize text e-resize move wait Building Dynamic Web © Aptech Ltd Sites / 24 of 25 Thuộc tính zoom Thuộc tính zoom cho phép phóng to nội dung khi hiển thị trên trang web Building Dynamic Web © Aptech Ltd Sites /... dòng đầu tiên của nội dung đoạn của nội dung đoạn { font-family: “Tahoma”; font-weight: bolder; background-color: #FFFFCC; } © Aptech Ltd HTML5 /Giới thiệu về CSS3 15 Các giả phần tử Giả phẩn tử :first-letter cho phép bạn áp dụng kiểu cho các ký tự đầu tiên của nội dung Ví dụ p:first-letter Xác định kiểu được áp dụng cho các chữ cái đầu Xác định kiểu được áp dụng cho các chữ cái đầu { tiên của nội dung... con trỏ chuột di qua nó link Định nghĩa style cho liên kết chưa được viếng thăm visited © Aptech Ltd Định nghĩa một style khác cho phần tử đã được người dùng kích hoạt Định nghĩa style cho liên kết đã được viếng thăm Giả lớp(Pseudo class) Bảng dưới đây liệt kê các tên bộ chọn và mô tả của nó: Tên bộ chọn Mô tả :link :active Được sử dụng cho liên kết kích hoạt :hover Được sử dụng cho liên kết khi . Bài 06: Một số thuộc tính khác của Style Sheet NexTGen Web Thuộc tính CSS nâng cao Aptech Ltd. Building Dynamic Web Sites / 2. Mô tả active Định nghĩa một style khác cho phần tử đã được người dùng kích hoạt. hover Định nghĩa một style khác cho phần tử khi con trỏ chuột di qua nó. link Định nghĩa style cho liên kết chưa. List $%&K#P#GN##'NEF*GH13 ,31.-i1/j/P'NE Thuộc tính Mô tả list -style- image Chỉ ra một ảnh nhỏ làm bullet phần đầu mỗi mục liệt kê list -style- position Chỉ ra vị trí của bullet list -style- type Chỉ ra kiểu bullet Aptech