Css tất cả các thẻ pdf với các ví dụ

CSS là viết tắt của Cascading Style Sheets. Các tài liệu viết bằng HTML được định dạng và trình bày bằng CSS. Có nhiều tính năng trong HTML và CSS là phần bổ sung phổ biến nhất cho nó. Thay vì thay đổi chính trang web, với CSS, chỉ cần thay đổi kiểu, điều đó có nghĩa là ít cơ hội hơn đối với mã tổng thể. Hơn nữa, HTML chứa rất nhiều mã lặp lại cho mỗi trang web, mã này có thể được đặt trong một tệp chung với CSS và được sử dụng trên các trang web

CSS chứa – bộ chọn và khối khai báo. Một khối khai báo bao gồm các cặp thuộc tính-giá trị. Ví dụ,

#title 

Ở đây, tiêu đề là bộ chọn và khối khai báo là toàn bộ nội dung bên trong dấu ngoặc nhọn. Đã lưu dưới dạng -. tập tin css

Bảng cheat CSS

1. Nét chữ

Giá trị thuộc tínhVí dụ kiểu phông chữbình thường/nghiêng/kế thừa/kiểu phông chữ xiên. normalfont-variantnormal/inherit/small-capsfont-variant. chữ hoa nhỏ có trọng lượng bình thường/đậm/đậm hơn/nhẹ hơn/100-900/kế thừa trọng lượng phông chữ. đậm cỡ chữ?px/?%/cỡ chữ nhỏ/trung bình/lớn. cỡ chữ lớn. 5 họ phông chữ verdana/calibri. v.v… họ phông chữ. cỏ xanh

2. Chữ

PropertyValuesExampletext-alignleft/right/center/justifytext-align. justify;giãn cách chữ bình thường/độ dài/?%giãn cách chữ. 3%;Text-outlineNone/length/colorText-outline. bọc từ màu đỏ bình thường/bọc từ dài. bình thường;directionltr/rtl/inheritDirection. ltr;text-wrapnormal/unrestricted/nonetext-wrap. normaltext-indent?%/?pxtext-indent. 2%word-spacingnormal/?%/?pxword-spacing. normaltext-transformnone/chữ hoa/chữ thường/viết hoa văn bản-biến đổi. chữ thường-emphasisnone/dot/open/fill/circle/triangletext-emphasis. căn chỉnh văn bản đã điền tự động/phân phối/liên kết văn bản giữa các từ. phân phát

3. Giao diện người dùng

PropertyValuesExampleappearance – áp dụng kiểu dáng cụ thể của nền tảngbình thường. thừa kế. [biểu tượng. cửa sổ. máy tính để bàn. không gian làm việc. tài liệu. chú giải công cụ. hộp thoại. cái nút. nút nhấn. siêu liên kết. nút radio. hộp kiểm. mục menu. chuyển hướng. thực đơn. thanh menu. menu kéo xuống. thực đơn. danh sách-menu. đài phát thanh nhóm. nhóm hộp kiểm. phác thảo cây. phạm vi. cánh đồng. hộp tổ hợp. Chữ ký. mật khẩu] xuất hiện. mật khẩu; con trỏ tự động. chữ thập. mặc định. con trỏ. di chuyển. thay đổi kích thước điện tử. giảm kích thước. thay đổi kích thước nw. thay đổi kích thước n. thay đổi kích thước. thay đổi kích thước sw. thay đổi kích cỡ. thay đổi kích thước s. thay đổi kích thước w. chữ. đợi đã. Cứu giúp. trợ giúp { con trỏ. Cứu giúp; . Tương tự như chỉ mục tab trong html. Các giá trị có thể là số tự động hoặc số dương thể hiện thứ tự điều hướng. Giá trị đầu tiên là 1. tự động. kế thừa  numbernav-index. 1;nav-upauto. kế thừa [hiện tại. nguồn gốc. auto (trình duyệt quyết định nơi điều hướng đến)/ id (ID cụ thể sẽ được điều hướng đến)/ target_name (khung mục tiêu để điều hướng đến)/kế thừa (giá trị được tính dựa trên cha của phần tử; gốc hoặc hiện tại) điều hướng. tự động; điều hướng xuống tự động. kế thừa [hiện tại. nguồn gốc. điều hướng xuống. #b2;nav-leftauto. kế thừa [hiện tại. nguồn gốc. điều hướng sang trái. #b1;điều hướng bên phảitự động. kế thừa [hiện tại. nguồn gốc. điều hướng sang phải. #b2;resizenone. cả hai. nằm ngang. thẳng đứng. kế thừa. ngang; biểu tượng tự động. kế thừa  urlicon. url("thích. png”);

Xây dựng các trang web trong thế giới thực đáp ứng với HTML và CSS

4. Tầng lớp

PropertyValuesExamplebackground-sizeauto/cover/?px/?%background-size. coverbackground-imageurl/nonebackground-image. nonebackground-repeatno-repeat/repeat-x/repeat-y/repeatbackground-repeat. repeatbackground-attachmentfixed/scrollbackground-attachment. cố định màu nền/màu nền trong suốt. vị trí nền trắng có thể là bất kỳ vị trí nào từ các kết hợp khác nhau như trên cùng bên trái, trên cùng bên phải, trên cùng ở giữa. Tương tự với đáy. có thể được đề cập về vị trí x-% và y-%background-position. top-left;background-origin điểm bắt đầu của nền background-origin. 0;background-clip - cho phép bạn kiểm soát mức độ của hình nền sẽ mở rộng ra ngoài nội dung của phần tử hoặc phần đệm content-box/padding-box/border-box/noclip/?%/?px background-clip. không kẹp

5. biên giới

Thuộc tính Giá trịVí dụbiên giới-chiều rộng mỏng/thick/trung bình/?pxbiên giới-chiều rộng. chiều rộng đường viền trung bình. 20pxborder-stylenone/dashed/dotted/inset/double/solidborder-style. dottedborder-colorname của colorborder-color. đường viền đen bên trái. màu-viền-trái-màu-viền-rộng-trái-viền-màu-trái. viền đen-rộng-trái-rộng. 10pxđường viền bên phải. đường viền bên phải màu đường viền bên phải chiều rộng đường viền bên phải màu. viền đen-chiều rộng bên phải. 15pxđường viền trên cùng. đường viền trên cùng chiều rộng đường viền trên cùng màu đường viền trên cùng chiều rộng. Màu trên cùng của đường viền 10px. blue border-bottom. màu-đường viền-đáy-đường viền-đáy-rộng-đường viền-màu-dưới. viền đen-đáy-rộng. 15pxborder-decoration-breakduy trì thiết kế nhất quán giữa các đoạn của phần tử bị hỏng slice/cloneborder-decoration-break. lát cắt;bán kính đường viền đường viền trên cùng bên phải bán kính đường viền dưới cùng bán kính bên phải đường viền dưới cùng bán kính bên trái đường viền trên cùng bán kính bên trái?pxbiên giới-bán kính trên cùng bên trái. Hình ảnh đường viền 20px?%/stretch/repeat/round/noneborder-image. lặp lại hình ảnh đường viền. 12px

6. Mô hình hộp

Giá trị thuộc tínhVí dụfloatleft. đúng. không nổi. rightheightauto chiều dài %height. 10pxmax-heightkhông có chiều dài %max-height. 10pxmax-widthnone chiều dài %max-width. 120%chiều cao tối thiểukhông có chiều dài %chiều cao tối thiểu. 50%min-widthauto % lengthmin-width. 30px

6. 1. Lề

Giá trị thuộc tínhVí dụmargin-bottomauto/length %margin-bottom. 20pxmargin-leftauto/height %margin-left. automargin-rightauto/height %margin-right. 30%margin-topauto/length %margin-top. 40mm

6. 2. đệm

PropertyValuesExamplepadding-bottomlength %padding-bottom. 20pxpadding-toplength %padding-top. 20pxpadding-rightlength %padding-right. 20pxpadding-leftlength %padding-left. 20pxdisplaynone/inline/block/inline-block/list-item/run-in/compact/table/inline-table/table-row-group/table-headergroup/table-footer-group/table-row/table-column- . inlinemarquee-directionforward/reversemarquee-direction. forwardmarquee-loopinfinite/integermarquee-loop. 10 marquee-player-count vô hạn/số nguyên marquee-play-count. 50marquee-tốc độ chậm/bình thường/nhanh-marquee-tốc độ. Slowmarquee-stylescroll/slide/alternatemarquee-style. scrolloverflowvisible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-yoverflow. visibleoverflow-styleauto/marquee-line/marquee-blockoverflow-style. autooverflow-xvisible/hidden/scroll/auto/no-display/no-contentoverflow-x. cuộn xoay góc xoay. 20điểm đảo vị trí (giá trị được ghép nối lệch)điểm xoay. 50% 50%khả năng hiển thị hiển thị/ẩn/thu gọn khả năng hiển thị. ẩnxóatrái/phải/cả hai/khôngxóa. trái

7. Bố cục mẫu

PropertyValuesExamplebox-alignstart/end/center/basebox-align. startbox-directionnormal/reversebox-direction. normalbox-flexnormalbox-flex. normalbox-flex-groupintegerbox-flex-group. 2box-lisingle/multiplebox-lines. singlebox-orientthorizontal/vertical/inline-axis/block-axisbox-orient. inlinebox-packstart/end/center/justifybox-pack. justifybox-sizingcontent-box/padding-box/border-box/margin-boxbox-sizing. lề-boxtab-sidetop/dưới/trái/bên phải tab. trái

8. Cái bàn

Thuộc tính Giá trị có thể có border-collapsecollapse/separateempty-cellsshow/hideborder-spacing?%/?pxtable-layoutauto/fixedcaption-sidetop/bottom/left/right

9. Cột

Giá trị thuộc tínhVí dụcolumn-countauto/numbercolumn-count. 10column-fillauto/balance/balance-all-column-fill. balancecolumn-gapnormal/?pxcolumn-gap. 5pxcolumn-rule-widththin/medium/thick/?pxcolumn-rule-width. chiều rộng quy tắc cột trung bình. 2pxcolumn-rule-styleborder-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inheritcolumn-rule-style. dấu chấm cột-quy tắc-màumàucột-quy tắc-màu. blackcolumn-widthauto/?pxcolumn-width. 10pxcolumn-span1/allcolumn-span. tất cả các

10. Màu sắc

Giá trị thuộc tính Ví dụ màu kế thừa/màu màu. greenopacityinherit/số levelopacity. 4

11. định vị lưới

PropertyValuesExampleggrid-columnsnone/inherit/?px/?%/x%-y%grid-columns. 10pxgrid-rowsnone/inherit/?px/?%/x%-y%grid-rows. 40%

12. Danh sách và đánh dấu

PropertyValueslist-style-type

không có/dấu hoa thị/hộp/kiểm tra/vòng tròn/kim cương/đĩa/gạch nối/vuông/thập phân/thập phân-dẫn đầu-không/chữ-roman/chữ trên-roman/chữ-alpha dưới/chữ-alpha trên/chữ-Hy Lạp dưới/chữ Latinh/

Ví dụ

{ danh sách-kiểu-loại. thượng-roman}

danh sách-kiểu-vị trí

?%/?px

Ví dụ

danh sách-kiểu-vị trí. 20px

danh sách-kiểu-hình ảnh

không có/url

Ví dụ

danh sách-kiểu-hình ảnh. url('hackrhome. gif');

điểm đánh dấu

tự động/?px

Ví dụ

điểm đánh dấu. tự động

13. Ảnh động

PropertyValuesExampleanimation-namenone/IDanimation-name. myfirstanimanimation-durationtimeanimation-duration. Chức năng thời gian hoạt hình 5s dễ dàng/tuyến tính/dễ dàng vào/dễ dàng ra/dễ dàng ra/khối-Bezier(số, số, số, số)chức năng thời gian hoạt ảnh. tuyến tính;animation-delaytimeanimation-delay. 5msanimation-iteration-countinherit/numberanimation-iteration-count. 5animation-directionnormal/alternateanimation-direction. hoạt ảnh thay thế-phát-trạng tháiđang chạy/tạm dừng hoạt ảnh-phát-trạng thái. runninganimation-fill-modeNone/backwards/forwards/ both/initial/inheritanimation-fill-mode. cả hai

14. Đề cương

Thuộc tính Giá trị Ví dụ outline-color Tên màu outline-color. greenoutline-stylenone/dotted/dashed/solid/double/groove/ridge/inset/outsetoutline-style. solidoutline-widththin/medium/thick/?pxoutline-width. chiều rộng phác thảo trung bình. 20pxoutline-offsetinherit/?pxoutline-offset. 15px

15. siêu liên kết

PropertyValuesVí dụ target-namecurrent/root/parent/new/modal/"string" target-name. parenttarget-newtab/window/nonetarget-new. cửa sổ-vị trí mục tiêu phía trước/phía sau/phía trên/phía sau vị trí mục tiêu. frontPropertyValuesVí dụfitfill/hidden/meet/slicefit. fillfit-positiontop/center/bottom hoặc left/center/right ?%/?pxfit-position. top 35%trẻ mồ côitrẻ mồ côi. 4hướng ảnhtự động/góc (độ/rad/rẽ/grad)hướng ảnh. 0gradpageauto/idpage. autopage-break-afterauto/always/tránh/trái/phải-break-after. luôn ngắt trang trước tự động/luôn/tránh/trái/phải ngắt trang trước. leftpage-break-insideauto/avoidpage-break-inside. tránhsizeauto/landscape/portrait/?pxSize. phong cảnhcửa sổsố nguyênCửa sổ. 4

17. định vị

PropertyValuesExamplebottom/right/top/leftauto/%/lengthbottom. 20% hàng đầu. tự động trái. 40px bên phải. 25pxz-indexauto/numberz-index. 2clipshape/autoclip. vị trí tự động cố định/tĩnh/tương đối/vị trí tuyệt đối. tĩnh

18. chuyển tiếp

Thuộc tínhGiá trịVí dụchuyển tiếp-thời gian trễ (ms/s)chuyển tiếp-trễ. 20mstransitions-durationthời gian (ms/s)transitions-thời lượng. 2stransitions-propertynone/alltransitions-property. nontransition-timing-functionease/tuyến tính/dễ vào/dễ ra/dễ vào/cubicBezier(số, số, số, số)chức năng thời gian chuyển tiếp. dễ dàng ra vào;

19. Chuyển đổi 3D / 2D

PropertyValuesExamplebackface-visibilityvisible/hiddenbackface-visibility. chiều dài góc nhìn ẩn. không ai. ban đầu. kế thừa quan điểm. 100pxperspective-origin[ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ left/center/right ] or [ top/center/ . Nguồn gốc phối cảnh 10px 30px. 10% 30% quan điểm gốc. trung tâm bên trái;transformnone/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rotateZ/
skewX/skewY/skew/perspectivetransform. nghiêng (40 độ); . tỷ lệ (10); . rotate(50deg);transform-origin[ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? . 20% 50%; . trung tâm; . 20px 50px;transform-styleflat/preserve-3dtransform-style. bảo tồn-3d

21. Phát biểu

PropertyValuesExamplecue-before – phát tệp âm thanh trước một phần tử [ im lặng. x-mềm. mềm. Trung bình. lớn. x-to. không ai. thừa kế]. voice;cue-after - phát tệp âm thanh sau một phần tử [ im lặng. x-mềm. mềm. Trung bình. lớn. x-to. không ai. thừa kế]. giọng nói; tạm dừngThời gian tạm dừng. 25mstạm dừng trước. không ai. x-yếu. Yếu. Trung bình. mạnh. x-strongpause-trước. 25mstạm dừng sau. không ai. x-yếu. Yếu. Trung bình. mạnh. x-strongpause-after. 25msphonemes – cung cấp cách phát âm ngữ âm cho các phần tử#computervoice-stressnormal. mạnh. vừa phải. không ai. giảm căng thẳng giọng nói. vừa phải;cao độ giọng nói&& tuyệt đối. [[x-thấp. thấp. Trung bình. cao. x cao]. [. ]] cao độ giọng nói. cao; . 350hz; . 45%thời lượng giọng nói tự động. thời lượng giọng nói. tự động; . thập niên 60; âm lượng lớn. [[x-mềm. mềm. Trung bình. lớn. x-to]. ]âm lượng giọng nói. 25db; . im lặng; . nhẹ nhàng;giọng nói-gia đình[[. ],]* [. ]. bảo tồn = [??] gia đình giọng nói. "trẻ em", "nữ" tỷ lệ giọng nói [bình thường. x-chậm. chậm. Trung bình. Nhanh. x-nhanh]. tốc độ giọng nói. chậm; . 30%;không nói gì. thông thường. đánh vần ra đi. chữ số. dấu chấm câu. không chấm câu. kế thừa-số nói. none;caption-side – vị trí cho đầu bảng. đáy. trái. đúng. kế thừa phụ đề. trái; nghỉ ngơi trước. không ai. x-yếu. Yếu. Trung bình. mạnh. x-strongest-trước. Trung bình; . 20ms; nghỉ ngơi sau. không ai. x-yếu. Yếu. Trung bình. mạnh. x-strongrest-after. Trung bình; . 20ms;

22. lớp giả

Ý nghĩa tài sản. activephần tử tích cực. focusElement trong tiêu điểm. linkan liên kết chưa được truy cập. phần tử enablean khi được bật. phần tử bị vô hiệu hóa khi bị vô hiệu hóa. hoverelement khi bạn di chuột qua. phần tử đã kiểm tra đã kiểm tra. lựa chọn một thành phần hiện được người dùng chọn hoặc đánh dấu. lang cho phép tác giả chỉ định một ngôn ngữ để sử dụng trong một phần tử cụ thể. nth-child(n)một phần tử là anh chị em thứ n. nth-last-child(n)một phần tử là anh chị em thứ n tính từ anh chị em cuối cùng. con đầu lòng anh chị em đầu lòng. anh chị em cuối cùng. phần tử con only-childonly. nth-of-type(n)một phần tử là anh chị em thứ n của loại của nó. nth-last-of-type(and)anh chị em thứ n của loại nó tính từ anh chị em cuối cùng. anh chị em đầu tiên của loại của nó. phần tử cuối cùng của loại là anh chị em cuối cùng của loại của nó. con duy nhất của loại của nó. Phần tử trống không có con. rootPhần tử gốc của tài liệu. targetTarget được chỉ định bởi một URL. phần tử not(x) không được đại diện bởi đối số 'x'

23. phần tử giả

Tài sảnÝ nghĩaVí dụ. first-letterThêm kiểu đặc biệt cho chữ cái đầu tiên của văn bản. chữ cái đầu tiên {    cỡ chữ. 150%; . #FFF00; . first-lineLà kiểu đặc biệt cho dòng đầu tiên của văn bản. chữ cái đầu tiên {    cỡ chữ. 150%; . đen; . beforeChèn một số nội dung trước một phần tử. trước {    nội dung. "Chào mừng đến với hackr. "; }. afterChèn một số nội dung sau một phần tử. sau {    nội dung. "Cảm ơn vì đã xem";

phép đo tuyệt đối

Ký hiệu Biểu diễn %phần trămmsmilli giâygiâyinchinchmmmmillimtrecmcentimetreptpoint (1/72 inch)pcpica (12 điểm)Đơn vịBiểu diễnđộđộgradientgradientradianlần lượtsmsmilli giâygiâyHzhertzkhzkilohertz

25. phép đo tương đối

UnitRepresentationpxpixel của thiết bịgdgrid được xác định bởi layout-gridemkích thước phông chữ của phần tử hiện tạiremkích thước phông chữ của phần tử gốcexx-height của phông chữ của phần tửvhviewport heightvmviewport height hoặc width (lower value)vwviewport width

26. các loại bộ chọn

TypeMeaningExampleclassnhiều phần tử thuộc nhiều loại khác nhau. classidsingle element#iduniversalappable to all elements*groupáp dụng kiểu cho nhiều phần tửp h1 h2typeelement of the typeptree đã chỉ định.

27. Nội dung được tạo

Thuộc tínhGiá trịVí dụbookmark-nhãnNội dung/attr/nhãn chuỗi bookmark-nhãn. “Đây là dấu trang”cấp độ dấu trangKhông có/số nguyêncấp độ dấu trang. 2;dấu trang-mục tiêuTự/url/attrdấu trang-mục tiêu. địa chỉ (http. //hackr. io); counter-resetNone/numbercount-reset. 5cropAuto/shapeCrop. autodisplaynone/inline/block/inline-blockDisplay. khối; nội dung bình thường. không ai. chặn  urlContent. normalfloat-offsetlength float-offset. 20px 20pxhyphenate-afterauto/integerhyphenate-after. 15dấu gạch nối/tự động/dấu nối thủ công. manualhyphenate-linesno-limit/integerhyphenate-lines. no-limithyphenate-resourcenone/urlhyphenate-resource. địa chỉ (http. //hackr. io) gạch nối-trướcauto/integerhyphenate-before. 10hyphenate-characterauto/stringhyphenate-character. “\1234”bộ đếm tăng một/số bộ đếm tăng. 10 điểm. chéo/không dấu. cropmove-tonormal/tại đây/idmove-to. normalimage-độ phân giảiauto/bình thường/dpiimage-độ phân giải. autopage-policystart/first/lastpage-policy. lastquotesnone/stringquotes. “'” “'”string-set[id string] [id string]string-set. nội dung tiêu đề(); thay thế văn bản không [chuỗi chuỗi] thay thế văn bản. “foo” “thanh”

28. hộp dòng

Thuộc tínhGiá trịVí dụcăn chỉnh-điều chỉnhtự động. đường cơ sở. cạnh trước. văn bản trước cạnh. tên đệm. trung tâm. cạnh sau. văn bản sau cạnh. chữ tượng hình. chữ cái. treo. chiều dài toán học. % căn chỉnh-điều chỉnh. middlealignment-baselinebaseline. ise-script. cạnh trước. văn bản trước cạnh. cạnh sau. văn bản sau cạnh. trung tâm. tên đệm. chữ tượng hình. chữ cái. treo. căn chỉnh toán học-đường cơ sở. hangdrop-initial-after-aligncentral. tên đệm. cạnh sau. văn bản sau cạnh. chữ tượng hình. chữ cái. toán học. %drop-initial-after-align. 30% thả-ban đầu-trước-aligncaps-height. drop-initial-before-align. trung tâm thả-ban đầu-trước-điều chỉnh trước-cạnh. văn bản trước cạnh. trung tâm. tên đệm. treo. toán học. chiều dài. %drop-initial-trước-điều chỉnh. thả-ban đầu-trước-điều chỉnh 10px. Giảm 10% ban đầu trước khi điều chỉnh. middledrop-initial-valueinitial integerdrop-initial-value. 20drop-initial-sizeauto số nguyên % linedrop-initial-size. 25%baseline-shiftsub. siêu. độ dài %baseline-shift. superdominant-baselinebaseline/treo/middledominant-baseline. giữa x=25 y = 50line-stacking-shiftconsider-shifts. bỏ qua-shiftsline-stacking-shift. bỏ qua-shiftsline-stacking-chiến lượcinline-line-height. chiều cao khối-đường. chiều cao tối đa. grid-heightline-stacking-chiến lược. max-heightinline-box-alignInitial. Cuối cùng. số nguyên inline-box-align. 2 inline-box-align. initline-heightNormal/number/ length/ %line-height. 30%text-heightauto. cỡ chữ. cỡ chữ. max-sizetext-height. autovertical-alignBaseline. phụ. siêu. hàng đầu. văn bản trên cùng. tên đệm. đáy. chiều dài văn bản dưới cùng. %vertical-align. tên đệm

Tải xuống CSS Cheat Sheet PDF

Phần kết luận

Đến đây là kết thúc bảng cheat CSS. Bằng cách này, bạn có thể nâng cao kỹ năng của mình trong khi tạo trang web hoặc chuẩn bị cho cuộc phỏng vấn CSS. Bạn cũng có thể muốn đọc các loại CSS và sự khác biệt giữa CSS, CSS2, CSS3 để hiểu CSS tốt hơn. Bạn có thể làm sống động trang web của mình bằng các kỹ năng CSS, vì vậy hãy tiếp tục và làm sáng nó lên.