Thứ Bảy, 29 tháng 9, 2018

Tổng hợp các thuộc tính của CSS

Các thuộc tính của CSS

Đây là bảng tóm tắt tất cả các thuộc tính được sử dụng trong CSS. Sẽ rất cần thiết cho bạn tham khảo, tra cứu khi sử dụng CSS. Chi tiết từng thuộc tính sẽ giới thiệu ở từng bài riêng.

Các nhóm thuộc tính của CSS

  • Color
  • Background và Borders
  • Basic Box
  • Flexible Box
  • Text
  • Text Decoration
  • Fonts
  • Writing Modes
  • Table
  • Lists và Counters
  • Animation
  • Transform
  • Transition
  • Basic User Interface
  • Multi-column
  • Paged Media
  • Generated Content
  • Filter Effects
  • Image/Replaced Content
  • Masking
  • Speech
  • Marquee
Cột “CSS” chỉ ra phiên bản CSS mà thuộc tính đó được sử dụng( CSS1, CSS2 hoặc CSS3).

Các thuộc tính Color

Chức năng để thiết lập màu sắc và độ trong suốt của văn bản
Thuộc tínhMô tảCSS
colorĐặt màu sắc cho đoạn văn bản1
opacityĐặt mức độ trong suốt cho một phần tử nào đó3

Các thuộc tính Background và Border

Chức ănng thiết lập các thuộc tính màu nền và đường biên cho các đối tượng trên trang.
Thuộc tínhMô tảCSS
backgroundMột thuộc tính viết tắt để đặt thuộc tính nền trong lời khai báo1
background-attachmentĐặt một ảnh nền để cố định hoặc cuộn với phần còn lại của trang1
background-blend-modeChỉ định các chế độ trộn của mỗi lớp nền(màu sắc/hình ảnh)3
background-colorChỉ định màu nền của một phần tử1
background-imageChỉ định một hoặc nhiều hình ảnh nền cho một phần tử1
background-positionChỉ định vị trí của hình ảnh nền1
background-repeatThiết lập như thế nào một ảnh nền sẽ được lặp đi lặp lại1
background-clipChỉ định khu vực để sơn màu nền3
background-originChỉ định nơi các hình nền được định vị3
background-sizeChỉ định kích thước của ảnh nền3
borderThiết lập tất cả các thuộc tính đường viền trong lời khai báo1
border-bottomThiết lập tất cả các thuộc tính đường viền dưới trong lời khai báo1
border-bottom-colorThiết lập màu của đường viền dưới1
border-bottom-left-radiusXác định hình dạng của các đường viền góc dưới bên trái3
border-bottom-right-radiusXác định hình dạng của các đường viền góc dưới bên phải3
border-bottom-styleThiết lập kiểu (style) của đường viền dưới1
border-bottom-widthThiết lập độ rộng của đường viền dưới1
border-colorThiết lập màu sắc của bốn đường viền1
border-imageMột thuộc tính viết tắt để thiết lập tất cả các thuộc tính border-image-*3
border-image-outsetChỉ định giá trị khu vực ảnh viền vượt ra ngoài vùng giới hạn của vùng bao3
border-image-repeatChỉ định ảnh viền nên được lặp đi lặp lại, tròn hoặc kéo dài3
border-image-sliceChỉ định cụ thể như thế nào để cắt ảnh viền3
border-image-sourceChỉ định đường dẫn tới hình ảnh để sử dụng như đường viền3
border-image-widthChỉ định độ rộng của ảnh-viền3
border-leftThiết lập tất cả thuộc tính đường viền trái trong lời khai báo1
border-left-colorThiết lập màu sắc của đường viền trái1
border-left-styleThiết lập kiểu ( style) của đường viền trái1
border-left-widthThiết lập độ rộng của đường viền trái1
border-radiusThuộc tính viết tắt để thiết lập tất cả bốn đường viền-*-thuộc tính radius(bán kính)3
border-rightThiết lập thuộc tính đường viền phải trong lời khai báo1
border-right-colorThiết lập màu sắc cho đường viền phải1
border-right-styleThiết lập kiểu (style) cho đường viền phải1
border-right-widthThiết lập độ rộng cho đường viền phải1
border-styleThiết lập kiểu (style)  cho bốn đường viền1
border-topThiết lập thuộc tính đường viền trên trong lời khai báo1
border-top-colorThiết lập màu sắc cho đường viền trên1
border-top-left-radiusXác định hình dạng của đường viền góc trên bên trái3
border-top-right-radiusXác định hình dạng của đường viền góc trên bên phải3
border-top-styleThiết lập kiểu (style) cho đường viền trên1
border-top-widthThiết lập độ rộng của đường viền trên1
border-widthThiết lập độ rộng của bốn đường viền1
box-decoration-breakThiết lập dáng vẻ của hình nền và đường viền của một phần tử  tại trang ngắt, hoặc đối với phần tử in-line , tại  dòng ngắt.3
box-shadowGắn một hoặc nhiều đổ bóng (drop-shadows) vào hộp3

