Tự học lập trình web với PHP: Bài 9 - CSS (CB) CÁC THUỘC TÍNH CỦA BOX MODEL NHƯ: BORDER – MARGIN

A – LÝ THUYẾT

I – MÔ HÌNH HỘP BOX MODEL

1 – Khái quát mô hình Box Model

Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.

Mô hình hộp bên chỉ là một mô hình lý thuyết lý tưởng. Bên dưới đây chúng ta sẽ xét mô hình hộp của một đối tượng web cụ thể:

2 – Ví dụ minh họa cho mô hình Box Model

Mã code:

Hình ảnh hiển thị tương ứng:

II – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA BORDER

Border là chính là phần khung bao quanh các đối tượng. Trong bài học này, chúng ta sẽ cùng tìm hiểu về cách dùng CSS để hiển thị và tạo kiểu cho border của các đối tượng trong web

1 – Thuộc tính border-width

a) Khái niệm

border-width chính là độ dầy của đường bao ngoài hay nói cách khác là độ dầy của border

b) Cách sử dụng

border-width: value. Trong đó value nhận một trong các giá trị sau:

· Đơn vị độ dài cụ thể như pixels

Ngoài ra chúng ta cũng có thể sử dụng các giá trị như:

· thin (mảnh)

· medium (vừa)

· thick (dày)

2 - Thuộc tính border-color

a) Định nghĩa

Mầu của đường viền

b) Cách sử dụng

border-color: value. Trong đó value nhận một trong các giá trị sau:

· Tên mầu

· Mã mầu

3 - Thuộc tính border-style

a) Định nghĩa

Thể hiện kiểu dáng của đường viền. Trong CSS có cung cấp cho chúng ta tất cả 8 kiểu đường viền tương ứng với 8 giá trị của thuộc tính border-style: dotted, dashed, solid, double, groove, ridge, inset và outset

b) Cách sử dụng

border-style: value. Trong đó value nhận một trong các giá trị sau:

· solid: Nét liền

· dotted: Chấm đứt

· dashed: Gạch đứt

· double: Đường viền kép

· groove: Đường viền hằm sâu xuống

· ridge: Đường viền nổi lên

· inset: Đường viền tạo cho nội dung bên trong nó hằn sâu xuống

· outset: Đường viền tạo cho nội dung bên trong nó nổi lên

Mã code:

Hình ảnh hiển thị tương ứng:

4 – Cách viết rút gọn để khai báo border

Để khai báo border cho một đối tượng nào đó chúng ta có thể khai báo rút gọn như sau:

border: value_1 value_2 value_3. Trong đó:

· value_1: Là giá trị thể hiện độ dầy của đường viền

· value_2: Là giá trị thể hiện style của đường viền

· value_3: Là giá trị thể hiện mầu của đường viền

Mã code rút gọn:

III – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA MARGIN

1 – Làm việc với các thuộc tính Margin

a) Định nghĩa

Margin chính là thuộc tính quy định khoảng cách từ đối tượng mà chúng ta đang xét tới các đối tượng khác xung quanh nó

Trong CSS có quy định 4 thuộc tính để khai báo và làm việc với Margin đó là margin-left, margin-right, margin-top, margin-bottom

b) Cách sử dụng

margin-left: value

margin-right: value

margin-top: value

margin-bottom: value

Với value là các giá trị của đơn vị độ dài

Mã code:

2 – Cách thức viết rút gọn để khai báo Margin cho một đối tượng

Trong quá trình làm việc nhiều khi chúng ta có thể khai báo Margin theo các cách rút gọn như sau:

margin: value_1 value_2 value_3 value_4. Trong đó

value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trên nó
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên phải nó
value_3: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên dưới nó
value_4: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trái nó

margin: value_1 value_2. Trong đó

value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trên và dưới nó
value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên phải và trái nó

margin: value. Trong đó

· value: Là khoảng cách từ đối tượng đang xét đến bốn phía (trên, dưới, trái, phải) của nó

Mã code rút gọn

IV – LÀM VIỆC VỚI CÁC THUỘC TÍNH CỦA PADDING

1 – Làm việc với các thuộc tính Padding

