Urara-Blog/build/_app/immutable/pages/css-fundamental.md-ac44dbcf 2.js

import{S as Cy,i as hy,s as by,C as Tf,w as h,x as b,y as B,z as By,A as KE,f as k,t as w,B as $,X as QE,l as o,r as i,a as F,V as v,m as a,n as p,u as n,h as s,c,W as E,p as f,b as r,G as e,E as ky}from"../chunks/index-cd58b8d1.js";import{P as wy}from"../chunks/post_layout-9085e57e.js";import{I as L}from"../chunks/post_card-e7f4525a.js";import"../chunks/posts-c52cb603.js";import"../chunks/title-765c989f.js";import"../chunks/index-81c83cec.js";import"../chunks/head-4a058b17.js";import"../chunks/icon-3aa13b39.js";import"../chunks/footer-1abd9501.js";import"../chunks/posts-57ab4794.js";function $y(Ds){let D,H,A,S,u,_,us,ga,tl,_s,fi,lp,O,P,kt,di,vi,wt,Ei,yi,$t,Di,ui,_i,W,mi,St,Ci,hi,xt,bi,Bi,ol,ki,Lt,wi,$i,sp,al,ms,Si,ep,pl,Cs,xi,tp,Ht,WE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">style</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">color:blue</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,At,hs,Ot,Li,op,rl,bs,Hi,ap,I,Ai,Pt,Oi,Pi,It,Ii,Ti,pp,Tt,jE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">  &lt;</span><span style="color: #F07178">style</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #FFCB6B">h1</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">      </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> blue</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">    </span><span style="color: #89DDFF">&#125;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">style</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,Mt,Bs,Ut,Mi,rp,il,ks,Ui,ip,j,ws,Gi,Gt,qi,Ri,N,Ni,qt,Ki,Qi,Rt,Vi,Wi,np,Nt,zE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">link</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">href</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">style.css</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">ref</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">stylesheet</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF"> /&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,Kt,K,ji,Qt,zi,Ji,z,Zi,Fp,nl,$s,Yi,cp,Ss,Fl,fp,cl,xs,Xi,dp,fl,Ls,gi,vp,Vt,JE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">footer</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-family</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> sans</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #FFCB6B">article</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">header</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> blue</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Wt,dl,Hs,ln,Ep,jt,ZE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">h1</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #FFCB6B">h2</span><span style="color: #89DDFF">,</span></div><div class='line'><span style="color: #FFCB6B">h3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> blue</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,zt,As,sn,yp,vl,Os,en,Dp,Ps,Jt,tn,up,Is,on,_p,Zt,YE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">id</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">author</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,Yt,Ts,an,mp,Xt,XE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">#</span><span style="color: #F78C6C">author</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-family</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> sans</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,gt,El,Ms,pn,Cp,Us,lo,rn,hp,Gs,nn,bp,so,gE=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">author</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,eo,qs,Fn,Bp,to,ly=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">author</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-family</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> sans</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,oo,Rs,ao,cn,kp,Ns,fn,wp,po,sy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">class</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">"</span><span style="color: #C3E88D">author</span><span style="color: #89DDFF">"</span><span style="color: #89DDFF">&gt;</span><span style="color: #EEFFFF">text</span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,ro,Ks,dn,$p,io,ey=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">author</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-family</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> sans</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,no,yl,Qs,vn,Sp,T,Fo,En,yn,co,Dn,un,fo,_n,xp,vo,ty=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">*</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">1098ab</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Eo,Dl,Vs,mn,Lp,M,ul,Cn,yo,hn,bn,Bn,d,kn,Do,wn,$n,uo,Sn,xn,_o,Ln,Hn,mo,An,On,Co,Pn,In,ho,Tn,Mn,bo,Un,Gn,Bo,qn,Rn,ko,Nn,Kn,wo,Qn,Vn,$o,Wn,jn,So,zn,Jn,Zn,xo,Yn,Hp,_l,Ws,Xn,Ap,ml,js,gn,Op,zs,Cl,Pp,Js,Zs,lF,Lo,sF,Ip,Ho,oy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">foot </span><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> green </span><span style="color: #F78C6C">!important</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Ao,J,Oo,eF,tF,Po,oF,Tp,hl,Ys,aF,Mp,U,Io,pF,rF,To,iF,nF,Mo,FF,Up,bl,Xs,cF,Gp,Bl,gs,fF,qp,G,le,dF,Uo,vF,EF,se,yF,Go,DF,uF,ee,_F,qo,mF,Rp,kl,te,CF,Np,Z,oe,hF,Ro,bF,BF,wl,kF,No,wF,$F,Kp,$l,ae,SF,Qp,pe,Ko,xF,Vp,Sl,re,LF,Wp,Qo,ay=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">li</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">first-child</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-weight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> bold</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #FFCB6B">li</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">last-child</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> italic</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Vo,xl,ie,HF,jp,Wo,py=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">li</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-child</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">odd</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> italic</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #FFCB6B">li</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-child</span><span style="color: #89DDFF">(</span><span style="color: #EEFFFF">even</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> italic</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #FFCB6B">li</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">nth-child</span><span style="color: #89DDFF">(</span><span style="color: #F78C6C">3</span><span style="color: #89DDFF">)</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> italic</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,jo,Ll,ne,AF,zp,q,OF,zo,PF,IF,Jo,TF,MF,Jp,Hl,UF,Zo,GF,Zp,Yo,ry=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" html="true"><div class="language-id">html</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">article</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;&lt;/</span><span style="color: #F07178">head</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;&lt;/</span><span style="color: #F07178">p</span><span style="color: #89DDFF">&gt;</span></div><div class='line'><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">article</span><span style="color: #89DDFF">&gt;</span></div></code></div></pre>`,Xo,go,iy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">article</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">p</span><span style="color: #EEFFFF">:</span><span style="color: #FFCB6B">fist-child</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-family</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> sans</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,la,Al,Fe,qF,Yp,ce,RF,Xp,Ol,fe,NF,gp,de,KF,lr,sa,ny=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">a</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">link</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">1098ad</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,ea,Pl,ve,QF,sr,Ee,VF,er,ta,Fy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">a</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">visited</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">777</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,oa,Il,ye,WF,tr,De,jF,or,aa,cy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">a</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">hover</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> orangered</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-weight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> bold</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">text-decoration</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> underline dotted orangered</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,pa,Tl,ue,zF,ar,_e,JF,pr,ra,fy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">a</span><span style="color: #89DDFF">:</span><span style="color: #C792EA">active</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> black</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> italic</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,ia,Ml,me,ZF,rr,Ce,na,YF,ir,he,XF,nr,Fa,dy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">h1</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">first-letter</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-style</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> normal</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,ca,be,gF,Fr,fa,vy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">p</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">first-line</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,da,Ul,Be,lc,cr,ke,sc,fr,we,ec,dr,va,Ey=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">h3</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">+</span><span style="color: #EEFFFF"> </span><span style="color: #FFCB6B">p</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">first-line</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> red</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Ea,Gl,$e,tc,vr,Y,Se,oc,ya,ac,pc,Da,rc,Er,xe,ql,yr,ua,yy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">h2</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">after</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">content</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">'</span><span style="color: #C3E88D">TOP</span><span style="color: #89DDFF">'</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-size</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">16px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">font-weight</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> bold</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> black</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">5px</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">15px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">display</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> inline-block</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">position</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> absolute</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">top</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">-10px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">right</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">-25px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">background-color</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">#</span><span style="color: #EEFFFF">ffe70e</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div><div class='line'></div><div class='line'><span style="color: #FFCB6B">h2</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">position</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> relative</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,_a,Rl,Le,ic,Dr,He,ma,nc,ur,Ca,Dy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">h2</span><span style="color: #89DDFF">::</span><span style="color: #C792EA">before</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,ha,Nl,Ae,Fc,_r,Oe,Kl,mr,Pe,Ql,Cr,Ie,Vl,hr,Wl,Te,cc,br,jl,Me,fc,Br,Ue,zl,kr,Jl,Ge,dc,wr,qe,Zl,$r,Yl,Re,vc,Sr,Ne,Xl,xr,Ke,Ec,Lr,gl,Qe,yc,Hr,Ve,Dc,Ar,ba,uy=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #EEFFFF">padding: \u4E0A\u4E0B \u5DE6\u53F3;</span></div></code></div></pre>`,Ba,ls,We,uc,Or,ka,_y=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #FFCB6B">*</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">margin</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">padding</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,wa,je,_c,Pr,ss,ze,mc,Ir,Je,Cc,Tr,es,Ze,hc,Mr,Ye,$a,bc,Ur,ts,Xe,Bc,Gr,os,ge,kc,qr,lt,Sa,wc,Rr,as,st,$c,Nr,et,ps,Kr,rs,tt,Sc,Qr,ot,xa,xc,Vr,is,at,Lc,Wr,C,La,Hc,Ac,Ha,Oc,Pc,pt,Ic,Aa,Tc,Mc,Oa,Uc,jr,rt,ns,zr,Fs,it,Gc,Jr,m,qc,Pa,Rc,Nc,Ia,Kc,Qc,Ta,Vc,Wc,Ma,jc,Zr,Ua,my=`<pre class="shiki material-default" style="background-color: #263238; color: #EEFFFF" css="true"><div class="language-id">css</div><div class='code-container'><code><div class='line'><span style="color: #89DDFF">.</span><span style="color: #FFCB6B">container</span><span style="color: #EEFFFF"> </span><span style="color: #89DDFF">&#123;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">width</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">800px</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #EEFFFF">  </span><span style="color: #B2CCD6">margin</span><span style="color: #89DDFF">:</span><span style="color: #EEFFFF"> </span><span style="color: #F78C6C">0</span><span style="color: #EEFFFF"> auto</span><span style="color: #89DDFF">;</span></div><div class='line'><span style="color: #89DDFF">&#125;</span></div></code></div></pre>`,Ga,cs,nt,zc,Yr,fs,Ft,Jc,Xr,R,qa,Ra,Zc,Yc,Q,Xc,Na,gc,lf,Ka,sf,ef,tf,ct,of,Qa,af,gr,ds,ft,pf,li,X,vs,Va,rf,nf,x,Wa,ja,Ff,cf,za,ff,df,Ja,vf,Ef,Za,yf,Df,Es,dt,uf,g,_f,mf,vt,Cf,ll,hf,si;return Fl=new L({props:{src:"https://s2.loli.net/2022/01/06/Wvj8SKIwGrVaicJ.png"}}),Cl=new L({props:{src:"https://s2.loli.net/2022/01/07/Zl3GX9dhrO2nqMs.png"}}),ql=new L({props:{src:"https://s2.loli.net/2022/01/08/YZaXGonBRELSuvH.png",alt:"https://s2.loli.net/2022/01/08/YZaXGonBRELSuvH.png"}}),Kl=new L({props:{src:"https://s2.loli.net/2022/01/07/hM1AKQwbp5u8gSJ.png"}}),Ql=new L({props:{src:"https://s2.loli.net/2022/01/07/V9SoD43kBH1z5cp.png"}}),Vl=new L({props:{src:"https://s2.loli.net/2022/01/07/pUJWb7iMqgI213G.png"}}),zl=new L({props:{src:"https://s2.loli.net/2022/01/08/HhPGpo83LnKMQCJ.png",alt:"https://s2.loli.net/2022/01/08/HhPGpo83LnKMQCJ.png"}}),Zl=new L({props:{src:"https://s2.loli.net/2022/01/08/kK4HD6YVsFIqx31.png",alt:"https://s2.loli.net/2022/01/08/kK4HD6YVsFIqx31.png"}}),Xl=new L({props:{src:"https://s2.loli.net/2022/01/08/1Jxe5aOTtPwGFoc.png",alt:"img\u5176\u5B9E\u662Finline-block box "}}),ps=new L({props:{src:"https://s2.loli.net/2022/01/08/u9G7IJyYWzbdRF4.png"}}),ns=new L({props:{src:"https://s2.loli.net/2022/01/08/NIga4hbQOHVfFCr.png",alt:"https://s2.loli.net/2022/01/08/NIga4hbQOHVfFCr.png"}}),{c(){D=o("p"),H=i("\u4E00\u4E9B\u968F\u5802\u7B14\u8BB0\u3002"),A=F(),S=o("p"),u=i("\u8BFE\u7A0B\uFF1A"),_=o("a"),us=i("Build Responsive Real-World Websites with HTML and CSS"),ga=F(),tl=o("h2"),_s=o("a"),fi=i("css \u662F\u4EC0\u4E48"),lp=F(),O=o("ul"),P=o("li"),kt=o("strong"),di=i("C"),vi=i("ascading"),wt=o("strong"),Ei=i("S"),yi=i("tyle"),$t=o("strong"),Di=i("S"),ui=i("heets (\u5C42\u53E0\u5F0F\u6837\u5F0F\u8868\uFF09"),_i=F(),W=o("li"),mi=i("CSS describes the "),St=o("strong"),Ci=i("visual style and presentation"),hi=i(" of the "),xt=o("strong"),bi=i("content written in HTML"),Bi=F(),ol=o("li"),ki=i("CSS consists of countless "),Lt=o("strong"),wi=i("properties"),$i=i(" that developers use to format the content: properties about font, text, spacing, layout, etc."),sp=F(),al=o("h2"),ms=o("a"),Si=i("\u5206\u7C7B"),ep=F(),pl=o("h3"),Cs=o("a"),xi=i("inline CSS"),tp=F(),Ht=new v(!1),At=F(),hs=o("blockquote"),Ot=o("p"),Li=i("\u6700\u597D\u4E0D\u7528"),op=F(),rl=o("h3"),bs=o("a"),Hi=i("internal CSS"),ap=F(),I=o("p"),Ai=i("\u653E\u5728"),Pt=o("code"),Oi=i("<head>"),Pi=i("\u91CC\u9762\u7684"),It=o("code"),Ii=i("<style>"),Ti=i("\uFF0C\u5982\uFF1A"),pp=F(),Tt=new v(!1),Mt=F(),Bs=o("ul"),Ut=o("li"),Mi=i("\u4EE3\u7801\u5F88\u957F\u7684\u65F6\u5019\uFF0C\u6574\u7406\u5F88\u9EBB\u70E6"),rp=F(),il=o("h3"),ks=o("a"),Ui=i("external CSS"),ip=F(),j=o("ul"),ws=o("li"),Gi=i("\u5F15\u7528\u5355\u72EC\u7684 css \u6587\u4EF6\uFF0C\u5982 "),Gt=o("code"),qi=i("style.css"),Ri=F(),N=o("li"),Ni=i("\u653E\u5728"),qt=o("code"),Ki=i("<head>"),Qi=i("\u91CC\u7528"),Rt=o("code"),Vi=i("<link>"),Wi=i("\u5F15\u7528\uFF0C\u5982\uFF1A"),np=F(),Nt=new v(!1),Kt=F(),K=o("p"),ji=i("\u5173\u4E8E"),Qt=o("code"),zi=i("<link>"),Ji=i(" \uFF0C\u53EF\u53C2\u8003:"),z=o("a"),Zi=i("MDN"),Fp=F(),nl=o("h2"),$s=o("a"),Yi=i("\u7EC4\u6210"),cp=F(),Ss=o("p"),h(Fl.$$.fragment),fp=F(),cl=o("h2"),xs=o("a"),Xi=i("Selectors"),dp=F(),fl=o("h3"),Ls=o("a"),gi=i("descendent selector"),vp=F(),Vt=new v(!1),Wt=F(),dl=o("h3"),Hs=o("a"),ln=i("line selector"),Ep=F(),jt=new v(!1),zt=F(),As=o("p"),sn=i("\u5B9A\u4E49\u7279\u5B9A\u5143\u7D20\u6837\u5F0F\u7684\u4E24\u79CD\u65B9\u5F0F\uFF1ACSS ID\u3001class attributes"),yp=F(),vl=o("h2"),Os=o("a"),en=i("id"),Dp=F(),Ps=o("blockquote"),Jt=o("p"),tn=i("\u7ED9\u6BCF\u4E2A\u5143\u7D20\u4E00\u4E2A id\uFF0C\u4EC5\u80FD\u7528\u4E00\u6B21\uFF0C\u5C3D\u91CF\u4E0D\u8981\u7528"),up=F(),Is=o("p"),on=i("\u5728 HTML \u4E2D\uFF1A"),_p=F(),Zt=new v(!1),Yt=F(),Ts=o("p"),an=i("\u5728 CSS \u4E2D\uFF1A"),mp=F(),Xt=new v(!1),gt=F(),El=o("h3"),Ms=o("a"),pn=i("class attributes"),Cp=F(),Us=o("blockquote"),lo=o("p"),rn=i("\u80FD\u65E0\u9650\u590D\u7528"),hp=F(),Gs=o("p"),nn=i("\u5728 HTML \u4E2D\uFF1A"),bp=F(),so=new v(!1),eo=F(),qs=o("p"),Fn=i("\u5728 CSS \u4E2D\uFF1A"),Bp=F(),to=new v(!1),oo=F(),Rs=o("blockquote"),ao=o("p"),cn=i("\u80FD\u65E0\u9650\u590D\u7528"),kp=F(),Ns=o("p"),fn=i("\u5728 HTML \u4E2D\uFF1A"),wp=F(),po=new v(!1),ro=F(),Ks=o("p"),dn=i("\u5728 CSS \u4E2D\uFF1A"),$p=F(),io=new v(!1),no=F(),yl=o("h3"),Qs=o("a"),vn=i("universal selector"),Sp=F(),T=o("ul"),Fo=o("li"),En=i("\u5BF9\u6240\u6709\u5143\u7D20\u751F\u6548"),yn=F(),co=o("li"),Dn=i("\u4F18\u5148\u7EA7\u6700\u4F4E"),un=F(),fo=o("li"),_n=i("\u4E0D\u53EF\u7EE7\u627F"),xp=F(),vo=new v(!1),Eo=F(),Dl=o("h3"),Vs=o("a"),mn=i("body"),Lp=F(),M=o("ul"),ul=o("li"),Cn=i("\u5728"),yo=o("code"),hn=i("<body>"),bn=i(" \u91CC\u7684\u901A\u5E38\u53EA\u5E94\u7528\u4E8E\u6587\u672C\u5143\u7D20\uFF08text\uFF09"),Bn=F(),d=o("li"),kn=i("Not all properties get inherited. It\u2019s mostly ones "),Do=o("strong"),wn=i("related to text"),$n=i(": "),uo=o("code"),Sn=i("font-family"),xn=i(", "),_o=o("code"),Ln=i("font-size"),Hn=i(", "),mo=o("code"),An=i("font-weight"),On=i(", "),Co=o("code"),Pn=i("font-style"),In=i(", "),ho=o("code"),Tn=i("color"),Mn=i(", "),bo=o("code"),Un=i("line-height"),Gn=i(", "),Bo=o("code"),qn=i("letter-spacing"),Rn=i(", "),ko=o("code"),Nn=i("text-align"),Kn=i(", "),wo=o("code"),Qn=i("text-transform"),Vn=i(", "),$o=o("code"),Wn=i("text-shadow"),jn=i(", "),So=o("code"),zn=i("list-style"),Jn=i(", etc."),Zn=F(),xo=o("li"),Yn=i("\u53EF\u7EE7\u627F"),Hp=F(),_l=o("h3"),Ws=o("a"),Xn=i("\u4F18\u5148\u7EA7"),Ap=F(),ml=o("h4"),js=o("a"),gn=i("conflicting between selectors"),Op=F(),zs=o("p"),h(Cl.$$.fragment),Pp=F(),Js=o("ul"),Zs=o("li"),lF=i("\u5C3D\u91CF\u4E0D\u8981\u7528"),Lo=o("code"),sF=i("!important"),Ip=F(),Ho=new v(!1),Ao=F(),J=o("ul"),Oo=o("li"),eF=i("\u6240\u6709 selector \u90FD\u4F1A\u88AB\u5E94\u7528\uFF0C\u53EA\u6709\u51B2\u7A81\u7684\u6309\u4F18\u5148\u7EA7\u5E94\u7528"),tF=F(),Po=o("li"),oF=i("\u5F53\u4F7F\u7528\u76F8\u540C\u7C7B\u522B\u7684 selector \u65F6\uFF0C\u5E94\u7528\u6700\u540E\u4E00\u4E2A"),Tp=F(),hl=o("h4"),Ys=o("a"),aF=i("inheritance"),Mp=F(),U=o("ul"),Io=o("li"),pF=i("inheriting elements can easily be override"),rF=F(),To=o("li"),iF=i("\u4F18\u5148\u7EA7\u6700\u4F4E"),nF=F(),Mo=o("li"),FF=i("body \u53EF\u7EE7\u627F\uFF0Cuniversal selector \u4E0D\u53EF\u4EE5"),Up=F(),bl=o("h2"),Xs=o("a"),cF=i("\u989C\u8272"),Gp=F(),Bl=o("h3"),gs=o("a"),fF=i("RGB/RGBA"),qp=F(),G=o("ul"),le=o("li"),dF=i("\u57FA\u672C"),Uo=o("code"),vF=i("(r,g,b,alpha)"),EF=F(),se=o("li"),yF=i("\u767D\u8272"),Go=o("code"),DF=i("(255,255,255)"),uF=F(),ee=o("li"),_F=i("\u9ED1\u8272"),qo=o("code"),mF=i("(0,0,0)"),Rp=F(),kl=o("h2"),te=o("a"),CF=i("Hexadecimal Colors"),Np=F(),Z=o("ul"),oe=o("li"),hF=i(`0 to ff (255 in hexadecimal numbers):
`),Ro=o("code"),bF=i("#00ffff"),BF=F(),wl=o("li"),kF=i(`Shorthand, when all colors are identical pairs
`),No=o("code"),wF=i("#off"),$F=i(`
\u5F53\u9700\u8981\u900F\u660E\u5EA6\u7684\u65F6\u5019\u624D\u7528 rgb \u989C\u8272\uFF0C\u4E00\u822C\u7528 hex`),Kp=F(),$l=o("h2"),ae=o("a"),SF=i("Pseudo Class"),Qp=F(),pe=o("blockquote"),Ko=o("p"),xF=i("\u7528\u6765\u6307\u5B9A\u7279\u5B9A\u5143\u7D20"),Vp=F(),Sl=o("h3"),re=o("a"),LF=i("\u7B2C\u4E00\u4E2A\u5143\u7D20/\u6700\u540E\u4E00\u4E2A\u5143\u7D20"),Wp=F(),Qo=new v(!1),Vo=F(),xl=o("h3"),ie=o("a"),HF=i("\u5947\u6570/\u5076\u6570 /\u7279\u5B9A\u6B21\u5E8F"),jp=F(),Wo=new v(!1),jo=F(),Ll=o("h3"),ne=o("a"),AF=i("\u591A\u79CD\u5143\u7D20\u65F6"),zp=F(),q=o("p"),OF=i("\u5982\u4E0B\u6240\u793A\uFF0C\u5F53 HTML \u4E2D"),zo=o("code"),PF=i("<p>"),IF=i("\u5E76\u4E0D\u662F"),Jo=o("code"),TF=i("<article>"),MF=i("\u91CC\u9762\u7684\u7B2C\u4E00\u4E2A\u5143\u7D20\u65F6\uFF0C\u4E0D\u751F\u6548\u3002"),Jp=F(),Hl=o("p"),UF=i("\u5373\u5F53\u6BCD\u5143\u7D20(parent element)\u91CC\u6709\u591A\u79CD\u5143\u7D20\u65F6(child elements)\uFF0C\u4E0D\u5B9C\u4F7F\u7528\u4F2A\u7C7B(pseudo class)\uFF0C\u53EF\u4EE5\u5728\u5217\u4E2D\u4F7F\u7528\uFF0C\u5982"),Zo=o("code"),GF=i("<li>"),Zp=F(),Yo=new v(!1),Xo=F(),go=new v(!1),la=F(),Al=o("h3"),Fe=o("a"),qF=i("Style hyperlinks"),Yp=F(),ce=o("p"),RF=i("\u56DB\u4E2A\u72B6\u6001\u90FD\u5E94\u5B9A\u4E49\uFF0C\u5E76\u6309\u987A\u5E8F\u6392\u5217"),Xp=F(),Ol=o("h4"),fe=o("a"),NF=i("link"),gp=F(),de=o("p"),KF=i("\u4E0D\u8FDB\u884C\u4EA4\u4E92\u7684\u9884\u89C8\u4E0B"),lr=F(),sa=new v(!1),ea=F(),Pl=o("h4"),ve=o("a"),QF=i("visited"),sr=F(),Ee=o("p"),VF=i("\u70B9\u51FB\u540E"),er=F(),ta=new v(!1),oa=F(),Il=o("h4"),ye=o("a"),WF=i("hover"),tr=F(),De=o("p"),jF=i("\u60AC\u505C\u65F6"),or=F(),aa=new v(!1),pa=F(),Tl=o("h4"),ue=o("a"),zF=i("active"),ar=F(),_e=o("p"),JF=i("\u70B9\u51FB\u65F6(\u901A\u5E38\u548C hover \u540C\u65F6\u51FA\u73B0"),pr=F(),ra=new v(!1),ia=F(),Ml=o("h2"),me=o("a"),ZF=i("Pseudo Elements"),rr=F(),Ce=o("blockquote"),na=o("p"),YF=i("any pseudo elements is actually an inline element"),ir=F(),he=o("p"),XF=i(`\u5728 HTML \u4E2D\u5E76\u4E0D\u771F\u5B9E\u5B58\u5728\uFF0C\u4F46\u4ECD\u53EF\u5728 CSS \u4E2D\u9009\u62E9\uFF0C\u5982\u884C\u5185\u7B2C\u4E00\u4E2A\u5B57\u7B26\uFF1A
\u5728 HTML \u4E2D\u5E76\u4E0D\u771F\u5B9E\u5B58\u5728\uFF0C\u4F46\u4ECD\u53EF\u5728 CSS \u4E2D\u9009\u62E9\uFF0C\u5982\u884C\u5185\u7B2C\u4E00\u4E2A\u5B57\u7B26\uFF1A`),nr=F(),Fa=new v(!1),ca=F(),be=o("p"),gF=i("\u6BB5\u5185\u7B2C\u4E00\u884C\uFF1A"),Fr=F(),fa=new v(!1),da=F(),Ul=o("h3"),Be=o("a"),lc=i("adjacent sibiling selector"),cr=F(),ke=o("p"),sc=i("\u5728\u540C\u4E00 parent element \u91CC\uFF0C\u4E0B\u9762\u6700\u4E34\u8FD1\u7684\u5143\u7D20"),fr=F(),we=o("p"),ec=i("\u5982 h3 \u6807\u9898\u4E0B\u7684 p\uFF1A"),dr=F(),va=new v(!1),Ea=F(),Gl=o("h3"),$e=o("a"),tc=i("after"),vr=F(),Y=o("ul"),Se=o("li"),oc=i("\u5C31\u7B97\u6CA1\u6709\u6587\u5B57\u5185\u5BB9\uFF0C\u4E5F\u8981\u5B9A\u4E49"),ya=o("code"),ac=i("content"),pc=F(),Da=o("li"),rc=i("\u4F4D\u4E8E\u884C\u672B"),Er=F(),xe=o("p"),h(ql.$$.fragment),yr=F(),ua=new v(!1),_a=F(),Rl=o("h3"),Le=o("a"),ic=i("before"),Dr=F(),He=o("ul"),ma=o("li"),nc=i("\u4F4D\u4E8E\u884C\u524D"),ur=F(),Ca=new v(!1),ha=F(),Nl=o("h2"),Ae=o("a"),Fc=i("Box Model"),_r=F(),Oe=o("p"),h(Kl.$$.fragment),mr=F(),Pe=o("p"),h(Ql.$$.fragment),Cr=F(),Ie=o("p"),h(Vl.$$.fragment),hr=F(),Wl=o("h3"),Te=o("a"),cc=i("Type of boxes:"),br=F(),jl=o("h4"),Me=o("a"),fc=i("inline boxes"),Br=F(),Ue=o("p"),h(zl.$$.fragment),kr=F(),Jl=o("h4"),Ge=o("a"),dc=i("block-level boxes"),wr=F(),qe=o("p"),h(Zl.$$.fragment),$r=F(),Yl=o("h4"),Re=o("a"),vc=i("inline-block boxes"),Sr=F(),Ne=o("p"),h(Xl.$$.fragment),xr=F(),Ke=o("p"),Ec=i("img \u5176\u5B9E\u662F inline-block box"),Lr=F(),gl=o("h3"),Qe=o("a"),yc=i("padding"),Hr=F(),Ve=o("p"),Dc=i("\u5185\u8FB9\u8DDD"),Ar=F(),ba=new v(!1),Ba=F(),ls=o("h4"),We=o("a"),uc=i("reset margin ane padding"),Or=F(),ka=new v(!1),wa=F(),je=o("p"),_c=i("\u4E0D\u8981\u7528 body"),Pr=F(),ss=o("h3"),ze=o("a"),mc=i("margin"),Ir=F(),Je=o("p"),Cc=i("\u5916\u8FB9\u8DDD"),Tr=F(),es=o("h4"),Ze=o("a"),hc=i("collapsing margins"),Mr=F(),Ye=o("ul"),$a=o("li"),bc=i("\u5F53\u4E24\u5143\u7D20\u7684 margin \u91CD\u5408\u65F6\uFF0C\u5927\u7684\u4F1A\u8986\u76D6\u5C0F\u7684"),Ur=F(),ts=o("h3"),Xe=o("a"),Bc=i("Dimensions"),Gr=F(),os=o("h4"),ge=o("a"),kc=i("width"),qr=F(),lt=o("ul"),Sa=o("li"),wc=i("percentage: percentage of the width of the parents containers"),Rr=F(),as=o("h2"),st=o("a"),$c=i("position"),Nr=F(),et=o("p"),h(ps.$$.fragment),Kr=F(),rs=o("h3"),tt=o("a"),Sc=i("Normal Flow"),Qr=F(),ot=o("ul"),xa=o("li"),xc=i("\u9ED8\u8BA4\u72B6\u6001"),Vr=F(),is=o("h3"),at=o("a"),Lc=i("Absolute Position"),Wr=F(),C=o("ul"),La=o("li"),Hc=i("\u7EDD\u5BF9\u4F4D\u7F6E"),Ac=F(),Ha=o("li"),Oc=i("\u5E38\u7528\u4E8E\u4E00\u4E9B\u5C0F\u5143\u7D20"),Pc=F(),pt=o("li"),Ic=i("parent elements/containers should set to "),Aa=o("code"),Tc=i("relative"),Mc=F(),Oa=o("li"),Uc=i("\u53D6\u51B3\u4E8E\u6700\u8FD1\u5C42\u6B21\u7684 relative parent elements/containers"),jr=F(),rt=o("p"),h(ns.$$.fragment),zr=F(),Fs=o("h3"),it=o("a"),Gc=i("centering page"),Jr=F(),m=o("p"),qc=i("use the "),Pa=o("code"),Rc=i("<div>"),Nc=i(" element to create a container class, then set the "),Ia=o("code"),Kc=i("margin-left"),Qc=i(" and "),Ta=o("code"),Vc=i("margin-right"),Wc=i(" to "),Ma=o("code"),jc=i("auto"),Zr=F(),Ua=new v(!1),Ga=F(),cs=o("h2"),nt=o("a"),zc=i("\u57FA\u672C\u64CD\u4F5C"),Yr=F(),fs=o("h3"),Ft=o("a"),Jc=i("CSS \u6CE8\u91CA"),Xr=F(),R=o("ul"),qa=o("li"),Ra=o("code"),Zc=i("/*\u9700\u8981\u6CE8\u91CA\u7684\u5185\u5BB9*/"),Yc=F(),Q=o("li"),Xc=i("VS code \u5FEB\u6377\u952E :"),Na=o("code"),gc=i("CMD+/"),lf=i(" (mac) "),Ka=o("code"),sf=i("Control+/"),ef=i(" (win)"),tf=F(),ct=o("li"),of=i("\u8C03\u51FA\u5F00\u53D1\u8005\u5DE5\u5177"),Qa=o("code"),af=i("cmd+i"),gr=F(),ds=o("h3"),ft=o("a"),pf=i("Fix bugs"),li=F(),X=o("ul"),vs=o("li"),Va=o("p"),rf=i("\u65B9\u6CD5\uFF1A"),nf=F(),x=o("ul"),Wa=o("li"),ja=o("strong"),Ff=i("inspect"),cf=F(),za=o("li"),ff=i("\u68C0\u67E5\u521A\u5F00\u59CB\u53D8\u5F97\u4E0D\u4E00\u6837\u7684\u5730\u65B9"),df=F(),Ja=o("li"),vf=i("\u5982\u679C\u6709\u5F88\u591A selector\uFF0C\u590D\u6742\u7684\u90A3\u4E2A\u4F1A\u88AB\u9996\u5148\u5E94\u7528"),Ef=F(),Za=o("li"),yf=i("\u68C0\u67E5 css \u6587\u4EF6\u5F15\u7528\u94FE\u63A5\u662F\u5426\u6B63\u786E"),Df=F(),Es=o("li"),dt=o("p"),uf=i(`\u5DE5\u5177\uFF1A
HTML \u6821\u5BF9\u5668:
`),g=o("a"),_f=i("Markup Validation Service"),mf=F(),vt=o("p"),Cf=i(`\u4EE3\u7801\u6BD4\u5BF9:
`),ll=o("a"),hf=i("Diffchecker"),this.h()},l(l){D=a(l,"P",{});var t=p(D);H=n(t,"\u4E00\u4E9B\u968F\u5802\u7B14\u8BB0\u3002"),t.forEach(s),A=c(l),S=a(l,"P",{});var bf=p(S);u=n(bf,"\u8BFE\u7A0B\uFF1A"),_=a(bf,"A",{href:!0,rel:!0,target:!0});var Mf=p(_);us=n(Mf,"Build Responsive Real-World Websites with HTML and CSS"),Mf.forEach(s),bf.forEach(s),ga=c(l),tl=a(l,"H2",{id:!0});var Uf=p(tl);_s=a(Uf,"A",{href:!0});var Gf=p(_s);fi=n(Gf,"css \u662F\u4EC0\u4E48"),Gf.forEach(s),Uf.forEach(s),lp=c(l),O=a(l,"UL",{});var Et=p(O);P=a(Et,"LI",{});var ys=p(P);kt=a(ys,"STRONG",{});var qf=p(kt);di=n(qf,"C"),qf.forEach(s),vi=n(ys,"ascading"),wt=a(ys,"STRONG",{});var Rf=p(wt);Ei=n(Rf,"S"),Rf.forEach(s),yi=n(ys,"tyle"),$t=a(ys,"STRONG",{});var Nf=p($t);Di=n(Nf,"S"),Nf.forEach(s),ui=n(ys,"heets (\u5C42\u53E0\u5F0F\u6837\u5F0F\u8868\uFF09"),ys.forEach(s),_i=c(Et),W=a(Et,"LI",{});var Ya=p(W);mi=n(Ya,"CSS describes the "),St=a(Ya,"STRONG",{});var Kf=p(St);Ci=n(Kf,"visual style and presentation"),Kf.forEach(s),hi=n(Ya," of the "),xt=a(Ya,"STRONG",{});var Qf=p(xt);bi=n(Qf,"content written in HTML"),Qf.forEach(s),Ya.forEach(s),Bi=c(Et),ol=a(Et,"LI",{});var ei=p(ol);ki=n(ei,"CSS consists of countless "),Lt=a(ei,"STRONG",{});var Vf=p(Lt);wi=n(Vf,"properties"),Vf.forEach(s),$i=n(ei," that developers use to format the content: properties about font, text, spacing, layout, etc."),ei.forEach(s),Et.forEach(s),sp=c(l),al=a(l,"H2",{id:!0});var Wf=p(al);ms=a(Wf,"A",{href:!0});var jf=p(ms);Si=n(jf,"\u5206\u7C7B"),jf.forEach(s),Wf.forEach(s),ep=c(l),pl=a(l,"H3",{id:!0});var zf=p(pl);Cs=a(zf,"A",{href:!0});var Jf=p(Cs);xi=n(Jf,"inline CSS"),Jf.forEach(s),zf.forEach(s),tp=c(l),Ht=E(l,!1),At=c(l),hs=a(l,"BLOCKQUOTE",{});var Zf=p(hs);Ot=a(Zf,"P",{});var Yf=p(Ot);Li=n(Yf,"\u6700\u597D\u4E0D\u7528"),Yf.forEach(s),Zf.forEach(s),op=c(l),rl=a(l,"H3",{id:!0});var Xf=p(rl);bs=a(Xf,"A",{href:!0});var gf=p(bs);Hi=n(gf,"internal CSS"),gf.forEach(s),Xf.forEach(s),ap=c(l),I=a(l,"P",{});var yt=p(I);Ai=n(yt,"\u653E\u5728"),Pt=a(yt,"CODE",{});var ld=p(Pt);Oi=n(ld,"<head>"),ld.forEach(s),Pi=n(yt,"\u91CC\u9762\u7684"),It=a(yt,"CODE",{});var sd=p(It);Ii=n(sd,"<style>"),sd.forEach(s),Ti=n(yt,"\uFF0C\u5982\uFF1A"),yt.forEach(s),pp=c(l),Tt=E(l,!1),Mt=c(l),Bs=a(l,"UL",{});var ed=p(Bs);Ut=a(ed,"LI",{});var td=p(Ut);Mi=n(td,"\u4EE3\u7801\u5F88\u957F\u7684\u65F6\u5019\uFF0C\u6574\u7406\u5F88\u9EBB\u70E6"),td.forEach(s),ed.forEach(s),rp=c(l),il=a(l,"H3",{id:!0});var od=p(il);ks=a(od,"A",{href:!0});var ad=p(ks);Ui=n(ad,"external CSS"),ad.forEach(s),od.forEach(s),ip=c(l),j=a(l,"UL",{});var ti=p(j);ws=a(ti,"LI",{});var Bf=p(ws);Gi=n(Bf,"\u5F15\u7528\u5355\u72EC\u7684 css \u6587\u4EF6\uFF0C\u5982 "),Gt=a(Bf,"CODE",{});var pd=p(Gt);qi=n(pd,"style.css"),pd.forEach(s),Bf.forEach(s),Ri=c(ti),N=a(ti,"LI",{});var Dt=p(N);Ni=n(Dt,"\u653E\u5728"),qt=a(Dt,"CODE",{});var rd=p(qt);Ki=n(rd,"<head>"),rd.forEach(s),Qi=n(Dt,"\u91CC\u7528"),Rt=a(Dt,"CODE",{});var id=p(Rt);Vi=n(id,"<link>"),id.forEach(s),Wi=n(Dt,"\u5F15\u7528\uFF0C\u5982\uFF1A"),Dt.forEach(s),ti.forEach(s),np=c(l),Nt=E(l,!1),Kt=c(l),K=a(l,"P",{});var Xa=p(K);ji=n(Xa,"\u5173\u4E8E"),Qt=a(Xa,"CODE",{});var nd=p(Qt);zi=n(nd,"<link>"),nd.forEach(s),Ji=n(Xa," \uFF0C\u53EF\u53C2\u8003:"),z=a(Xa,"A",{href:!0,rel:!0,target:!0});var Fd=p(z);Zi=n(Fd,"MDN"),Fd.forEach(s),Xa.forEach(s),Fp=c(l),nl=a(l,"H2",{id:!0});var cd=p(nl);$s=a(cd,"A",{href:!0});var fd=p($s);Yi=n(fd,"\u7EC4\u6210"),fd.forEach(s),cd.forEach(s),cp=c(l),Ss=a(l,"P",{});var dd=p(Ss);b(Fl.$$.fragment,dd),dd.forEach(s),fp=c(l),cl=a(l,"H2",{id:!0});var vd=p(cl);xs=a(vd,"A",{href:!0});var Ed=p(xs);Xi=n(Ed,"Selectors"),Ed.forEach(s),vd.forEach(s),dp=c(l),fl=a(l,"H3",{id:!0});var yd=p(fl);Ls=a(yd,"A",{href:!0});var Dd=p(Ls);gi=n(Dd,"descendent selector"),Dd.forEach(s),yd.forEach(s),vp=c(l),Vt=E(l,!1),Wt=c(l),dl=a(l,"H3",{id:!0});var ud=p(dl);Hs=a(ud,"A",{href:!0});var _d=p(Hs);ln=n(_d,"line selector"),_d.forEach(s),ud.forEach(s),Ep=c(l),jt=E(l,!1),zt=c(l),As=a(l,"P",{});var md=p(As);sn=n(md,"\u5B9A\u4E49\u7279\u5B9A\u5143\u7D20\u6837\u5F0F\u7684\u4E24\u79CD\u65B9\u5F0F\uFF1ACSS ID\u3001class attributes"),md.forEach(s),yp=c(l),vl=a(l,"H2",{id:!0});var Cd=p(vl);Os=a(Cd,"A",{href:!0});var hd=p(Os);en=n(hd,"id"),hd.forEach(s),Cd.forEach(s),Dp=c(l),Ps=a(l,"BLOCKQUOTE",{});var bd=p(Ps);Jt=a(bd,"P",{});var Bd=p(Jt);tn=n(Bd,"\u7ED9\u6BCF\u4E2A\u5143\u7D20\u4E00\u4E2A id\uFF0C\u4EC5\u80FD\u7528\u4E00\u6B21\uFF0C\u5C3D\u91CF\u4E0D\u8981\u7528"),Bd.forEach(s),bd.forEach(s),up=c(l),Is=a(l,"P",{});var kd=p(Is);on=n(kd,"\u5728 HTML \u4E2D\uFF1A"),kd.forEach(s),_p=c(l),Zt=E(l,!1),Yt=c(l),Ts=a(l,"P",{});var wd=p(Ts);an=n(wd,"\u5728 CSS \u4E2D\uFF1A"),wd.forEach(s),mp=c(l),Xt=E(l,!1),gt=c(l),El=a(l,"H3",{id:!0});var $d=p(El);Ms=a($d,"A",{href:!0});var Sd=p(Ms);pn=n(Sd,"class attributes"),Sd.forEach(s),$d.forEach(s),Cp=c(l),Us=a(l,"BLOCKQUOTE",{});var xd=p(Us);lo=a(xd,"P",{});var Ld=p(lo);rn=n(Ld,"\u80FD\u65E0\u9650\u590D\u7528"),Ld.forEach(s),xd.forEach(s),hp=c(l),Gs=a(l,"P",{});var Hd=p(Gs);nn=n(Hd,"\u5728 HTML \u4E2D\uFF1A"),Hd.forEach(s),bp=c(l),so=E(l,!1),eo=c(l),qs=a(l,"P",{});var Ad=p(qs);Fn=n(Ad,"\u5728 CSS \u4E2D\uFF1A"),Ad.forEach(s),Bp=c(l),to=E(l,!1),oo=c(l),Rs=a(l,"BLOCKQUOTE",{});var Od=p(Rs);ao=a(Od,"P",{});var Pd=p(ao);cn=n(Pd,"\u80FD\u65E0\u9650\u590D\u7528"),Pd.forEach(s),Od.forEach(s),kp=c(l),Ns=a(l,"P",{});var Id=p(Ns);fn=n(Id,"\u5728 HTML \u4E2D\uFF1A"),Id.forEach(s),wp=c(l),po=E(l,!1),ro=c(l),Ks=a(l,"P",{});var Td=p(Ks);dn=n(Td,"\u5728 CSS \u4E2D\uFF1A"),Td.forEach(s),$p=c(l),io=E(l,!1),no=c(l),yl=a(l,"H3",{id:!0});var Md=p(yl);Qs=a(Md,"A",{href:!0});var Ud=p(Qs);vn=n(Ud,"universal selector"),Ud.forEach(s),Md.forEach(s),Sp=c(l),T=a(l,"UL",{});var ut=p(T);Fo=a(ut,"LI",{});var Gd=p(Fo);En=n(Gd,"\u5BF9\u6240\u6709\u5143\u7D20\u751F\u6548"),Gd.forEach(s),yn=c(ut),co=a(ut,"LI",{});var qd=p(co);Dn=n(qd,"\u4F18\u5148\u7EA7\u6700\u4F4E"),qd.forEach(s),un=c(ut),fo=a(ut,"LI",{});var Rd=p(fo);_n=n(Rd,"\u4E0D\u53EF\u7EE7\u627F"),Rd.forEach(s),ut.forEach(s),xp=c(l),vo=E(l,!1),Eo=c(l),Dl=a(l,"H3",{id:!0});var Nd=p(Dl);Vs=a(Nd,"A",{href:!0});var Kd=p(Vs);mn=n(Kd,"body"),Kd.forEach(s),Nd.forEach(s),Lp=c(l),M=a(l,"UL",{});var _t=p(M);ul=a(_t,"LI",{});var oi=p(ul);Cn=n(oi,"\u5728"),yo=a(oi,"CODE",{});var Qd=p(yo);hn=n(Qd,"<body>"),Qd.forEach(s),bn=n(oi," \u91CC\u7684\u901A\u5E38\u53EA\u5E94\u7528\u4E8E\u6587\u672C\u5143\u7D20\uFF08text\uFF09"),oi.forEach(s),Bn=c(_t),d=a(_t,"LI",{});var y=p(d);kn=n(y,"Not all properties get inherited. It\u2019s mostly ones "),Do=a(y,"STRONG",{});var Vd=p(Do);wn=n(Vd,"related to text"),Vd.forEach(s),$n=n(y,": "),uo=a(y,"CODE",{});var Wd=p(uo);Sn=n(Wd,"font-family"),Wd.forEach(s),xn=n(y,", "),_o=a(y,"CODE",{});var jd=p(_o);Ln=n(jd,"font-size"),jd.forEach(s),Hn=n(y,", "),mo=a(y,"CODE",{});var zd=p(mo);An=n(zd,"font-weight"),zd.forEach(s),On=n(y,", "),Co=a(y,"CODE",{});var Jd=p(Co);Pn=n(Jd,"font-style"),Jd.forEach(s),In=n(y,", "),ho=a(y,"CODE",{});var Zd=p(ho);Tn=n(Zd,"color"),Zd.forEach(s),Mn=n(y,", "),bo=a(y,"CODE",{});var Yd=p(bo);Un=n(Yd,"line-height"),Yd.forEach(s),Gn=n(y,", "),Bo=a(y,"CODE",{});var Xd=p(Bo);qn=n(Xd,"letter-spacing"),Xd.forEach(s),Rn=n(y,", "),ko=a(y,"CODE",{});var gd=p(ko);Nn=n(gd,"text-align"),gd.forEach(s),Kn=n(y,", "),wo=a(y,"CODE",{});var lv=p(wo);Qn=n(lv,"text-transform"),lv.forEach(s),Vn=n(y,", "),$o=a(y,"CODE",{});var sv=p($o);Wn=n(sv,"text-shadow"),sv.forEach(s),jn=n(y,", "),So=a(y,"CODE",{});var ev=p(So);zn=n(ev,"list-style"),ev.forEach(s),Jn=n(y,", etc."),y.forEach(s),Zn=c(_t),xo=a(_t,"LI",{});var tv=p(xo);Yn=n(tv,"\u53EF\u7EE7\u627F"),tv.forEach(s),_t.forEach(s),Hp=c(l),_l=a(l,"H3",{id:!0});var ov=p(_l);Ws=a(ov,"A",{href:!0});var av=p(Ws);Xn=n(av,"\u4F18\u5148\u7EA7"),av.forEach(s),ov.forEach(s),Ap=c(l),ml=a(l,"H4",{id:!0});var pv=p(ml);js=a(pv,"A",{href:!0});var rv=p(js);gn=n(rv,"conflicting between selectors"),rv.forEach(s),pv.forEach(s),Op=c(l),zs=a(l,"P",{});var iv=p(zs);b(Cl.$$.fragment,iv),iv.forEach(s),Pp=c(l),Js=a(l,"UL",{});var nv=p(Js);Zs=a(nv,"LI",{});var kf=p(Zs);lF=n(kf,"\u5C3D\u91CF\u4E0D\u8981\u7528"),Lo=a(kf,"CODE",{});var Fv=p(Lo);sF=n(Fv,"!important"),Fv.forEach(s),kf.forEach(s),nv.forEach(s),Ip=c(l),Ho=E(l,!1),Ao=c(l),J=a(l,"UL",{});var ai=p(J);Oo=a(ai,"LI",{});var cv=p(Oo);eF=n(cv,"\u6240\u6709 selector \u90FD\u4F1A\u88AB\u5E94\u7528\uFF0C\u53EA\u6709\u51B2\u7A81\u7684\u6309\u4F18\u5148\u7EA7\u5E94\u7528"),cv.forEach(s),tF=c(ai),Po=a(ai,"LI",{});var fv=p(Po);oF=n(fv,"\u5F53\u4F7F\u7528\u76F8\u540C\u7C7B\u522B\u7684 selector \u65F6\uFF0C\u5E94\u7528\u6700\u540E\u4E00\u4E2A"),fv.forEach(s),ai.forEach(s),Tp=c(l),hl=a(l,"H4",{id:!0});var dv=p(hl);Ys=a(dv,"A",{href:!0});var vv=p(Ys);aF=n(vv,"inheritance"),vv.forEach(s),dv.forEach(s),Mp=c(l),U=a(l,"UL",{});var mt=p(U);Io=a(mt,"LI",{});var Ev=p(Io);pF=n(Ev,"inheriting elements can easily be override"),Ev.forEach(s),rF=c(mt),To=a(mt,"LI",{});var yv=p(To);iF=n(yv,"\u4F18\u5148\u7EA7\u6700\u4F4E"),yv.forEach(s),nF=c(mt),Mo=a(mt,"LI",{});var Dv=p(Mo);FF=n(Dv,"body \u53EF\u7EE7\u627F\uFF0Cuniversal selector \u4E0D\u53EF\u4EE5"),Dv.forEach(s),mt.forEach(s),Up=c(l),bl=a(l,"H2",{id:!0});var uv=p(bl);Xs=a(uv,"A",{href:!0});var _v=p(Xs);cF=n(_v,"\u989C\u8272"),_v.forEach(s),uv.forEach(s),Gp=c(l),Bl=a(l,"H3",{id:!0});var mv=p(Bl);gs=a(mv,"A",{href:!0});var Cv=p(gs);fF=n(Cv,"RGB/RGBA"),Cv.forEach(s),mv.forEach(s),qp=c(l),G=a(l,"UL",{});var Ct=p(G);le=a(Ct,"LI",{});var wf=p(le);dF=n(wf,"\u57FA\u672C"),Uo=a(wf,"CODE",{});var hv=p(Uo);vF=n(hv,"(r,g,b,alpha)"),hv.forEach(s),wf.forEach(s),EF=c(Ct),se=a(Ct,"LI",{});var $f=p(se);yF=n($f,"\u767D\u8272"),Go=a($f,"CODE",{});var bv=p(Go);DF=n(bv,"(255,255,255)"),bv.forEach(s),$f.forEach(s),uF=c(Ct),ee=a(Ct,"LI",{});var Sf=p(ee);_F=n(Sf,"\u9ED1\u8272"),qo=a(Sf,"CODE",{});var Bv=p(qo);mF=n(Bv,"(0,0,0)"),Bv.forEach(s),Sf.forEach(s),Ct.forEach(s),Rp=c(l),kl=a(l,"H2",{id:!0});var kv=p(kl);te=a(kv,"A",{href:!0});var wv=p(te);CF=n(wv,"Hexadecimal Colors"),wv.forEach(s),kv.forEach(s),Np=c(l),Z=a(l,"UL",{});var pi=p(Z);oe=a(pi,"LI",{});var xf=p(oe);hF=n(xf,`0 to ff (255 in hexadecimal numbers):
`),Ro=a(xf,"CODE",{});var $v=p(Ro);bF=n($v,"#00ffff"),$v.forEach(s),xf.forEach(s),BF=c(pi),wl=a(pi,"LI",{});var ri=p(wl);kF=n(ri,`Shorthand, when all colors are identical pairs
`),No=a(ri,"CODE",{});var Sv=p(No);wF=n(Sv,"#off"),Sv.forEach(s),$F=n(ri,`
\u5F53\u9700\u8981\u900F\u660E\u5EA6\u7684\u65F6\u5019\u624D\u7528 rgb \u989C\u8272\uFF0C\u4E00\u822C\u7528 hex`),ri.forEach(s),pi.forEach(s),Kp=c(l),$l=a(l,"H2",{id:!0});var xv=p($l);ae=a(xv,"A",{href:!0});var Lv=p(ae);SF=n(Lv,"Pseudo Class"),Lv.forEach(s),xv.forEach(s),Qp=c(l),pe=a(l,"BLOCKQUOTE",{});var Hv=p(pe);Ko=a(Hv,"P",{});var Av=p(Ko);xF=n(Av,"\u7528\u6765\u6307\u5B9A\u7279\u5B9A\u5143\u7D20"),Av.forEach(s),Hv.forEach(s),Vp=c(l),Sl=a(l,"H3",{id:!0});var Ov=p(Sl);re=a(Ov,"A",{href:!0});var Pv=p(re);LF=n(Pv,"\u7B2C\u4E00\u4E2A\u5143\u7D20/\u6700\u540E\u4E00\u4E2A\u5143\u7D20"),Pv.forEach(s),Ov.forEach(s),Wp=c(l),Qo=E(l,!1),Vo=c(l),xl=a(l,"H3",{id:!0});var Iv=p(xl);ie=a(Iv,"A",{href:!0});var Tv=p(ie);HF=n(Tv,"\u5947\u6570/\u5076\u6570 /\u7279\u5B9A\u6B21\u5E8F"),Tv.forEach(s),Iv.forEach(s),jp=c(l),Wo=E(l,!1),jo=c(l),Ll=a(l,"H3",{id:!0});var Mv=p(Ll);ne=a(Mv,"A",{href:!0});var Uv=p(ne);AF=n(Uv,"\u591A\u79CD\u5143\u7D20\u65F6"),Uv.forEach(s),Mv.forEach(s),zp=c(l),q=a(l,"P",{});var ht=p(q);OF=n(ht,"\u5982\u4E0B\u6240\u793A\uFF0C\u5F53 HTML \u4E2D"),zo=a(ht,"CODE",{});var Gv=p(zo);PF=n(Gv,"<p>"),Gv.forEach(s),IF=n(ht,"\u5E76\u4E0D\u662F"),Jo=a(ht,"CODE",{});var qv=p(Jo);TF=n(qv,"<article>"),qv.forEach(s),MF=n(ht,"\u91CC\u9762\u7684\u7B2C\u4E00\u4E2A\u5143\u7D20\u65F6\uFF0C\u4E0D\u751F\u6548\u3002"),ht.forEach(s),Jp=c(l),Hl=a(l,"P",{});var Lf=p(Hl);UF=n(Lf,"\u5373\u5F53\u6BCD\u5143\u7D20(parent element)\u91CC\u6709\u591A\u79CD\u5143\u7D20\u65F6(child elements)\uFF0C\u4E0D\u5B9C\u4F7F\u7528\u4F2A\u7C7B(pseudo class)\uFF0C\u53EF\u4EE5\u5728\u5217\u4E2D\u4F7F\u7528\uFF0C\u5982"),Zo=a(Lf,"CODE",{});var Rv=p(Zo);GF=n(Rv,"<li>"),Rv.forEach(s),Lf.forEach(s),Zp=c(l),Yo=E(l,!1),Xo=c(l),go=E(l,!1),la=c(l),Al=a(l,"H3",{id:!0});var Nv=p(Al);Fe=a(Nv,"A",{href:!0});var Kv=p(Fe);qF=n(Kv,"Style hyperlinks"),Kv.forEach(s),Nv.forEach(s),Yp=c(l),ce=a(l,"P",{});var Qv=p(ce);RF=n(Qv,"\u56DB\u4E2A\u72B6\u6001\u90FD\u5E94\u5B9A\u4E49\uFF0C\u5E76\u6309\u987A\u5E8F\u6392\u5217"),Qv.forEach(s),Xp=c(l),Ol=a(l,"H4",{id:!0});var Vv=p(Ol);fe=a(Vv,"A",{href:!0});var Wv=p(fe);NF=n(Wv,"link"),Wv.forEach(s),Vv.forEach(s),gp=c(l),de=a(l,"P",{});var jv=p(de);KF=n(jv,"\u4E0D\u8FDB\u884C\u4EA4\u4E92\u7684\u9884\u89C8\u4E0B"),jv.forEach(s),lr=c(l),sa=E(l,!1),ea=c(l),Pl=a(l,"H4",{id:!0});var zv=p(Pl);ve=a(zv,"A",{href:!0});var Jv=p(ve);QF=n(Jv,"visited"),Jv.forEach(s),zv.forEach(s),sr=c(l),Ee=a(l,"P",{});var Zv=p(Ee);VF=n(Zv,"\u70B9\u51FB\u540E"),Zv.forEach(s),er=c(l),ta=E(l,!1),oa=c(l),Il=a(l,"H4",{id:!0});var Yv=p(Il);ye=a(Yv,"A",{href:!0});var Xv=p(ye);WF=n(Xv,"hover"),Xv.forEach(s),Yv.forEach(s),tr=c(l),De=a(l,"P",{});var gv=p(De);jF=n(gv,"\u60AC\u505C\u65F6"),gv.forEach(s),or=c(l),aa=E(l,!1),pa=c(l),Tl=a(l,"H4",{id:!0});var l2=p(Tl);ue=a(l2,"A",{href:!0});var s2=p(ue);zF=n(s2,"active"),s2.forEach(s),l2.forEach(s),ar=c(l),_e=a(l,"P",{});var e2=p(_e);JF=n(e2,"\u70B9\u51FB\u65F6(\u901A\u5E38\u548C hover \u540C\u65F6\u51FA\u73B0"),e2.forEach(s),pr=c(l),ra=E(l,!1),ia=c(l),Ml=a(l,"H2",{id:!0});var t2=p(Ml);me=a(t2,"A",{href:!0});var o2=p(me);ZF=n(o2,"Pseudo Elements"),o2.forEach(s),t2.forEach(s),rr=c(l),Ce=a(l,"BLOCKQUOTE",{});var a2=p(Ce);na=a(a2,"P",{});var p2=p(na);YF=n(p2,"any pseudo elements is actually an inline element"),p2.forEach(s),a2.forEach(s),ir=c(l),he=a(l,"P",{});var r2=p(he);XF=n(r2,`\u5728 HTML \u4E2D\u5E76\u4E0D\u771F\u5B9E\u5B58\u5728\uFF0C\u4F46\u4ECD\u53EF\u5728 CSS \u4E2D\u9009\u62E9\uFF0C\u5982\u884C\u5185\u7B2C\u4E00\u4E2A\u5B57\u7B26\uFF1A
\u5728 HTML \u4E2D\u5E76\u4E0D\u771F\u5B9E\u5B58\u5728\uFF0C\u4F46\u4ECD\u53EF\u5728 CSS \u4E2D\u9009\u62E9\uFF0C\u5982\u884C\u5185\u7B2C\u4E00\u4E2A\u5B57\u7B26\uFF1A`),r2.forEach(s),nr=c(l),Fa=E(l,!1),ca=c(l),be=a(l,"P",{});var i2=p(be);gF=n(i2,"\u6BB5\u5185\u7B2C\u4E00\u884C\uFF1A"),i2.forEach(s),Fr=c(l),fa=E(l,!1),da=c(l),Ul=a(l,"H3",{id:!0});var n2=p(Ul);Be=a(n2,"A",{href:!0});var F2=p(Be);lc=n(F2,"adjacent sibiling selector"),F2.forEach(s),n2.forEach(s),cr=c(l),ke=a(l,"P",{});var c2=p(ke);sc=n(c2,"\u5728\u540C\u4E00 parent element \u91CC\uFF0C\u4E0B\u9762\u6700\u4E34\u8FD1\u7684\u5143\u7D20"),c2.forEach(s),fr=c(l),we=a(l,"P",{});var f2=p(we);ec=n(f2,"\u5982 h3 \u6807\u9898\u4E0B\u7684 p\uFF1A"),f2.forEach(s),dr=c(l),va=E(l,!1),Ea=c(l),Gl=a(l,"H3",{id:!0});var d2=p(Gl);$e=a(d2,"A",{href:!0});var v2=p($e);tc=n(v2,"after"),v2.forEach(s),d2.forEach(s),vr=c(l),Y=a(l,"UL",{});var ii=p(Y);Se=a(ii,"LI",{});var Hf=p(Se);oc=n(Hf,"\u5C31\u7B97\u6CA1\u6709\u6587\u5B57\u5185\u5BB9\uFF0C\u4E5F\u8981\u5B9A\u4E49"),ya=a(Hf,"CODE",{});var E2=p(ya);ac=n(E2,"content"),E2.forEach(s),Hf.forEach(s),pc=c(ii),Da=a(ii,"LI",{});var y2=p(Da);rc=n(y2,"\u4F4D\u4E8E\u884C\u672B"),y2.forEach(s),ii.forEach(s),Er=c(l),xe=a(l,"P",{});var D2=p(xe);b(ql.$$.fragment,D2),D2.forEach(s),yr=c(l),ua=E(l,!1),_a=c(l),Rl=a(l,"H3",{id:!0});var u2=p(Rl);Le=a(u2,"A",{href:!0});var _2=p(Le);ic=n(_2,"before"),_2.forEach(s),u2.forEach(s),Dr=c(l),He=a(l,"UL",{});var m2=p(He);ma=a(m2,"LI",{});var C2=p(ma);nc=n(C2,"\u4F4D\u4E8E\u884C\u524D"),C2.forEach(s),m2.forEach(s),ur=c(l),Ca=E(l,!1),ha=c(l),Nl=a(l,"H2",{id:!0});var h2=p(Nl);Ae=a(h2,"A",{href:!0});var b2=p(Ae);Fc=n(b2,"Box Model"),b2.forEach(s),h2.forEach(s),_r=c(l),Oe=a(l,"P",{});var B2=p(Oe);b(Kl.$$.fragment,B2),B2.forEach(s),mr=c(l),Pe=a(l,"P",{});var k2=p(Pe);b(Ql.$$.fragment,k2),k2.forEach(s),Cr=c(l),Ie=a(l,"P",{});var w2=p(Ie);b(Vl.$$.fragment,w2),w2.forEach(s),hr=c(l),Wl=a(l,"H3",{id:!0});var $2=p(Wl);Te=a($2,"A",{href:!0});var S2=p(Te);cc=n(S2,"Type of boxes:"),S2.forEach(s),$2.forEach(s),br=c(l),jl=a(l,"H4",{id:!0});var x2=p(jl);Me=a(x2,"A",{href:!0});var L2=p(Me);fc=n(L2,"inline boxes"),L2.forEach(s),x2.forEach(s),Br=c(l),Ue=a(l,"P",{});var H2=p(Ue);b(zl.$$.fragment,H2),H2.forEach(s),kr=c(l),Jl=a(l,"H4",{id:!0});var A2=p(Jl);Ge=a(A2,"A",{href:!0});var O2=p(Ge);dc=n(O2,"block-level boxes"),O2.forEach(s),A2.forEach(s),wr=c(l),qe=a(l,"P",{});var P2=p(qe);b(Zl.$$.fragment,P2),P2.forEach(s),$r=c(l),Yl=a(l,"H4",{id:!0});var I2=p(Yl);Re=a(I2,"A",{href:!0});var T2=p(Re);vc=n(T2,"inline-block boxes"),T2.forEach(s),I2.forEach(s),Sr=c(l),Ne=a(l,"P",{});var M2=p(Ne);b(Xl.$$.fragment,M2),M2.forEach(s),xr=c(l),Ke=a(l,"P",{});var U2=p(Ke);Ec=n(U2,"img \u5176\u5B9E\u662F inline-block box"),U2.forEach(s),Lr=c(l),gl=a(l,"H3",{id:!0});var G2=p(gl);Qe=a(G2,"A",{href:!0});var q2=p(Qe);yc=n(q2,"padding"),q2.forEach(s),G2.forEach(s),Hr=c(l),Ve=a(l,"P",{});var R2=p(Ve);Dc=n(R2,"\u5185\u8FB9\u8DDD"),R2.forEach(s),Ar=c(l),ba=E(l,!1),Ba=c(l),ls=a(l,"H4",{id:!0});var N2=p(ls);We=a(N2,"A",{href:!0});var K2=p(We);uc=n(K2,"reset margin ane padding"),K2.forEach(s),N2.forEach(s),Or=c(l),ka=E(l,!1),wa=c(l),je=a(l,"P",{});var Q2=p(je);_c=n(Q2,"\u4E0D\u8981\u7528 body"),Q2.forEach(s),Pr=c(l),ss=a(l,"H3",{id:!0});var V2=p(ss);ze=a(V2,"A",{href:!0});var W2=p(ze);mc=n(W2,"margin"),W2.forEach(s),V2.forEach(s),Ir=c(l),Je=a(l,"P",{});var j2=p(Je);Cc=n(j2,"\u5916\u8FB9\u8DDD"),j2.forEach(s),Tr=c(l),es=a(l,"H4",{id:!0});var z2=p(es);Ze=a(z2,"A",{href:!0});var J2=p(Ze);hc=n(J2,"collapsing margins"),J2.forEach(s),z2.forEach(s),Mr=c(l),Ye=a(l,"UL",{});var Z2=p(Ye);$a=a(Z2,"LI",{});var Y2=p($a);bc=n(Y2,"\u5F53\u4E24\u5143\u7D20\u7684 margin \u91CD\u5408\u65F6\uFF0C\u5927\u7684\u4F1A\u8986\u76D6\u5C0F\u7684"),Y2.forEach(s),Z2.forEach(s),Ur=c(l),ts=a(l,"H3",{id:!0});var X2=p(ts);Xe=a(X2,"A",{href:!0});var g2=p(Xe);Bc=n(g2,"Dimensions"),g2.forEach(s),X2.forEach(s),Gr=c(l),os=a(l,"H4",{id:!0});var lE=p(os);ge=a(lE,"A",{href:!0});var sE=p(ge);kc=n(sE,"width"),sE.forEach(s),lE.forEach(s),qr=c(l),lt=a(l,"UL",{});var eE=p(lt);Sa=a(eE,"LI",{});var tE=p(Sa);wc=n(tE,"percentage: percentage of the width of the parents containers"),tE.forEach(s),eE.forEach(s),Rr=c(l),as=a(l,"H2",{id:!0});var oE=p(as);st=a(oE,"A",{href:!0});var aE=p(st);$c=n(aE,"position"),aE.forEach(s),oE.forEach(s),Nr=c(l),et=a(l,"P",{});var pE=p(et);b(ps.$$.fragment,pE),pE.forEach(s),Kr=c(l),rs=a(l,"H3",{id:!0});var rE=p(rs);tt=a(rE,"A",{href:!0});var iE=p(tt);Sc=n(iE,"Normal Flow"),iE.forEach(s),rE.forEach(s),Qr=c(l),ot=a(l,"UL",{});var nE=p(ot);xa=a(nE,"LI",{});var FE=p(xa);xc=n(FE,"\u9ED8\u8BA4\u72B6\u6001"),FE.forEach(s),nE.forEach(s),Vr=c(l),is=a(l,"H3",{id:!0});var cE=p(is);at=a(cE,"A",{href:!0});var fE=p(at);Lc=n(fE,"Absolute Position"),fE.forEach(s),cE.forEach(s),Wr=c(l),C=a(l,"UL",{});var sl=p(C);La=a(sl,"LI",{});var dE=p(La);Hc=n(dE,"\u7EDD\u5BF9\u4F4D\u7F6E"),dE.forEach(s),Ac=c(sl),Ha=a(sl,"LI",{});var vE=p(Ha);Oc=n(vE,"\u5E38\u7528\u4E8E\u4E00\u4E9B\u5C0F\u5143\u7D20"),vE.forEach(s),Pc=c(sl),pt=a(sl,"LI",{});var Af=p(pt);Ic=n(Af,"parent elements/containers should set to "),Aa=a(Af,"CODE",{});var EE=p(Aa);Tc=n(EE,"relative"),EE.forEach(s),Af.forEach(s),Mc=c(sl),Oa=a(sl,"LI",{});var yE=p(Oa);Uc=n(yE,"\u53D6\u51B3\u4E8E\u6700\u8FD1\u5C42\u6B21\u7684 relative parent elements/containers"),yE.forEach(s),sl.forEach(s),jr=c(l),rt=a(l,"P",{});var DE=p(rt);b(ns.$$.fragment,DE),DE.forEach(s),zr=c(l),Fs=a(l,"H3",{id:!0});var uE=p(Fs);it=a(uE,"A",{href:!0});var _E=p(it);Gc=n(_E,"centering page"),_E.forEach(s),uE.forEach(s),Jr=c(l),m=a(l,"P",{});var V=p(m);qc=n(V,"use the "),Pa=a(V,"CODE",{});var mE=p(Pa);Rc=n(mE,"<div>"),mE.forEach(s),Nc=n(V," element to create a container class, then set the "),Ia=a(V,"CODE",{});var CE=p(Ia);Kc=n(CE,"margin-left"),CE.forEach(s),Qc=n(V," and "),Ta=a(V,"CODE",{});var hE=p(Ta);Vc=n(hE,"margin-right"),hE.forEach(s),Wc=n(V," to "),Ma=a(V,"CODE",{});var bE=p(Ma);jc=n(bE,"auto"),bE.forEach(s),V.forEach(s),Zr=c(l),Ua=E(l,!1),Ga=c(l),cs=a(l,"H2",{id:!0});var BE=p(cs);nt=a(BE,"A",{href:!0});var kE=p(nt);zc=n(kE,"\u57FA\u672C\u64CD\u4F5C"),kE.forEach(s),BE.forEach(s),Yr=c(l),fs=a(l,"H3",{id:!0});var wE=p(fs);Ft=a(wE,"A",{href:!0});var $E=p(Ft);Jc=n($E,"CSS \u6CE8\u91CA"),$E.forEach(s),wE.forEach(s),Xr=c(l),R=a(l,"UL",{});var bt=p(R);qa=a(bt,"LI",{});var SE=p(qa);Ra=a(SE,"CODE",{});var xE=p(Ra);Zc=n(xE,"/*\u9700\u8981\u6CE8\u91CA\u7684\u5185\u5BB9*/"),xE.forEach(s),SE.forEach(s),Yc=c(bt),Q=a(bt,"LI",{});var Bt=p(Q);Xc=n(Bt,"VS code \u5FEB\u6377\u952E :"),Na=a(Bt,"CODE",{});var LE=p(Na);gc=n(LE,"CMD+/"),LE.forEach(s),lf=n(Bt," (mac) "),Ka=a(Bt,"CODE",{});var HE=p(Ka);sf=n(HE,"Control+/"),HE.forEach(s),ef=n(Bt," (win)"),Bt.forEach(s),tf=c(bt),ct=a(bt,"LI",{});var Of=p(ct);of=n(Of,"\u8C03\u51FA\u5F00\u53D1\u8005\u5DE5\u5177"),Qa=a(Of,"CODE",{});var AE=p(Qa);af=n(AE,"cmd+i"),AE.forEach(s),Of.forEach(s),bt.forEach(s),gr=c(l),ds=a(l,"H3",{id:!0});var OE=p(ds);ft=a(OE,"A",{href:!0});var PE=p(ft);pf=n(PE,"Fix bugs"),PE.forEach(s),OE.forEach(s),li=c(l),X=a(l,"UL",{});var ni=p(X);vs=a(ni,"LI",{});var Fi=p(vs);Va=a(Fi,"P",{});var IE=p(Va);rf=n(IE,"\u65B9\u6CD5\uFF1A"),IE.forEach(s),nf=c(Fi),x=a(Fi,"UL",{});var el=p(x);Wa=a(el,"LI",{});var TE=p(Wa);ja=a(TE,"STRONG",{});var ME=p(ja);Ff=n(ME,"inspect"),ME.forEach(s),TE.forEach(s),cf=c(el),za=a(el,"LI",{});var UE=p(za);ff=n(UE,"\u68C0\u67E5\u521A\u5F00\u59CB\u53D8\u5F97\u4E0D\u4E00\u6837\u7684\u5730\u65B9"),UE.forEach(s),df=c(el),Ja=a(el,"LI",{});var GE=p(Ja);vf=n(GE,"\u5982\u679C\u6709\u5F88\u591A selector\uFF0C\u590D\u6742\u7684\u90A3\u4E2A\u4F1A\u88AB\u9996\u5148\u5E94\u7528"),GE.forEach(s),Ef=c(el),Za=a(el,"LI",{});var qE=p(Za);yf=n(qE,"\u68C0\u67E5 css \u6587\u4EF6\u5F15\u7528\u94FE\u63A5\u662F\u5426\u6B63\u786E"),qE.forEach(s),el.forEach(s),Fi.forEach(s),Df=c(ni),Es=a(ni,"LI",{});var ci=p(Es);dt=a(ci,"P",{});var Pf=p(dt);uf=n(Pf,`\u5DE5\u5177\uFF1A
HTML \u6821\u5BF9\u5668:
`),g=a(Pf,"A",{href:!0,rel:!0,target:!0});var RE=p(g);_f=n(RE,"Markup Validation Service"),RE.forEach(s),Pf.forEach(s),mf=c(ci),vt=a(ci,"P",{});var If=p(vt);Cf=n(If,`\u4EE3\u7801\u6BD4\u5BF9:
`),ll=a(If,"A",{href:!0,rel:!0,target:!0});var NE=p(ll);hf=n(NE,"Diffchecker"),NE.forEach(s),If.forEach(s),ci.forEach(s),ni.forEach(s),this.h()},h(){f(_,"href","https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/"),f(_,"rel","nofollow noopener noreferrer external"),f(_,"target","_blank"),f(_s,"href","#css-\u662F\u4EC0\u4E48"),f(tl,"id","css-\u662F\u4EC0\u4E48"),f(ms,"href","#\u5206\u7C7B"),f(al,"id","\u5206\u7C7B"),f(Cs,"href","#inline-css"),f(pl,"id","inline-css"),Ht.a=At,f(bs,"href","#internal-css"),f(rl,"id","internal-css"),Tt.a=Mt,f(ks,"href","#external-css"),f(il,"id","external-css"),Nt.a=Kt,f(z,"href","https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link#attr-rel"),f(z,"rel","nofollow noopener noreferrer external"),f(z,"target","_blank"),f($s,"href","#\u7EC4\u6210"),f(nl,"id","\u7EC4\u6210"),f(xs,"href","#selectors"),f(cl,"id","selectors"),f(Ls,"href","#descendent-selector"),f(fl,"id","descendent-selector"),Vt.a=Wt,f(Hs,"href","#line-selector"),f(dl,"id","line-selector"),jt.a=zt,f(Os,"href","#id"),f(vl,"id","id"),Zt.a=Yt,Xt.a=gt,f(Ms,"href","#class-attributes"),f(El,"id","class-attributes"),so.a=eo,to.a=oo,po.a=ro,io.a=no,f(Qs,"href","#universal-selector"),f(yl,"id","universal-selector"),vo.a=Eo,f(Vs,"href","#body"),f(Dl,"id","body"),f(Ws,"href","#\u4F18\u5148\u7EA7"),f(_l,"id","\u4F18\u5148\u7EA7"),f(js,"href","#conflicting-between-selectors"),f(ml,"id","conflicting-between-selectors"),Ho.a=Ao,f(Ys,"href","#inheritance"),f(hl,"id","inheritance"),f(Xs,"href","#\u989C\u8272"),f(bl,"id","\u989C\u8272"),f(gs,"href","#rgbrgba"),f(Bl,"id","rgbrgba"),f(te,"href","#hexadecimal-colors"),f(kl,"id","hexadecimal-colors"),f(ae,"href","#pseudo-class"),f($l,"id","pseudo-class"),f(re,"href","#\u7B2C\u4E00\u4E2A\u5143\u7D20\u6700\u540E\u4E00\u4E2A\u5143\u7D20"),f(Sl,"id","\u7B2C\u4E00\u4E2A\u5143\u7D20\u6700\u540E\u4E00\u4E2A\u5143\u7D20"),Qo.a=Vo,f(ie,"href","#\u5947\u6570\u5076\u6570-\u7279\u5B9A\u6B21\u5E8F"),f(xl,"id","\u5947\u6570\u5076\u6570-\u7279\u5B9A\u6B21\u5E8F"),Wo.a=jo,f(ne,"href","#\u591A\u79CD\u5143\u7D20\u65F6"),f(Ll,"id","\u591A\u79CD\u5143\u7D20\u65F6"),Yo.a=Xo,go.a=la,f(Fe,"href","#style-hyperlinks"),f(Al,"id","style-hyperlinks"),f(fe,"href","#link"),f(Ol,"id","link"),sa.a=ea,f(ve,"href","#visited"),f(Pl,"id","visited"),ta.a=oa,f(ye,"href","#hover"),f(Il,"id","hover"),aa.a=pa,f(ue,"href","#active"),f(Tl,"id","active"),ra.a=ia,f(me,"href","#pseudo-elements"),f(Ml,"id","pseudo-elements"),Fa.a=ca,fa.a=da,f(Be,"href","#adjacent-sibiling-selector"),f(Ul,"id","adjacent-sibiling-selector"),va.a=Ea,f($e,"href","#after"),f(Gl,"id","after"),ua.a=_a,f(Le,"href","#before"),f(Rl,"id","before"),Ca.a=ha,f(Ae,"href","#box-model"),f(Nl,"id","box-model"),f(Te,"href","#type-of-boxes"),f(Wl,"id","type-of-boxes"),f(Me,"href","#inline-boxes"),f(jl,"id","inline-boxes"),f(Ge,"href","#block-level-boxes"),f(Jl,"id","block-level-boxes"),f(Re,"href","#inline-block-boxes"),f(Yl,"id","inline-block-boxes"),f(Qe,"href","#padding"),f(gl,"id","padding"),ba.a=Ba,f(We,"href","#reset-margin-ane-padding"),f(ls,"id","reset-margin-ane-padding"),ka.a=wa,f(ze,"href","#margin"),f(ss,"id","margin"),f(Ze,"href","#collapsing-margins"),f(es,"id","collapsing-margins"),f(Xe,"href","#dimensions"),f(ts,"id","dimensions"),f(ge,"href","#width"),f(os,"id","width"),f(st,"href","#position"),f(as,"id","position"),f(tt,"href","#normal-flow"),f(rs,"id","normal-flow"),f(at,"href","#absolute-position"),f(is,"id","absolute-position"),f(it,"href","#centering-page"),f(Fs,"id","centering-page"),Ua.a=Ga,f(nt,"href","#\u57FA\u672C\u64CD\u4F5C"),f(cs,"id","\u57FA\u672C\u64CD\u4F5C"),f(Ft,"href","#css-\u6CE8\u91CA"),f(fs,"id","css-\u6CE8\u91CA"),f(ft,"href","#fix-bugs"),f(ds,"id","fix-bugs"),f(g,"href","https://validator.w3.org/"),f(g,"rel","nofollow noopener noreferrer external"),f(g,"target","_blank"),f(ll,"href","https://www.diffchecker.com/"),f(ll,"rel","nofollow noopener noreferrer external"),f(ll,"target","_blank")},m(l,t){r(l,D,t),e(D,H),r(l,A,t),r(l,S,t),e(S,u),e(S,_),e(_,us),r(l,ga,t),r(l,tl,t),e(tl,_s),e(_s,fi),r(l,lp,t),r(l,O,t),e(O,P),e(P,kt),e(kt,di),e(P,vi),e(P,wt),e(wt,Ei),e(P,yi),e(P,$t),e($t,Di),e(P,ui),e(O,_i),e(O,W),e(W,mi),e(W,St),e(St,Ci),e(W,hi),e(W,xt),e(xt,bi),e(O,Bi),e(O,ol),e(ol,ki),e(ol,Lt),e(Lt,wi),e(ol,$i),r(l,sp,t),r(l,al,t),e(al,ms),e(ms,Si),r(l,ep,t),r(l,pl,t),e(pl,Cs),e(Cs,xi),r(l,tp,t),Ht.m(WE,l,t),r(l,At,t),r(l,hs,t),e(hs,Ot),e(Ot,Li),r(l,op,t),r(l,rl,t),e(rl,bs),e(bs,Hi),r(l,ap,t),r(l,I,t),e(I,Ai),e(I,Pt),e(Pt,Oi),e(I,Pi),e(I,It),e(It,Ii),e(I,Ti),r(l,pp,t),Tt.m(jE,l,t),r(l,Mt,t),r(l,Bs,t),e(Bs,Ut),e(Ut,Mi),r(l,rp,t),r(l,il,t),e(il,ks),e(ks,Ui),r(l,ip,t),r(l,j,t),e(j,ws),e(ws,Gi),e(ws,Gt),e(Gt,qi),e(j,Ri),e(j,N),e(N,Ni),e(N,qt),e(qt,Ki),e(N,Qi),e(N,Rt),e(Rt,Vi),e(N,Wi),r(l,np,t),Nt.m(zE,l,t),r(l,Kt,t),r(l,K,t),e(K,ji),e(K,Qt),e(Qt,zi),e(K,Ji),e(K,z),e(z,Zi),r(l,Fp,t),r(l,nl,t),e(nl,$s),e($s,Yi),r(l,cp,t),r(l,Ss,t),B(Fl,Ss,null),r(l,fp,t),r(l,cl,t),e(cl,xs),e(xs,Xi),r(l,dp,t),r(l,fl,t),e(fl,Ls),e(Ls,gi),r(l,vp,t),Vt.m(JE,l,t),r(l,Wt,t),r(l,dl,t),e(dl,Hs),e(Hs,ln),r(l,Ep,t),jt.m(ZE,l,t),r(l,zt,t),r(l,As,t),e(As,sn),r(l,yp,t),r(l,vl,t),e(vl,Os),e(Os,en),r(l,Dp,t),r(l,Ps,t),e(Ps,Jt),e(Jt,tn),r(l,up,t),r(l,Is,t),e(Is,on),r(l,_p,t),Zt.m(YE,l,t),r(l,Yt,t),r(l,Ts,t),e(Ts,an),r(l,mp,t),Xt.m(XE,l,t),r(l,gt,t),r(l,El,t),e(El,Ms),e(Ms,pn),r(l,Cp,t),r(l,Us,t),e(Us,lo),e(lo,rn),r(l,hp,t),r(l,Gs,t),e(Gs,nn),r(l,bp,t),so.m(gE,l,t),r(l,eo,t),r(l,qs,t),e(qs,Fn),r(l,Bp,t),to.m(ly,l,t),r(l,oo,t),r(l,Rs,t),e(Rs,ao),e(ao,cn),r(l,kp,t),r(l,Ns,t),e(Ns,fn),r(l,wp,t),po.m(sy,l,t),r(l,ro,t),r(l,Ks,t),e(Ks,dn),r(l,$p,t),io.m(ey,l,t),r(l,no,t),r(l,yl,t),e(yl,Qs),e(Qs,vn),r(l,Sp,t),r(l,T,t),e(T,Fo),e(Fo,En),e(T,yn),e(T,co),e(co,Dn),e(T,un),e(T,fo),e(fo,_n),r(l,xp,t),vo.m(ty,l,t),r(l,Eo,t),r(l,Dl,t),e(Dl,Vs),e(Vs,mn),r(l,Lp,t),r(l,M,t),e(M,ul),e(ul,Cn),e(ul,yo),e(yo,hn),e(ul,bn),e(M,Bn),e(M,d),e(d,kn),e(d,Do),e(Do,wn),e(d,$n),e(d,uo),e(uo,Sn),e(d,xn),e(d,_o),e(_o,Ln),e(d,Hn),e(d,mo),e(mo,An),e(d,On),e(d,Co),e(Co,Pn),e(d,In),e(d,ho),e(ho,Tn),e(d,Mn),e(d,bo),e(bo,Un),e(d,Gn),e(d,Bo),e(Bo,qn),e(d,Rn),e(d,ko),e(ko,Nn),e(d,Kn),e(d,wo),e(wo,Qn),e(d,Vn),e(d,$o),e($o,Wn),e(d,jn),e(d,So),e(So,zn),e(d,Jn),e(M,Zn),e(M,xo),e(xo,Yn),r(l,Hp,t),r(l,_l,t),e(_l,Ws),e(Ws,Xn),r(l,Ap,t),r(l,ml,t),e(ml,js),e(js,gn),r(l,Op,t),r(l,zs,t),B(Cl,zs,null),r(l,Pp,t),r(l,Js,t),e(Js,Zs),e(Zs,lF),e(Zs,Lo),e(Lo,sF),r(l,Ip,t),Ho.m(oy,l,t),r(l,Ao,t),r(l,J,t),e(J,Oo),e(Oo,eF),e(J,tF),e(J,Po),e(Po,oF),r(l,Tp,t),r(l,hl,t),e(hl,Ys),e(Ys,aF),r(l,Mp,t),r(l,U,t),e(U,Io),e(Io,pF),e(U,rF),e(U,To),e(To,iF),e(U,nF),e(U,Mo),e(Mo,FF),r(l,Up,t),r(l,bl,t),e(bl,Xs),e(Xs,cF),r(l,Gp,t),r(l,Bl,t),e(Bl,gs),e(gs,fF),r(l,qp,t),r(l,G,t),e(G,le),e(le,dF),e(le,Uo),e(Uo,vF),e(G,EF),e(G,se),e(se,yF),e(se,Go),e(Go,DF),e(G,uF),e(G,ee),e(ee,_F),e(ee,qo),e(qo,mF),r(l,Rp,t),r(l,kl,t),e(kl,te),e(te,CF),r(l,Np,t),r(l,Z,t),e(Z,oe),e(oe,hF),e(oe,Ro),e(Ro,bF),e(Z,BF),e(Z,wl),e(wl,kF),e(wl,No),e(No,wF),e(wl,$F),r(l,Kp,t),r(l,$l,t),e($l,ae),e(ae,SF),r(l,Qp,t),r(l,pe,t),e(pe,Ko),e(Ko,xF),r(l,Vp,t),r(l,Sl,t),e(Sl,re),e(re,LF),r(l,Wp,t),Qo.m(ay,l,t),r(l,Vo,t),r(l,xl,t),e(xl,ie),e(ie,HF),r(l,jp,t),Wo.m(py,l,t),r(l,jo,t),r(l,Ll,t),e(Ll,ne),e(ne,AF),r(l,zp,t),r(l,q,t),e(q,OF),e(q,zo),e(zo,PF),e(q,IF),e(q,Jo),e(Jo,TF),e(q,MF),r(l,Jp,t),r(l,Hl,t),e(Hl,UF),e(Hl,Zo),e(Zo,GF),r(l,Zp,t),Yo.m(ry,l,t),r(l,Xo,t),go.m(iy,l,t),r(l,la,t),r(l,Al,t),e(Al,Fe),e(Fe,qF),r(l,Yp,t),r(l,ce,t),e(ce,RF),r(l,Xp,t),r(l,Ol,t),e(Ol,fe),e(fe,NF),r(l,gp,t),r(l,de,t),e(de,KF),r(l,lr,t),sa.m(ny,l,t),r(l,ea,t),r(l,Pl,t),e(Pl,ve),e(ve,QF),r(l,sr,t),r(l,Ee,t),e(Ee,VF),r(l,er,t),ta.m(Fy,l,t),r(l,oa,t),r(l,Il,t),e(Il,ye),e(ye,WF),r(l,tr,t),r(l,De,t),e(De,jF),r(l,or,t),aa.m(cy,l,t),r(l,pa,t),r(l,Tl,t),e(Tl,ue),e(ue,zF),r(l,ar,t),r(l,_e,t),e(_e,JF),r(l,pr,t),ra.m(fy,l,t),r(l,ia,t),r(l,Ml,t),e(Ml,me),e(me,ZF),r(l,rr,t),r(l,Ce,t),e(Ce,na),e(na,YF),r(l,ir,t),r(l,he,t),e(he,XF),r(l,nr,t),Fa.m(dy,l,t),r(l,ca,t),r(l,be,t),e(be,gF),r(l,Fr,t),fa.m(vy,l,t),r(l,da,t),r(l,Ul,t),e(Ul,Be),e(Be,lc),r(l,cr,t),r(l,ke,t),e(ke,sc),r(l,fr,t),r(l,we,t),e(we,ec),r(l,dr,t),va.m(Ey,l,t),r(l,Ea,t),r(l,Gl,t),e(Gl,$e),e($e,tc),r(l,vr,t),r(l,Y,t),e(Y,Se),e(Se,oc),e(Se,ya),e(ya,ac),e(Y,pc),e(Y,Da),e(Da,rc),r(l,Er,t),r(l,xe,t),B(ql,xe,null),r(l,yr,t),ua.m(yy,l,t),r(l,_a,t),r(l,Rl,t),e(Rl,Le),e(Le,ic),r(l,Dr,t),r(l,He,t),e(He,ma),e(ma,nc),r(l,ur,t),Ca.m(Dy,l,t),r(l,ha,t),r(l,Nl,t),e(Nl,Ae),e(Ae,Fc),r(l,_r,t),r(l,Oe,t),B(Kl,Oe,null),r(l,mr,t),r(l,Pe,t),B(Ql,Pe,null),r(l,Cr,t),r(l,Ie,t),B(Vl,Ie,null),r(l,hr,t),r(l,Wl,t),e(Wl,Te),e(Te,cc),r(l,br,t),r(l,jl,t),e(jl,Me),e(Me,fc),r(l,Br,t),r(l,Ue,t),B(zl,Ue,null),r(l,kr,t),r(l,Jl,t),e(Jl,Ge),e(Ge,dc),r(l,wr,t),r(l,qe,t),B(Zl,qe,null),r(l,$r,t),r(l,Yl,t),e(Yl,Re),e(Re,vc),r(l,Sr,t),r(l,Ne,t),B(Xl,Ne,null),r(l,xr,t),r(l,Ke,t),e(Ke,Ec),r(l,Lr,t),r(l,gl,t),e(gl,Qe),e(Qe,yc),r(l,Hr,t),r(l,Ve,t),e(Ve,Dc),r(l,Ar,t),ba.m(uy,l,t),r(l,Ba,t),r(l,ls,t),e(ls,We),e(We,uc),r(l,Or,t),ka.m(_y,l,t),r(l,wa,t),r(l,je,t),e(je,_c),r(l,Pr,t),r(l,ss,t),e(ss,ze),e(ze,mc),r(l,Ir,t),r(l,Je,t),e(Je,Cc),r(l,Tr,t),r(l,es,t),e(es,Ze),e(Ze,hc),r(l,Mr,t),r(l,Ye,t),e(Ye,$a),e($a,bc),r(l,Ur,t),r(l,ts,t),e(ts,Xe),e(Xe,Bc),r(l,Gr,t),r(l,os,t),e(os,ge),e(ge,kc),r(l,qr,t),r(l,lt,t),e(lt,Sa),e(Sa,wc),r(l,Rr,t),r(l,as,t),e(as,st),e(st,$c),r(l,Nr,t),r(l,et,t),B(ps,et,null),r(l,Kr,t),r(l,rs,t),e(rs,tt),e(tt,Sc),r(l,Qr,t),r(l,ot,t),e(ot,xa),e(xa,xc),r(l,Vr,t),r(l,is,t),e(is,at),e(at,Lc),r(l,Wr,t),r(l,C,t),e(C,La),e(La,Hc),e(C,Ac),e(C,Ha),e(Ha,Oc),e(C,Pc),e(C,pt),e(pt,Ic),e(pt,Aa),e(Aa,Tc),e(C,Mc),e(C,Oa),e(Oa,Uc),r(l,jr,t),r(l,rt,t),B(ns,rt,null),r(l,zr,t),r(l,Fs,t),e(Fs,it),e(it,Gc),r(l,Jr,t),r(l,m,t),e(m,qc),e(m,Pa),e(Pa,Rc),e(m,Nc),e(m,Ia),e(Ia,Kc),e(m,Qc),e(m,Ta),e(Ta,Vc),e(m,Wc),e(m,Ma),e(Ma,jc),r(l,Zr,t),Ua.m(my,l,t),r(l,Ga,t),r(l,cs,t),e(cs,nt),e(nt,zc),r(l,Yr,t),r(l,fs,t),e(fs,Ft),e(Ft,Jc),r(l,Xr,t),r(l,R,t),e(R,qa),e(qa,Ra),e(Ra,Zc),e(R,Yc),e(R,Q),e(Q,Xc),e(Q,Na),e(Na,gc),e(Q,lf),e(Q,Ka),e(Ka,sf),e(Q,ef),e(R,tf),e(R,ct),e(ct,of),e(ct,Qa),e(Qa,af),r(l,gr,t),r(l,ds,t),e(ds,ft),e(ft,pf),r(l,li,t),r(l,X,t),e(X,vs),e(vs,Va),e(Va,rf),e(vs,nf),e(vs,x),e(x,Wa),e(Wa,ja),e(ja,Ff),e(x,cf),e(x,za),e(za,ff),e(x,df),e(x,Ja),e(Ja,vf),e(x,Ef),e(x,Za),e(Za,yf),e(X,Df),e(X,Es),e(Es,dt),e(dt,uf),e(dt,g),e(g,_f),e(Es,mf),e(Es,vt),e(vt,Cf),e(vt,ll),e(ll,hf),si=!0},p:ky,i(l){si||(k(Fl.$$.fragment,l),k(Cl.$$.fragment,l),k(ql.$$.fragment,l),k(Kl.$$.fragment,l),k(Ql.$$.fragment,l),k(Vl.$$.fragment,l),k(zl.$$.fragment,l),k(Zl.$$.fragment,l),k(Xl.$$.fragment,l),k(ps.$$.fragment,l),k(ns.$$.fragment,l),si=!0)},o(l){w(Fl.$$.fragment,l),w(Cl.$$.fragment,l),w(ql.$$.fragment,l),w(Kl.$$.fragment,l),w(Ql.$$.fragment,l),w(Vl.$$.fragment,l),w(zl.$$.fragment,l),w(Zl.$$.fragment,l),w(Xl.$$.fragment,l),w(ps.$$.fragment,l),w(ns.$$.fragment,l),si=!1},d(l){l&&s(D),l&&s(A),l&&s(S),l&&s(ga),l&&s(tl),l&&s(lp),l&&s(O),l&&s(sp),l&&s(al),l&&s(ep),l&&s(pl),l&&s(tp),l&&Ht.d(),l&&s(At),l&&s(hs),l&&s(op),l&&s(rl),l&&s(ap),l&&s(I),l&&s(pp),l&&Tt.d(),l&&s(Mt),l&&s(Bs),l&&s(rp),l&&s(il),l&&s(ip),l&&s(j),l&&s(np),l&&Nt.d(),l&&s(Kt),l&&s(K),l&&s(Fp),l&&s(nl),l&&s(cp),l&&s(Ss),$(Fl),l&&s(fp),l&&s(cl),l&&s(dp),l&&s(fl),l&&s(vp),l&&Vt.d(),l&&s(Wt),l&&s(dl),l&&s(Ep),l&&jt.d(),l&&s(zt),l&&s(As),l&&s(yp),l&&s(vl),l&&s(Dp),l&&s(Ps),l&&s(up),l&&s(Is),l&&s(_p),l&&Zt.d(),l&&s(Yt),l&&s(Ts),l&&s(mp),l&&Xt.d(),l&&s(gt),l&&s(El),l&&s(Cp),l&&s(Us),l&&s(hp),l&&s(Gs),l&&s(bp),l&&so.d(),l&&s(eo),l&&s(qs),l&&s(Bp),l&&to.d(),l&&s(oo),l&&s(Rs),l&&s(kp),l&&s(Ns),l&&s(wp),l&&po.d(),l&&s(ro),l&&s(Ks),l&&s($p),l&&io.d(),l&&s(no),l&&s(yl),l&&s(Sp),l&&s(T),l&&s(xp),l&&vo.d(),l&&s(Eo),l&&s(Dl),l&&s(Lp),l&&s(M),l&&s(Hp),l&&s(_l),l&&s(Ap),l&&s(ml),l&&s(Op),l&&s(zs),$(Cl),l&&s(Pp),l&&s(Js),l&&s(Ip),l&&Ho.d(),l&&s(Ao),l&&s(J),l&&s(Tp),l&&s(hl),l&&s(Mp),l&&s(U),l&&s(Up),l&&s(bl),l&&s(Gp),l&&s(Bl),l&&s(qp),l&&s(G),l&&s(Rp),l&&s(kl),l&&s(Np),l&&s(Z),l&&s(Kp),l&&s($l),l&&s(Qp),l&&s(pe),l&&s(Vp),l&&s(Sl),l&&s(Wp),l&&Qo.d(),l&&s(Vo),l&&s(xl),l&&s(jp),l&&Wo.d(),l&&s(jo),l&&s(Ll),l&&s(zp),l&&s(q),l&&s(Jp),l&&s(Hl),l&&s(Zp),l&&Yo.d(),l&&s(Xo),l&&go.d(),l&&s(la),l&&s(Al),l&&s(Yp),l&&s(ce),l&&s(Xp),l&&s(Ol),l&&s(gp),l&&s(de),l&&s(lr),l&&sa.d(),l&&s(ea),l&&s(Pl),l&&s(sr),l&&s(Ee),l&&s(er),l&&ta.d(),l&&s(oa),l&&s(Il),l&&s(tr),l&&s(De),l&&s(or),l&&aa.d(),l&&s(pa),l&&s(Tl),l&&s(ar),l&&s(_e),l&&s(pr),l&&ra.d(),l&&s(ia),l&&s(Ml),l&&s(rr),l&&s(Ce),l&&s(ir),l&&s(he),l&&s(nr),l&&Fa.d(),l&&s(ca),l&&s(be),l&&s(Fr),l&&fa.d(),l&&s(da),l&&s(Ul),l&&s(cr),l&&s(ke),l&&s(fr),l&&s(we),l&&s(dr),l&&va.d(),l&&s(Ea),l&&s(Gl),l&&s(vr),l&&s(Y),l&&s(Er),l&&s(xe),$(ql),l&&s(yr),l&&ua.d(),l&&s(_a),l&&s(Rl),l&&s(Dr),l&&s(He),l&&s(ur),l&&Ca.d(),l&&s(ha),l&&s(Nl),l&&s(_r),l&&s(Oe),$(Kl),l&&s(mr),l&&s(Pe),$(Ql),l&&s(Cr),l&&s(Ie),$(Vl),l&&s(hr),l&&s(Wl),l&&s(br),l&&s(jl),l&&s(Br),l&&s(Ue),$(zl),l&&s(kr),l&&s(Jl),l&&s(wr),l&&s(qe),$(Zl),l&&s($r),l&&s(Yl),l&&s(Sr),l&&s(Ne),$(Xl),l&&s(xr),l&&s(Ke),l&&s(Lr),l&&s(gl),l&&s(Hr),l&&s(Ve),l&&s(Ar),l&&ba.d(),l&&s(Ba),l&&s(ls),l&&s(Or),l&&ka.d(),l&&s(wa),l&&s(je),l&&s(Pr),l&&s(ss),l&&s(Ir),l&&s(Je),l&&s(Tr),l&&s(es),l&&s(Mr),l&&s(Ye),l&&s(Ur),l&&s(ts),l&&s(Gr),l&&s(os),l&&s(qr),l&&s(lt),l&&s(Rr),l&&s(as),l&&s(Nr),l&&s(et),$(ps),l&&s(Kr),l&&s(rs),l&&s(Qr),l&&s(ot),l&&s(Vr),l&&s(is),l&&s(Wr),l&&s(C),l&&s(jr),l&&s(rt),$(ns),l&&s(zr),l&&s(Fs),l&&s(Jr),l&&s(m),l&&s(Zr),l&&Ua.d(),l&&s(Ga),l&&s(cs),l&&s(Yr),l&&s(fs),l&&s(Xr),l&&s(R),l&&s(gr),l&&s(ds),l&&s(li),l&&s(X)}}}function Sy(Ds){let D,H;const A=[Ds[0],VE];let S={$$slots:{default:[$y]},$$scope:{ctx:Ds}};for(let u=0;u<A.length;u+=1)S=Tf(S,A[u]);return D=new wy({props:S}),{c(){h(D.$$.fragment)},l(u){b(D.$$.fragment,u)},m(u,_){B(D,u,_),H=!0},p(u,[_]){const us=_&1?By(A,[_&1&&KE(u[0]),_&0&&KE(VE)]):{};_&2&&(us.$$scope={dirty:_,ctx:u}),D.$set(us)},i(u){H||(k(D.$$.fragment,u),H=!0)},o(u){w(D.$$.fragment,u),H=!1},d(u){$(D,u)}}}const VE={title:"CSS \xB7 \u57FA\u7840\u7B14\u8BB0",created:"2021-12-06T03:59:47.000Z",slug:"/css-fundamental.md",tags:["CSS"],lastmod:"2022-05-07T05:30:27.910Z",path:"/css-fundamental",toc:[{depth:2,title:"css \u662F\u4EC0\u4E48",slug:"css-\u662F\u4EC0\u4E48"},{depth:2,title:"\u5206\u7C7B",slug:"\u5206\u7C7B"},{depth:3,title:"inline CSS",slug:"inline-css"},{depth:3,title:"internal CSS",slug:"internal-css"},{depth:3,title:"external CSS",slug:"external-css"},{depth:2,title:"\u7EC4\u6210",slug:"\u7EC4\u6210"},{depth:2,title:"Selectors",slug:"selectors"},{depth:3,title:"descendent selector",slug:"descendent-selector"},{depth:3,title:"line selector",slug:"line-selector"},{depth:2,title:"id",slug:"id"},{depth:3,title:"class attributes",slug:"class-attributes"},{depth:3,title:"universal selector",slug:"universal-selector"},{depth:3,title:"body",slug:"body"},{depth:3,title:"\u4F18\u5148\u7EA7",slug:"\u4F18\u5148\u7EA7"},{depth:4,title:"conflicting between selectors",slug:"conflicting-between-selectors"},{depth:4,title:"inheritance",slug:"inheritance"},{depth:2,title:"\u989C\u8272",slug:"\u989C\u8272"},{depth:3,title:"RGB/RGBA",slug:"rgbrgba"},{depth:2,title:"Hexadecimal Colors",slug:"hexadecimal-colors"},{depth:2,title:"Pseudo Class",slug:"pseudo-class"},{depth:3,title:"\u7B2C\u4E00\u4E2A\u5143\u7D20/\u6700\u540E\u4E00\u4E2A\u5143\u7D20",slug:"\u7B2C\u4E00\u4E2A\u5143\u7D20\u6700\u540E\u4E00\u4E2A\u5143\u7D20"},{depth:3,title:"\u5947\u6570/\u5076\u6570 /\u7279\u5B9A\u6B21\u5E8F",slug:"\u5947\u6570\u5076\u6570-\u7279\u5B9A\u6B21\u5E8F"},{depth:3,title:"\u591A\u79CD\u5143\u7D20\u65F6",slug:"\u591A\u79CD\u5143\u7D20\u65F6"},{depth:3,title:"Style hyperlinks",slug:"style-hyperlinks"},{depth:4,title:"link",slug:"link"},{depth:4,title:"visited",slug:"visited"},{depth:4,title:"hover",slug:"hover"},{depth:4,title:"active",slug:"active"},{depth:2,title:"Pseudo Elements",slug:"pseudo-elements"},{depth:3,title:"adjacent sibiling selector",slug:"adjacent-sibiling-selector"},{depth:3,title:"after",slug:"after"},{depth:3,title:"before",slug:"before"},{depth:2,title:"Box Model",slug:"box-model"},{depth:3,title:"Type of boxes:",slug:"type-of-boxes"},{depth:4,title:"inline boxes",slug:"inline-boxes"},{depth:4,title:"block-level boxes",slug:"block-level-boxes"},{depth:4,title:"inline-block boxes",slug:"inline-block-boxes"},{depth:3,title:"padding",slug:"padding"},{depth:4,title:"reset margin ane padding",slug:"reset-margin-ane-padding"},{depth:3,title:"margin",slug:"margin"},{depth:4,title:"collapsing margins",slug:"collapsing-margins"},{depth:3,title:"Dimensions",slug:"dimensions"},{depth:4,title:"width",slug:"width"},{depth:2,title:"position",slug:"position"},{depth:3,title:"Normal Flow",slug:"normal-flow"},{depth:3,title:"Absolute Position",slug:"absolute-position"},{depth:3,title:"centering page",slug:"centering-page"},{depth:2,title:"\u57FA\u672C\u64CD\u4F5C",slug:"\u57FA\u672C\u64CD\u4F5C"},{depth:3,title:"CSS \u6CE8\u91CA",slug:"css-\u6CE8\u91CA"},{depth:3,title:"Fix bugs",slug:"fix-bugs"}],updated:"2022-08-06T10:49:56.359Z"};function xy(Ds,D,H){return Ds.$$set=A=>{H(0,D=Tf(Tf({},D),QE(A)))},D=QE(D),[D]}class qy extends Cy{constructor(D){super(),hy(this,D,xy,Sy,by,{})}}export{qy as default,VE as metadata};