Bài 17: Chia layer trong css với thuộc tính position

0

Trong bài này, chúng ta sẽ tìm hiểu một phần quan trọng trong thiết kế web là chia layer trong css với thuộc tính position. Và tiến hành luyện tập qua bài tập thực tế.

Video – Chia layer trong css với thuộc tính position

Hướng dẫn chi tiết

Mẫu demo

demo chia layer trong css với thuộc tính position
demo chia layer trong css với thuộc tính position

Mục tiêu là làm cho khối màu đen mờ xếp chồng lên khối màu đỏ.

+ Thuộc tính position: relative; chọn vật làm mốc.

+ Thuộc tính position: absolute; cố định vị trí của khối có thuộc tính này so với khối làm mốc.

+ top, bottom, left, right là các thuộc tính đi chung với thuộc tính position.

Lưu ý: phải có khối position: relative khi dùng khối có position: absolute. Nếu không có thuộc tính position: relative, mặc định thẻ <body></body> sẽ là mốc.

Bài tập thêm

Nội dung bài tập chia layer trong css với thuộc tính position
Nội dung bài tập chia layer trong css với thuộc tính position

Phân tích yêu cầu chia layer trong css với thuộc tính position

+ Tiêu đề có phần viền đỏ ở bên trái, chữ luôn viết hoa, màu trắng.

+ Hình không có padding.

+ Phần nội dung xếp chồng lên hình và có nền mờ và chứa đường dẫn đến bài viết.

Giải bài tập

+ Một khối lớn bao quanh, chứa 2 phần là thẻ h2 tiêu đề và khối div nội dung. Trong khối div nội dung có thẻ img và thẻ a.

+ Cho các khối có chiều rộng bằng nhau, chiều cao đo chính xác.

+ Tiêu đề: text-transform: uppercase để viết hoa, color, background-color, viền dùng boder: 10px red solid; do có viền dày bên chiều rộng của thẻ h2 sẽ giảm đi 10px so với khối bao ngaoi2.

+ Phần khối chứa nội dung có position:relative để làm mốc.

+ Hình đặc đúng kích thước của khối nội dung.

+ Phần chữ là thẻ a, bỏ gạch chân bằng text-decoration: none; nền đen, giảm opacity (có hướng dẫn trong video). Thuộc tính position: absolute; bottom: 0px; left:0px;

Các thuộc tính mới

+ position: relative; (chọn làm mốc)

+ position: absolute; (định vị trí cho khối, đi chung với các thuộc tính top, bottom, left, right)

+ top

+ bottom

+ left

+ right

Các thuộc tính đã hướng dẫn

+ nth-child(3) để ghi đè css cho các đoạn giống nhau.

+ margin: auto

+ text-transform: uppercase

+ box-shadow: 2px 2px 7px;

+ transition: 0.4s;

+ float: left (right) dồn các khối

+ overflow: hidden

+ display: block

+ display: inline

+ margin và padding

+ border : viền, 1px (độ dày) black (màu) solid (loại nét)

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: (màu chữ) dùng green, red hay mã màu

+ background-color: (màu nền)black

+ background-image: url(imgage source).

Code mẫu: Download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.