Tổng hợp CSS 1-2-3
Thuộc tính | Mô tả | . |
---|---|---|
Animation | Đặc tính hoạt họa | |
@keyframes | Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation. | 3 |
animation | Xác định một chuyển động của một thành phần | 3 |
animation-name | Xác định tên cho một animation. | 3 |
animation-duration | Xác định thời gian để hoàn thành một chu kỳ, mặc định là 0s, 0ms. (1s=1000ms).3 | 3 |
animation-timing-function | chỉ định tốc độ chuyển động | 3 |
animation-delay | Chỉ định các hình ảnh động sẽ bắt đầu | 3 |
animation-iteration-count | Xác định số lần thực hiện chuyển động. | 3 |
animation-direction | Chỉ định có / không chuyển động ngược lại trên các chu kỳ đi trước. | 3 |
animation-play-state | Chỉ định cho hành ảnh động chạy hoặc bị tạm dừng | 3 |
Background | Thuộc tính nền | |
background | Thiết lập tất cả các thuộc tính nền trong một khai báo | 1 |
background-attachment | hình nền là cố định hoặc cuộn với phần còn lại của trang | 1 |
background-color | Thiết lập màu nền của một phần tử | 1 |
background-image | Thiết lập ảnh nền của một phần tử... | 1 |
background-position | Thiết lập vị trí bắt đầu của một hình ảnh nền | 1 |
background-repeat | Thiết lập một hình ảnh nền sẽ được lặp đi lặp lại như thế nào | 1 |
background-clip | Chỉ định khu vực bức tranh của nền | 3 |
background-origin | Chỉ định khu vực vị trí của các hình ảnh nền | 3 |
background-size | Chỉ định kích thước của các hình ảnh nền | 3 |
Border and Outline | đường viền và thuộc tính Outline | |
border | Thiết lập tất cả các thuộc tính đường viền trong một khai báo | 1 |
border-bottom | Xác định đường viền bên dưới. | 1 |
border-bottom-color | Xác định màu sắc cho đường viền bên dưới. | 1 |
border-bottom-style | Xác định hình dạng của đường viền dưới | 1 |
border-bottom-width | ác định bề dày cho đường viền bên dưới. | 1 |
border-color | Xác định màu sắc cho tất cả các đường viền xung quanh. | 1 |
border-left | Thiết lập tất cả các thuộc tính đường biên lề trái trong một khai báo | 1 |
border-left-color | Xác định màu sắc cho đường viền bên trái. | 1 |
border-left-style | Thiết lập phong cách của đường viền trái | 1 |
border-left-width | Thiết lập độ rộng của đường viền trái | 1 |
border-right | Thiết lập tất cả các thuộc tính đường viền trong một tuyên bố | 1 |
border-right-color | Thiết lập màu sắc của đường viền bên phải | 1 |
border-right-style | Thiết lập phong cách đường viền bên phải | 1 |
border-right-width | Thiết lập độ rộng của đường viền phải | 1 |
border-style | Xác định hình dạng của đường viền | 1 |
border-top | Xác định đường viền bên trên. | 1 |
border-top-color | Xác định màu sắc cho đường viền bên trên. | 1 |
border-top-style | Xác định hình dạng của đường viền trên | 1 |
border-top-width | Xác định bề dày cho đường viền bên trên. | 1 |
border-width | Thiết lập độ rộng của bốn đường viền | 1 |
outline | hiết lập tất cả các thuộc tính đường viền trong một khai báo | 2 |
outline-color | Sets the color of an outline | 2 |
outline-style | Sets the style of an outline | 2 |
outline-width | Sets the width of an outline | 2 |
border-bottom-left-radius | Xác định hình dạng của đường đường viền của các góc dưới bên trái | 3 |
border-bottom-right-radius | Xác định hình dạng của đường đường viền của các góc dưới bên phải | 3 |
border-image | Dùng để định dạng các dạng border bằng hình ảnh. | 3 |
border-image-outset | viết tắt cho thiết lập tất cả các đường viền ảnh (thực tế người ta viết sau border-image) | 3 |
border-image-repeat | Thiết lập kiểu lặp lại hình ảnh. Nó thường ko viết riêng lẽ mà viết chung với thuộc tính border-image | 3 |
border-image-slice | Chỉ định bù đắp vào phía trong của hình ảnh biên | 3 |
border-image-source | Specifies an image to be used as a border Chỉ định một hình ảnh được sử dụng như một đường viền | 3 |
border-image-width | Specifies the widths of the image-border Chỉ định độ rộng của hình ảnh biên | 3 |
border-radius | Thiết lập bán kính 4 góc đường biên trong 1 lần khai báo | 3 |
border-top-left-radius | Xác định hình dạng của đường đường viền của các góc trên bên trái | 3 |
border-top-right-radius | Xác định hình dạng của đường đường viền của các góc trên bên phải | 3 |
box-decoration-break * | 3 | |
box-shadow | Gắn một hoặc nhiều ánh sáng bóng đổ vào hộp | 3 |
Box | Hộp | |
overflow-x | Chỉ định có hay không để cắt các cạnh trái / phải của nội dung, nếu nó tràn khu vực nội dung của phần tử | 3 |
overflow-y | Chỉ định có hay không để cắt các cạnh trái / phải của nội dung, nếu nó tràn khu vực nội dung của phần tử | 3 |
overflow-style | Chỉ rõ phương thức di chuyển ưa thích cho các yếu tố tràn | 3 |
rotation * | Xoay đối tượng quanh 1 điểm cho trước | 3 |
rotation-point | Xác định một điểm như là một bù đắp từ các cạnh đường viền trên bên trái | 3 |
Color | Màu | |
color | Màu | 3 |
color-profile * | Cho phép các đặc điểm kỹ thuật của một hồ sơ màu nguồn khác với mặc định * | 3 |
opacity | độ trong suốt của thành phần | 3 |
rendering-intent * | Cho phép các đặc điểm kỹ thuật về màu đối tượng khác với màu mặc định | 3 |
Content for Paged Media | Nội dung cho Media Paged | |
bookmark-label * | Xác định nhãn của các dấu trang | 3 |
bookmark-level * | Chỉ định mức độ của các dấu trang | 3 |
bookmark-target * | Chỉ định các mục tiêu của liên kết bookmark | 3 |
float-offset * | Đẩy các yếu tố lưu hành theo hướng ngược lại của họ đã được lưu hành với phao | 3 |
hyphenate-after * | Chỉ định số lượng tối thiểu các ký tự trong một từ hyphenated sau khi ký tự gạch nối | 3 |
hyphenate-before * | Chỉ định số lượng tối thiểu các ký tự trong một từ hyphenated trước khi ký tự gạch nối | 3 |
hyphenate-character * | Chỉ định một chuỗi được hiển thị khi một gạch nối phá vỡ xảy ra | 3 |
hyphenate-lines * | Cho biết số lượng tối đa của dòng kế tiếp hyphenated trong một phần tử | 3 |
hyphenate-resource * | Chỉ định một danh sách được phân cách bằng dấu phẩy giúp trình duyệt xác định điểm dùng dấu gạch nối | 3 |
hyphens * | Đặt làm thế nào để phân chia các từ để cải thiện bố cục đoạn văn | 3 |
image-resolution * | Chỉ định độ phân giải chính xác của hình ảnh | 3 |
marks * | Thêm cây trồng và / hoặc các dấu chéo vào tài liệu | 3 |
string-set * | 3 | |
Dimension | Kích thước | |
height | Thiết lập chiều cao của một phần tử | 1 |
max-height | Thiết lập chiều cao tối đa của một phần tử | 2 |
max-width | Thiết lập chiều rộng tối đa của một phần tử | 2 |
min-height | Thiết lập chiều cao tối thiểu của một phần tử | 2 |
min-width | Thiết lập chiều rộng tối thiểu của một phần tử | 2 |
width | Bộ chiều rộng của một phần tử | 1 |
Flexible Box | Trình bày nhóm các hộp | |
box-align | Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng. | 3 |
box-direction | Xác định chiều load các đối tượng theo chiều trái <-> phải | 3 |
box-flex | Xác định sự ưu tiên linh hoạt theo các thành phần khác. | 3 |
box-flex-group * | Gán các yếu tố linh hoạt để flex nhóm | 3 |
box-lines | Chỉ định cột sẽ đi vào một dòng mới bất cứ khi nào nó chạy ra khỏi không gian trong hộp | 3 |
box-ordinal-group | Chỉ định thứ tự hiển thị của các phần tử con của một hộp | 3 |
box-orient | Xác định thành phần dọc theo phương hướng khối hoặc theo trục. | 3 |
box-pack | Định vị trí của thành phần theo mép rìa của thành phần. | 3 |
Font | ||
font | Thiết lập tất cả các thuộc tính phông chữ trong một khai báo | 1 |
font-family | Chỉ định font cho văn bản | 1 |
font-size | Chỉ định kích thước font chữ của văn bản | 1 |
font-style | Chỉ định kiểu font chữ cho văn bản | 1 |
font-variant | Chỉ định có hay không một văn bản sẽ được hiển thị trong một phông chữ nhỏ mũ | 1 |
font-weight | Xác định độ dày của một font chữ | 1 |
@font-face | Cho phép các trang web để tải về và sử dụng phông chữ khác với font chữ có trong máy | 3 |
font-size-adjust | Bảo tồn khả năng đọc văn bản khi font chữ dự phòng xảy ra | 3 |
font-stretch | Kéo giản font chữ | 3 |
Generated Content | Thêm ký tự, số thứ tự vào đầu hoặc cuối danh danh sách | |
content | Được sử dụng với: :before and :after để chèn nội dung được tạo ra | 2 |
counter-increment | Thuộc tính counter-increment khi sử dụng sẽ gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số) | 2 |
counter-reset | Tạo hoặc reset một hoặc nhiều counter. | 2 |
quotes | Thiết lập các loại dấu ngoặc kép để trích dẫn "..." | 2 |
crop * | Allows a replaced element to be just a rectangular area of an object, instead of the whole object | 3 |
move-to * | Causes an element to be removed from the flow and reinserted at a later point in the document | 3 |
page-policy * | Determines which page-based occurance of a given element is applied to a counter or string value | 3 |
Grid | Lưới | |
grid-columns * | Xác định chiều rộng của mỗi cột | 3 |
grid-rows * | Xác định chiều rộng của mỗi dòng | 3 |
Hyperlink | ||
target * | A shorthand property for setting the target-name, target-new, and target-position properties | 3 |
target-name * | Specifies where to open links (target destination) | 3 |
target-new * | Specifies whether new destination links should open in a cửa sổ mới hoặc in a new tab of an existing window | 3 |
target-position * | Specifies where new destination links should be placed | 3 |
Linebox | ||
alignment-adjust * | Allows more precise alignment of elements | 3 |
alignment-baseline * | Specifies how an inline-level element is aligned with respect to its parent | 3 |
baseline-shift * | Allows repositioning of the dominant-baseline relative to the dominant-baseline | 3 |
dominant-baseline * | Specifies a scaled-baseline-table | 3 |
drop-initial-after-adjust * | Sets the alignment point of the drop initial for the primary connection point | 3 |
drop-initial-after-align * | Sets which alignment line within the initial line box is used at the primary connection point with the initial letter box | 3 |
drop-initial-before-adjust * | Sets the alignment point of the drop initial for the secondary connection point | 3 |
drop-initial-before-align * | Sets which alignment line within the initial line box is used at the secondary connection point with the initial letter box | 3 |
drop-initial-size * | Controls the partial sinking of the initial letter | 3 |
drop-initial-value * | Activates a drop-initial effect | 3 |
inline-box-align * | Sets which line of a multi-line inline block align with the previous and next inline elements within a line | 3 |
line-stacking * | A shorthand property for setting the line-stacking-strategy, line-stacking-ruby, and line-stacking-shift properties | 3 |
line-stacking-ruby * | Sets the line stacking method for block elements containing ruby annotation elements | 3 |
line-stacking-shift * | Sets the line stacking method for block elements containing elements with base-shift | 3 |
line-stacking-strategy * | Sets the line stacking strategy for stacked line boxes within a containing block element | 3 |
text-height * | Sets the block-progression dimension of the text content area of an inline box | 3 |
List | Danh sách | |
list-style | hiết lập tất cả thuộc tính cho một danh sách trong một khai báo | 1 |
list-style-image | Chỉ định một hình ảnh như danh sách các điểm đánh dấu mục | 1 |
list-style-position | Xác định nếu các dấu mục danh sách sẽ xuất hiện bên trong hoặc bên ngoài dòng chảy nội dung | 1 |
list-style-type | Chỉ định các loại đánh dấu mục danh sách (a,b,c; A,B,C; I,II,III;...) | 1 |
Margin | ||
margin | Thiết lập tất cả các thuộc tính lề trong một khai báo | 1 |
margin-bottom | Thiết lập lề dưới của một phần tử | 1 |
margin-left | Thiết lập lề trái của một phần tử | 1 |
margin-right | Thiết lập lề phải của một phần tử | 1 |
margin-top | hiết lập lề trên của một phần tử | 1 |
Marquee | Khoảng cách vùng đệm (khoảng trống) từ lề 1 đối tượng đến đối tượng xung quanh | |
marquee-direction * | Sets the direction of the moving content | 3 |
marquee-play-count * | Sets how many times the content move | 3 |
marquee-speed * | Sets how fast the content scrolls | 3 |
marquee-style * | Sets the style of the moving content | 3 |
Multi-column | Sự phân chia 1 đoạn văn bản thành nhiều cột văn bản như báo giấy | |
column-count | Chỉ định số lượng các cột một phần tử được chia thành | 3 |
column-fill | Specifies how to fill columns | 3 |
column-gap | Chỉ định khoảng cách giữa các cột | 3 |
column-rule | Đường kẻ phân chia các cột | 3 |
column-rule-color | Chỉ định màu sắc của các quy tắc giữa các cột | 3 |
column-rule-style | Chỉ định phong cách của các quy tắc giữa các cột | 3 |
column-rule-width | Xác định chiều rộng của các quy tắc giữa các cột | 3 |
column-span | Số cột hiển thị tiền tố | 3 |
column-width | Xác định chiều rộng của các cột | 3 |
columns | thiết lập chiều rộng cột và cột số | 3 |
Padding | Khoảng Vùng đệm (khoảng trống) từ đường viền 1 đối tượng vào phần nội dúng trong đối tượng đó | |
padding | Thiết lập tất cả các thuộc tính padding trong một khai báo | 1 |
padding-bottom | Thiết lập đệm dưới cùng của một phần tử | 1 |
padding-left | Thiết lập đệm trái của một phần tử | 1 |
padding-right | Thiết lập đệm phải của một phần tử | 1 |
padding-top | Thiết lập đệm trên của một phần tử | 1 |
Paged Media | ||
fit * | Gives a hint for how to scale a replaced element nếu không its width nor its height property is auto | 3 |
fit-position * | Determines the alignment of the object inside the box | 3 |
image-orientation * | Specifies a rotation in the right or clockwise direction that a user agent applies to an image | 3 |
page * | Specifies a particular type of page where an element SHOULD be displayed | 3 |
size * | Specifies the size and orientation of the containing box for page content | 3 |
Positioning | Định vị | |
bottom | Xác định vị trí dưới cùng của thành phần | 2 |
clear | Xác định hai mặt của một yếu tố mà các yếu tố khác không được phép xuất hiện | 1 |
clip | Định vị một vùng của đối tượng được phép hiển thị . | 2 |
cursor | Xác định kiểu con trỏ chuột được hiển thị. | 2 |
display | Chỉ định một phần tử HTML nào đó sẽ được hiển thị như thế nào | 1 |
float | Chỉ định có hay không một hộp luôn nổi | 1 |
left | Chỉ định vị trí bên trái của một đối tượng | 2 |
overflow | Chỉ định những gì sẽ xảy ra nếu tràn bộ nội dung của một khung | 2 |
position | Chỉ định kiểu của phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, tuyệt đối hay cố định) | 2 |
right | Chỉ định vị trí bên phải của một đối tượng | 2 |
top | Xác định vị trí dưới cùng của thành phần | 2 |
visibility | hỉ định có hay không một phần tử có thể nhìn thấy | 2 |
z-index | Thiết lập thứ tự sắp xếp các đối tượng tại một vị trí | 2 |
orphans * | Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element | 2 |
page-break-after * | Thuộc tính page-break-after xác định các phân chia văn bản ngay sau thành phần. | 2 |
page-break-before * | Xác định các phân chia văn bản ngay trước thành phần | 2 |
page-break-inside * | Xác định các phân chia văn bản ngay bên trong thành phần. | 2 |
widows * | Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element | 2 |
Ruby | ||
ruby-align * | Controls the text alignment of the ruby text and ruby base contents relative to each other | 3 |
ruby-overhang * | Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base | 3 |
ruby-position * | Controls the position of the ruby text with respect to its base | 3 |
ruby-span * | Controls the spanning behavior of annotation elements | 3 |
Speech | ||
mark * | A shorthand property for setting the mark-before and mark-after properties | 3 |
mark-after * | Allows named markers to be attached to the audio stream | 3 |
mark-before * | Allows named markers to be attached to the audio stream | 3 |
phonemes * | Specifies a phonetic pronunciation for the text contained by the corresponding element | 3 |
rest * | A shorthand property for setting the rest-before and rest-after properties | 3 |
rest-after * | Specifies a rest or prosodic boundary to be observed after speaking an element's content | 3 |
rest-before * | Specifies a rest or prosodic boundary to be observed before speaking an element's content | 3 |
voice-balance * | Specifies the balance between left and right channels | 3 |
voice-duration * | Specifies how long it should take to render the selected element's content | 3 |
voice-pitch * | Specifies the average pitch (a frequency) of the speaking voice | 3 |
voice-pitch-range * | Specifies variation in average pitch | 3 |
voice-rate * | Controls the speaking rate | 3 |
voice-stress * | Indicates the strength of emphasis to be applied | 3 |
voice-volume * | Refers to the amplitude of the waveform output by the speech synthesises | 3 |
Table | ||
border-collapse | Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không. | 2 |
border-spacing | xác định khoảng cách giữa các đường viền của các cột lân cận. | 2 |
caption-side | Xác định vị trí một chú thích của table. | 2 |
empty-cells | Chỉ định có hay không để hiển thị đường viền và các nền vào ô trống trong một bảng | 2 |
table-layout | Thiết lập các thuật toán bố trí được sử dụng cho một bảng | 2 |
Text | ||
color | Thiết lập màu sắc của văn bản. | 1 |
direction | Xác định hướng cho văn bản. Load từ tái hoặc từ phải. | 2 |
letter-spacing | Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. | 1 |
line-height | Thiết lập chiều cao dòng | 1 |
text-align | Chỉ định sự liên kết ngang của văn bản Load từ tái hoặc từ phải. | 1 |
text-decoration | Quy định cụ thể trang trí thêm cho văn bản (gạch trên, gạch dưới, gạch ngang,..) | 1 |
text-indent | Chỉ định thụt đầu dòng của dòng đầu tiên trong một khối văn bản | 1 |
text-transform | Viết hoa/ thường | 1 |
unicode-bidi * | 2 | |
vertical-align | sắp xếp các nội dung theo chiều dọc | 1 |
white-space | Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào | 1 |
word-spacing | Tăng hoặc giảm không gian giữa các từ trong một văn bản | 1 |
hanging-punctuation * | Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản. | 3 |
punctuation-trim * | Specifies whether a punctuation character should be trimmed | 3 |
text-align-last | 3 | |
text-justify | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần. | 3 |
text-outline * | Xác định dạng vùng biên cho text. | 3 |
text-overflow | Xác định vùng text bị cắt bớt. | 3 |
text-shadow | Thêm bóng cho văn bản | 3 |
text-wrap * | Định dạng dòng text có bị ngắt đoạn hay không. | 3 |
word-break | Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, có thể xuống hàng bất cứ vị trí nào trong từ. | 3 |
word-wrap | Thuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout. | 3 |
2D/3D Transform | ||
transform | Áp dụng một chuyển đổi 2D hoặc 3D một phần tử | 3 |
transform-origin | Cho phép bạn thay đổi vị trí trên các yếu tố biến đổi | 3 |
transform-style | Các đối tượng lồng nhau vẫn giữ được tỷ lệ kích thước trong xử lý 3D. | 3 |
perspective | Tạo cảm giác cho ta thấy được chiều sâu của thành phần, ... | 3 |
perspective-origin | Đặt trục quay cho thành phần có sử dụng perspective. | 3 |
backface-visibility | Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay. | 3 |
Transition | ||
transition | Thiết lập các thuộc tính chuyển động trong 1 lần khai báo. [property] [duration] [timing-function] [delay]. | 3 |
transition-property | Xác định phương hướng chuyển động đối tượng (height , width, all, none) | 3 |
transition-duration | Thời gian chuyển động (s, ms) | 3 |
transition-timing-function | kiểu tốc độ hiệu ứng của 1 quá trình chuyển động (ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier(0,1,0.35,0)) | 3 |
transition-delay | Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu. (s, ms) | 3 |
User-interface | ||
appearance | Cho phép bạn thực hiện một cái nhìn yếu tố giống như một yếu tố giao diện người sử dụng tiêu chuẩn | 3 |
box-sizing | Xác định lại chiều rộng và chiều cao của thành phần | 3 |
icon * | 3 | |
nav-down | Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên dưới | 3 |
nav-index | Chỉ định thứ tự tabbing cho một phần tử | 3 |
nav-left | Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên trái | 3 |
nav-right | Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên phải | 3 |
nav-up | Xác định nơi để điều hướng khi sử dụng phím điều hướng mũi tên bên trên | 3 |
outline-offset | Khoảng cách vùng đệm và cũng là thông số kích thước phần đối tượng vượt tràn ra ngoài | 3 |
resize | Người dùng thay đổi kích thước đối tượng | 3 |
Chú thích:
- Dấu *: thuộc tính css này đang trong giai đoạn nghiên cứu, chưa hoàn thiện và chưa có trình duyệt nào hỗ trợ.
- Xem trang này tốt nhất với màn hình tối thiểu 1024x768 và máy tính có kết nối internet.
- Phần dịch tiếng việt có thể không đúng nghĩa và chỉ mang tính tương đối, mong các bạn thông cảm và comment phía dưới để lập cập nhật sau hoàn thiện hơn. Cám ơn tất cả!
Báo lỗi | Update & edit 2013-02-17 18:21
Thanks: ... w3.org | w3schools.com
No comments:
Post a Comment