Tổng hợp các thuộc tính định dạng của CSS trong thiết kế Web / Blogspot
byAdmin-
0
Đâ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ột “CSS” chỉ ra phiên bản CSS mà thuộc tính đó được sử dụng( CSS1, CSS2 hoặc CSS3).
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ính
Mô tả
CSS
color
Đặt màu sắc cho đoạn văn bản
1
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ính
Mô tả
CSS
background
Một thuộc tính viết tắt để đặt thuộc tính nền trong lời khai báo
1
background-attachment
Đặt một ảnh nền để cố định hoặc cuộn với phần còn lại của trang
1
background-blend-mode
Chỉ định các chế độ trộn của mỗi lớp nền(màu sắc/hình ảnh)
3
background-color
Chỉ định màu nền của một phần tử
1
background-image
Chỉ định một hoặc nhiều hình ảnh nền cho một phần tử
1
background-position
Chỉ định vị trí của hình ảnh nền
1
background-repeat
Thiết lập như thế nào một ảnh nền sẽ được lặp đi lặp lại
1
background-clip
Chỉ định khu vực để sơn màu nền
3
background-origin
Chỉ định nơi các hình nền được định vị
3
background-size
Chỉ định kích thước của ảnh nền
3
border
Thiết lập tất cả các thuộc tính đường viền trong lời khai báo
1
border-bottom
Thiết lập tất cả các thuộc tính đường viền dưới trong lời khai báo
1
border-bottom-color
Thiết lập màu của đường viền dưới
1
border-bottom-left-radius
Xác định hình dạng của các đường viền góc dưới bên trái
3
border-bottom-right-radius
Xác định hình dạng của các đường viền góc dưới bên phải
3
border-bottom-style
Thiết lập kiểu (style) của đường viền dưới
1
border-bottom-width
Thiết lập độ rộng của đường viền dưới
1
border-color
Thiết lập màu sắc của bốn đường viền
1
border-image
Mộ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-outset
Chỉ định giá trị khu vực ảnh viền vượt ra ngoài vùng giới hạn của vùng bao
3
border-image-repeat
Chỉ định ảnh viền nên được lặp đi lặp lại, tròn hoặc kéo dài
3
border-image-slice
Chỉ định cụ thể như thế nào để cắt ảnh viền
3
border-image-source
Chỉ định đường dẫn tới hình ảnh để sử dụng như đường viền
3
border-image-width
Chỉ định độ rộng của ảnh-viền
3
border-left
Thiết lập tất cả thuộc tính đường viền trái trong lời khai báo
1
border-left-color
Thiết lập màu sắc của đường viền trái
1
border-left-style
Thiết lập kiểu ( style) 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-radius
Thuộ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-right
Thiết lập thuộc tính đường viền phải trong lời khai báo
1
border-right-color
Thiết lập màu sắc cho đường viền phải
1
border-right-style
Thiết lập kiểu (style) cho đường viền phải
1
border-right-width
Thiết lập độ rộng cho đường viền phải
1
border-style
Thiết lập kiểu (style) cho bốn đường viền
1
border-top
Thiết lập thuộc tính đường viền trên trong lời khai báo
1
border-top-color
Thiết lập màu sắc cho đường viền trên
1
border-top-left-radius
Xác định hình dạng của đường viền góc trên bên trái
3
border-top-right-radius
Xác định hình dạng của đường viền góc trên bên phải
3
border-top-style
Thiết lập kiểu (style) cho đường viền trên
1
border-top-width
Thiết lập độ rộng của đường viền trên
1
border-width
Thiết lập độ rộng của bốn đường viền
1
box-decoration-break
Thiế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-shadow
Gắn một hoặc nhiều đổ bóng (drop-shadows) vào hộp
3
Các thuộc tính Basic Box
Thuộc tính
Mô tả
CSS
bottom
Xác định vị trí cuối của phần tử position (vị trí)
2
clear
Xá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
clip
Xác định đoạn cho phần tử khi sử dụng thuộc tính position có giá trị “absolute“
2
display
Chỉ định làm thế nào một phần tử HTML nào đó sẽ được hiển thị
1
float
Xác định có hay không một box được float(trôi nổi)
1
height
Thiết lập chiều cao của thành phần
1
left
Xác định vị trí bên trái của phần tử position
2
margin
Thiết lập thuộc tính margin (căn lề cho phần tử) trong một thông 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
Thiết lập lề trên 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
overflow
Chỉ định những gì sẽ xảy ra nếu nội dung tràn ra ngoài phần tử hộp
2
overflow-x
Xá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-y
Xá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
padding
Thiết lập lại thuộc tính padding (vùng đệm) trong lời khai báo
1
padding-bottom
Thiết lập vùng đệm dưới của phần tử
1
padding-left
Thiết lập vùng đệm trái của một phần tử
1
padding-right
Thiết lập vùng đệm phải của một phần tử
1
padding-top
Thiết lập vùng đệm trên của một phần tử
1
position
Xá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
right
Xác định vị trí phải của phần tử position
2
top
Xác định vị trí trên của phần tử position
2
visibility
Xác định có hay không một phần tử có thể nhìn thấy được
2
width
Thiết lập độ rộng của phần tử
1
vertical-align
Sắp xếp nội dung theo chiều dọc của phần tử
1
z-index
Thiết lập thứ tự xếp chồng nhau của phần tử position
2
Thuộc tính cho bố cục Flexible Box
Thuộc tính
Mô tả
CSS
align-content
Xá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ẵn
3
align-items
Xá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-self
Xá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
flex
Xác định độ dài của các mục, tương đối với phần còn lại
3
flex-basis
Xác định độ dài ban đầu của một mục linh hoạt (flexible item)
3
flex-direction
Xác định hướng của các mục linh hoạt (flexible items)
3
flex-flow
Một thuộc tính viết tắt cho thuộc tính flex-direction và flex-wrap
3
flex-grow
Chỉ định bao nhiêu mục sẽ tăng tương đối so với phần còn lại
3
flex-shrink
Chỉ định bao nhiêu mục sẽ giảm tương đối so với phần còn lại
3
flex-wrap
Chỉ định liệu các mục linh hoạt (flexible items) nên bọc hay không
3
justify-content
Xá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ẵn
3
order
Thiế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ại
3
Các thuộc tính Text
Thuộc tính
Mô tả
CSS
hanging-punctuation
Xác định ký tự chấm câu có thể được đặt ở ngoài đường hộp
3
hyphens
Thiết lập làm thế nào tách từ để cải thiện cách bố trí của đoạn văn
3
letter-spacing
Tăng hoặc giảm khoảng cách giữa các ký tự trong một văn bản
1
line-break
Xác định cách ngắt dòng
3
line-height
Thiết lập chiều cao của dòng
1
overflow-wrap
Xá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-size
Xác định chiều dài của các kí tự tab
3
text-align
Xác định căn chỉnh nội dung theo chiều ngang
1
text-align-last
Mô 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-upright
Xác định sự kết hợp của đa ký tự vào khoảng cách của một ký tự đơn
3
text-indent
Xác định rõ sự thụt dòng đầu tiên trong một khối văn bản
1
text-justify
Xá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 hoa
1
white-space
Xác định cách mà khoảng trắng bên trong một phần tử được xử lý
1
word-break
Xác định quy tắc ngắt dòng đối với scripts non-CJK
3
word-spacing
Tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn
1
word-wrap
Cho phép dài, những từ dài được xuống hàng mà không làm vỡ layout
3
Các thuộc tính Text Decoration
Thuộc tính
Mô tả
CSS
text-decoration
Xác định các trang trí thêm vào văn bản
1
text-decoration-color
Xác định màu của văn bản trang trí (text-decoration)
3
text-decoration-line
Xác định loại của dòng trong text-decoration
3
text-decoration-style
Xác định kiểu của các dòng trong một văn bản trang trí
3
text-shadow
Thêm đổ bóng cho văn bản
3
text-underline-position
Xá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-decoration
3
Các thuộc tính Font
Thuộc tính
Mô tả
CSS
@font-face
Mộ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-values
Cho 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 OpenType
3
font
Đặt tất cả các thuộc tính font trong lời khai báo
1
font-family
Xác định họ phông chữ cho văn bản
1
font-feature-settings
Cho phép kiểm soát các tính năng về in tiên tiến trong OpenType fonts
3
font-kerning
Kiể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-override
Kiể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-size
Xác định kích thước phông chữ của đoạn văn
1
font-size-adjust
Duy trì khả năng đọc văn bản khi phông chữ dự phòng xuất hiện
3
font-stretch
Chọn kiểu normal, condensed,hoặc expanded từ họ phông chữ
3
font-style
Xác định kiểu chữ cho văn bản
1
font-synthesis
Quản lí các kiểu chữ (đậm hoặc nghiêng) có thể được tổng hợp bởi trình duyệt
3
font-variant
Xác định có hay không một văn bản được hiển thị với phông chữ small-caps
1
font-variant-alternates
Kiể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-values
3
font-variant-caps
Kiểm soát việc sử dụng nét chạm (glyph)thay thế cho chữ in hoa
3
font-variant-east-asian
Kiể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-ligatures
Kiể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ụng
3
font-variant-numeric
Kiể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-position
Kiể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-weight
Xác định độ đậm của phông chữ
1
Các thuộc tính Writing Modes
Thuộc tính
Mô tả
CSS
direction
Xác định hướng văn bản/ hướng bài viết
2
text-orientation
Xác định hướng của văn bản trong một dòng
3
text-combine-upright
Xác định sự kết hợp của đa ký tự vào khoảng cách của ký tự đơn
3
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ệu
2
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ới
3
Các thuộc tính Table
Thuộc tính
Mô tả
CSS
border-collapse
Xác định liệu có hay không đường viền của bảng nên tách biệt
2
border-spacing
Xác định khoảng cách giữa đường viền của các ô lân cận
2
caption-side
Xác định vị trí của một chú thích bảng
2
empty-cells
Xác định có hay không để hiển thị đường viền và nền trên ô trống trong một bảng
2
table-layout
Thiết lập thuật toán bố trí (layout algorithm) được sử dụng cho bảng
2
Các thuộc tính Lists và Counters
Thuộc tính
Mô tả
CSS
counter-increment
Gia tăng một hoặc nhiều counters
2
counter-reset
Tạo hoặc thiết lập lại một hay nhiều counters
2
list-style
Thiết lập tất cả các thuộc tính cho danh sách trong lời khai báo
1
list-style-image
Xác định một hình ảnh như đánh dấu mục danh sách
1
list-style-position
Xác định nếu đánh danh mục sẽ xuất hiện bên trong hoặc bên ngoài nội dung
1
list-style-type
Xác định loại của đánh dấu danh mục
1
Các thuộc tính Animation
Thuộc tính
Mô tả
CSS
@keyframes
Xác định mã animation
3
animation
Mộ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-delay
Xá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-direction
Xá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-duration
Xá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-mode
Xá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-count
Xác định số lần một chuyển động được thực hiện
3
animation-name
Xác định tên của @keyframes animation
3
animation-play-state
Xác định xem các chuyển động đang được chạy hay tạm dừng
3
animation-timing-function
Xác định tốc độ cong của một chuyển động của hình ảnh hoặc tag
3
Các thuộc tính Transform
Thuộc tính
Mô tả
CSS
backface-visibility
Xá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ình
3
perspective
Xác định chiều sâu
3
perspective-origin
Xác định vị trí dưới của phần tử 3D
3
transform
Áp dụng một chuyển đổi 2D hoặc 3D đến một phần tử
3
transform-origin
Cho phép bạn thay đổi vị trí trên phần tử transform
3
transform-style
Xác định các phần tử lồng nhau sẽ thế nào trong không gian 3D
3
Các thuộc tính Transitions
Thuộc tính
Mô tả
CSS
transition
Một thuộc tính viết tắt để thiết lập cho 4 thuộc tính chuyển đổi
3
transition-property
Xá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-duration
Xác định bao nhiêu giây hoặc mili giây một hiệu ứng chuyển đổi hoàn thành
3
transition-timing-function
Xác định đường cong tốc độ của hiệu ứng chuyển đổi
3
transition-delay
Xác định khi nào hiệu ứng chuyển đổi sẽ bắt đầu
3
Các thuộc tính Basic User Interface
Thuộc tính
Mo tả
CSS
box-sizing
Báo cho trình duyệt các thuộc tính sizing (độ rộng và độ cao) nên có
3
content
Sử dụng với :before và :after pseudo-elements, để chèn nội dung được tạo ra
2
cursor
Xá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ản
3
nav-down
Xác định nơi để di chuyển khi sử dụng phím mũi tên xuống
3
nav-index
Xác định thứ tự tab của phần tử
3
nav-left
Xác định nơi để di chuyển khi sử dụng phím mũi tên sang trái
3
nav-right
Xác định nơi để di chuyển khi sử dụng phím mũi tên sang phải
3
nav-up
Xác định nơi để di chuyển khi sử dụng phím mũi tên lên
3
outline
Thiết lập thuộc tính đường viền trong lời khai báo
2
outline-color
Đặt màu sắc của đường viền bao ngoài
2
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-style
Thiết lập kiểu của đường viền bao ngoài
2
outline-width
Thiết lập độ rộng của đường viền bao ngoài
2
resize
Xác định có hay không một phần tử là thay đổi kích thước bởi người dùng
3
text-overflow
Xác định các vấn đề khi văn bản tràn khỏi các phần tử container
3
Các thuộc tính Multi-column Layout
Thuộc tính
Mô tả
CSS
break-after
Xác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn sau khi tạo hộp
3
break-before
Xá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ộp
3
break-inside
Xá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 ra
3
column-count
Xác định số cột phần tử nên được chia thành
3
column-fill
Xác định như thế nào để điền vào cột
3
column-gap
Xác định khoảng cách giữa các cột
3
column-rule
Mộ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ột
3
column-rule-color
Xác định màu sắc của các đường kẻ giữa các cột
3
column-rule-style
Xác định kiểu của các đường kẻ giữa các cột
3
column-rule-width
Xác định độ rộng của các đường kẻ giữa các cột
3
column-span
Xác định có bao nhiêu cột chứa phần tử được trải dài
3
column-width
Xác định độ rộng của cột
3
columns
Mộ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
widows
Xá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ính
Mô tả
CSS
orphans
Thiế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-after
Thiết lập chế độ ngắt trang sau một phần tử
2
page-break-before
Thiết lập chế độ ngắt trang trước một phần tử
2
page-break-inside
Thiế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ính
Mô tả
CSS
marks
Thêm đoạn văn bản được đánh dấu và/hoặc sử dụng cho tài liệu
3
quotes
Thiết lập các loại dấu bao ngoài khi nhúng một trích dẫn
2
Các thuộc tính Filter Effects
Thuộc tính
Mô tả
CSS
filter
Xá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ính
Mô tả
CSS
image-orientation
Xá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-rendering
Gợ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ại
3
image-resolution
Xá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-fit
Xá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ộng
3
object-position
Xá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ính
Mô tả
CSS
mask
3
mask-type
3
Các thuộc tính Speech
Thuộc tính
Mô tả
CSS
mark
Một thuộc tính viết tắt để thiết lập thuộc tính mark-before và mark-after
3
mark-after
Cho phép đánh dấu tên được gắn liền với những dòng âm thanh
3
mark-before
Cho phép đánh dấu tên được gắn liền với những dòng âm thanh
3
phonemes
xác định cách phát âm cho các văn bản chứa các phần tử tương ứng
3
rest
Một thuộc tính viết tắt để thiết lập thuộc tính the rest-before và rest-after
3
rest-after
Xá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 dung
3
rest-before
Xá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 dung
3
voice-balance
Xác định sự cân bằng giữa các kênh trái và phải
3
voice-duration
Xác định nó phải mất bao lâu để trả lại các lựa chọn phần tử nội dung
3
voice-pitch
Xác định mức độ trung bình (tần số) của giọng nói
3
voice-pitch-range
Xác định sự thay đổi của tần số
3
voice-rate
Điều khiển tốc độ nói
3
voice-stress
Chỉ ra cường độ của sự nhấn mạnh được áp dụng
3
voice-volume
Đề cập đến biên độ của dạng sóng đầu ra của các bài phát biểu
