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=`html
<p style="color:blue">text</p>
`,At,hs,Ot,Li,op,rl,bs,Hi,ap,I,Ai,Pt,Oi,Pi,It,Ii,Ti,pp,Tt,jE=`html
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
`,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=`html
<head>
<link href="style.css" ref="stylesheet" />
</head>
`,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=`css
footer p {
font-family: sans;
}
article header p {
color: blue;
}
`,Wt,dl,Hs,ln,Ep,jt,ZE=`css
`,zt,As,sn,yp,vl,Os,en,Dp,Ps,Jt,tn,up,Is,on,_p,Zt,YE=`html
`,Yt,Ts,an,mp,Xt,XE=`css
#author {
font-family: sans;
}
`,gt,El,Ms,pn,Cp,Us,lo,rn,hp,Gs,nn,bp,so,gE=`html
<p class="author">text</p>
`,eo,qs,Fn,Bp,to,ly=`css
.author {
font-family: sans;
}
`,oo,Rs,ao,cn,kp,Ns,fn,wp,po,sy=`html
<p class="author">text</p>
`,ro,Ks,dn,$p,io,ey=`css
.author {
font-family: sans;
}
`,no,yl,Qs,vn,Sp,T,Fo,En,yn,co,Dn,un,fo,_n,xp,vo,ty=`css
`,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=`css
foot p {
color: green !important;
}
`,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=`css
li:first-child {
font-weight: bold;
}
li:last-child {
font-style: italic;
}
`,Vo,xl,ie,HF,jp,Wo,py=`css
li:nth-child(odd) {
font-style: italic;
}
li:nth-child(even) {
font-style: italic;
}
li:nth-child(3) {
font-style: italic;
}
`,jo,Ll,ne,AF,zp,q,OF,zo,PF,IF,Jo,TF,MF,Jp,Hl,UF,Zo,GF,Zp,Yo,ry=`html
<article>
<head></head>
<p></p>
</article>
`,Xo,go,iy=`css
article p:fist-child {
font-family: sans;
}
`,la,Al,Fe,qF,Yp,ce,RF,Xp,Ol,fe,NF,gp,de,KF,lr,sa,ny=`css
a:link {
color: #1098ad;
}
`,ea,Pl,ve,QF,sr,Ee,VF,er,ta,Fy=`css
a:visited {
color: #777;
}
`,oa,Il,ye,WF,tr,De,jF,or,aa,cy=`css
a:hover {
color: orangered;
font-weight: bold;
text-decoration: underline dotted orangered;
}
`,pa,Tl,ue,zF,ar,_e,JF,pr,ra,fy=`css
a:active {
background-color: black;
font-style: italic;
}
`,ia,Ml,me,ZF,rr,Ce,na,YF,ir,he,XF,nr,Fa,dy=`css
h1::first-letter {
font-style: normal;
}
`,ca,be,gF,Fr,fa,vy=`css
p::first-line {
color: red;
}
`,da,Ul,Be,lc,cr,ke,sc,fr,we,ec,dr,va,Ey=`css
h3 + p::first-line {
color: red;
}
`,Ea,Gl,$e,tc,vr,Y,Se,oc,ya,ac,pc,Da,rc,Er,xe,ql,yr,ua,yy=`css
h2::after {
content: 'TOP';
font-size: 16px;
font-weight: bold;
color: black;
padding: 5px 15px;
display: inline-block;
position: absolute;
top: -10px;
right: -25px;
background-color: #ffe70e;
}
h2 {
position: relative;
}
`,_a,Rl,Le,ic,Dr,He,ma,nc,ur,Ca,Dy=`css
`,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=`css
padding: \u4E0A\u4E0B \u5DE6\u53F3;
`,Ba,ls,We,uc,Or,ka,_y=`css
* {
margin: 0;
padding: 0;
}
`,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=`css
.container {
width: 800px;
margin: 0 auto;
}
`,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(""),Pi=i("\u91CC\u9762\u7684"),It=o("code"),Ii=i("