Thuộc tính border

Thuộc tính border Người đăng: Chiến Thần Ngày: 11012017 Thuộc tính border trong CSS dùng để thiết lập đường viền cho thẻ HTML. Border có thể sử dụng cho 1 thẻ hoặc nhiều thẻ html hoặc 1 khối nào đó. Cứ cái nào mà bạn thấy có đường kẻ bao quanh thì đó chính là border. Học css: cách sử dụng thuộc tính border Cách sử dụng thuộc tính border trong css: Border:1px solid red Xem demo Bạn cần chú ý tới 3 thông số: 1px, solid và red 1px được gọi là borderwidth. Nó chính là độ dày của đường viền. Bạn có thể đặt 2px, 3px… để tăng độ dày của đường viền. Ví dụ: P { Border: 1px solid red; } P { Border: 2px solid red; } P { Border: 3px solid red; } Xem demo Solid được gọi là borderstyle. Nó chính là kiểu của đường viền. borderstyle có các giá trị Dotted: đường viền chấm chấm Dashed: Đường viên đứt đoạn Solid: đường viền liền Double: thiết lập 2 đường viền liên tiếp Và 1 số giá trị khác ít dùng: groove, ridge, inset, outset, none, hidden, mix. Ví dụ: Nói chung, bạn không cần nhớ hết các giá trị này đâu. Khi viết editor sẽ đưa ra gợi ý cho bạn. p.dotted { Border: 1px dotted red; } p.dashed { Border: 1px dashed red; } p.solid { Border: 1px solid red; } p.double { Border: 1px double red; } p.groove { Border: 1px groove red; } p.ridge { Border: 1px ridge red; } p.inset { Border: 1px inset red; } p.outset { Border: 1px outset red; } p.none { Border: 1px none red; } p.hidden { Border: 1px hidden red; } p.mix { Border: 1px mix red; } Xem demo Red được gọi là bordercolor. Nó được dùng để thiết lập màu sắc cho đường viền. bordercorlor nhận các giá trị sau: Tên màu sắc: red, green, black….Nó chính là tên tiếng anh của màu sắc: xanh đỏ tím vàng…. Mã màu sắc: 222, ff0000, 666456… Để lấy mã màu sắc thì bạn cần dùng Photoshop để lấy(chứ không ai nhớ được đâu) Hệ màu RGB : rgb(255,0,0)…Để xác định hệ màu RGB thì bạn dùng photoshop hoặc các công cụ khác như color schemer,.. chứ không ai nhớ được đâu. Ví dụ: P { Border: 1px solid red; } P { Border: 1px solid 222; } P { Border: 1px solid rgb(255,0,0); } Xem demo 1 số cách dùng của thuộc tính border Với 1 thẻ HTML hoặc 1 khối nào đó thì luôn có 4 cạnh bao quanh : Trên, phải, dưới, trái tương ứng với top, right, bottom, left. Vì thế, khi viết Border: 1px solid red; thì CSS hiểu là bạn đang viết cho cả 4 cạnh. Tuy nhiên, trong 1 số trường hợp, bạn chỉ muốn viết border cho 1 cạnh nào đó thì dùng Bordertop: thiết lập đường viền trên cùng. Borderright: thiết lập đường viền bên phải Borderbottom: thiết lập đường viền dưới cùng Borderleft: thiết lập đường viền bên trái Ví dụ: P {Bordertop: 1px solid red; } P {Borderright: 1px solid red; } P {Borderbottom : 1px solid red; } P {Borderleft: 1px solid red; } Xem demo Bo tròn các góc Mặc định khi thiết lập border trong css thì các góc đều là góc vuông. Trong 1 số trường hợp bạn muốn bo tròn các góc thì dùng thuộc tính borderradius. Ví dụ: borderradius: 5px . nếu viết thế này thì css hiểu là bo tròn đều 4 góc borderradius: 5px 4px; borderradius: 5px 4px 3px; borderradius: 5px 10px 2px 4px; mỗi góc có 1 độ bo tròn khác nhau Xem demo Kết luận: Thuộc tính border trong CSS dùng khá thường xuyên, bạn cần nắm được nó để sử dụng. Bạn thấy khó hiểu ở chỗ nào thì comment lại để mình trợ giúp

