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

/ Lập trình web / Html & Css 562 0 1 năm trước

Ở bài học trước chúng ta đã được học về cấu trúc viết css và bộ chọn trong css. Trong bài học này, chúng ta sẽ tiếp tục tìm hiểu về các thuộc tính trong css. Sau đây là danh sách các thuộc tính css được cập nhật mới nhất 2019. Các thuộc tính được chia thành từng nhóm theo chức năng nhằm giúp học viên dễ dàng ghi nhớ và áp dụng vào thực tiễn.

Các thuộc tính css định dạng box

box-sizing: Xác định cách tính width và height cho thành phần. Giá trị: border-box | content-box.
- border-box, khi này width và height sẽ được tính bao gồm content, padding, và border.
- content-box, khi này width và height được tính chỉ gồm phần content.
display: Xác định cách mà thành phần sẽ hiển thị. Giá trị: inline, block, inline-block, flex, table, inline-table, table-row, table-cell, list-item, none.
- inline, thành phần sẽ hiển thị như một nội tuyến trên dòng, tức là không ngắt dòng trước và sau nó.
- block, thành phần hiển thị như một khối, ngắt dòng trước và sau nó, tức là thành phần sẽ đứng riêng một dòng so với các thành phần gần nó.
- inline-block, thành phần sẽ hiển thị giống như giá trị block, nhưng không ngắt dòng trước và sau nó.
- flex, thành phần sẽ hiển thị linh hoạt, phù hợp để thiết kế cấu trúc bố cục website.
- table, thành phần sẽ hiển thị như một table, có ngắt dòng trước và sau nó.
- inline-table, giống như cách hiển thị của giá trị table, nhưng không ngắt dòng trước và sau nó.
- table-row, thành phần hiển thị như một dòng trong bảng, giống như cách hiển thị mặc định của thẻ tr.
- table-cell, thành phần hiển thị như một ô trong dòng của bảng, giống như cách hiển thị mặc định của thẻ td hay th.
- list-item, thành phần hiển thị như một mục trong danh sách, giống như cách hiển thị mặc định của thẻ li.
- none, thành phần sẽ không hiển thị, bị ẩn đi và nhuờng chỗ của nó cho các thành phần khác.
width: Xác định kích thước ngang của thành phần. Giá trị: đơn vị kích thước (px, pt, em, rem, %, vw, vh)
max-width: Xác định kích thước ngang tối đa của thành phần. Giá trị: đơn vị kích thước. max-width sẽ được ưu tiên hơn width. Ví dụ, khi đặt width là 5px và max-width là 2px, thì khi này thành phần sẽ hiển thị với chiều dài là 2px.
min-width: Tương tự max-width, nhưng áp dụng cho chiều ngang tối thiểu.
height: Tương tự width, nhưng áp dụng cho chiều dọc.
max-height: Tương tự như max-width, nhưng áp dụng cho chiều dọc.
min-height: Tương tự min-width, nhưng áp dụng cho chiều dọc.
outline: Xác định dường viền bao ngoài của thành phần. Giá trị: width style color. Trong đó:
- width: Độ dày dường viền, đơn vị kích thước.
- style: Cách kẻ dường viền, ví dụ solid là nét liền, dotted là nét chấm đứt quãng
- color: Màu của đường viền, đơn vị màu (tên màu bằng tiếng anh, màu hex, mày rgb, vvv). Ví dụ: blue, #0000ff, rga(0,0,255), rgba(0,0,255,1)
border: Xác định dường viền của thành phần. Nằm ngay trong outline. Giá trị giống định dạng của outline.
border-radius: Xác định độ cong các góc của thành phần. Giá trị: đơn vị kích thước.
padding: Khoảng đệm xung quanh nội dung của thành phần. Nằm giữa phần content và border. Giá trị: đơn vị kích thước
margin: Khoảng cách tính từ đường biên của thành phần hiện tại với các thành phần khác xung quanh. Giá trị: đơn vị kích thước.
background-color: Màu nền của thành phần. Giá trị: đơn vị màu
overflow: Xác định điều gì xảy ra khi phần content bị tràn so với box chứa chính nó. Giá trị: visible, hidden, scroll, auto.
- visible, phần content bị tràn vẫn được hiển thị, tràn qua phần box.
- hidden, phần nội dung bị tràn sẽ bị ẩn đi
- scroll, luôn xuất hiện thanh cuộn cho dù content có tràn qua box hay không. Phần content bị tràn sẽ ẩn, nhưng có thể dùng thanh cuộn để xem phần nội dung đó
- auto, giống với scroll, nhưng thanh cuộn sẽ chỉ xuất hiện khi content bị tràn
box-shadow: Xác định một đổ bóng cho thành phần. Giá trị: h v blur spread color inset. Trong đó:
- h: Phần bù ngang của đổ bóng. Giá trị kích thước, giá trị dương thì bóng đổ nằm bên phải, giá trị âm thì bóng đổ nằm bên trái.
- v: Phần bù dọc của đổ bóng. Giá trị kích thước, giá trị dương thì bóng đổ nằm bên dưới, giá trị âm thì bóng đổ nằm bên trên.
- blur: Bán kính làm mờ. Giá trị kích thước. Giá trị càng cao, bóng sẽ càng mờ và lan rộng
- spread: Bán kính trải rộng. Giá trị kích thước. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng
- color: Màu của phần đổ bóng
- inset: Đặt giá trị bóng đổ vào phía trong của box (mặc định bóng đổ sẽ phía ngoài box)
position: Xác định cách định vị cho thành phần. Giá trị: static, relative, absolute, fixed, sticky.
- static, thành phần sẽ xuất hiện theo dúng thứ tự, như thứ tự chúng xuất hiện trong code html.
- relative, thành phần sẽ được định vị so với vị trí bình thường của chính nó, mà không gây ảnh hưởng đến việc định vị của các thành phần khác. Khi này các giá trị như top, bottom, left, right sẽ được dùng để điều chỉnh vị trí của thành phần đi lên trên, xuống dưới, qua trái, qua phải.
- absolute, thành phần sẽ được định vị tương đối so với thành phần NS. NS là thành phần cha không tĩnh đầu tiên của nó. Thành phần không tĩnh là thành phần có thuộc tính position với giá trị không phải static. Khi này, giá trị left được dùng để điều chỉnh khoảng cách từ biên trái của thành phần so với biên trái của NS, right được dùng để điều chỉnh khoảng cách từ biên phải của thành phần so với biên phải của NS, tương tự cho bottom và top
- fixed, thành phần được định vị tương đối với cửa sổ trình duyệt. Khi này các giá trị left, right, top, bottom sẽ được dùng để điều chỉnh vị trí cho thành phần giống như giống như giá trị absolute bên trên (xem cửa sổ trình duyệt là NS). Thành phần sẽ đứng im khi ta cuộn chuột vì cửa sổ trình duyệt chỉ thay đổi khi ta resize hoặc kéo vị trí trình duyệt.
- sticky, thành phần sẽ được định vị chuyển đổi giữa cách định vị của relative và fixed tuỳ vào cuộn chuột của người dùng. Khi các tham số top, left, right, bottom được thoã mãn, nó sẽ định vị theo cách của relative, ngược lại, nó sẽ định vị theo cách của fixed. Ví dụ: ta khai báo positon: sticky; top: 10px, khi này, nếu ta cuộn chuột mà biên bên trên của thành phần vẫn cách ít nhất 10px so với biên bên trên của cửa sổ trình duyệt, thì thành phần định vị theo kiểu của reletive, ngược lại, nếu các không đủ 10px, nó sẽ định vị theo kiểu fixed.
top: Khoảng cách từ biên bên trên của thành phần hiện tại so với biên bên trên của thành phần được định vị NS. Giá trị: đơn vị kích thước. Chỉ áp dụng cho các thành phần không tĩnh. NS là tuỳ thuộc vào giá trị của thuộc tính position của thành phần hiện tại, cụ thể:
- Với position: relative, NS là chính phần tử hiện tại.
- Với position: absolute, hoặc position: fixed, NS là thành phần cha không tĩnh đầu tiên của thành phần hiện tại.
- Với position: sticky, NS phụ thuộc vào khi ta cuộn chuột mà có thể là cửa sổ trình duyệt hoặc không áp dụng.
left: Tương tự như top, nhưng áp dụng cho biên bên trái.
right: Tương tự như top, nhưng áp dụng cho biên bên phải.
bottom: Tương tự như top, nhưng áp dụng cho biên bên dưới.
z-index: Xác định thứ tự ngăn xếp của thành phần xét theo chiều sâu, giống như layer trong photoshop vậy. Thành phần có ngăn xếp lớn hơn sẽ nằm ở phía trước. Chiều sâu ở đây có thể nói là trục z, chiều ngang là trục x, chiều dọc là trục y, ba trục xyz tạo thành một không gian 3 chiều, khi hiển thị trên trình duyệt, các thành phần bị gộp lại theo trục z để tạo thành không gian 2 chiều gồm x và y, điều này cũng giống như ta gộp các layer trong photoshop vào 1 layer vậy.
visibility: Xác định thành phần có được nhìn thấy hay không. Giá trị: visible, hidden, collapse.
- visible, thành phần được nhìn thấy, đây là giá trị mặc định
- hidden, thành phần sẽ không được nhìn thấy, nhưng nó vẫn chiềm vùng không gian vốn có của nó mà không nhường lại cho các thành phần khác.
- collapse, giống như hidden, nhưng nó sẽ nhường lại không gian của chính nó cho các thành phần khác. collapse chỉ áp dụng cho một vài phần tử của bảng như hàng trong bảng, nhóm các hàng trong bảng (tbody), cột trong hàng, nhóm các cột trong hàng.
opacity: Xác định độ trong suốt cho thành phần. Giá trị: số thực từ 0 đến 1. 0 là hoàn toàn trong suốt, 1 là không trong suốt, 0.5 trong suốt một nửa, 0.55 trong suốt gần một nửa
float: Xác định thành phần có trôi nổi hay không. Giá trị: left, right
- left: Thành phần sẽ trôi về bên trái của thành phần chứa nó.
- right: Thành phần sẽ trôi về bên phải của thành phần chứa nó.
clear: Xác định phía trái hoặc phải hoặc cả trái và phải của thành phần, mà tại đó các thành phần float không được phép xuất hiện. Giá trị: left, right, both
- left: Ngăn cản các thành phần float xuất hiện bên trái thành phần hiện tại.
- right: Giống như left, nhưng áp dụng cho hướng bên phải
- both: Giống như left, nhưng áp dụng cho cả trái và phải
resize: Xác định người dùng có thể thay đổi kích thước của thành phần. Không áp dụng cho các thành phần trên dòng (inline), và không áp dụng cho các thành phần dạng khối mà có thuộc tính css overflow='visible'. Giá trị: none, both, horizontal, vertical
- none: Người dùng không thay đổi được kích thước thành phần
- both: Người dùng thay đổi được kích thước thành phần
- horizontal: Người dùng thay đổi được kích thước ngang của thành phần
- vertical: Người dùng thay đổi được kích thước dọc của thành phần
vertical-align: Xác định cách căn chỉnh theo chiều dọc của thành phần. Giá trị: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom
- baseline: Thành phần được căn chỉnh so với đường cơ sở của thành phần cha trực tiếp
- length: Tăng hoặc giảm một đơn vị chiều dài (px, em, pt). Các giá trị âm được cho phép.
- sub: Thành phần được căn chỉnh thấp hơn so với đường cơ sở của thành phần cha trực tiếp
- super: Thành phần được căn chỉnh cao hơn so với đường cơ sở của thành phần cha trực tiếp
- top: Phần tử được căn chỉnh với đỉnh của phần tử cao nhất trên dòng
- text-top: Thành phần được căn chỉnh với đỉnh của phông chữ của thành phần cha
- middle: Thành phần được đặt ở giữa thành phần cha
- bottom: Phần tử được căn chỉnh với dưới cùng của thành phần thấp nhất trên dòng
- text-bottom: Thành phần được căn chỉnh với dưới cùng của phông chữ của thành phần cha

