What Is CSS

What is CSS?
CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work !ternal Style Sheets are stored in CSS files
CSS Synta!
" CSS r#le has two main $arts% a selector& and one or more declarations%
The selector is normally the HTML element yo# want to style. ach declaration consists of a $ro$erty and a val#e. The $ro$erty is the style attri'#te yo# want to change. ach $ro$erty has a val#e.
CSS !am$le
" CSS declaration always ends with a semicolon& and declaration gro#$s are s#rro#nded 'y c#rly 'rackets%
p {color:red;text-align:center;}
To make the CSS more reada'le& yo# can $#t one declaration on each line& like this%
!am$le p { color:red; text-align:center; }
(ackgro#nd Color
The 'ackgro#nd)color $ro$erty s$ecifies the 'ackgro#nd color of an element.
The 'ackgro#nd color of a $age is defined in the 'ody selector%
!am$le body {background-color:#b0c4de;}
Te!t Color
The color $ro$erty is #sed to set the color of the te!t. With CSS& a color is most often s$ecified 'y% a H * val#e ) like +,ff0000+ an -.( val#e ) like +rg'/011&0&02+ a color name ) like +red+
Look at CSS Color 3al#es for a com$lete list of $ossi'le color val#es. The defa#lt color for a $age is defined in the 'ody selector.
!am$le body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(2 !0!0";}
Set the background color of different elements
<!DOCTYPE html>
<html> <head> <style> h1 { background-color: !"#$ed% & ' { background-color: e())))% & d*+ { background-color: b(c"de% & <,style> <,head> <body>
<h1>C-- background-color e.am'le/<,h1> <d*+> Th*s *s a te.t *ns*de a d*+ element0 <'>Th*s 'aragra'h has *ts o1n background color0<,'> 2e are st*ll *n the d*+ element0 <,d*+> <,body> <,html> All the background properties in one declaration </DOCTYPE html> <html> <head> <style> body { background: )))))) url34*mg5tree0'ng46 no-re'eat r*ght to'% marg*n-r*ght:7(('.% & <,style> <,head> <body> <h1>8ello 2orld/<,h1> <'>9o1 the background *mage *s only sho1n once: and *t *s also 'os*t*oned a1ay )rom the te.t0<,'> <'>;n th*s e.am'le 1e ha+e also added a marg*n on the r*ght s*de: so that the background *mage 1*ll not d*sturb the te.t0<,'> <,body> <,html> Set the text color of different elements </DOCTYPE html> <html> <head> <style> body {color:red%& h1 {color: (())((%& '0e. {color:rgb3(:(:7$$6%& <,style> <,head> <body>
<h1>Th*s *s head*ng 1<,h1> <'>Th*s *s an ord*nary 'aragra'h0 9ot*ce that th*s te.t *s red0 The de)ault te.t-color )or a 'age *s de)*ned *n the body selector0<,'> <' class<=e.=>Th*s *s a 'aragra'h 1*th class<=e.=0 Th*s te.t *s blue0<,'> <,body> <,html> Set the font of a text </DOCTYPE html> <html> <head> <style> '0ser*){)ont-)am*ly:=T*mes 9e1 >oman=:T*mes:ser*)%& '0sansser*){)ont-)am*ly:?r*al:8el+et*ca:sans-ser*)%& <,style> <,head> <body> <h1>C-- )ont-)am*ly<,h1> <' class<=ser*)=>Th*s *s a 'aragra'h: sho1n *n the T*mes 9e1 >oman )ont0<,'> <' class<=sansser*)=>Th*s *s a 'aragra'h: sho1n *n the ?r*al )ont0<,'> <,body> <,html> Specify a background color for links </DOCTYPE html> <html> <head> <style> a:l*nk {background-color: @7AA##%& ,B un+*s*ted l*nk B, a:+*s*ted {background-color: AAAAC$%& ,B +*s*ted l*nk B, a:ho+er {background-color: AAD("D%& ,B mouse o+er l*nk B, a:act*+e {background-color: AAD("D%& ,B selected l*nk B, <,style> <,head> <body> <'><b><a hre)<=de)ault0as'= target<=5blank=>Th*s *s a l*nk<,a><,b><,'> <'><b>9ote:<,b> a:ho+er EF-T come a)ter a:l*nk and a:+*s*ted *n the C-de)*n*t*on *n order to be e))ect*+e0<,'> <'><b>9ote:<,b> a:act*+e EF-T come a)ter a:ho+er *n the C-- de)*n*t*on *n order to be e))ect*+e0<,'> <,body> <,html> Specify a black border for table, th, and td elements </DOCTYPE html> <html>
<head> <style> table:th:td { border:1'. sol*d black% & <,style> <,head> <body> <table> <tr> <th>A*rstname<,th> <th>Gastname<,th> <,tr> <tr> <td>Peter<,td> <td>Hr*))*n<,td> <,tr> <tr> <td>Go*s<,td> <td>Hr*))*n<,td> <,tr> <,table> <,body> <,html> Set the color of the four borders </DOCTYPE html> <html> <head> <style> '0one { border-style:sol*d% border-color: (((())% & '0t1o { border-style:sol*d% border-color: ))(((( (((())% & '0three { border-style:sol*d% border-color: ))(((( (())(( (((())%
& '0)our { border-style:sol*d% border-color: ))(((( (())(( (((()) rgb37$(:(:7$$6% & <,style> <,head> <body> <' class<=one=>One-colored border/<,'> <' class<=t1o=>T1o-colored border/<,'> <' class<=three=>Three-colored border/<,'> <' class<=)our=>Aour-colored border/<,'> <'><b>9ote:<,b> The =border-color= 'ro'erty does not 1ork *) *t *s used alone0 Fse the =border-style= 'ro'erty to set the borders )*rst0<,'> <,body> <,html> Set the style of an outline </DOCTYPE html> <html> <head> <style> ' {border:1'. sol*d red%& '0dotted {outl*ne-style:dotted%& '0dashed {outl*ne-style:dashed%& '0sol*d {outl*ne-style:sol*d%& '0double {outl*ne-style:double%& '0groo+e {outl*ne-style:groo+e%& '0r*dge {outl*ne-style:r*dge%& '0*nset {outl*ne-style:*nset%& '0outset {outl*ne-style:outset%& <,style> <,head> <body> <' class<=dotted=>? dotted outl*ne<,'> <' class<=dashed=>? dashed outl*ne<,'> <' class<=sol*d=>? sol*d outl*ne<,'> <' class<=double=>? double outl*ne<,'> <' class<=groo+e=>? groo+e outl*ne<,'> <' class<=r*dge=>? r*dge outl*ne<,'> <' class<=*nset=>?n *nset outl*ne<,'> <' class<=outset=>?n outset outl*ne<,'> <b>9ote:<,b> ;EC su''orts the outl*ne 'ro'ert*es only *) a /DOCTYPE *s s'ec*)*ed0
<,body> <,html> Set the height of an image using percent </DOCTYPE html> <html> <head> <style> html {he*ght:1((I%& body {he*ght:1((I%& *mg0normal {he*ght:auto%& *mg0b*g {he*ght:"(I%& *mg0small {he*ght:1(I%& <,style> <,head> <body> <*mg class<=normal= src<=logocss0g*)= 1*dth<=#$= he*ght<=C"= ,><br> <*mg class<=b*g= src<=logocss0g*)= 1*dth<=#$= he*ght<=C"= ,><br> <*mg class<=small= src<=logocss0g*)= 1*dth<=#$= he*ght<=C"= ,> <,body> <,html> Creating a homepage without tables </DOCTYPE html> <html> <head> <style> d*+0conta*ner { 1*dth:1((I% marg*n:('.% border:1'. sol*d gray% l*ne-he*ght:1$(I% & d*+0header:d*+0)ooter { 'add*ng:(0$em% color:1h*te% background-color:gray% clear:le)t% & h10header { 'add*ng:(% marg*n:(% &
d*+0le)t { )loat:le)t% 1*dth:1!('.% marg*n:(% 'add*ng:1em% & d*+0content { marg*n-le)t:1#('.% border-le)t:1'. sol*d gray% 'add*ng:1em% & <,style> <,head> <body> <d*+ class<=conta*ner=> <d*+ class<=header=><h1 class<=header=>2J-chools0com<,h1><,d*+> <d*+ class<=le)t=><'>=9e+er *ncrease: beyond 1hat *s necessary: the number o) ent*t*es reKu*red to e.'la*n anyth*ng0= 2*ll*am o) Ockham 317C$-1J"#6<,'><,d*+> <d*+ class<=content=> <h7>Aree 2eb @u*ld*ng Tutor*als<,h7> <'>?t muLammalsad*K0com the 2eb-bu*ld*ng tutor*als you need: )rom bas*c 8TEG and M8TEG to ad+anced MEG: M-G: Eult*med*a and 2?P0<,'> <'> The Gargest 2eb De+elo'ers -*te On The 9et/<,'><,d*+> <d*+ class<=)ooter=>Co'yr*ght 7(1J-7(1" e)snes Data0<,d*+> <,d*+> <,body> <,html> Fully styled vertical navigation bar </DOCTYPE html> <html> <head> <style> ul { l*st-style-ty'e:none% marg*n:(% 'add*ng:(% & a:l*nk:a:+*s*ted { d*s'lay:block% )ont-1e*ght:bold% color: AAAAAA%
background-color: #Cb)71% 1*dth:17('.% te.t-al*gn:center% 'add*ng:"'.% te.t-decorat*on:none% te.t-trans)orm:u''ercase% & a:ho+er:a:act*+e { background-color: D?##1?% & <,style> <,head> <body> <ul> <l*><a hre)<= home=>8ome<,a><,l*> <l*><a hre)<= ne1s=>9e1s<,a><,l*> <l*><a hre)<= contact=>Contact<,a><,l*> <l*><a hre)<= about=>?bout<,a><,l*> <,ul> <,body> <,html> Image gallery </DOCTYPE html> <html> <head> <style> d*+0*mg { marg*n: $'.% 'add*ng: $'.% border: 1'. sol*d (((())% he*ght: auto% 1*dth: auto% )loat: le)t% te.t-al*gn: center% & d*+0*mg *mg { d*s'lay: *nl*ne% marg*n: $'.% border: 1'. sol*d ))))))% & d*+0*mg a:ho+er *mg {border: 1'. sol*d (((())%& d*+0desc
{ te.t-al*gn: center% )ont-1e*ght: normal% 1*dth: 17('.% marg*n: $'.% & <,style> <,head> <body> <d*+ class<=*mg=> <a target<=5blank= hre)<=klemat*s5b*g0htm=><*mg src<=klemat*s5small0N'g= alt<=Olemat*s= 1*dth<=11(= he*ght<=#(=><,a> <d*+ class<=desc=>?dd a descr*'t*on o) the *mage here<,d*+> <,d*+> <d*+ class<=*mg=> <a target<=5blank= hre)<=klemat*s75b*g0htm=><*mg src<=klemat*s75small0N'g= alt<=Olemat*s= 1*dth<=11(= he*ght<=#(=><,a> <d*+ class<=desc=>?dd a descr*'t*on o) the *mage here<,d*+> <,d*+> <d*+ class<=*mg=> <a target<=5blank= hre)<=klemat*sJ5b*g0htm=><*mg src<=klemat*sJ5small0N'g= alt<=Olemat*s= 1*dth<=11(= he*ght<=#(=><,a> <d*+ class<=desc=>?dd a descr*'t*on o) the *mage here<,d*+> <,d*+> <d*+ class<=*mg=> <a target<=5blank= hre)<=klemat*s"5b*g0htm=><*mg src<=klemat*s"5small0N'g= alt<=Olemat*s= 1*dth<=11(= he*ght<=#(=><,a> <d*+ class<=desc=>?dd a descr*'t*on o) the *mage here<,d*+> <,d*+> <,body> <,html> Animation change background color and position </DOCTYPE html> <html> <head> <style> d*+ { 1*dth:1(('.% he*ght:1(('.% background:red% 'os*t*on:relat*+e% an*mat*on:my)*rst $s% -1ebk*t-an*mat*on:my)*rst $s% ,B -a)ar* and Chrome B,
& Pkey)rames my)*rst { (I {background:red% le)t:('.% to':('.%& 7$I {background:yello1% le)t:7(('.% to':('.%& $(I {background:blue% le)t:7(('.% to':7(('.%& D$I {background:green% le)t:('.% to':7(('.%& 1((I {background:red% le)t:('.% to':('.%& & P-1ebk*t-key)rames my)*rst ,B -a)ar* and Chrome B, { (I {background:red% le)t:('.% to':('.%& 7$I {background:yello1% le)t:7(('.% to':('.%& $(I {background:blue% le)t:7(('.% to':7(('.%& D$I {background:green% le)t:('.% to':7(('.%& 1((I {background:red% le)t:('.% to':('.%& & <,style> <,head> <body> <'><b>9ote:<,b> Th*s e.am'le does not 1ork *n ;nternet E.'lorer # and earl*er +ers*ons0<,'> <d*+><,d*+> <,body> <,html> !esi"e property #ake an element resi"able by the user </DOCTYPE html> <html> <head> <style> d*+ { border:7'. sol*d% 'add*ng:1('. "('.% 1*dth:J(('.% res*Le:both% o+er)lo1:auto% & <,style> <,head> <body> <'><b>9ote:<,b> ;nternet E.'lorer and O'era do not su''ort the res*Le 'ro'erty0<,'> <d*+>The res*Le 'ro'erty s'ec*)*es 1hether or not an element *s res*Lable by the user0<,d*+> <,body> <,html>

What Is CSS

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

What Is CSS

Hochgeladen von

Copyright:

Verfügbare Formate

What is CSS?

!am$le p { color:red; text-align:center; }

The 'ackgro#nd color of a $age is defined in the 'ody selector%

!am$le body {background-color:#b0c4de;}

!am$le body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(2 !0!0";}

Set the background color of different elements

Das könnte Ihnen auch gefallen