Thuộc tính border

Người đăng: Chiến Thần - Ngày: 11/01/2017

Thuộc tính border trong CSS dùng để thiết lập đường viền cho thẻ HTML Border có thể sử dụng cho 1 thẻ hoặc nhiều thẻ html hoặc 1 khối nào đó Cứ cái nào mà bạn thấy có đường kẻ bao quanh thì đó chính là border.

Cách sử dụng thuộc tính border trong css:

Border:1px solid red

Xem demo

Bạn cần chú ý tới 3 thông số: 1px, solid và red

1px được gọi là border-width Nó chính là độ dày của đường viền Bạn có thể đặt 2px, 3px… để tăng

độ dày của đường viền

Ví dụ:

P { Border: 1px solid red; }

P { Border: 2px solid red; }

P { Border: 3px solid red; }

Xem demo

Solid được gọi là border-style Nó chính là kiểu của đường viền border-style có các giá trị

 Dotted: đường viền chấm chấm

 Dashed: Đường viên đứt đoạn

 Solid: đường viền liền

 Double: thiết lập 2 đường viền liên tiếp

 Và 1 số giá trị khác ít dùng: groove, ridge, inset, outset, none, hidden, mix

Ví dụ:

Nói chung, bạn không cần nhớ hết các giá trị này đâu Khi viết editor sẽ đưa ra gợi ý cho bạn

p dotted { Border: 1px dotted red; }

p dashed { Border: 1px dashed red; }

p solid { Border: 1px solid red; }

p double Border: 1px double red; }

p groove { Border: 1px groove red; }

p ridge { Border: 1px ridge red; }

p inset { Border: 1px inset red; }

p outset { Border: 1px outset red; }

p none { Border: 1px none red; }

p hidden { Border: 1px hidden red; }

p mix { Border: 1px mix red; }

Xem demo

Red được gọi là border-color Nó được dùng để thiết lập màu sắc cho đường viền border-corlor nhận

các giá trị sau:

 Tên màu sắc: red, green, black….Nó chính là tên tiếng anh của màu sắc: xanh đỏ tím vàng…

 Mã màu sắc: #222, # ff0000, #666456… Để lấy mã màu sắc thì bạn cần dùng Photoshop để lấy(chứ không ai nhớ được đâu) \

 Hệ màu RGB : rgb(255,0,0)…Để xác định hệ màu RGB thì bạn dùng photoshop hoặc các công

cụ khác như color schemer, chứ không ai nhớ được đâu

Ví dụ:

P { Border: 1px solid red; }

P { Border: 1px solid #222; }

P { Border: 1px solid rgb(255, , ); }

Xem demo

1 số cách dùng của thuộc tính border

Với 1 thẻ HTML hoặc 1 khối nào đó thì luôn có 4 cạnh bao quanh

: Trên, phải, dưới, trái tương ứng với top, right, bottom, left.

Vì thế, khi viết Border: 1px solid red; thì CSS hiểu là bạn đang viết cho cả 4 cạnh Tuy nhiên, trong 1 số trường hợp, bạn chỉ muốn viết border cho 1 cạnh nào đó thì dùng

 Border-top: thiết lập đường viền trên cùng

 Border-right: thiết lập đường viền bên phải

 Border-bottom: thiết lập đường viền dưới cùng

 Border-left: thiết lập đường viền bên trái

Ví dụ:

P {Border-top: 1px solid red; }

P {Border-right: 1px solid red; }

P {Border-bottom : 1px solid red; }

P {Border-left: 1px solid red; }

Xem demo

Bo tròn các góc

Mặc định khi thiết lập border trong css thì các góc đều là góc vuông Trong 1 số trường hợp bạn muốn bo tròn các góc thì dùng thuộc tính border-radius

Ví dụ:

border-radius: 5px nếu viết thế này thì css hiểu là bo tròn đều 4 gó

border-radius: 5px 4px;

border-radius: 5px 4px 3px;

border-radius: 5px 10px 2px 4px; mỗi góc có 1 độ bo tròn khác nhau

Xem demo

Kết luận: Thuộc tính border trong CSS dùng khá thường xuyên, bạn cần nắm được nó để sử dụng Bạn thấy khó hiểu ở chỗ nào thì comment lại để mình trợ giúp