[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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *