THUỘC TÍNH BORDER TRONG CSS

Thiết kế Blog giá rẻ  Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.

Các giá trị của border bao gồm: border-style, border-width và border-color

Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border style

Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng.

none: không hiển thị đường viền (mặc định khi không được khai báo)

Hiển thị với giá trị solid
Hiển thị với giá trị dashed
Hiển thị với giá trị dotted
Hiển thị với giá trị double
Hiển thị với giá trị groove
Hiển thị với giá trị ridge
Hiển thị với giá trị inset
Hiển thị với giá trị outset

Border Width

Border-width sẽ quy định độ dày của đường viền.
Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.

Ví dụ

p{ border-style: solid; border-width: 1px;}
Đoạn văn bản này được hiển thị với giá trị solid và có border-width: 1px

Border Color

Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:

  • Tên màu (tên tiếng anh): red, white, black...
  • Hệ RGB – ví dụ: rgb(255,155,0)
  • Hệ Hex – ví dụ: #ff0000

Ngoài ra border-color còn có giá trị ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị.

Ví dụ:

p{ border-style: solid; border-width: 1px; border-color: #000000 }
Giá trị border của cạnh riêng biệt

Chẳng hạn khi viết mã CSS như sau:

.myborder{ border-style: solid }
Thì tất cả các cạnh sẽ được hiển thị với giá trị solid, nhưng có lúc nào đó trong thiết kế của bạn, bạn chỉ muốn một cạnh nào đó được hiện thị mà thôi, hay mỗi cạnh có một kiểu hiện thị khác nhau thì sao?

Để giải quyết vấn đề này thì chúng ta sẽ viết mã CSS cho từng cạnh riêng biệt.

Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.

.myborder{
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}

Khi chỉ muốn cạnh nào đó hiển thị thì bạn chỉ cần viết CSS cho cạnh đó thôi.

Ví dụ sau chỉ hiện thị cạnh trên cùng.

.myborder{ border-top-style: solid }
Cách viết tắt đối với thuộc tính border

Xét lại ví dụ sau:

p{
border-style: solid;
border-width: 1px;
border-color: #000000;
}

Ta nhận thấy các thành phần border-style, border-width, border-color được viết riêng biệt với các giá trị tương ứng.

Để đơn giản hơn chúng ta sẽ gộp chung lại để tiện cho việc chỉnh sửa cũng như làm giảm tối đa dung lượng của file CSS xuống mức thấp nhất có thể. Và đây cũng là cách hay được sử dụng nhất.

Từ ví dụ trên, ta sẽ viết chung tại như sau, đây gọi là cách viết tắt trong CSS.

p { border: 1px solid #000000 }
Như vậy đoạn mã nhìn gọn gàng hơn rất nhiều. Thứ tự để viết tắt cho thuộc tính border như sau:

  • border-width
  • border-style
  • border-color

Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:

p{ border-top: 1px solid red }

Nguồn bài viết: Ewebvn


Read more: http://blog.linhdungvn.com/2012/12/thuoc-tinh-border-trong-css.html#ixzz2XhkhqRhJ

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com