该【2023年CSS自学笔记 】是由【cjc201601】上传分享，文档一共【11】页，该文档可以免费在线阅读，需要了解更多关于【2023年CSS自学笔记 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
css
CSS
(cascadingstylesheet)0Web(HTM
L/XML)(CSS) (DOM/JS) !"#$%&'(
.
CSS)*+,-./)*0
1)*0/*56)*78*/
1./)*0<!![if!IE,]->
CSS9JS:;:style=>
+style
HTML?@=>ABCDEFGHICSS=>"JKLstyle=>MN OPMNCSS=>"
QRST0CSS=>UVW9styleLXYZ[\]RC^_Z[\`abcR"d0
"CSS:font_size=>
Sty1eIBZcssText=>COPefghCSSijk"d0
"="font!weight0boId;color0#333lborder:1pxsolidred;''
"mnopCSS0
:("ID").="12px";
JavaScriptmnqpCSS
+,B:.=>r==>klbackground!co1or(CSS)<=>backgroundColor(JavaSc
ript)
+,_:=classtuv
CSSw;+
17x( y)
<bodystyle="FONT-SIZE:30ptlcolor:b1uelfont-family0{|”>
2(7):9 <head></head>
LAy,d0
<styletype="text/css"></style>
3:cvSC
<linkrel="StyleSheet"href=""type="text/css”>"
4CSS ¡¢£0
<sty1etype="text/css“media="screen,projection,print"></style>
v¤==>
$¥¦§¨©ª«
!ms-Micro-ms-interpolatioIE
softn-mode
-moz-MoziIla-moz-read-only¬Geckow®vCdFirefox:.
-0-Opera-o-text-overf1owOpera
!weWebkit!webkit-box-sh¬Webkitw®CdChrome Safari
bkit-adow
css¯° k[±0
"¯°0redg#ff0000I#fU0<:rgb255,0,0Orgb100%,0,0
"[±0px²³@´Cpt²µ/¶´,in²·¸´Cmm²¹º´,cm²»º´,em² L#$ ¼½´
"¾|:¿ÀÁ¯°ÃÄCÅÁ¯°ÃÆ"
Dǯ°È:hsl/hsla/rgbaÈC;°ÉÊ Ë¢£¯°"
mediaqueryÌÍ******@medianot|onlyÎÏÐÑandÎÏÒ>Ó*
Ô;ÎÏÐÑ0all/print/projection/screen/1v/tty²ÕaÖ ×Ø´/aural²ÙÚ ÚÛÜv´
"Ô;ÎÏÒ>0
OWidth/height0ÝÞvßàá Cd600px
ODevice-width/device-height:ÝÞÎÏâãá
OAspect-ratio/device-aspect-ratio:vßà/ÎÏâãáäCd:16/9
OColor0ÎÏ°ÆCdåæ°
32,ç
æ°ÎÏ
0
©è:ξ#vác100OpxéCSS
***@mediascreenandmin!width:100Opx{CSS}:.
CSStuvseiector
1Html
0pdivtableêd0p{FONT-SIZE:3Opt}
2id/classselector:)
:id classërScìRCí:#id/.c1ass{U}
3ïÐtuv:a:visited{}
1)>ïÐtuv
0root0ð?***@Cñòtml>
:empty0óÍ
ô?***@CçÍIèõµöçÍ÷ø ¼78ùúôíCd0<div></div>
:first-chi1d/:1ast-child/nth-child(n/odd/even/xn+y)/nth-last-child()/on1y-child0
div:nth-child(2)
:first-of-type/:last-of-type/:nth-of!type(n/odd/even)/:nth-last-of!type/0only-of-type:
ûüÐÑüý?@
2)UI?@þnïÐtuv
01ink(ÿ)/hove( )/:active(
)/visited/:focus
:enab1ed/disab1ed/:checked/:defauIt/:read-only/read-write/::selection(
)
3)
Selectorln t(selector2): 1,!" 2#$%&'( 1)*
2
selector:target+, selector -./01234<a>#$%789:;<=
>
4?***@A before/after/first/first-1e11er/first-1ine/firstchi1doB
®div>divbefore{content%CDEF G'%color:blueH}JKLdiv#$MNOPQR
div>divafter{content:url(')}JKLdiv#$STUNOcontentVW&X(Y
Z)
5?[\ se1ector1selector2{}@]=seiectorl^selector2_`a%7b
0c#$dec#$
6?c :seiectorl>selector2{)> ./0gh &X#$c#$ c
i[\ j%kl=(c mK> ./`noS pqc#$r7b
7?st se1ectorl-selector2{)=selectorluM%v+,selector2stw
4
8? x:se1ectorl,selector2,selector3,...{}y ^z0d{|%b}~:.
9?, :*
10?VW
1)div[id]:@idVWdiv#$`a
2)div[id=xx]idVW(xx
3)div[id*=xx]idVW[\xx
4)div[idA=xx]idVWbxx
11?CSSXaQ: ¡
1) ¡:#$pq¢acss¥¦MS§acss¥¨q©Q§acss
2) ¡ID ¥ ¥¬
®¬
¯block¬:BDIV#$%0µ#$%¶·¸a¹º%»¼½¾¿ÀH7CSSÁÂÃ?8
inlineƬ:BSPANdÉaË/¥#$%0ºK͹hkÎ ÏÐK©Ñ%"Ò¸Ó¹º%ÔÕÁÂ
Ã?8%©ÑÖ\×K
floatVW:ÚÛ>0ÜÝÞbßBàÝÞ
áNone¶·,"ÝÞ
áLeft/rightLç/èÝÞ
áInheritéêë VW
clearVW"ìíghDIVµÑ#$ݼ* îVW7bïÝÞxðñº òhm¡óvôõ¢aö÷
#$»ø,"vôõ#$
áNone¶·%ùúûüýÝÞ#$
áLeft/right"ùúçü/èüÝÞ#$
áBothûüý"ùúÝÞ#$
clip
auto
rect(top,right,bottom,1eft)()*+,-
./0
visibility:6*789/0
:visib1e;hidden,>?***@
displayJKLMNO*PQR
SinlineJK:)TQU
******@VWX/0YZLM
[\]^_`ab
Sbiock:JK:PQU
******@Xd/0XZLM,VW\]^e;`e
Snone>?LM
[fgAhiBC
Sin1ine-blockklPQR8inline;block*mn
o.pqX
rVW\s^e;`eIN
Otuv
YZinline-y
z{|}xy
~s:vertical-align:top
Sinline-tab1eXZJ:)TQU
A
VWA)I:.
Otab1e/1able-row/table-column/table-cel1ZLM/0:__
Otable-caption/lable-header-group/table-footer-group/lable-row-group/table-colu
mn-group:/0
O1ist-item:6*LM:ul*,list-style-typeVW\]I
Orun-inLM/0***@i*)
***@i*P/0
OboxVWY ¡¢,V£¤¥¦ §¨
©nhi¡¢I
overflow:sª«)+.{¬®I¯Z°overflow-x/overflow-y
Ovisible ±)²³´µ¶
NO
Oauto:·|³´µ¸¶
Ohidden:/0¹º*)¦
£¸ »BC/0*)
Oscrol1:¼8/0µ¶
²½¾¿ÀVWgvÁ)².µ¸¶I
box-shadow::PQRÂÃÄÅ
ÆÇDIV,²VWÈÂÃÄÅ
OhOffset:¤¥ÄÅÉÊËÌ*ÍÎ
OvOffset¤¥ÄÅÏÐËÌ*ÍÎ
Ob1urLength¤¥ÄÅ*QÑÒe
OscaleLength:¤¥ÄÅ*ÓgÒe
OcolorÄÅ*ÔÕ
co1umn-count:¦ Öd;¦ 8XØÙÚÛÜYZ 6/0
)*¦ §¨Ýs
OcolumnsÞn
s 6*^ecolumn-width; 6ßcolumn-count
Ocolumn-ruleÞn
sà 6(C*¦á¶,Vs¦á¶*^e_âU;ÔÕI
Ocolumn-gapãsà 6(C*Cä
Ocolumn-fiI1¤¥ 6*`e;autI£¸Kå,balanceæXÜ)çY*èX *
`eI
*éê_s§Èëì
position:ãíîïðs§
s§*.ñAò(óI·stop/left/bottom/right
I
OstaticNO,as§
Oabsolute:ôs§
.õµ¸¶µ¸IYZôs§ò·\]z-index
ß öéö÷
óI
Ofixed:øss§
õµ¸¶µ¸
ùúpqûüøs§¨I
Orelatives§
ýò4þs§
[A§¨DEFpã
***@ias§*ò.ñóÿ
z-index:
:.
box-sizingwidthheight !:
Ocontent-box"# $%&%
Opadding-box"# '() $%&%
Oborder-box"# '() *'+,$%&%
resize:-./012345678
Onone:9./
Oboth:;<=>?
***@A
OhorizontalB?***@A
Overtica1:C?***@A
OinheritDEF67
outline:GHI JKLMN+OPQRSTUV9WIXYZ[
Ooutline!color:GH\]
Oout1ine-style^+,_`ab
Ooutline-width:GH$%
Oou11ine-offsetGHcdefgGH^+,hYef
ijk"
background:jk\]|jkmn|jkop|jkqrIjkst
Obackground-colorujk\]
Obackground-image:ur1vmwxyz:ujkmw{:;;|}~=jkmw
Obackground-repeat:repeatIno-repeat|repeat-xIrepeat-yujkmwqr
[repeat:jkmw
[no-repeatjkmw9qrOuopJ
[repeat-x:jkmwB?OuopJ qr
[repeat-yjkmwC?OuopJ
?qr
Obackground!position:%I|top|right|bottom|1eft|center
[top:jkmwJ
+
[bottom:jkmwJ +
[leftjkmwJ +
[right:jkmwJ +
[centerjkmwB?C?:.
Obackground-attachment:scroll|fixed:umwst
[scr11:jkmn ¡3
[fixedjkmn¢
Obackground-clip:"#jk£¤
[conten-boxjk¥ content
[padding!boxcontentpadding
[border-box/no-clip:¦§contentpadding,¨border
Obackground-originjk©ª^Position«¬
[border!boxjkmw+, ®
[padding-box() ®
[content!box ®
Obackground-size:jkmw8<=~¯°±$%&%:;²I³
auto
+,
´µ¶67·¸:margin³border>paddingcontent
´¹+
³³³;»¼2=½~¯"#
+,\]
Oborderu:border-widthborder-styleborder!color¼:borde¾2Pxdotted#000
[~¯"#¹+border!top/right/bottom/left
["#¹+border-1op-color/style/width
Oborder-width:medium|thinIthickI%"#+,$%
[medium:
[thin:¿
[thick:À
[%::;²IÁO%Â
[border-top-widthborder!right-widthborder!bottom-widthborder-le
ft-width
Oborder-stylenone|hidden|dottedIdashed|solid|double|groove|r
idge|inset|outset
[noneO+,gÃÄÁO+,$%
[hiddenÅÆ+,
[dottedªa
[dashed:Ça:.
[solid:Èa
[doubleÉa
[groove3DÊË
[ridge:ÌÍ+,
[inset:3DÊ+
[outset:3DÎ+
Oborder-color:+,\]border-top-co1orborder!right-colorborder-bottom!
colorborder-1eft!color
Oborder!collapseseparate|co1lapse±Ï+,
[separateHTML"#+,~
[co1lapse+,ÐÑ
´Ò5+,»¼+,nn7½:;"#nÓ\]ÔÓ\]ÕÖ1=n7
[border-top/right/bottom/1eft-cok>rs:×=\]hY;XÏ~
´Ø+,01ØÙyÚÛØ+,»¼¥Obrder-radius½¹=ØÙy_
`
[border-top-1eft-radius
ØÙy
[border-top!right-radius
ØÙy
[border-bottom-right-radiusØÙy
[border-bottom-left-radius:ØÙy
´mw+,:CSS3ÚÜ9ÝÞ
Opadding/margin()·() "#4=°±
³³³,2=°±
++
±Ï_ß
Oborder-co1lapse:separate|co11apse±Ï+,àáâ6Ï+,-ÐÑ
[separate:"#+,~ÕÖ¸Éa
[co1lapse+,ÐÑ~¸âa
Oborder-spacing:border-co1lapse¸separate,â6Ï+,hYYe
Ocaption-side:^caption67P©²IäåæçJ±Ïtop/bottom/left/right
Oempty-cellsèâ6ÏO -ÕÖ+,show/hide
Otable-layout"#±Ï$%Z[>éAuto{fixed¢Z[,9êë3~ì
$%
±ulliíîlist!style1ist-sty1e-type11ist-style-imageI1ist-sty1e-position
O1ist-sty1e!typeåïíî:.
[disc:ÈðØ
[circ1e:XðØ
[square:Èð>µ
[decimalñòóô
[lower-roman8õö÷ô
[upper-roman:õö÷ô
[lower-aIpha:8õøùôú
[upper-alpha:õøùôú
[none9²IûKü}
O1ist-style-position:outside|inside
[outside:ûKü}çpJùý;·
[insideûKü}çpJ>ý;
OIist-style-image:none|url
[none:Oþÿ
[url
text-indent:|
textoverflow: clip/ellipsis,!"#$% &'( )*
first-letter+,-.:0123456
text-align:left|center|righ11justify(78
*9:
;
vertica1-a1ign:auto|baseline(<=>?@
*Isub|super|top11ext!top|middleIb
ottom|text-bottom|length(A
B?***@CDEF*:GH
;
direction: IJ K,ltr(LMKN* (LNKM*
word-break O ;>normal/keep-all(PQRSTU V01WO*/break-all(XYZ[
\]O*
word-wrap O ;,norma1(<=O*/break-word(XYZ[\]O>_`Z[ URLab*
Oc4]d
line-height:normalI||e0fgO]EF>0hOc>ijklmnop
qr
letter-spacing:norma1I01s]]E
word-spacingnormal|Z[s]]E
white-space:norma1|pre|nowraptu\
TU ;:.
Onormal<=>wxyzT{
Opre|wxyzT{
Onowrap }~O >H %
br
0h,-
font:0h|0h5|0h|0h|Oc
font-family:0h0h,-
font-size:xx-sma111sma111medium|large|sma11er|1argerI|0h5
,-
font-weight:normal]bold|bolder|1ighter0h,-
font-styIe:norma1IitalicIoblique0h;,-
font-stretch:0K,norma1/narrower/wider,|K
K
font-variant:norma1|smal1-caps0h,-
Onormal:<=0h|
Osmal1-caps:560
text-decorationnone|underline|overline|line!through|blink ¡¢,-
Onone:£¤¥¦¡¢
Ounderline:§ ¨2©@
Ooverline§ ¨ª©@
O1ine-through§ ¨«¬@
Oblink:®¯qr
text-shadow°±opqr>y²qrl³´d µtext-shadow:red5px5px2px,5px5px5Px
#222
Ocolor:op¶·
OxoffsetopQKªCD
Oyoffset:opQ¸KªCD
Oradiusop¹ºR»R¼5,op½ª¾¼¹º
text-transformnone/capita1ize/uppercase/1owercase,|¿0 5
6À¤5 À¤6
font-size-adjustÁÂ0h5 ÃÄfgiaspect,->ÅB6xc¬lÆ0h5
ÇÈÉ0h:ʵËÌ8£¤ÍÎÏÐ0h>ËÌ8ÑÒÓÔ2ÕÏÐ0h
<>***@font-face{font-familyCrazyIt»srcur1("')fbrmat("TrueType")»font-weight:
boldfont-style:ita1ic;}:.
<divstyle=font-family:CrazyIt;font-size:36pt;font-weightbold;font-sty1
eitalic»,5x/div>
Ö×ËÌ80h:src:Ioca1(wfbntname")urlf'')format("TrueType")
Ø&,-
cursorauto|crosshair|defau111hand|move|wait|text|w!resizeI
s-resize|n-resize|e-resizeIne-resize|sw!resize|se-resize|nw-resize|pointer|url(ur1)
all!scro11Ù0ÚÛÜ&
help:ÝÞ´ÚÛÜ&
no-drop/not-al1owed:ᅚ&
pointeráÜ&
progress/waitÝâãÚÛÜ&
auto:<=> qräÌÀQåæç±
crosshairØ& i“Ù”0ê
defaultØ& i“ÚÛ”ê
hand:Ø& i“á”ê
moveØ& i¤4² K“Ù0ÚÛ”ê
textØ& µ56“I” ëìÜ&
2023年CSS自学笔记 来自淘豆网m.daumloan.com转载请标明出处.
