Bài 17: Chia layer trong css với thuộc tính position
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
"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo" Hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
Mẫu demo
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.
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
+ 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
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 Like, Share nếu thấy bài viết thú vị.
Liên hệ
