1. Một số qui ước
1.1. Qui ước rút gọn

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

  • - margin-top: định lề trên.
  • - margin-right: định lề phải.
  • - margin-bottom: định lề dưới.
  • - margin-left: định lề phải.

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ư:

  • - margin-top: 10px;
  • - margin-right: 20px;
  • - margin-bottom: 30px;
  • - margin-left: 40px;

Được thay bằng theo thứ tự (top, right, bottom, left) như sau:

  • - margin: 10 20 30 40px;

Nếu giá trị có tính lập lại:

  • - margin-top: 10px;
  • - margin-right: 20px;
  • - margin-bottom: 10px;
  • - margin-left: 20px;

Được thay bằng:

  • - margin: 10 20px;

1.2. Một số thuộc tính tổng hợp

Một số thuộc tính tổng hợp thông thường:

  • - margin
  • - padding
  • - font
  • - ...
2. Thuộc tính lề

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ụ:

  • - margin: 10 20 30 40px;

3. Thuộc tính đệm

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ụ:

  • - padding: 10 20 30 40px;

4. Thuộc tính khung viền
4.1. Giới thiệu

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;

4.2. Thuộc tính border-width

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.

4.3. Thuộc tính border-color

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ợ.

4.4. Thuộc tính border-style

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.

4.5. Áp dụng

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>
5. Thuộc tính độ rộng
5.1. Giới thiệu

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; 
 } 
5.2. Thuộc tính max-width

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; 
 } 
5.3. Thuộc tính min-width

Là thuộc tính quy định độ rộng tối thiểu của đối tượng.

Ví dụ:

 p { 
  min-width: 500px; 
 } 
6. Thuộc tính chiều cao
6.1. Giới thiệu

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; 
 } 
6.2. Thuộc tính max-height

Là thuộc tính quy định chiều cao tối đa của đối tượng.

Ví dụ:

 .quangcao { 
  max-height: 300px; 
 } 
6.3. Thuộc tính min-height

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; 
 } 
7. Định dạng trang
7.1. Giới thiệu

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.

7.2. Định lề và vùng đệm trang

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:

  • - margin-top: định lề trên.
  • - margin-right: định lề phải.
  • - margin-bottom: định lề dưới.
  • - margin-left: định lề phải.
  • - padding-top: định vùng đệm trên.
  • - padding-right: định vùng đệm phải.
  • - padding-bottom: định vùng đệm dưới.
  • - padding-left: định vùng đệm phải.

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 *{...};

7.3. Định nền trang

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:

  • - background-color: định màu nền.
  • - background-image: định hình nền.

Ví dụ:

 body{
  background-color:red;
  background-image:url(logo.jpg);
 } 
8. Định dạng ký tự

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:

  • - font-family: định các font chữ.
  • - font-style: định kiểu chữ như: in thường (normal), in nghiêng (italic) hay xiên (oblique).
  • - font-variant: định kiểu in hoa hay thường.
  • - font-weight: định dạng font chữ, dạng bình thường (normal) hay in đậm (bold).
  • - font-size: định dạng kích cỡ font chữ.
  • - color: định màu chữ.
  • - text-indent: định thụt vô đầu dòng.
  • - text-align: canh lề: trái, phải, giữa,...
  • - letter-spacing: khoảng cách giữa các ký tự.
  • - text-decoration: thêm hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), nhấp nháy (blink).
  • - text-transform: định kiểu in uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ).

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)

Học liệu
Copyright ©2015 All rights reserved | Designed by Th.S Trần Vĩnh Xuyên!