» » » » Bài 31: CSS Borders,Margins, Paddings
Thứ Hai, 23 tháng 5, 2016

14:58:00

Border


Border CSS

CSS border thuộc tính cho phép bạn xác định phong cách, chiều rộng, và màu của đường viền của một đối tượng.
Đối này có viền rãnh đó là 15px rộng và màu xanh lá cây.

Kiểu viền

Các border-style tài sản quy định cụ thể những loại biên giới để hiển thị.
Các giá trị sau đây được phép:
  • dotted - Xác định đường biên giới đứt
  • dashed - Định nghĩa một đường viền đứt nét
  • solid - Xác định đường biên giới vững chắc
  • double - Định nghĩa một viền đôi
  • groove - Định nghĩa một biên giới có rãnh 3D. Hiệu quả tùy thuộc vào giá trị biên giới màu
  • ridge - Định nghĩa một biên giới chỏm 3D. Hiệu quả tùy thuộc vào giá trị biên giới màu
  • inset - Định nghĩa một biên giới 3D inset. Hiệu quả tùy thuộc vào giá trị biên giới màu
  • outset - Xác định đường biên giới đầu 3D. Hiệu quả tùy thuộc vào giá trị biên giới màu
  • none - Định nghĩa không biên giới
  • hidden - Định nghĩa một biên giới ẩn
Các border-style sở hữu có thể có từ một đến bốn giá trị (đối với biên giới trên cùng, bên biên phải, biên giới phía dưới, và biên giới trái).

Thí dụ

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
Kết quả:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
chú thíchLưu ý: Không ai trong số các thuộc tính CSS biên KHÁC mô tả dưới đây sẽ có bất kỳ tác dụng trừ khi border-styletài sản được thiết lập!

Border Width

Các border-width tài sản định chiều rộng của bốn biên giới.
Chiều rộng có thể được thiết lập như là một kích thước cụ thể (trong px, pt, cm, em, vv) hoặc bằng cách sử dụng một trong ba giá trị được xác định trước: mỏng, trung bình, hoặc dày.
Các border-width tài sản có thể có từ một đến bốn giá trị (đối với biên giới trên cùng, bên biên phải, biên giới phía dưới, và biên giới trái).

Thí dụ

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Màu đường viền

Các border-color tài sản được sử dụng để thiết lập màu sắc của bốn biên giới.
Các màu sắc có thể được thiết lập bằng cách:
  • Tên - chỉ định tên màu sắc, như "đỏ"
  • Hex - chỉ định một giá trị hex, như "# FF0000"
  • RGB - chỉ định một giá trị RGB, như "rgb (255,0,0)"
  • trong suốt
Các border-color sở hữu có thể có từ một đến bốn giá trị (đối với biên giới trên cùng, bên biên phải, biên giới phía dưới, và biên giới trái).
Nếu border-color không được thiết lập, nó được thừa hưởng màu sắc của các nguyên tố.

Thí dụ

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: green;
}

p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

Biên giới - Cá nhân Sides

Từ những ví dụ trên, bạn đã thấy rằng nó có thể xác định một ranh giới khác nhau cho mỗi bên.
Trong CSS, đó cũng là tài sản để xác định mỗi biên giới (trên cùng, bên phải, phía dưới, và bên trái):

Thí dụ

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}
Ví dụ trên cho cùng một kết quả như thế này:

Thí dụ

p {
    border-style: dotted solid;
}
Vì vậy, đây là cách hoạt động:
Nếu border-style tài sản có bốn giá trị:
  • border-style: say mê đôi rắn tan;
    • biên giới trên cùng là rải rác
    • biên phải là rắn
    • biên giới phía dưới là đôi
    • biên giới trái là tiêu tan
Nếu border-style tài sản có ba giá trị:
  • border-style: say mê rắn đôi;
    • biên giới trên cùng là rải rác
    • biên giới phải và bên trái là rắn
    • biên giới phía dưới là đôi
