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 CSS dùng để thiết lập đường viền cho thẻ HTML Border sử dụng cho thẻ nhiều thẻ html khối Cứ mà bạn thấy có đường kẻ bao quanh border Cách sử dụng thuộc tính border css: Border:1px solid Xem demo red Bạn cần ý tới thông số: 1px, solid red 1px gọi border-width Nó độ dày đường viền Bạn đặt 2px, 3px… để tăng độ dày đường viền Ví dụ: P { Border: 1px solid red; } P { Border: 2px solid red; } P { Border: 3px solid red; } Xem demo Solid gọi border-style Nó kiểu đường viền border-style 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 đường viền liên tiếp Và số giá trị khác dùng: groove, ridge, inset, outset, none, hidden, mix Ví dụ: Nói chung, bạn khơng cần nhớ hết giá trị đâu Khi viết editor đưa 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 gọi border-color Nó dùng để thiết lập màu sắc cho đường viền border-corlor nhận giá trị sau: Tên màu sắc: red, green, black….Nó tên tiếng anh màu sắc: xanh đỏ tím vàng… Mã màu sắc: #222, # ff0000, #666456… Để lấy mã màu sắc bạn cần dùng Photoshop để lấy(chứ không nhớ đâu) \ Hệ màu RGB : rgb(255,0,0)…Để xác định hệ màu RGB bạn dùng photoshop cơng cụ khác color schemer, không nhớ đâu Ví dụ: P { Border: 1px solid red; } P { Border: 1px solid #222; } P { Border: 1px solid rgb(255,0,0); } Xem demo số cách dùng thuộc tính border Với thẻ HTML khối ln có cạnh bao quanh : Trên, phải, dưới, trái tương ứng với top, right, bottom, left Vì thế, viết Border: 1px solid red; CSS hiểu bạn viết cho cạnh Tuy nhiên, số trường hợp, bạn muốn viết border cho cạnh dùng Border-top: thiết lập đường viền Border-right: thiết lập đường viền bên phải Border-bottom: thiết lập đường viền Border-left: thiết lập đường viền bên trái Ví dụ: P P P P {Border-top: 1px solid red; } {Border-right: 1px solid red; } {Border-bottom : 1px solid red; } {Border-left: 1px solid red; } Xem demo Bo tròn góc Mặc định thiết lập border css góc góc vng Trong số trường hợp bạn muốn bo tròn góc dùng thuộc tính border-radius Ví dụ: border-radius: border-radius: border-radius: border-radius: 5px 5px 5px 5px viết css hiểu bo tròn góc 4px; 4px 3px; 10px 2px 4px; góc có độ bo tròn khác Xem demo Kết luận: Thuộc tính border CSS dùng thường xuyên, bạn cần nắm để sử dụng Bạn thấy khó hiểu chỗ comment lại để trợ giúp ... } {Border- left: 1px solid red; } Xem demo Bo tròn góc Mặc định thiết lập border css góc góc vng Trong số trường hợp bạn muốn bo tròn góc dùng thuộc tính border- radius Ví dụ: border- radius: border- radius:... { 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 gọi border- color... schemer, khơng nhớ đâu Ví dụ: P { Border: 1px solid red; } P { Border: 1px solid #222; } P { Border: 1px solid rgb(255,0,0); } Xem demo số cách dùng thuộc tính border Với thẻ HTML khối ln có cạnh