Bài 7: Đường viền và các thuộc tính của đường viền trong css

Sọ đầu lâu

Sọ đầu lâu

Moderator

Tổng số bài gửi : 112
Points : 712
Thanks : 0
Join date : 27/07/2011

Các thuộc tính của đường viền (border) sẽ cho phép đặt các giá trị đặc biệt cho đườn viền như kiểu đường viền, kích thước, màu sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như

,

, ,...

Trong thuộc tính đường viền (border) chúng ta có 3 giá trị cơ bản đó là:

border-color:
border-width:
border-style:

01Thuộc tính màu của đường viền

Để đặt màu cho đường viền chúng ta sẽ đặt thông số màu cho thuộc tính border-color:

Code:: div.color { border-color: #CC0000; }

02Đặt chiều rộng cho đường viền (border)

Nếu muốn đặt chiều rộng của đường viền chúng ta sẽ đặt giá trị cho thuộc tính border-width:

Code:: div.borerwidth { border-width: 2px; }

STT Giá trị
1 thin
2 medium
3 thick
4 length

03Chọn kiểu của đường viền

Bạn có thể sử dụng thuộc tính border-style để đặt kiểu cho đường viền. Chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương ứng với 9 kiểu đường viền khác nhau.

Code:: div.borderstyle { border-style: solid; }

STT border-style
1 none
2 hidden
3 dotted
4 dashed
5 solid
6 double
7 groove
8 ridge
9 inset
10 outset

Với 4 phía của đối tượng ta có 4 thuộc tính border tương ứng:

border-top:
border-right:
border-bottom:
border-left:

Ứng với đường viền của mỗi phía chúng ta đều có 3 giá trị (color, width, style)
STT Phía Thuộc tính
1 top border-top-color:
border-top-width:
border-top-style:
2 right border-right-color:
border-right-width:
border-right-style:
3 bottom border-bottom-color:
border-bottom-width:
border-bottom-style:
4 left border-left-color:
border-left-width:
border-left-style:

Chúng ta có thể dùng phương pháp viết mã giản lược (shorthand) để viết các thuộc tính của đường viền gọn hơn. Giả sử chúng ta đặt thuộc tính border của thẻ

với độ rộng bằng 1, kiểu solid và màu là #CC0000

Code:: div.border { border: 1px solid #CC0000; }

CSSYeah.

Thông điệp [Trang 1 trong tổng số 1 trang]

Diễn đàn Vn+ » KIẾN THỨC CÔNG NGHỆ THÔNG TIN » Lập Trình » HTML / CSS / Javascript » Bài 7: Đường viền và các thuộc tính của đường viền trong css

Similar topics

» Bài 9: Thuộc tính đường bao ngoài (Outline) trong css
» Tên template, đường dẫn, và Base URL trong Joomla 1.5
» Bài 6: Các thuộc tính của font chữ và định nghĩa font chữ cho văn bản trong css
» Suy nghĩ của anh (chị) đối với vấn đề nhân sinh được đặt ra trong câu văn sau: “Sự sống nảy sinh từ trong cái chết, hạnh phúc hiện hình từ trong những hy sinh, gian khổ, ở đời này không có con đường cùng, chỉ có những ranh giới, điều cốt yếu là phải có sứ
» Bài 8: Các thuộc tính của margin trong css

Permissions in this forum:
Bạn không có quyền trả lời bài viết


Tình Yêu - Giới Tính .	1001 Bí Ẩn .


Tổng hợp phần mềm .	Ebook .


Thủ Thuật IT .	Thủ Thuật Blog .


Video Clip .	Lạ & Fun .

1 Bài 7: Đường viền và các thuộc tính của đường viền trong css Mon Oct 31, 2011 8:56 pm

Sọ đầu lâu