Nếu border-style tài sản có hai giá trị:
  • border-style: say mê rắn;
    • biên giới trên và dưới cùng là chấm
    • biên giới phải và bên trái là rắn
Nếu border-style tài sản có một giá trị:
  • border-style: say mê;
    • tất cả bốn biên giới là chấm
Các border-style tài sản được sử dụng trong ví dụ trên. Tuy nhiên, nó cũng làm việc với border-width và border-color .

Biên giới - tài sản Shorthand

Như bạn có thể nhìn thấy từ các ví dụ trên, có rất nhiều tài sản để xem xét khi giao dịch với biên giới.
Để rút ngắn mã, nó cũng có thể xác định tất cả các đặc tính biên giới cá nhân trong một tài sản.
Các border bất động sản là một tài sản viết tắt cho các thuộc biên giới cá nhân sau đây:
  • border-width
  • border-style (bắt buộc)
  • border-color

Thí dụ

p {
    border: 5px solid red;
}

Tất cả các thuộc tính CSS Border

PropertyDescription
borderSets all the border properties in one declaration
border-bottomSets all the bottom border properties in one declaration
border-bottom-colorSets the color of the bottom border
border-bottom-styleSets the style of the bottom border
border-bottom-widthSets the width of the bottom border
border-colorSets the color of the four borders
border-leftSets all the left border properties in one declaration
border-left-colorSets the color of the left border
border-left-styleSets the style of the left border
border-left-widthSets the width of the left border
border-rightSets all the right border properties in one declaration
border-right-colorSets the color of the right border
border-right-styleSets the style of the right border
border-right-widthSets the width of the right border
border-styleSets the style of the four borders
border-topSets all the top border properties in one declaration
border-top-colorSets the color of the top border
border-top-styleSets the style of the top border
border-top-widthSets the width of the top border
border-widthSets the width of the four borders

Thuộc tính CSS Margin

CSS margin tài sản được sử dụng để tạo ra không gian xung quanh các yếu tố.
Các thuộc tính lề thiết lập kích thước của không gian trắng NGOÀI biên giới.
Nguyên tố này có mức 80px.

Margins

Sữ dụng CSS Margin

Các thuộc tính lề CSS thiết lập kích thước của không gian trắng NGOÀI biên giới.
chú thíchLưu ý: Các lợi là hoàn toàn minh bạch - và không thể có một màu nền!
Với CSS, bạn có toàn quyền kiểm soát các biên. Có thuộc tính CSS để thiết lập lề cho mỗi bên một phần tử (top, right, bottom, và bên trái).

Margin - Cá nhân Sides

CSS có tài sản để xác định lợi nhuận cho mỗi bên của một phần tử:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
Tất cả các thuộc tính lề có thể có các giá trị sau:
  • tự động - trình duyệt tính toán lợi nhuận
  • chiều dài - chỉ định một lề trong px, pt, cm, vv
  • % - Chỉ định một lề trong% độ rộng của phần tử chứa
  • kế thừa - xác định rằng lợi nhuận nên được thừa hưởng từ các yếu tố phụ huynh
chú thíchLưu ý: Cũng có thể sử dụng các giá trị tiêu cực cho lợi nhuận; trùng nội dung.
Ví dụ sau sẽ đặt lợi khác nhau cho tất cả bốn mặt của một phần tử <p>:

Thí dụ

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Ví dụ sau đây cho phép lề trái được thừa hưởng từ yếu tố phụ huynh:

Thí dụ

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

Margin - Sở hữu Shorthand

Để rút ngắn mã, nó có thể xác định tất cả các thuộc tính lề trong một tài sản.
Các margin tài sản là một tài sản viết tắt cho thuộc tính lề cá nhân sau đây:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Thí dụ

p {
    margin: 100px 150px 100px 80px;
}
Vì vậy, đây là cách hoạt động:
Nếu margin tài sản có bốn giá trị:
  • margin: 25px 50px 75px 100px;
    • lề trên là 25px
    • lề phải là 50px
    • lề dưới là 75px
    • lề trái là 100px
