Danh sách các thuộc tính css cơ bản - Phần 2

Ở phần 1, chúng ta đã học về cách định dạng box, định dạng văn bản. Bài học hôm nay, chúng ta sẽ tìm hiểu về các thuộc tính css còn lại như flex, bảng, danh sách, hình nền.

Các thuộc tính css flex box

Các thuộc tính trong khối này sẽ chỉ áp dụng khi thành phần hiện tại có display: flex. Khi này, ta gọi thành phần hiện tại là flex-box.

• flex-direction: Xác định hướng cho việc sắp xếp các thành phần con của flex-box. Giá trị: 
  • row: Các thành phần con được hiển thị theo chiều ngang, dưới dạng một hàng
  • row-reverse: Giống như row, nhưng đảo ngược thứ tự
  • column: Các thành phần con được hiển thị theo chiều dọc, dưới dạng một cột
  • column-reverse: Giống như column, nhưng đảo ngược thứ tự
• flex-wrap: Xác định các thành phần con có được ngắt khi cần thiết hay không. Giá trị: 
  • nowrap: Các thành phần con sẽ không được ngắt
  • wrap: Các thành phần con sẽ được ngắt khi cần thiết
  • wrap-reverse: Các thành phần con sẽ được ngắt khi cần thiết, nhưng trong thứ tự ngược lại
• align-items: Xác định cách căn chỉnh mặc định cho các mục bên trong flex-box với nhau. Giá trị: 
  • stretch: Các thành phần con của flex-box sẽ được kéo dài để tương xứng với flex-box
  • center: Các thành phần con của flex-box sẽ được đặt ở trung tâm so với flex-box
  • flex-start: Các thành phần con của flex-box sẽ được đặt ở đầu flex-box
  • flex-end: Các thành phần con của flex-box sẽ được đặt ở cuối flex-box
  • baseline:  Các thành phần con của flex-box sẽ được đặt ở đường cơ sở của chúng
• align-content: Thay đổi cách xử lí của thuộc tính flex-wrap. Giống như align-items, nhưng thay vì căn chỉnh các thành phần con, nó căn chỉnh các flex line. Giá trị: 
  • stretch: Line sẽ kéo dài để lấp đầy các khoảng trống còn lại của flex-box
  • center: Các dòng sẽ được gói vào phần trung tâm của flex-box
  • flex-start: Các dòng sẽ được gói vào phần đầu của flex-box
  • flex-end: Các dòng sẽ được gói vào phần cuối của flex-box
  • space-between: Các dòng sẽ được phân bố đều trong flex-box
  • space-around: Các dòng sẽ được phân bố đều trong flex-box, với khoảng trống ở hai đầu của flex-box chỉ bằng nửa khoảng trống giữa các thành phần con của flex-box với nhau
• justify-content: Sắp xếp các thành phần con của flex-box, khi các thành phần con đó không sử dụng tất cả không gian có sẵn trên trục chính (theo chiều ngang). Giá trị: 
  • flex-start: Các thành phần con được định vị nằm ở đầu của flex-box
  • flex-end: Các thành phần con được định vị nằm ở cuối của flex-box
  • center: Các thành phần con được định vị nằm ở giữa của flex-box
  • space-between: Các thành phần con được định vị với các khoảng trống ở giữa chúng để lấp đầy flex-box
  • space-around: Các thành phần con được định vị với các khoảng trống ở giữa chúng, ở trước và ở sau chúng để lấp đầy flex-box

Các thuộc tính css flex item

Các thuộc tính trong khối này sẽ chỉ áp dụng khi thành phần hiện tại có thành phần cha với thuộc tính display: flex. Khi này, thành phần hiện tại được gọi là flex-items

• align-self: Xác định cách căn chỉnh flex-items được chọn bên trong flex-box. Khi này, nó sẽ ghi đè giá trị đã được khai báo trong thuộc tính align-items của flex-box. Giá trị: 
  • auto: Kế thừa từ giá trị của thuộc tính align-items của flex-box chứa nó.
  • stretch: Kéo dài để tương xứng với flex-box
  • center: Nằm ở trung tâm flex-box
  • flex-start: Nằm ở đầu flex-box
  • flex-end: Nằm ở cuối flex-box
  • baseline: Nằm ở đường cơ sở của flex-box
• order: Chỉ định thứ thự sắp xếp của flex-items trong cùng một flex-box. Giá trị: số nguyên
• flex-shrink: Xác định cách mà flex-item hiện tại sẽ co lại so với các flex-items khác trong cùng một flex-box. Giá trị: số. Ví dụ: flex-shrink: 1 -> co lại gấp 1 lần so với các thành phần còn lại
• flex-grow: Giống với flex-shrink, nhưng là phóng lớn bao nhiêu thay vì co lại 
• flex-basis: Xác định kích thước flex-items. Giá trị: 
  • number: Đơn vị chiều dài hoặc %. Chỉ định chiều dài cụ thể.
  • auto: Chiều dài bằng chiều dài của flex-items. Nếu mục không có chiều dài được chỉ định, độ dài sẽ theo nội dung của nó

