Ví dụ 15: đặt hình logo.png làm nền cho trang web, hình lặp lại theo chiều ngang, hiển thị cách lề trái 100px, lề trên 20px
body { background-image:url(logo.png); background-repeat:repeat-x; background-position:100px 20px; }
Thuộc tính background- attachment: cố định hình nền khơng cho di chuyển
khi cuộn trang web. Thuộc tính này được sử dụng kèm với thuộc tính background-image.
- Cú pháp: {background- attachment: fixed/scroll;}
+ scroll: giá trị mặc định, hình nền sẽ cuộn cùng nội dung trang web + fixed: hình nền đứng yên khi cuộn trang web.
- Ví dụ 16: body{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; background-attachment: fixed; } Thuộc tính background rút gọn: - Cú pháp:
{background: <background-color> <background-image>
<background-repeat> <background-attachment> <background-position> ;}
- Ví dụ 17: đặt hình logo.png làm nền cho trang web, hình lặp lại theo chiều ngang, hiển thị cách lề trái 100px, lề trên 20px
body { background: url(logo.png) repeat-x 100px 20px; }
4.4.2. Thuộc tính border
Các thuộc tính border dùng để định dạng đường viền cho các thành phần HTML.
Thuộc tính định dạng gồm:
+ border-style: thiết lập kiểu đường viền
+ border-width: thiết lập độ dày cho đường viền + border-color: thiết lập màu cho đường viền Thuộc tính vị trí gồm:
+ border-top: đường viền hiển thị bên trên + border-right: đường viền hiển thị bên phải + border-bottom: đường viền hiển thị bên dưới + border-left: đường viền hiển thị bên trái
+ border: đường viền hiển thị bao quanh thành phần Thuộc tính border-style: thiết lập kiểu cho đường viền.
Các kiểu đường: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
Hình 4.14. Các kiểu đƣờng viền
- Ví dụ 18: định dạng đường viền cho đoạn có kiểu dotted và màu cyan p {border-style:dotted; border-color:cyan; }
Thuộc tính border-width: thiết lập độ dày cho đường viền.
- Cú pháp: { border- width: độ dày;}
Các giá trị độ dày: thin, medium, thick, hay giá trị đo cụ thể như pixels. Thuộc tính border-color: thiết lập màu cho đường viền
- Cú pháp: { border-color: màu;}
Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX - Ví dụ 19: h1 { border-style:dotted; border-width:thin; border-color:#FF0000; } Thuộc tính border rút gọn:
- Cú pháp:
{ border: <border-width> <border-color> <border-style> ;}
Có thể dùng các thuộc tính border-top, border-right, border-bottom, border-left để chỉ định đường viền riêng cho các cạnh.
Thuộc tính border-radius: tạo góc bo trịn cho các phần tử (hộp văn bản,
hình ảnh,…) - Cú pháp:
{ border-radius: độ bo trịn góc;}
+ Độ bo trịn của góc có thể xác định theo đơn vị: px, em, hoặc % + Có thể bo trịn theo từng góc của phần tử:
+ border-top-left-radius: bo trịn góc trên bên trái + border-top-right-radius: bo trịn góc trên bên phải + border-bottom-left-radius: bo trịn góc dưới bên trái + border-bottom-right-radius: bo trịn góc dưới bên phải - Ví dụ 20:
Hiển thị trên trình duyệt:
Hình 4.15. Kết quả ví dụ 20 4.4.3. Thuộc tính box-shadow 4.4.3. Thuộc tính box-shadow
Dùng tạo bóng đổ (shadow) cho các thành phần HTML. - Cú pháp:
{ box-shadow: h-offset v-offset blur color;}
- Các giá trị:
+ h-offset: khoảng cách shadow theo chiều ngang + v-offset: khoảng cách shadow theo chiều dọc + blur: độ mờ của shadow
+ spread: độ phân tán của shadow + color: màu của shadow
Ví dụ: box-shadow: 0px 0px 5px 5px #999999;
4.4.4. Thuộc tính margin
Các thuộc tính margin dùng canh lề cho các thành phần HTML. Thuộc tính gồm:
+ margin-left: canh lề bên trái cho thành phần + margin-right: canh lề bên phải cho thành phần + margin-top: canh lề bên trên cho thành phần + margin-bottom: canh lề bên dưới cho thành phần
- Cú pháp:
{ margin-left: giá trị; } { margin-top: giá trị; } { margin-right: giá trị; } { margin-bottom: giá trị; } Ví dụ 21: <!DOCTYPE html> <html> <head> <title>CSS</title> <meta charset="UTF-8"> <style type="text/css">
.canhle{ margin-top:50px; margin-right:40px; margin-bottom:100px; margin-left:120px; }
h2 { border:3px dotted black;} </style>
</head> <body>
<hr> <h2>
Đoạn khơng sử dụng thuộc tính margin
</h2> <hr>
<h2 class="canhle">
Đoạn có sử dụng thuộc tính margin</h2> <hr>
</body> </html>
Hiển thị trên trình duyệt:
Thuộc tính margin rút gọn:
- Cú pháp:
{margin: <margin-top> <margin-right> <margin-bottom> <margin-left>;}
Ví dụ 22: tạo class .canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 40px, lề dưới 100px, lề trái 120px.
.canhle{margin:50px 40px 100px 120px;}
+ Thuộc tính margin rút gọn với 1 giá trị: {margin: <giá trị>;}
giá trị: khoảng cách mặc định cho tất cả các phía (trên, dưới, trái, phải)
Ví dụ 23: tạo class .canhle quy định khoảng cách lề 4 bên là 50px
.canhle{ margin:50px;}
+ Thuộc tính margin rút gọn với 2 giá trị: {margin: <giá trị 1> <giá trị 2>;}
giá trị 1: khoảng cách lề trên và lề dưới giá trị 2: khoảng cách lề trái và lề phải
Ví dụ 24: tạo class .canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 20px, lề dưới 50px, lề trái 20px.
.canhle{ margin:50px 20px;}
+ Thuộc tính margin rút gọn với 3 giá trị:
{margin: <giá trị 1> <giá trị 2> <giá trị 3>;} giá trị 1: khoảng cách lề trên
giá trị 2: khoảng cách lề trái và lề phải giá trị 3: khoảng cách lề dưới
Ví dụ 25: tạo class .canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 20px, lề dưới 30px, lề trái 20px.
4.4.5. Thuộc tính padding
Các thuộc tính padding dùng thêm vào vùng đệm cho các thành phần HTML. Nói cách khác padding quy định khoảng không gian giữa phần nội dung hiển thị của một thành phần với đường viền của nó.
Thuộc tính gồm:
+ padding-left: vùng đệm bên trái + padding-right: vùng đệm bên phải + padding-top: vùng đệm bên trên + padding-bottom: vùng đệm bên dưới
Hình 4.18. Các vị trí padding
Cú pháp: { padding-left: giá trị; } { padding-top: giá trị; } { padding-right: giá trị; } { padding-bottom: giá trị; } Ví dụ 26: Nội dung border
Hiển thị trên trình duyệt:
Hình 4.19. Kết quả ví dụ 26
Thuộc tính padding rút gọn:
- Cú pháp:
{padding: <padding-top> <padding-right> <padding-bottom> <padding-left>;}
Ví dụ 27: tạo class .dem quy định vùng đệm cho thành phần như sau: trên 50px, phải 40px, dưới 60px, trái 100px.
.dem { padding:50px 40px 60px 100px;}
+ Thuộc tính padding rút gọn với 1 giá trị: {padding: <giá trị>;}
giá trị: khoảng cách mặc định cho tất cả các phía (trên, dưới, trái, phải)
Ví dụ 28: tạo class .dem quy định vùng đệm cho 4 bên là 30px
.dem { padding:30px;}
+ Thuộc tính padding rút gọn với 2 giá trị: {padding: <giá trị 1> <giá trị 2>;}
giá trị 1: vùng đệm trên và dưới giá trị 2: vùng đệm trái và phải
Ví dụ 29: tạo class .canhle quy định vùng đệm cho thành phần như sau: trên 20px, phải 30px, dưới 20px, trái 30px.
.dem { padding:20px 30px;}
+ Thuộc tính padding rút gọn với 3 giá trị:
{padding: <giá trị 1> <giá trị 2> <giá trị 3>;} giá trị 1: vùng đệm trên
giá trị 2: vùng đệm trái và phải giá trị 3: vùng đệm dưới
Ví dụ 30: tạo class .dem quy định vùng đệm cho thành phần như sau: trên 30px, phải 20px, dưới 10px, trái 20px.
.dem { padding:30px 20px 10px;} 4.4.6. Thuộc tính height và width
Thuộc tính height:
Quy định chiều cao của một thành phần HTML - Cú pháp:
{ height: giá trị; }
Thuộc tính width:
Quy định chiều rộng của một thành phần HTML - Cú pháp:
{ width: giá trị; }
Giá trị của thuộc tính width và height có thể xác định theo đơn vị: px, em, % (phần trăm kích thước của phần tử chứa nó)
* Lưu ý:
Khi quy định thuộc tính width, height cho 1 thành phần HTML trong CSS, thực chất chỉ là quy định chiều rộng và chiều cao cho phần nội dung của nó. Muốn có chiều rộng, chiều cao thật của thành phần, phải cộng thêm margin, border và padding.
• Chiều rộng thực = width + left padding + right padding + left border + right border + left margin + right margin
• Chiều cao thực = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin Thuộc tính max-height:
Quy định chiều cao tối đa của một thành phần HTML - Cú pháp:
{ max-height: giá trị; }
Thuộc tính max-width:
Quy định chiều rộng tối thiểu của một thành phần HTML - Cú pháp:
{ max-width: giá trị; }
Thuộc tính min-height:
Quy định chiều cao tối thiểu của một thành phần HTML - Cú pháp:
{ min-height: giá trị; }
Thuộc tính min-width:
Quy định chiều rộng tối đa của một thành phần HTML - Cú pháp:
{ min-width: giá trị; }
Hiển thị trên trình duyệt:
Hình 4.20. Kết quả ví dụ 31 4.5. ĐỊNH DẠNG HÌNH ẢNH BẰNG CSS
Các thuộc tính định dạng hình ảnh bao gồm: width, height, border, margin, padding, float, clear.
Thuộc tính border: quy định đường viền cho hình ảnh
Thuộc tính margin: quy định lề cho hình ảnh
Thuộc tính padding: thêm vào vùng đệm cho hình ảnh Thuộc tính height: quy định chiều cao của hình ảnh Thuộc tính width:quy định chiều rộng của hình ảnh Thuộc tính opacity: thiết lập độ trong suốt cho hình ảnh
- Cú pháp: { opacity: giá trị ; }
Độ trong suốt có giá trị từ 0 đến 1. Giá trị càng thấp hình ảnh càng trong suốt.
Thuộc tính float:
Dùng quy định văn bản bao quanh hình ảnh - Cú pháp:
{ float: giá trị; }
Các giá trị:
+ left: cố định hình nằm bên trái. + right: cố định hình nằm bên phải.
+ none: bình thường (nằm tại chính vị trí của nó) Thuộc tính clear:
Dùng xóa các quy định văn bản bao quanh hình ảnh dùng ở thuộc tính float phía trước.
- Cú pháp:
{ clear: giá trị; } Các giá trị:
+ left: xóa quy định hình nằm bên trái. + right: xóa quy định hình nằm bên phải. + both: xóa quy định cố định hình.
Ví dụ 32: - Code CSS:
Hiển thị trên trình duyệt:
4.6. TẠO BỐ CỤC TRANG WEB BẰNG MƠ HÌNH HỘP
Tất cả các phần tử HTML đều có thể được coi là một hộp. Trong CSS, mơ hình hộp (box model) được sử dụng khi nói về thiết kế và bố cục trang.
Mơ hình hộpvề cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: padding, border margin và content.
Hình 4.22. Mơ hình hộp
+ margin: là khoảng trắng nằm phía ngồi border + border : là đường biên bao quanh padding và content + padding : là vùng đệm giữa border và content
+ content : là nơi mà văn bản, hình ảnh nội dung của thành phần HTML xuất hiện.
Các thuộc tính định dạng mơ hình hộp bao gồm: width, height, border, margin, padding, float, clear, overflow, position, left, right, top, bottom, z- index, display.
Thuộc tính border: quy định đường viền cho hộp
Thuộc tính margin: quy định lề cho hộp
Thuộc tính padding: thêm vào vùng đệm cho hộp Thuộc tính height: quy định chiều cao của hộp
Thuộc tính width: quy định chiều rộng của hộp
Thuộc tính float: quy định vị trí cố định hộp
Dùng xác định vị trí hộp. Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top
- Cú pháp:
{ position: giá trị; }
Các giá trị:
+ Absolute: Một phần tử có vị trí absolute sẽ được định vị tương đối so với phần tử bao (phần tử cha) nó (phần tử cha phải khai báo relative), nếu khơng có phần tử bao này sẽ định vị tương đối so với body. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử. + relative: Một phần tử có vị trí relative sẽ được định vị tương đối so với
vị trí bình thường của chính nó. Thiết lập các thuộc tính top, left, right, bottom để thay đổi vị trí của phần tử.
+ fixed: Một phần tử có vị trí fixed sẽ được định vị tương đối so với cửa sổ trình duyệt. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử.
Thuộc tính left: dùng để định vị trí bên trái (left) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trái ngoài cùng của thành phần bao ngoài.
Thuộc tính top: dùng để định vị trí bên trên (top) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trên ngồi cùng của thành phần bao ngồi.
Thuộc tính right: dùng để định vị trí bên phải (riht) cho thành phần khi sử
dụng thuộc tính position, với khoảng cách được tính từ mép phải ngồi cùng của thành phần bao ngồi.
Thuộc tính bottom: dùng để định vị trí bên dưới (bottom) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép dưới ngồi cùng của thành phần bao ngoài.
Thuộc tính overflow:
Dùng quy định cách hiển thị nội dung của một thành phần HTML - Cú pháp:
{ overflow: giá trị; }
Các giá trị:
+ visible: giá trị mặc định, khi nội dung chứa bên trong vượt q kích thước của thành phần thì vẫn được hiển thị tràn ra khỏi thành phần đó.
+ hidden: khi chiều cao của thành phần khơng đủ chứa nội dung, thì nội dung bị tràn sẽ được dấu đi.
+ auto: tự động hiện thanh cuộn khi nội dung chứa bên trong vượt quá kích thước của thành phần.
+ scroll: hiện thanh cuộn ngang và thanh cuộn đứng.
Hình 4.23. Ví dụ minh họa các giá trị thuộc tính overflow
Thuộc tính z-index:
Dùng được dùng để xếp chồng các phần tử trên cửa sổ trình duyệt - Cú pháp:
{ z-index: giá trị; }
Giá trị của thuộc tính z-index quyết định thứ tự xếp chồng. Giá trị càng lớn, thứ tự sắp xếp càng cao
Hình 4.24. Thứ tự xếp chồng các phần tử
Thuộc tính display:
Được dùng xác định cách hiển thị của thành phần - Cú pháp:
{ display: giá trị; }
Giá trị:
+ block: phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. + inline: giá trị mặc định. Thành phần sẽ hiển thị trên cùng dòng + inline-block: kết hợp giữa inline và block
+ flex: hiển thị một thành phần dưới dạng vùng chứa linh hoạt + inline-flex: kết hợp giữa inline và flex
Bố cục sử dụng flex bao gồm 2 phần: flex-container và các flex- items. Các thuộc tính đi kèm với flex-container:
• flex-direction: row | row-reverse | column | column-reverse; định hướng các flex-items theo hàng| đảo ngược hàng | cột | đảo ngược cột
• flex-wrap: nowrap | wrap ;
cho phép flex-item tự động xuống dịng khi kích thước flex- container thay đổi. (mặc định nowrap)
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
điều chỉnh vị trí bắt đầu và căn chỉnh các flex-item bên trong flex-container (tùy thuộc vào flex-direction).
• flex-flow: flex-direction | flex-wrap
Hình 4.25. Ví dụ minh họa thuộc tính display
Thuộc tính box-sizing:
Dùng xác định cách tính chiều rộng và chiều cao của một phần tử. - Cú pháp:
{ box-sizing: giá trị; }
Giá trị:
content-box: thuộc tính chiều rộng và chiều cao chỉ bao gồm nội dung, không bao gồm đường viền và phần đệm.
border-box: thuộc tính chiều rộng và chiều cao bao gồm nội dung, phần đệm và đường viền.
Ví dụ 33: mơ hình hộp dùng thuộc tính float - Code CSS:
- Code HTML:
Hiển thị trên trình duyệt:
Ví dụ 34: mơ hình hộp dùng thuộc tính position - Code CSS:
- Code HTML:
Hình 4.28. Kết quả ví dụ 34