[CSS] các thuộc tính cơ bản

1) Color Properties
Thuộc tính Mô tả chức năng Ví dụ
color Chỉnh màu chữ cho văn bản color: #ff0000;
2) Background Properties
Thuộc tính Mô tả chức năng Ví dụ
background
background-color Thiết lập “màu nền” của phần tử HTML background-color: #ff0000;
background-image Thiết lập “hình nền” cho phần tử HTML background-image: url(ico_arrow.gif);
background-position Xác định vị trí hình ảnh nền cho thành phần.
Được sử dụng kèm với giá trị background-image.
background-position: left top;
background-repeat Thiết lập “sự lặp lại của hình nền” trong phần tử HTML background-repeat: repeat-x;
background-size Thiết lập kích thước của hình nền background-size: 100px;
3) Border Properties
Thuộc tính Mô tả chức năng Ví dụ
border Thiết lập một đường viền cho phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền. border:1px solid black
border-left Thiết lập đường viền cạnh bên trái của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền border-left:1px solid black
border-right Thiết lập đường viền cạnh bên phải của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền border-right:1px solid black
border-top Thiết lập đường viền cạnh phía trên của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền border-top:1px solid black
border-bottom Thiết lập đường viền cạnh phía dưới của phần tử HTML, bao gồm: kiểu đường viền, độ dày đường viền, màu đường viền border-bottom:1px solid black
4) Basic Box Properties
Thuộc tính Mô tả chức năng Ví dụ
display Thuộc tính display xác định loại hiển thị của thành phần. display:block
float Thuộc tính float xác định có hay không một thành phần được float (trôi nổi). float:left
height Thuộc tính height thiết lập chiều cao cho thành phần.
Chiều cao này không bao gồm: border, padding, margin
height:100px;
width Thuộc tính width thiết lập chiều rộng cho thành phần.
Chiều rộng này không bao gồm: border, padding, margin
width:100px;
margin Thuộc tính margin canh lề cho thành phần.đơn vị có thể là px, em, %, … margin:50px
margin-bottom Canh lề bên dưới cho thành phần, đơn vị có thể là px, em, %, … margin-bottom:50px
margin-left Canh lề bên trái cho thành phần, đơn vị có thể là px, em, %, … margin-left:50px
margin-right Canh lề bên phải cho thành phần, đơn vị có thể là px, em, %, … margin-right:50px
margin-top Canh lề bên trên cho thành phần, đơn vị có thể là px, em, %, … margin-top:50px
padding Thuộc tính padding thêm vào khoảng không cho thành phần. padding:50px
padding-bottom Thêm vào khoảng không bên dưới cho thành phần, đơn vị có thể là px, em, %, … padding-bottom:50px
padding-left Thêm vào khoảng không bên trái cho thành phần, đơn vị có thể là px, em, %, … padding-left:50px
padding-right Thêm vào khoảng không bên phải cho thành phần, đơn vị có thể là px, em, %, … padding-right:50px
padding-top Thêm vào khoảng không bên trên cho thành phần, đơn vị có thể là px, em, %, … padding-top:50px
6) Text Properties
Thuộc tính Mô tả chức năng Ví dụ
letter-spacing Thuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. letter-spacing:20px
line-height Thuộc tính line-height thiết lập chiều cao giữa các dòng. line-height:50px;
text-align Thuộc tính text-align sắp xếp các nội dung theo chiều ngang. text-align:center
word-spacing Thuộc tính word-spacing tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.Có thể sử dụng giá trị âm. word-spacing: 2px;
7) Text Decoration Properties
Thuộc tính Mô tả chức năng Ví dụ
text-decoration-line Thiết lập một đường trang trí cho văn bản
text-decoration-color Xác định “màu” của đường trang trí cho văn bản
text-decoration-style Xác định “kiểu” của đường trang trí cho văn bản
text-decoration Thiết lập một đường trang trí cho văn bản, bao gồm:
text-shadow Tạo một cái bóng cho văn bản
8) Font Properties
Thuộc tính Mô tả chức năng Ví dụ
@font-face
font-family Thiết lập “phông chữ” của văn bản
font-size Thiết lập “kích cỡ chữ” của văn bản
font-style Thiết lập việc văn bản có được “in nghiêng” hay không
font-variant Thiết lập việc có chuyển các ký tự in thường trong văn bản sang dạng ký tự in hoa hay không
font-weight Thiết lập việc văn bản có được “in đậm” hay không