1. Thuộc tính vertical-align :
Thuộc tính vertical-align sắp xếp các nội dung theo chiều dọc.
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| vertical-align | Khoảng cách | vertical-align: 10px; | Xác định khoảng cách cho thành phần, có thể dùng số âm. |
| baseline | vertical-align: baseline; | Đây là dạng cơ bản, mặc định, các thành phần đều nằm theo cùng đường cơ bản (baseline). | |
| sub | vertical-align: sub; | Canh lề thành phần giống như sử dụng subscript. | |
| super | vertical-align: super; | Canh lề thành phần giống như sử dụng superscript. | |
| top | vertical-align: top; | Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của các thành phần trong cùng hàng. | |
| text-top | vertical-align: rtl; | Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của text của thành phần bao ngoài. | |
| middle | vertical-align: middle; | Thành phần sẽ được canh giữa theo thành phần bao ngoài. | |
| bottom | vertical-align: bottom; | Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của các thành phần trong cùng hàng. | |
| text-bottom | vertical-align: text-bottom; | Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của text của thành phần bao ngoài. | |
| inherit | vertical-align: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
2. Thuộc tính text-align :
Thuộc tính text-align sắp xếp các nội dung theo chiều ngang.
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| text-align | left | text-align: left; | Sắp nội dung theo chiều ngang nằm về bên trái, đây là dạng mặc định. |
| right | text-align: right; | Sắp nội dung theo chiều ngang nằm về bên phải. | |
| center | text-align: center; | Sắp nội dung theo chiều ngang nằm giữa. | |
| justify | text-align: justify; | Sắp xếp nội dung cho các dòng có chiều rộng bằng nhau. | |
| inherit | text-align: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
3. Thuộc tính 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).
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| float | left | float: left; | Thành phần được trôi nổi (float) qua bên trái. |
| right | float: right; | Thành phần được trôi nổi (float) qua bên phải. | |
| none | float: none; | Thành phần không được trôi nổi (float) qua bên phải hay trái, đây là dạng mặc định. | |
| inherit | float: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
* Lưu ý :
ID và Class trong CSS :
Id là gì : hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML.
Sử dụng id : Trong file CSS chúng ta sẽ dùng dấu “#” trước tên đối tượng mà chúng ta đặt là id.
Ví dụ:
//Đối tượng
<div id="IdName"> Nội dung </div>
//Thì trong file CSS chúng ta viết như sau.
#IdName{
//Lệnh CSS
}
Class là gì : Class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có
tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class
nào đó.
Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế và việc định nghĩa nhiều đối tượng cùng thuộc một class nào
đó
Cách dùng class : Trong file CSS chúng ta đặt dấu “.” trước tên của đối tượng mà chúng ta đặt là class.
Cách dùng class : Trong file CSS chúng ta đặt dấu “.” trước tên của đối tượng mà chúng ta đặt là class.
Ví dụ :
//Đối tượng
<div class="ClassName"> Nội dung </div>
//Thì trong file CSS chúng ta viết như sau.
.ClassName{
//Lệnh CSS
}
Cú pháp CSS :
Về cơ bản cú pháp của CSS bao gồm 2 phần chính: Selector và Declaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở ví dụ trên, thẻ h3 là Selector và phần {color: blue;} là Declaration.
Trong Declaration cũng có 2 phần là: Property và Value. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào.
Trong Declaration cũng có 2 phần là: Property và Value. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào.
http://hocwebchuan.com
https://www.izwebz.com/css/css-rules/
http://tuhocphp.com/phan-biet-id-va-class-trong-css/
Tham khảo :
https://thachpham.com/web-development/html-css/vung-chon-css-co-ban.html
https://freetuts.net/selector-la-gi-tim-hieu-css-selector-can-ban-345.html
http://k709dhcl.forums-free.com/cac-the-html-thong-dung-t648.html
http://webfaver.com/client-side/css/css-canh-giua-theo-ca-chieu-ngang-va-doc-trong-css.html