Nếu margin tài sản có ba giá trị:
  • margin: 25px 50px 75px;
    • lề trên là 25px
    • lề phải và bên trái là 50px
    • lề dưới là 75px
Nếu margin tài sản có hai giá trị:
  • margin: 25px 50px;
    • lề trên và dưới là 25px
    • lề phải và bên trái là 50px
Nếu margin tài sản có một giá trị:
  • margin: 25px;
    • tất cả bốn lề là 25px

Sử dụng các giá trị tự động

Bạn có thể thiết lập các thuộc tính margin để auto để chiều ngang trung tâm các yếu tố bên trong container.
Các yếu tố sau đó sẽ đưa lên chiều rộng chỉ định, và không gian còn lại sẽ được chia đều giữa các lề trái và phải:

Thí dụ

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}

Tất cả các thuộc tính CSS Margin

PropertyDescription
marginA shorthand property for setting the margin properties in one declaration
margin-bottomSets the bottom margin of an element
margin-leftSets the left margin of an element
margin-rightSets the right margin of an element
margin-topSets the top margin of an element

Thuộc tính CSS Padding

CSS padding thuộc tính được sử dụng để tạo ra không gian xung quanh nội dung.
Các tính chất đệm thiết lập kích thước của không gian trắng giữa nội dung phần tử và các đường viền phần tử.
Nguyên tố này có một miếng đệm của 50px.

CSS Padding

Các thuộc tính CSS đệm xác định những khoảng trắng giữa các nội dung phần tử và các đường viền phần tử.
Các padding xóa một khu vực xung quanh nội dung (bên trong biên giới) của một phần tử.
chú thíchLưu ý: Các padding bị ảnh hưởng bởi màu nền của phần tử!
Với CSS, bạn có toàn quyền kiểm soát các padding. Có thuộc tính CSS để thiết lập padding cho mỗi bên một phần tử (top, right, bottom, và bên trái).

Padding - Cá nhân Sides

CSS có tài sản để chỉ định padding cho mỗi bên một phần tử:
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
Tất cả các thuộc tính đệm có thể có các giá trị sau:
  • chiều dài - chỉ định một padding trong px, pt, cm, vv
  • % - Chỉ định một padding trong% độ rộng của phần tử chứa
  • kế thừa - xác định rằng các đệm nên được thừa hưởng từ các yếu tố phụ huynh
Ví dụ sau sẽ đặt đệm khác nhau cho tất cả bốn mặt của một phần tử <p>:

Thí dụ

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Padding - Sở hữu Shorthand

Để rút ngắn mã, nó có thể xác định tất cả các thuộc tính padding trong một tài sản.
Các padding bất động sản là một tài sản viết tắt cho các tính chất đệm cá nhân sau đây:
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Thí dụ

p {
    padding: 50px 30px 50px 80px;
}
Vì vậy, đây là cách hoạt động:
Nếu padding tài sản có bốn giá trị:
  • padding: 25px 50px 75px 100px;
    • trang padding là 25px
    • đệm đúng là 50px
    • đệm phía dưới là 75px
    • padding trái là 100px
Nếu padding tài sản có ba giá trị:
  • padding: 25px 50px 75px;
    • trang padding là 25px
    • miếng đệm không phải và bên trái là 50px
    • đệm phía dưới là 75px
Nếu padding tài sản có hai giá trị:
  • padding: 25px 50px;
    • miếng đệm trên và dưới là 25px
    • miếng đệm không phải và bên trái là 50px
Nếu padding tài sản có một giá trị:
  • padding: 25px;
    • tất cả bốn miếng đệm là 25px
Tất cả các thuộc tính CSS Padding
PropertyDescription
paddingA shorthand property for setting all the padding properties in one declaration
padding-bottomSets the bottom padding of an element
padding-leftSets the left padding of an element
padding-rightSets the right padding of an element
padding-topSets the top padding of an element




Chủ đề: , ,

0 Bình luận:

Đăng nhận xét

Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!

Đăng ký: Đăng Nhận xét (Atom)