Thuộc tính tổng hợp là thuộc tính mà bên trong nó bao gồm nhiều thuộc tính thành phần khác. Ví dụ: thuộc tính lề margin sẽ bao gồm
Trong quá trình thiết lập giá trị cho thuộc tính tổng hợp chúng ta có thể rút gọn cách khai báo giá trị như:
Được thay bằng theo thứ tự (top, right, bottom, left) như sau:
Nếu giá trị có tính lập lại:
Được thay bằng:
Một số thuộc tính tổng hợp thông thường:
Là thuộc tính qui định lề xung quanh của đối tượng. Thuộc tính này gồm 4 thành phần như lề trên, lề phải, lề dưới, lề trái.
Cú pháp:
margin: margin-top margin-right margin-bottom margin-left; Hoặc: margin: value1 value2;
Ví dụ:
Là thuộc tính qui định vùng đệm xung quanh của đối tượng. Thuộc tính này gồm 4 thành phần như đệm trên, đệm phải, đệm dưới, đệm trái.
Cú pháp:
padding: padding-top padding-right padding-bottom padding-left; Hoặc: padding: value1 value2;
Ví dụ:
Là thuộc tính qui định đường viền xung quanh của đối tượng. Thuộc tính này gồm 4 thành phần như viền trên, viền phải, viền dưới, viền trái.
Cú pháp:
Border: border-width border-color border-style;
Là thuộc tính quy định độ rộng cho viền của một đối tượng. Thuộc tính này có các giá trị: thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
Là thuộc tính CSS quy định màu viền cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
Là thuộc tính quy định kiểu viền thể hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị: dotted, dashed, solid, double, groove, ridge, inset và outset.
Các khung viền chúng ta có thể tách riêng từng đường viền như: đường viền trên, đường viền trái, đường viền dưới, đường viền phải để chúng ta có thể định riêng từng đường viền này về: độ dày, màu sắc, kiểu đường viền.
<style>
h1 {
border-width:thin;
border-color:red;
border-style:solid
}
h1 {
border: 5px red dotted;
}
h1 {
border-top-width:thin;
border-top-color:#FF0000;
border-top-style:solid;
border-right-width:thick;
border-right-color:#AFAFAF;
border-right-style:dotted;
border-bottom-width:2px;
border-bottom-color:blue;
border-bottom-style:double;
border-left-width:5px;
border-left-color:violet;
border-left-style:groove
}
</style>
Thuộc tính width là thuộc tính qui định độ rộng của đối tượng. Để qui định độ rộng của một đối tượng nào đó chúng ta có thể sử dụng thuộc tính width.
Cú pháp:
width: độ_rộng;
Ví dụ:
p {
width: 500px;
}
Là thuộc tính quy định độ rộng tối đa của đối tượng.
Khi chúng ta cần chứa một sản phẩm quảng cáo có bề ngang 300px, chúng ta có thể định max-width: 300px cho phần hình ảnh trong phần phần quảng cáo đó, để tránh những ảnh lớn bị tràn ra ngoài.
Ví dụ:
p {
max-width: 500px;
}
Là thuộc tính quy định độ rộng tối thiểu của đối tượng.
Ví dụ:
p {
min-width: 500px;
}
Thuộc tính width là thuộc tính qui định chiều cao của đối tượng. Để qui định chiều cao của một đối tượng nào đó chúng ta có thể sử dụng thuộc tính height.
Cú pháp:
height: chiều_cao;
Ví dụ:
.menu {
height: 50px;
}
Là thuộc tính quy định chiều cao tối đa của đối tượng.
Ví dụ:
.quangcao {
max-height: 300px;
}
Là thuộc tính quy định chiều cao tối thiểu của đối tượng.
Ví dụ:
.quangcao {
min-height: 200px;
}
Trong thiết kế web, định trang một trang web là một yêu cầu thường xuyên. Để định dạng trang web chúng ta có thể sử dụng một số thuộc tính cơ bản đã được cung cấp sẵn.
Chúng ta qui định các định dạng thông qua thẻ <body>, đây là thẻ đại diện cho cả trang web của chúng ta.
Chúng ta qui định các định dạng thông qua thẻ <body>, đây là thẻ đại diện cho cả trang web của chúng ta. Chúng ta qui định các định dạng thông qua thẻ <body>, đây là thẻ đại diện cho cả trang web của chúng ta.
Để định lề, và vùng đệm trang chúng ta sử dụng một số trang thuộc tính cơ bản như sau:
Ví dụ:
body{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
Chú ý: Đôi khi chúng ta muốn định toàn bộ lề cho mọi đối tượng thì chúng ta có thể sử dụng *{...};
Trong quá trình định màu nền và hình nền trang cùng 1 lúc thì định hình nền sẽ được ưu tiên. Để định nền trang chúng ta sử dụng một số thuộc tính cơ bản như sau:
Ví dụ:
body{
background-color:red;
background-image:url(logo.jpg);
}
Trong thiết kế web, định trang ký tự là một yêu cầu thường xuyên, giúp cho trang web trở nên đẹp hơn, dễ dọc hơn, và người dùng sẽ cảm thấy thích hơn khi cách thể hiện các ký tự phù hợp. Để định dạng ký tự chúng ta có thể sử dụng một số thuộc tính cơ bản đã được cung cấp sẵn.
Định font chữ chúng ta sử dụng một số trang thuộc tính cơ bản như sau:
Ví dụ:
body {
font-family:
"Times New Roman",
Tohama,
sans-serif
}
h1 {
font-style: italic;
}
h2 {
font-variant: small-caps
}
p {
font-weight: bold
}
body {
font-size: 20px
}
h1 {
font-size: 3em
}
h2 {
font-size: 2rem
}
p {
text-indent:30px
}
p {
text-align:justify
}
p {
letter-spacing:5px
}
h1 {
text-decoration:underline
}
h2 {
text-transform:capitalize
}
Trích dẫn: (http://khonggiankythuat.com)