Các thuộc tính Basic Box

Thuộc tínhMô tảCSS
bottomXác định vị trí cuối của phần tử position (vị trí)2
clearXác định hai bên của phần tử (left,right) nơi mà phần tử float không được cho phép (ngăn cản thành phần không được float trái, phải hay cả hai)1
clipXác định đoạn cho phần tử khi sử dụng thuộc tính position có giá trị “absolute2
displayChỉ định làm thế nào một phần tử HTML nào đó sẽ được hiển thị1
floatXác định có hay không một box được float(trôi nổi)1
heightThiết lập chiều cao của thành phần1
leftXác định vị trí bên trái của phần tử position2
marginThiết lập thuộc tính margin (căn lề cho phần tử) trong một thông báo1
margin-bottomThiết lập lề dưới của một phần tử1
margin-leftThiết lập lề trái của một phần tử1
margin-rightThiết lập lề phải của một phần tử1
margin-topThiết lập lề trên của một phần tử1
max-heightThiết lập chiều cao tối đa của một phần tử2
max-widthThiết lập chiều rộng tối đa của một phần tử2
min-heightThiết lập chiều cao tối thiểu của một phần tử2
min-widthThiết lập chiều rộng tối thiểu của một phần tử2
overflowChỉ định những gì sẽ xảy ra nếu nội dung tràn ra ngoài phần tử hộp2
overflow-xXác định có hay không để cắt cạnh trái/phải của đoạn văn bản, nếu nó tràn ra khỏi khu vực nội dung của phần tử3
overflow-yXác định có hay không để cắt cạnh trên /dưới của đoạn văn bản, nếu nó tràn ra khỏi khu vực nội dung của phần tử3
paddingThiết lập lại thuộc tính padding (vùng đệm) trong lời khai báo1
padding-bottomThiết lập vùng đệm dưới của phần tử1
padding-leftThiết lập vùng đệm trái của một phần tử1
padding-rightThiết lập vùng đệm phải của một phần tử1
padding-topThiết lập vùng đệm trên của một phần tử1
positionXác định kiểu của phương thức định vị được sử dụng cho một phần tử (static, relative, absolute or fixed)2
rightXác định vị trí phải của phần tử position2
topXác định vị trí trên của phần tử position2
visibilityXác định có hay không một phần tử có thể nhìn thấy được2
widthThiết lập độ rộng của phần tử1
vertical-alignSắp xếp nội dung theo chiều dọc của phần tử1
z-indexThiết lập thứ tự xếp chồng nhau của phần tử position2

Thuộc tính cho bố cục Flexible Box