Các thuộc tính css định dạng văn bản

Là các thuộc tính css dùng để trình bày đoạn văn bản, đoạn chữ. Chúng ta sẽ thường dùng các thuộc tính sau:

color: Xác định màu chữ. Giá trị: giá trị màu.
font-family: Xác định font chữ. Giá trị: font1, font2, font3 ... Font có thể là font cụ thể hoặc họ font. Chúng ta có các họ font như sans-serif (không có chân), hay serif (có chân)... Các font / họ font cách nhau bởi dấu phẩy. Trình duyệt sẽ load từ trái qua phải cho đến khi tìm được font như khai báo.
font-size: Xác định độ nhỏ hay lớn của chữ. Giá trị: giá trị kích thước.
font-weight: Xác định độ đậm nhạt của nét chữ. Giá trị: số nguyên hàng trăm, từ 100 - 900. 100 là nét chữ nhạt nhất, 900 là nét chữ đậm nhất.
font-style: Xác định kiểu của chữ có nghiêng hay không. Giá trị: normal, italic, oblique
- normal: Chữ bình thường, không nghiêng
- italic: Chữ nghiêng qua bên phải
- oblique: Chữ xéo, gần giống như italic
text-align: Căn chỉnh chữ theo chiều ngang. Giá trị: left, right, center, justify
- left: Căn chỉnh chữ qua bên trái
- right: Căn chỉnh chữ qua bên phải
- center: Căn chỉnh chữ nằm giữa
- justify: Kéo dài các dòng sao cho chúng có chiều dài bằng nhau
text-transform: Xác định có viết hoa văn bản hay không. Giá trị: none, capitalize, uppercase, lowercase
- none: Không viết hoa, văn bản hiển thị như bình thường
- capitalize: Chuyển ký tự đầu tiên của mỗi từ thành chữ hoa
- uppercase: Chuyển tất cả ký tự thành chữ hoa
- lowercase: Chuyển tất cả ký tự thành chữ thường
text-indent: Xác định thụt dòng đầu tiên của văn bản. Giá trị: giá trị độ dài
text-decoration: Xác định một gạch ngang của văn bản. Giá trị: line color style. Trong đó:
- line : Vị trí đường gạch. Giá trị: none(không gạch), underline(phía dưới), overline(phía trên), line-through(gạch qua phần giữa dòng của văn bản)
- color : Màu đường kẻ
- style: Kiểu của đường kẻ (solid, dotted...)
text-shadow: Xác định đổ bóng đi kèm chữ. Giá trị: h v blur color hoặc none. Trong đó:
- h: Vị trí ngang của đổ bóng so với chữ. Giá trị: đơn vị chiều dài. Giá trị âm được cho phép.
- v: Vị trí dọc của đổ bóng so với chữ. Giá trị: đơn vị chiều dài. Giá trị âm được cho phép
- blur: Bán kính mờ của bóng. Giá trị: đơn vị chiều dài.
- color: Màu của bóng đổ. Giá trị: đơn vị màu
letter-spacing: Khoảng cách giữa các ký tự trong văn bản với nhau. Giá tri: đơn vị kích thước.
word-spacing: Khoảng cách giữa các từ trong văn bản với nhau. Giá tri: đơn vị kích thước.
line-height: Chiều cao của các dòng trong văn bản. Giá trị: đơn vị kích thước
white-space: Xác định cách xử lí ký tự khoảng trắng trong thành phần. Giá trị: normal, nowrap, pre, pre-line, pre-wrap
- normal: 2 ký tự khoảng trắng liên tiếp sẽ được hiểu như 1 khoảng trắng. Văn bản tự xuống dòng khi cần thiết.
- nowrap: 2 ký tự khoảng trắng liên tiếp sẽ được hiểu như 1 khoảng trắng. Văn bản không tự xuống dòng. Văn bản sẽ chỉ xuống dòng khi gặp thẻ br
- pre: Hiển thị như thẻ pre trong html. Các khoảng trắng liên tiếp được giữ. Văn bản xuống dòng khi gặp ký tự xuống dòng hoặc thẻ br
- pre-line: Chuỗi các khoảng trắng sẽ thu gọn thành một khoảng trắng duy nhất. Văn bản sẽ được ngắt dòng khi cần thiết
- pre-wrap: Khoảng trắng được giữ lại bởi trình duyệt. Văn bản sẽ được ngắt dòng khi cần thiết
word-break: Xác định các từ sẽ được ngắt ra sao khi đến cuối mỗi dòng. Giá trị: normal, break-all, keep-all, break-word
- normal: Sử dụng quy tắc ngắt dòng mặc định của trình duyệt hiện tại
- break-all: Để ngăn việc tràn box, từ sẽ bị ngắt ở bất kể ký tự nào
- keep-all: Các từ của Chinese/Japanese/Korean sẽ không bị ngắt. Các từ còn lại thì được xử lí như kiểu normal
- break-word: Để ngăn việc tràn box. Các từ sẽ được ngắt tại vị trí tốt nhất.
word-wrap: Xác định các từ dài có bị ngắt và chuyển xuống dòng tiếp theo hay không. Giá trị: normal, break-word
- normal: Chỉ ngắt từ tại các điểm phá vỡ được phép
- break-word: Cho phép các từ không thể phá vỡ được phá vỡ