a) Định nghĩa

Padding là thuộc tính quy định khoảng cách từ đường viền của một đối tượng tới các thành phần nằm bên trong nó

Trong CSS có quy định 4 thuộc tính để khai báo và làm việc với Padding đó là padding-left, padding -right, padding -top, padding –bottom

b) Cách sử dụng

padding-left: value

padding-right: value

padding-top: value

padding-bottom: value

Với value là các giá trị của đơn vị độ dài

Mã code:

Hình ảnh hiển thị tương ứng:

2 – Cách thức viết rút gọn để khai báo Padding cho một đối tượng

Trong quá trình làm việc nhiều khi chúng ta có thể khai báo Padding theo các cách rút gọn như sau:

padding: value_1 value_2 value_3 value_4. Trong đó

· value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ trên xuống

· value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ phải sang

· value_3: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ phía dưới

· value_4: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong nó từ trái sang

padding: value_1 value_2. Trong đó

· value_1: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong xét theo chiều dọc (trên và dưới)

· value_2: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong xét theo chiều ngang (trái vài phải)

padding: value. Trong đó

· value: Là khoảng cách từ đối tượng đang xét đến các đối tượng bên trong theo bốn phía (trên, dưới, trái, phải) của nó

B – THỰC HÀNH

I – BÀI TẬP THỰC HÀNH

Bài 1:

Sử dụng tối đa các thuộc tính của Box Model trong CSS để hoàn thành khối Menu như hình dưới đây. Cho biết các yêu cầu thiết kế như sau:

Độ rộng của Menu là 200px
Chiều cao của phần Menu Title là 36px
Các Icon Menu cách các đối tượng xung quanh10px
Menu có đường viền dầy 1px và có mầu #CDCDCD

II – BÀI TẬP LÀM THÊM

Bài 2:

Hoàn thiện giao diện website như hình dưới đây với các yêu cầu về thiết kế như sau:

Đối với Menu ngang

· Padding trái và phải của các menu item là 5px

· Khi hover thì đổi mầu link và đổi mầu nền của thẻ td

Đối với Menu Trái và Phải

· Các khối Menu bên Trái và bên Phải chứa đường viền có độ dầy 1px

· Các Menu item cách biên bên trái 5px

Đối với phần Intro (Giới thiệu)

· Phần nội dung bên trong khung giới thiệu cách các đối tượng bên ngoài nó 10px

Đối với hiển thị nội dung vắn tắt các bài viết

· Tiêu đề các danh mục chính cách các biên bên Trái và bên phải tương ứng là 5px

· Ảnh mô tả có dường viền dầy 1px và có mầu #CDCDCD, cách ảnh 2px và cách các đối tượng bên ngoài theo phía trái và phải tương ứng là 5px

Đáp án:

1- hình ảnh

2 - code

<html>

/* BODY */

body{

background-color:#434343;

background-image:url(images/background.gif);

background-repeat:repeat-x;

background-attachment:fixed;

}

/* NAVBAR MENU */

table#navbar tr td{

padding:0px 10px;

background:url(images/line_bar.gif) top right no-repeat;

}

#navbar tr td a{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#FF7800;

text-decoration:none;

text-transform:capitalize;

}

#navbar tr td:hover{

background:#FF7800;

}

#navbar tr td:hover a{

color:#FFFFFF;

}

/* SIDEBAR MENU */

table.sidebar_menu{

border:1px solid #434343;

}

table.sidebar_menu tr td{

padding-left:5px;

}

table.sidebar_menu tr a{

font-family:arial;

font-size:12px;

color:#434343;

text-decoration:none;

}

table.sidebar_menu tr a:hover{

color:#FF7800;

text-decoration:underline;

}

table.sidebar_menu tr.title_menu{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#FFFFFF;

text-align:center;

text-transform:capitalize;

}

/* REPORT */

table#report{

font-family:arial;

font-size:12px;

font-style:italic;

color:#FFFFFF;

text-align:justify;

}

table#report tr td{

padding:10px;

}

/* CONTENT */

.left-content tr td{

font-family:arial;

font-size:12px;

color:#333333;

}