Thuộc tínhMô tảCSS
align-contentXác định sự căn chỉnh giữa các dòng bên trong một khối linh hoạt ( flexible container) khi các mục không sử dụng các khoảng cách có sẵn3
align-itemsXác định sự căn chỉnh cho các mục bên trong một khối linh hoạt ( flexible container)3
align-selfXác định sự căn chỉnh cho các mục được chọn bên trong một khối linh hoạt ( flexible container)3
flexXác định độ dài của các mục, tương đối với phần còn lại3
flex-basisXác định độ dài ban đầu của một mục linh hoạt (flexible item)3
flex-directionXác định hướng của các mục linh hoạt (flexible items)3
flex-flowMột thuộc tính viết tắt cho thuộc tính flex-direction và flex-wrap3
flex-growChỉ định bao nhiêu mục sẽ tăng tương đối so với phần còn lại3
flex-shrinkChỉ định bao nhiêu mục sẽ giảm tương đối so với phần còn lại3
flex-wrapChỉ định liệu các mục linh hoạt (flexible items) nên bọc hay không3
justify-contentXác định sự căn chỉnh giữa các mục bên trong một khối linh hoạt (flexible container) khi các mục không sử dụng tất cả các khoảng cách có sẵn3
orderThiết lập thứ tự của các mục linh hoạt (flexible items), tương đối so với phần còn lại3

Các thuộc tính Text

