Khóa học thiết kế web chuyên nghiệp của chúng tôi sẽ cung cấp cho các bạn đầy đủ nhất các kỹ năng thiết kế giao diện web, thành thạo ngôn ngữ lập trình PHP&My SQL, Quản trị và tối ưu hóa website.
Thuộc tính Outline sẽ vẽ một
đường bao ngoài toàn bộ một phần tử HTML, đối với phần tử có đường viền
(border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự
như đường viền bạn có thể đặt cho nó các thuộc tính về màu sắc, độ lớn và kiểu.
Có một điều cần chú ý là các thuộc
tính của đường bao này có thể không được hỗ trợ trên IE
Đặt thuộc màu cho đường bao
Nếu muốn đặt màu cho đường bao chúng
ta có thể sử dụng thuộc tính outline-color:
p
{
outline-color: #CC0000;
}
Đặt độ rộng cho đường bao.
Tương tự như đường viền, để đặt độ
rộng cho đường bao chúng ta đặt giá trị độ lớn cho thuộc tính outline-width:
p
{
outline-width: 2px;
}
Chọn kiểu đường bao
Để chọn kiểu cho đường bao chúng ta
sẽ đặt lần lượt các giá trị cho thuộc tính outline-style:
p
{
outline-style: dotted;
}
|
STT
|
outline-style
|
|
1
|
none
|
|
2
|
hidden
|
|
3
|
dotted
|
|
4
|
dashed
|
|
5
|
solid
|
|
6
|
double
|
|
7
|
groove
|
|
8
|
ridge
|
|
9
|
inset
|
CSS padding
CSS padding sẽ định nghĩa khoảng
trống giữa mép của các phần tử tới các phần tử con hoặc nội dung bên trong.
Chúng ta không thể gán giá trị âm cho thuộc tính này. Cũng giống như margin
thuộc tính padding cũng tương ứng với 4 phía của phần tử.
Tương ứng với 4 phía của phần tử
chúng ta có 4 thuộc tính padding tương ứng đó là:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
Các giá trị có thể gán cho các thuộc
tính này là : % hoặc length
Để viết cho gọn chúng ta cũng có thể
viết thuộc tính padding dưới dạng shorthand.
div.padding
{
padding: 5px 3px 2px 8px;
}
Làm thẻ div có thanh cuộn (scrollbar) giống iFrame
Bài viết dưới đây sẽ giới thiệu với
các bạn cách làm cho thẻ <div> có thanh cuộn giống khi ta sử dụng iFrame
để load một trang khác.
Trước hết chúng ta có ví dụ về đoạn
mã HTML như sau:
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>example page</title>
</head>
<body>
<div
id="page">
<h1>Title</h1>
<div id="scroll_box">
<p>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
Put a long text in here. It will be
crollable.<br/>
</p>
</div>
<p>
This content follows after the scrollable
box.
</p>
</div>
</body>
</html>
Bây giờ chúng ta tiến hành style cho
thẻ <div>, trước hết chúng ta cần phải đặt cố định chiều rộng và chiều cao
của cho thẻ <div>
#scroll_box
{
height: 120px;
width: 400px;
...
}
Để cho thẻ <div> hiển thị
thanh cuộn chúng ta sẽ đặt thuộc tính display của thẻ <div> là auto
#scroll_box
{
height: 120px;
width: 400px;
display: auto;
border: 1px solid #CCCCCC;
margin: 1em 0;
}
Khi bạn đưa nội dung dài hơn chiều cao và chiều
rộng của thẻ <div> thì trình duyệt sẽ tự động sinh ra thanh cuôn ngang và
thanh cuộn dọc giống như iFrame. Kỹ thuật này hiện có khá nhiều Website sử dụng
để có cách thể hiện nội dung riêng biệt của mình.
0 nhận xét:
Đăng nhận xét