.left-content tr td.cat-title{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#FFFFFF;

text-transform:uppercase;

padding-left:5px;

}

.left-content tr td a{

font-family:arial;

font-size:12px;

color:#FF7800;

text-decoration:none;

text-transform:capitalize;

}

.left-content tr td a:hover{

text-decoration:underline;

}

.left-content tr td img{

border:2px solid red;

padding:2px;

margin-right:5px;

}

.right-content tr td{

font-family:arial;

font-size:12px;

color:#333333;

}

.right-content tr td.cat-title{

font-family:arial;

font-size:12px;

font-weight:bold;

color:#FFFFFF;

text-transform:uppercase;

padding-right:5px;

}

.right-content tr td a{

font-family:arial;

font-size:12px;

color:#FF7800;

text-decoration:none;

text-transform:capitalize;

}

.right-content tr td a:hover{

text-decoration:underline;

}

.right-content tr td img{

border:2px solid red;

padding:2px;

margin-left:5px;

}

/* FOOTER */

#footer{

font-family:arial;

font-size:11px;

color:#FFFFFF;

text-align:center;

text-transform:capitalize;

}

</style>

<body>

<tr>

</tr>

<tr>

<tr>

<td align="center" valign="middle"><a href="#">trang chủ</a></td>

<td align="center" valign="middle"><a href="#">giới thiệu</a></td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">danh mục chính</td>

</tr>

<tr>

</tr>

<tr>

<td align="left" valign="top"><a href="#">đào tạo lập trình viên</a></td>

</tr>

<tr>

<td align="left" valign="top"><a href="#">tư vấn doanh nghiệp</a></td>

</tr>

<tr>

</tr>

</table>

<br>

</tr>

<tr>

<td align="left" valign="top"><a href="#">hướng dẫn đăng ký học</a></td>

</tr>

<tr>

<td align="left" valign="top"><a href="#">hình thức học tập online</a></td>

</tr>

<tr>

<td align="left" valign="top"><a href="#">cài đặt sử dụng skype</a></td>

</tr>

<tr>

<td align="left" valign="top"><a href="#">cài đặt sử dụng teamviewer</a></td>

</tr>

<tr>

<td align="left" valign="top"><a href="#">hướng dẫn đóng học phí tại vietpro</a></td>

</tr>

</table>

<br>

<br>

</td>

<tr>

Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình

</td>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

</tr>

<tr>

<td align="justify" valign="top">Website hướng dẫn tự học lập trình web đơn giản, chỉ cần nghiên cứu lần lượt từ bài 1 đến hết series các bạn có thể tự tạo được 1 website đơn giản cho mình...<a href="#">chi tiết</a></td>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

<td colspan="2" align="right" valign="top"><a href="#">đào tạo lập trình viên</a></td>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

<td class="cat-title" height="26" colspan="2" align="left" valign="middle" background="images/main_bar_left.gif">thương mại</td>

</tr>

<tr>

<td colspan="2" align="left" valign="top"><a href="#">tư vấn doanh nghiệp</a></td>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

</td>

<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">tư vấn trực tuyến</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br>

</tr>

<tr>

<td align="left" valign="top"><a href="#">htaccess trong php</a></td>

</tr>

<tr>

</tr>

<tr>

<td align="left" valign="top"><a href="#">viết trang login & logout cho hệ thống</a></td>

</tr>

<tr>

</tr>

<tr>

<td align="left" valign="top"><a href="#">làm mịn da mặt với photoshop cs3</a></td>

</tr>

</table>

<br>

<br>

<br>

</td>

</tr>

<td height="60" colspan="3" align="center" background="images/footer.gif">Website hướng dẫn tự học lập trình web đơn giản</td>

</tr>

</table>

</body>

</html>

>>Xem bài trước: Bài 8 - CSS (CB) CLASS, ID VÀ ĐIỀU KHIỂN HOVER

>>Xem bài tiếp theo: Bài 10 - giới thiệu thẻ div

Tự học lập trình web với PHP

Bài 9 - CSS (CB) CÁC THUỘC TÍNH CỦA BOX MODEL NHƯ: BORDER – MARGIN – PADDING

No comments:

Post a Comment