Thuộc tínhMô tảCSS
hanging-punctuationXác định ký tự chấm câu có thể được đặt ở ngoài đường hộp3
hyphensThiết lập làm thế nào tách từ để cải thiện cách bố trí của đoạn văn3
letter-spacingTăng hoặc giảm khoảng cách giữa các ký tự trong một văn bản1
line-breakXác định cách ngắt dòng3
line-heightThiết lập chiều cao của dòng1
overflow-wrapXác định có hay không trình duyệt có thể ngắt dòng trong các từ để ngăn cản việc tràn (Khi một chuỗi quá dài để phù hợp với hộp chứa nó3
tab-sizeXác định chiều dài của các kí tự tab3
text-alignXác định căn chỉnh nội dung theo chiều ngang1
text-align-lastMô tả cách dòng cuối cùng của mộtđoạn hoặc một dòng ngay trước khi một ngắt dòng là căn chỉnh khi text-align là “justify”3
text-combine-uprightXác định sự kết hợp của đa ký tự vào khoảng cách của một ký tự đơn3
text-indentXác định rõ sự thụt dòng đầu tiên trong một khối văn bản1
text-justifyXác định phương pháp căn lề thẳng hàng hai bên sử dụng khi text-align là “justify”3
text-transformĐiều khiển các chữ in hoa1
white-spaceXác định cách mà khoảng trắng bên trong một phần tử được xử lý1
word-breakXác định quy tắc ngắt dòng đối với scripts non-CJK3
word-spacingTăng hoặc giảm khoảng cách giữa các từ trong đoạn văn1
word-wrapCho phép dài, những từ dài được xuống hàng mà không làm vỡ layout3

Các thuộc tính Text Decoration

Thuộc tínhMô tảCSS
text-decorationXác định các trang trí thêm vào văn bản1
text-decoration-colorXác định màu của văn bản trang trí (text-decoration)3
text-decoration-lineXác định loại của dòng trong text-decoration3
text-decoration-styleXác định kiểu của các dòng trong một văn bản trang trí3
text-shadowThêm đổ bóng cho văn bản3
text-underline-positionXác định vị trí của các gạch dưới được thiết lập bằng cách sử dụng thuộc tính text-decoration3

Các thuộc tính Font

Thuộc tínhMô tảCSS
@font-faceMột quy tắc cho phép các trang web tải và sử dụng các phông chữ khác với phông chữ “web-safe”3
@font-feature-valuesCho phép tác giả sử dụng một tên chung trong font-variant-alternate đối với tính năng kích hoạt khác nhau trong OpenType3
fontĐặt tất cả các thuộc tính font trong lời khai báo1
font-familyXác định họ phông chữ cho văn bản1
font-feature-settingsCho phép kiểm soát các tính năng về in tiên tiến trong OpenType fonts3
font-kerningKiểm soát việc sử dụng các thông tin kerning (cách các từ cách nhau)3
font-language-overrideKiểm soát việc sử dụng của ngôn ngữ cụ thể nét trạm (language-specific glyphs) trong kiểu chữ3
font-sizeXác định kích thước phông chữ của đoạn văn1
font-size-adjustDuy trì khả năng đọc văn bản khi phông chữ dự phòng xuất hiện3
font-stretchChọn kiểu normal, condensed,hoặc expanded từ họ phông chữ3
font-styleXác định kiểu chữ cho văn bản1
font-synthesisQuản lí các kiểu chữ (đậm hoặc nghiêng) có thể được tổng hợp bởi trình duyệt3
font-variantXác định có hay không một văn bản được hiển thị với phông chữ small-caps1
font-variant-alternatesKiểm soát việc sử dụng các nét chạm thay thế liên quan đến việc thay tên được định nghĩa trong @font-feature-values3
font-variant-capsKiểm soát việc sử dụng nét chạm (glyph)thay thế cho chữ in hoa3
font-variant-east-asianKiểm soát việc sử dụng nét chạm (glyph ) thay thế cho các kịch bản Đông Á (ví dụ như Trung Quốc và Nhật Bản)3
font-variant-ligaturesKiểm soát các chữ ghép và các biểu mẫu theo ngữ cảnh được sử dụng trong các nội dung văn bản của phần tử mà nó được áp dụng3
font-variant-numericKiểm soát việc sử dụng các họa tiết (glyph) thay thế cho số, phân số và đánh dấu thứ tự3
font-variant-positionKiểm soát việc sử dụng các họa tiết thay thế kích thước nhỏ hơn vị trí như là chỉ số trên hoặc chỉ số dưới về đường cơ sở của các phông chữ3
font-weightXác định độ đậm của phông chữ1

Các thuộc tính Writing Modes

Thuộc tínhMô tảCSS
directionXác định hướng văn bản/ hướng bài viết2
text-orientationXác định hướng của văn bản trong một dòng3
text-combine-uprightXác định sự kết hợp của đa ký tự vào khoảng cách của ký tự đơn3
unicode-bidiĐược sử dụng cùng với thuộc tính direction để đặt và trả về  cho dù văn bản nên được ghi đè để hỗ trợ nhiều ngôn ngữ trong cùng một tài liệu2
writing-mode Xác định liệu dòng văn bản được đặt ra theo chiều ngang hay chiều dọc hay hướng mà khối tiến tới3

Các thuộc tính Table

Thuộc tínhMô tảCSS
border-collapseXác định liệu có hay không đường viền của bảng nên tách biệt2
border-spacingXác định khoảng cách giữa đường viền của các ô lân cận2
caption-sideXác định vị trí của một chú thích bảng2
empty-cellsXác định có hay không để hiển thị đường viền và nền trên ô trống trong một bảng2
table-layoutThiết lập thuật toán bố trí (layout algorithm) được sử dụng cho bảng2

Các thuộc tính Lists và Counters

Thuộc tínhMô tảCSS
counter-incrementGia tăng một hoặc nhiều counters2
counter-resetTạo hoặc thiết lập lại một hay nhiều counters2
list-styleThiết lập tất cả các thuộc tính cho danh sách trong lời khai báo1
list-style-imageXác định một hình ảnh như đánh dấu mục danh sách1
list-style-positionXác định nếu đánh danh mục sẽ xuất hiện bên trong hoặc bên ngoài nội dung1
list-style-typeXác định loại của đánh dấu danh mục1

Các thuộc tính Animation

Thuộc tínhMô tảCSS
@keyframesXác định mã animation 3
animationMột thuộc tính viết tắt cho các thuộc tính animation  (ngoại trừ animation-play-state và animation-fill-mode)3
animation-delayXác định sự chậm trễ đối với sự bắt đầu của một chuyển động của hình ảnh hoặc tag (animation)3
animation-directionXác định có hay không các chuyển động nên chạy ngược lại trên chu kỳ thay thế3
animation-durationXác định có bao nhiêu giây hoặc mili giây một chuyển động cần để hoàn thành một chu kỳ3
animation-fill-modeXác định kiểu cho các phần tử khi các chuyển động không chạy (Khi nó dừng lại , hoặc khi nó bị trễ)3
animation-iteration-countXác định số lần một chuyển động được thực hiện3
animation-nameXác định tên của @keyframes animation3
animation-play-stateXác định xem các chuyển động đang được chạy hay tạm dừng3
animation-timing-functionXác định tốc độ cong của một chuyển động của hình ảnh hoặc tag3

Các thuộc tính Transform

Thuộc tínhMô tảCSS
backface-visibilityXác định có hay không một phần tử nên được nhìn thấy khi không ở chế độ toàn màn hình3
perspectiveXác định chiều sâu3
perspective-originXác định vị trí dưới của phần tử 3D3
transformÁp dụng một chuyển đổi  2D hoặc 3D đến một phần tử3
transform-originCho phép bạn thay đổi vị trí trên phần tử transform3
transform-styleXác định các phần tử lồng nhau sẽ thế nào trong không gian 3D3

Các thuộc tính Transitions

Thuộc tínhMô tảCSS
transitionMột thuộc tính viết tắt để thiết lập cho 4 thuộc tính chuyển đổi3
transition-propertyXác định tên của thuộc tính CSS trong hiệu ứng của quá trình chuyển đổi(none, width, height, all)3
transition-durationXác định bao nhiêu giây hoặc mili giây một hiệu ứng chuyển đổi hoàn thành3
transition-timing-functionXác định đường cong tốc độ của hiệu ứng chuyển đổi3
transition-delayXác định khi nào hiệu ứng chuyển đổi sẽ bắt đầu3

Các thuộc tính Basic User Interface

Thuộc tínhMo tảCSS
box-sizingBáo cho trình duyệt các thuộc tính sizing (độ rộng và độ cao) nên có3
contentSử dụng với :before và :after pseudo-elements, để chèn nội dung được tạo ra2
cursorXác định kiểu con trỏ chuột sẽ được hiển thị khi di chuyển vào phần tử nào đó2
ime-modeĐiều khiển trạng thái của trình soạn thảo phương thức nhập cho trường văn bản3
nav-downXác định nơi để di chuyển khi sử dụng phím mũi tên xuống3
nav-indexXác định thứ tự tab của phần tử3
nav-leftXác định nơi để di chuyển khi sử dụng phím mũi tên sang trái3
nav-rightXác định nơi để di chuyển khi sử dụng phím mũi tên sang phải3
nav-upXác định nơi để di chuyển khi sử dụng phím mũi tên lên3
outlineThiết lập thuộc tính đường viền trong lời khai báo2
outline-colorĐặt màu sắc của đường viền bao ngoài2
outline-offsetĐệm đường viền bao ngoài, và rút nó ra bên ngoài cạnh đường viền (border)3
outline-styleThiết lập kiểu của đường viền bao ngoài2
outline-widthThiết lập độ rộng của đường viền bao ngoài2
resizeXác định có hay không một phần tử là thay đổi kích thước bởi người dùng3
text-overflowXác định các vấn đề khi văn bản tràn khỏi các phần tử container3

Các thuộc tính Multi-column Layout

Thuộc tínhMô tảCSS
break-afterXác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn sau khi tạo hộp3
break-beforeXác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn trước khi tạo hộp3
break-insideXác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn bên trong hộp được tạo ra3
column-countXác định số cột phần tử nên được chia thành3
column-fillXác định như thế nào để điền vào cột3
column-gapXác định khoảng cách giữa các cột3
column-ruleMột thuộc tính viết tắt để thiết lập thuộc tính column-rule-* cho các đường kẻ giữa các cột3
column-rule-colorXác định màu sắc của các đường kẻ giữa các cột3
column-rule-styleXác định kiểu của các đường kẻ giữa các cột3
column-rule-widthXác định độ rộng của các đường kẻ giữa các cột3
column-spanXác định có bao nhiêu cột chứa phần tử được trải dài3
column-widthXác định độ rộng của cột3
columnsMột thuộc tính viết tắt để thiết lập độ rộng cột (column-width) và số cột (column-count)3
widowsXác định số dòng tối thiểu phải còn lại trên một trang khi ngắt trang xảy ra bên trong phần tử2

Paged Media

Thuộc tínhMô tảCSS
orphansThiết lập số dòng tối thiểu phải còn lại ở cuối của một trang khi ngắt trang xảy ra bên trong phần tử2
page-break-afterThiết lập chế độ ngắt trang sau một phần tử2
page-break-beforeThiết lập chế độ ngắt trang trước một phần tử2
page-break-insideThiết lập chế độ ngắt trang bên trong một phần tử2

Generated Content cho trang đa phương tiện

Thuộc tínhMô tảCSS
marksThêm đoạn văn bản được đánh dấu và/hoặc sử dụng cho tài liệu3
quotesThiết lập các loại dấu bao ngoài khi nhúng một trích dẫn2

Các thuộc tính Filter Effects

Thuộc tínhMô tảCSS
filterXác định hiệu ứng (vd: làm mờ hoặc chuyển đổi màu sắc) trên một phần tử trước khi nó được hiển thị3

Image Values và Replaced Content

Thuộc tínhMô tảCSS
image-orientationXác định sự quay theo bên phải hoặc theo chiều kim đồng hồ  do người dùng áp dụng cho một ảnh  (Thuộc tính này có khả năng bị phản đối và chức năng của nó chuyển sang cho HTML)3
image-renderingGợi ý cho các trình duyệt về các khía cạnh của một ảnh là rất quan trọng để bảo vệ khi hình ảnh được thu nhỏ lại3
image-resolutionXác định độ phân giải nội tại của các ảnh raster được sử dụng trong/ trên phần tử3
object-fitXác định làm thế nào nội dung của một phần tử thay thế  nên được trang bị hộp được tạo bởi độ cao và độ rộng3
object-positionXác định căn chỉnh của phần tử thay thế bên trong hộp của nó3

Các thuộc tính Masking

Thuộc tínhMô tảCSS
mask3
mask-type3

Các thuộc tính Speech

Thuộc tínhMô tảCSS
markMột thuộc tính viết tắt để thiết lập thuộc tính  mark-before và mark-after3
mark-afterCho phép đánh dấu tên được gắn liền với những dòng âm thanh3
mark-beforeCho phép đánh dấu tên được gắn liền với những dòng âm thanh3
phonemesxác định cách phát âm cho các văn bản chứa các phần tử tương ứng3
restMột thuộc tính viết tắt để thiết lập thuộc tính the rest-before và rest-after3
rest-afterXác định phần còn lại hoặc ranh giới điệu tính được quan sát sau khi nói phần tử nội dung3
rest-beforeXác định phần còn lại hoặc ranh giới điệu tính để quan sát trước khi nói phần tử nội dung3
voice-balanceXác định sự cân bằng giữa các kênh trái và phải3
voice-durationXác định nó phải mất bao lâu để trả lại các lựa chọn phần tử nội dung3
voice-pitchXác định mức độ trung bình (tần số) của giọng nói3
voice-pitch-rangeXác định sự thay đổi của tần số3
voice-rateĐiều khiển tốc độ nói3
voice-stressChỉ ra cường độ của sự nhấn mạnh được áp dụng3
voice-volumeĐề cập đến biên độ của dạng sóng đầu ra của các bài phát biểu3

Các thuộc tính Marquee

Chức năng tạo chữ chạy trong HTML
Thuộc tínhMô tảCSS
marquee-directionThiết lập hướng di chuyển nội dung3
marquee-play-countThiết lập bao nhiêu lần di chuyển nội dung3
marquee-speedThiết lập cách nhanh chóng cuộn nội dung3
marquee-styleThiết lập kiểu di chuyển nội dung3