Các thuộc tính định dạng bảng

• border-collapse: Xác định các đường viền gần nhau trong bảng có được thu gọn lại một đường hay không. Giá trị: 
  • separate: Không thu gọn
  • collapse: Thu gọn thành một đường
• border-spacing: Xác định khoảng cách giữa các đường viền liền của các ô liền kề trong bảng. Giá trị: Đơn vị chiều dài. 
• caption-side: Xác định vị trí đặt ghi chú của bảng. Giá trị: 
  • top: Phía trên của bảng
  • bottom: Phía dưới của bảng
• empty-cells: Xác định có hiển thị đường viền của ô trống hay không. Giá trị: 
  • show: Hiển thị
  • hide: Không hiển thị

Các thuộc tính định dạng danh sách

• list-style-type: Xác định kiểu dánh dấu cho các mục trong danh sách. Giá trị:
  • disc: Vòng tròn được tô màu
  • armenian: Số Armenia truyền thống
  • circle: Đường tròn
  • cjk-ideographic: Số theo hệ cjk (China, Japan, Korea)
  • decimal: Số thập phân
  • decimal-leading-zero: Số thập phân, có ký tự 0 ở đầu nếu nhỏ hơn 10
  • georgian: Số Georgian truyền thống
  • hebrew: Số Hebrew truyền thống
  • hiragana: Số Hiragana thống
  • hiragana-iroha: Số Hiragana iroha truyền thống
  • katakana: Số Katakana truyền thống
  • katakana-iroha: Số Katakana iroha truyền thống
  • lower-alpha: Chữ cái alpha viết thường
  • lower-greek: Chữ cái greek viết thường
  • lower-latin: Chữ cái latin viết thường
  • lower-roman: Chữ cái La Mã viết thường
  • none: Không có
  • square: Hình vuông
  • upper-alpha: Chữ cái alpha viết hoa
  • upper-greek: Chữ cái greek viết hoa
  • upper-latin: Chữ cái latin viết hoa
  • upper-roman: Chữ cái La Mã viết hoa
• list-style-image: Thay thế đánh dấu chỉ mục trong danh sách bằng hình ảnh. Giá trị:
  • none: Không có hình ảnh được chỉ định để thay thế
  • url: Đường dẫn file hình ảnh sẽ được dùng để thay thế
• list-style-position: Xác định vị trí của chỉ mục trong danh sách. Giá trị: 
  • inside: Chỉ mục sẽ nằm tại phần đầu của text trong các item của danh sách
  • outside: Chỉ mục nằm ngoài các item

Các thuộc tính css định dạng hình nền

• background-image: Xác định một hoặc nhiều hình ảnh làm nền cho thành phần. Giá trị:
  • url: Đường dẫn file hình ảnh sẽ được dùng
  • none: Không đặt hình nền
• background-attachment: Xác định hình nền của thành phần sẽ được cuộn theo phần còn lại của trang hay cố định. Giá trị:
  • scroll: Cuộn theo trang
  • fixed: Không cuộn theo trang
  • local: Cuộn theo phần content của thành phần
• background-position: Xác định vị trí bắt đầu xuất hiện của hình nền. Giá trị: h v. Trong đó: 
  • h: Giá trị theo chiều ngang (left, center, right, x%, xpos)
  • v: Giá trị theo chiều dọc (top, middle, y%, ypos)
• background-repeat: Xác định sự lặp lại của hình nền. Giá trị: 
  • repeat: Lặp lại theo cả hai hướng
  • repeat-x: Lặp lại theo hướng ngang
  • repeat-y: Lặp lại theo hướng dọc
  • no-repeat: Không lặp lại
• background-size: Xác định kích thước của hình nền. Giá trị:
  • auto: Kích thước gốc của chính hình ảnh
  • length: Xác định kích thước ngang và dọc chính xác cho hình ảnh
  • cover: Thay đổi kích thước hình ảnh sao cho lấp đầy thành phần. Kể cả việc thay đổi đó có thể làm giãn hình ảnh hay cắt bớt 1 trong các cạnh của hình
  • contain: Thay đổi kích thước hình ảnh sao cho nó hiển thị một cách đầy đủ và lớn nhất có thể

Như vậy chúng ta đã hoàn thành lý thuyết về các thuộc tính trong css. Ở những bài học sau, chúng ta sẽ học về responsive trong css, thư viện css.