Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 18 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
18
Dung lượng
104,85 KB
Nội dung
Tổng hợp thuộc tính CSS timoday.edu.vn/tong-hop-cac-thuoc-tinh-cua-css Các thuộc tính CSS Đây bảng tóm tắt tất thuộc tính sử dụng CSS Sẽ cần thiết cho bạn tham khảo, tra cứu sử dụng CSS Chi tiết thuộc tính giới thiệu riêng Các nhóm thuộc tính CSS Cột “CSS” phiên CSS mà thuộc tính sử dụng( CSS1, CSS2 CSS3) Các thuộc tính Color Chức để thiết lập màu sắc độ suốt văn Thuộc tính Mơ tả CSS color Đặt màu sắc cho đoạn văn opacity Đặt mức độ suốt cho phần tử Các thuộc tính Background Border Chức ănng thiết lập thuộc tính màu đường biên cho đối tượng trang Thuộc tính Mơ tả CSS background Một thuộc tính viết tắt để đặt thuộc tính lời khai báo backgroundattachment Đặt ảnh để cố định cuộn với phần lại trang backgroundblend-mode Chỉ định chế độ trộn lớp nền(màu sắc/hình ảnh) backgroundcolor Chỉ định màu phần tử backgroundimage Chỉ định nhiều hình ảnh cho phần tử 1/18 backgroundposition Chỉ định vị trí hình ảnh backgroundrepeat Thiết lập ảnh lặp lặp lại backgroundclip Chỉ định khu vực để sơn màu backgroundorigin Chỉ định nơi hình định vị backgroundsize Chỉ định kích thước ảnh border Thiết lập tất thuộc tính đường viền lời khai báo borderbottom Thiết lập tất thuộc tính đường viền lời khai báo borderbottom-color Thiết lập màu đường viền borderbottom-leftradius Xác định hình dạng đường viền góc bên trái borderbottomright-radius Xác định hình dạng đường viền góc bên phải borderbottom-style Thiết lập kiểu (style) đường viền borderbottomwidth Thiết lập độ rộng đường viền border-color Thiết lập màu sắc bốn đường viền borderimage Một thuộc tính viết tắt để thiết lập tất thuộc tính border-image-* borderimage-outset Chỉ định giá trị khu vực ảnh viền vượt vùng giới hạn vùng bao 2/18 borderimagerepeat Chỉ định ảnh viền nên lặp lặp lại, tròn kéo dài borderimage-slice Chỉ định cụ thể để cắt ảnh viền borderimagesource Chỉ định đường dẫn tới hình ảnh để sử dụng đường viền borderimage-width Chỉ định độ rộng ảnh-viền border-left Thiết lập tất thuộc tính đường viền trái lời khai báo border-leftcolor Thiết lập màu sắc đường viền trái border-leftstyle Thiết lập kiểu ( style) đường viền trái border-leftwidth Thiết lập độ rộng đường viền trái borderradius Thuộc tính viết tắt để thiết lập tất bốn đường viền-*thuộc tính radius(bán kính) border-right Thiết lập thuộc tính đường viền phải lời khai báo border-rightcolor Thiết lập màu sắc cho đường viền phải border-rightstyle Thiết lập kiểu (style) cho đường viền phải border-rightwidth Thiết lập độ rộng cho đường viền phải border-style Thiết lập kiểu (style) cho bốn đường viền border-top Thiết lập thuộc tính đường viền lời khai báo border-topcolor Thiết lập màu sắc cho đường viền 3/18 border-topleft-radius Xác định hình dạng đường viền góc bên trái border-topright-radius Xác định hình dạng đường viền góc bên phải border-topstyle Thiết lập kiểu (style) cho đường viền border-topwidth Thiết lập độ rộng đường viền border-width Thiết lập độ rộng bốn đường viền boxdecorationbreak Thiết lập dáng vẻ hình đường viền phần tử trang ngắt, phần tử in-line , dòng ngắt box-shadow Gắn nhiều đổ bóng (drop-shadows) vào hộp Các thuộc tính Basic Box Thuộc tính Mơ tả CSS bottom Xác định vị trí cuối phần tử position (vị trí) clear Xác định hai bên phần tử (left,right) nơi mà phần tử float không cho phép (ngăn cản thành phần không float trái, phải hay hai) clip Xác định đoạn cho phần tử sử dụng thuộc tính position có giá trị “absolute“ display Chỉ định làm phần tử HTML hiển thị float Xác định có hay khơng box float(trôi nổi) height Thiết lập chiều cao thành phần left Xác định vị trí bên trái phần tử position margin Thiết lập thuộc tính margin (căn lề cho phần tử) thông báo 4/18 marginbottom Thiết lập lề phần tử marginleft Thiết lập lề trái phần tử marginright Thiết lập lề phải phần tử margintop Thiết lập lề phần tử maxheight Thiết lập chiều cao tối đa phần tử maxwidth Thiết lập chiều rộng tối đa phần tử minheight Thiết lập chiều cao tối thiểu phần tử minwidth Thiết lập chiều rộng tối thiểu phần tử overflow Chỉ định xảy nội dung tràn phần tử hộp overflowx Xác định có hay khơng để cắt cạnh trái/phải đoạn văn bản, tràn khỏi khu vực nội dung phần tử overflowy Xác định có hay khơng để cắt cạnh /dưới đoạn văn bản, tràn khỏi khu vực nội dung phần tử padding Thiết lập lại thuộc tính padding (vùng đệm) lời khai báo paddingbottom Thiết lập vùng đệm phần tử paddingleft Thiết lập vùng đệm trái phần tử paddingright Thiết lập vùng đệm phải phần tử paddingtop Thiết lập vùng đệm phần tử 5/18 position Xác định kiểu phương thức định vị sử dụng cho phần tử (static, relative, absolute or fixed) right Xác định vị trí phải phần tử position top Xác định vị trí phần tử position visibility Xác định có hay khơng phần tử nhìn thấy width Thiết lập độ rộng phần tử verticalalign Sắp xếp nội dung theo chiều dọc phần tử z-index Thiết lập thứ tự xếp chồng phần tử position Thuộc tính cho bố cục Flexible Box Thuộc tính Mơ tả CSS aligncontent Xác định chỉnh dòng bên khối linh hoạt ( flexible container) mục không sử dụng khoảng cách có sẵn alignitems Xác định chỉnh cho mục bên khối linh hoạt ( flexible container) alignself Xác định chỉnh cho mục chọn bên khối linh hoạt ( flexible container) flex Xác định độ dài mục, tương phần lại flexbasis Xác định độ dài ban đầu mục linh hoạt (flexible item) flexXác định hướng mục linh hoạt (flexible items) direction flex-flow Một thuộc tính viết tắt cho thuộc tính flex-direction flex-wrap flexgrow Chỉ định mục tăng tương đối so với phần lại flexshrink Chỉ định mục giảm tương đối so với phần lại 6/18 flexwrap Chỉ định liệu mục linh hoạt (flexible items) nên bọc hay không justifycontent Xác định chỉnh mục bên khối linh hoạt (flexible container) mục không sử dụng tất khoảng cách có sẵn order Thiết lập thứ tự mục linh hoạt (flexible items), tương đối so với phần lại Các thuộc tính Text Thuộc tính Mơ tả CSS hangingpunctuation Xác định ký tự chấm câu đặt đường hộp hyphens Thiết lập làm tách từ để cải thiện cách bố trí đoạn văn letterspacing Tăng giảm khoảng cách ký tự văn line-break Xác định cách ngắt dòng line-height Thiết lập chiều cao dịng overflowwrap Xác định có hay khơng trình duyệt ngắt dịng từ để ngăn cản việc tràn (Khi chuỗi dài để phù hợp với hộp chứa tab-size Xác định chiều dài kí tự tab text-align Xác định chỉnh nội dung theo chiều ngang text-alignlast Mô tả cách dòng cuối mộtđoạn dòng trước ngắt dòng chỉnh text-align “justify” textcombineupright Xác định kết hợp đa ký tự vào khoảng cách ký tự đơn text-indent Xác định rõ thụt dòng khối văn 7/18 text-justify Xác định phương pháp lề thẳng hàng hai bên sử dụng text-align “justify” texttransform Điều khiển chữ in hoa white-space Xác định cách mà khoảng trắng bên phần tử xử lý word-break Xác định quy tắc ngắt dòng scripts non-CJK wordspacing Tăng giảm khoảng cách từ đoạn văn word-wrap Cho phép dài, từ dài xuống hàng mà không làm vỡ layout Các thuộc tính Text Decoration Thuộc tính Mơ tả CSS textdecoration Xác định trang trí thêm vào văn textdecorationcolor Xác định màu văn trang trí (text-decoration) textdecorationline Xác định loại dịng text-decoration textdecorationstyle Xác định kiểu dòng văn trang trí text-shadow Thêm đổ bóng cho văn textunderlineposition Xác định vị trí gạch thiết lập cách sử dụng thuộc tính text-decoration Các thuộc tính Font 8/18 Thuộc tính Mơ tả CSS @fontface Một quy tắc cho phép trang web tải sử dụng phông chữ khác với phông chữ “web-safe” @fontfeaturevalues Cho phép tác giả sử dụng tên chung font-variantalternate tính kích hoạt khác OpenType font Đặt tất thuộc tính font lời khai báo fontfamily Xác định họ phông chữ cho văn fontfeaturesettings Cho phép kiểm sốt tính in tiên tiến OpenType fonts fontkerning Kiểm sốt việc sử dụng thơng tin kerning (cách từ cách nhau) fontlanguageoverride Kiểm soát việc sử dụng ngôn ngữ cụ thể nét trạm (language-specific glyphs) kiểu chữ font-size Xác định kích thước phơng chữ đoạn văn font-sizeadjust Duy trì khả đọc văn phơng chữ dự phịng xuất fontstretch Chọn kiểu normal, condensed,hoặc expanded từ họ phông chữ font-style Xác định kiểu chữ cho văn fontsynthesis Quản lí kiểu chữ (đậm nghiêng) tổng hợp trình duyệt fontvariant Xác định có hay khơng văn hiển thị với phơng chữ small-caps fontvariantalternates Kiểm sốt việc sử dụng nét chạm thay liên quan đến việc thay tên định nghĩa @font-feature-values 9/18 fontvariantcaps Kiểm soát việc sử dụng nét chạm (glyph)thay cho chữ in hoa fontKiểm soát việc sử dụng nét chạm (glyph ) thay cho kịch variantbản Đông Á (ví dụ Trung Quốc Nhật Bản) east-asian fontvariantligatures Kiểm soát chữ ghép biểu mẫu theo ngữ cảnh sử dụng nội dung văn phần tử mà áp dụng fontvariantnumeric Kiểm soát việc sử dụng họa tiết (glyph) thay cho số, phân số đánh dấu thứ tự fontvariantposition Kiểm soát việc sử dụng họa tiết thay kích thước nhỏ vị trí số số đường sở phông chữ fontweight Xác định độ đậm phông chữ 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 viết textorientation Xác định hướng văn dòng textcombineupright Xác định kết hợp đa ký tự vào khoảng cách ký tự đơn unicodebidi Được sử dụng với thuộc tính direction để đặt trả cho dù văn nên ghi đè để hỗ trợ nhiều ngôn ngữ tài liệu writingmode Xác định liệu dòng văn đặt theo chiều ngang hay chiều dọc hay hướng mà khối tiến tới 10/18 Các thuộc tính Table Thuộc tính Mơ tả CSS bordercollapse Xác định liệu có hay không đường viền bảng nên tách biệt borderspacing Xác định khoảng cách đường viền ô lân cận captionside Xác định vị trí thích bảng empty-cells Xác định có hay khơng để hiển thị đường viền ô trống bảng tablelayout Thiết lập thuật toán bố trí (layout algorithm) sử dụng cho bảng Các thuộc tính Lists Counters Thuộc tính Mơ tả CSS counterincrement Gia tăng nhiều counters counter-reset Tạo thiết lập lại hay nhiều counters list-style Thiết lập tất thuộc tính cho danh sách lời khai báo list-styleimage Xác định hình ảnh đánh dấu mục danh sách list-styleposition Xác định đánh danh mục xuất bên bên nội dung list-style-type Xác định loại đánh dấu danh mục Các thuộc tính Animation Thuộc tính @keyframes Mơ tả Xác định mã animation CSS 11/18 animation Một thuộc tính viết tắt cho thuộc tính animation (ngoại trừ animation-play-state animation-fill-mode) animationdelay Xác định chậm trễ bắt đầu chuyển động hình ảnh tag (animation) animationdirection Xác định có hay khơng chuyển động nên chạy ngược lại chu kỳ thay animationduration Xác định có giây mili giây chuyển động cần để hoàn thành chu kỳ animation-fillmode Xác định kiểu cho phần tử chuyển động khơng chạy (Khi dừng lại , bị trễ) animationiterationcount Xác định số lần chuyển động thực animationname Xác định tên @keyframes animation animationplay-state Xác định xem chuyển động chạy hay tạm dừng animationtimingfunction Xác định tốc độ cong chuyển động hình ảnh tag Các thuộc tính Transform Thuộc tính Mơ tả CSS backfacevisibility Xác định có hay khơng phần tử nên nhìn thấy khơng chế độ tồn hình perspective Xác định chiều sâu perspective- Xác định vị trí phần tử 3D origin transform Áp dụng chuyển đổi 2D 3D đến phần tử transformorigin Cho phép bạn thay đổi vị trí phần tử transform 12/18 transformstyle Xác định phần tử lồng không gian 3D 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 thuộc tính chuyển đổi transitionproperty Xác định tên thuộc tính CSS hiệu ứng q trình chuyển đổi(none, width, height, all) transitionduration Xác định giây mili giây hiệu ứng chuyển đổi hoàn thành transitiontimingfunction Xác định đường cong tốc độ hiệu ứng chuyển đổi transitiondelay Xác định hiệu ứng chuyển đổi bắt đầu 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 thuộc tính sizing (độ rộng độ cao) nên có content Sử dụng với :before :after pseudo-elements, để chèn nội dung tạo cursor Xác định kiểu trỏ chuột hiển thị di chuyển vào phần tử ime-mode Điều khiển trạng thái trình soạn thảo phương thức nhập cho trường văn nav-down Xác định nơi để di chuyển sử dụng phím mũi tên xuống nav-index Xác định thứ tự tab phần tử 13/18 nav-left Xác định nơi để di chuyển sử dụng phím mũi tên sang trái nav-right Xác định nơi để di chuyển sử dụng phím mũi tên sang phải nav-up Xác định nơi để di chuyển sử dụng phím mũi tên lên outline Thiết lập thuộc tính đường viền lời khai báo outlinecolor Đặt màu sắc đường viền bao outlineoffset Đệm đường viền bao ngoài, rút bên ngồi cạnh đường viền (border) outlinestyle Thiết lập kiểu đường viền bao outlinewidth Thiết lập độ rộng đường viền bao resize Xác định có hay khơng phần tử thay đổi kích thước người dùng textoverflow Xác định vấn đề văn tràn khỏi phần tử container 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 ngắt đoạn sau tạo hộp breakbefore Xác định cách xử lý ngắt trang, ngắt cột ngắt đoạn trước tạo hộp breakinside Xác định cách xử lý ngắt trang, ngắt cột ngắt đoạn bên hộp tạo columncount Xác định số cột phần tử nên chia thành column-fill Xác định để điền vào cột column-gap Xác định khoảng cách cột 14/18 columnrule Một thuộc tính viết tắt để thiết lập thuộc tính column-rule-* cho đường kẻ cột columnrule-color Xác định màu sắc đường kẻ cột columnrule-style Xác định kiểu đường kẻ cột columnrule-width Xác định độ rộng đường kẻ cột columnspan Xác định có cột chứa phần tử trải dài columnwidth Xác định độ rộng cột columns Một thuộc tính viết tắt để thiết lập độ rộng cột (columnwidth) số cột (column-count) widows Xác định số dòng tối thiểu phải lại trang ngắt trang xảy bên phần tử Paged Media Thuộc tính Mơ tả CSS orphans Thiết lập số dòng tối thiểu phải lại cuối trang ngắt trang xảy bên phần tử pagebreak-after Thiết lập chế độ ngắt trang sau phần tử pagebreakbefore Thiết lập chế độ ngắt trang trước phần tử pagebreakinside Thiết lập chế độ ngắt trang bên phần tử Generated Content cho trang đa phương tiện 15/18 Thuộc tính Mơ tả CSS marks Thêm đoạn văn đánh dấu và/hoặc sử dụng cho tài liệu quotes Thiết lập loại dấu bao nhúng trích dẫn Các thuộc tính Filter Effects Thuộc tính filter Mơ tả Xác định hiệu ứng (vd: làm mờ chuyển đổi màu sắc) phần tử trước hiển thị CSS Image Values Replaced Content Thuộc tính Mơ tả CSS imageorientation Xác định quay theo bên phải theo chiều kim đồng hồ người dùng áp dụng cho ảnh (Thuộc tính có khả bị phản đối chức chuyển sang cho HTML) imagerendering Gợi ý cho trình duyệt khía cạnh ảnh quan trọng để bảo vệ hình ảnh thu nhỏ lại imageresolution Xác định độ phân giải nội ảnh raster sử dụng trong/ phần tử object-fit Xác định làm nội dung phần tử thay nên trang bị hộp tạo độ cao độ rộng objectposition Xác định chỉnh phần tử thay bên hộp Các thuộc tính Masking Thuộc tính Mô tả CSS mask 16/18 mask-type 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 mark-after mark-after Cho phép đánh dấu tên gắn liền với dòng âm markbefore Cho phép đánh dấu tên gắn liền với dòng âm phonemes xác định cách phát âm cho văn chứa phần tử tương ứng rest Một thuộc tính viết tắt để thiết lập thuộc tính the rest-before rest-after rest-after Xác định phần lại ranh giới điệu tính quan sát sau nói phần tử nội dung rest-before Xác định phần cịn lại ranh giới điệu tính để quan sát trước nói phần tử nội dung voicebalance Xác định cân kênh trái phải voiceduration Xác định phải để trả lại lựa chọn phần tử nội dung voice-pitch Xác định mức độ trung bình (tần số) giọng nói voice-pitchrange Xác định thay đổi tần số voice-rate Điều khiển tốc độ nói voicestress Chỉ cường độ nhấn mạnh áp dụng voicevolume Đề cập đến biên độ dạng sóng đầu phát biểu 17/18 Các thuộc tính Marquee Chức tạo chữ chạy HTML Thuộc tính Mơ tả CSS marquee-direction Thiết lập hướng di chuyển nội dung marquee-play-count Thiết lập lần di chuyển nội dung marquee-speed Thiết lập cách nhanh chóng cuộn nội dung marquee-style Thiết lập kiểu di chuyển nội dung Xem thêm công cụ học CSS trực quan Watch Video At: https://youtu.be/43HeCZfkXU Chia sẻ 15 Thêm 18/18 ... phần tử thay bên hộp Các thuộc tính Masking Thuộc tính Mơ tả CSS mask 16/18 mask-type 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 mark-after... khơng gian 3D 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 thuộc tính chuyển đổi transitionproperty Xác định tên thuộc tính CSS hiệu ứng... Xác định loại đánh dấu danh mục Các thuộc tính Animation Thuộc tính @keyframes Mơ tả Xác định mã animation CSS 11/18 animation Một thuộc tính viết tắt cho thuộc tính animation (ngoại trừ animation-play-state