Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
MoreCSSCS115ComputingfortheSocio-TechnoWeb
Instructor:BrianBrubach
Announcements
• Checkgooglegroupsmail• Assignment2posted,duedatepushedtoFriday• Assignment0feedbackout
Classicwebpage
Classicwebpage
Classicwebpage
Classicwebpage
CSSColors
• Canusepredefinedcolors(e.g.,yellow,white,red,purple,blue).• Canspecifyacolorbythered,greenandbluecomponents• Thefollowingareequivalent:• red• rgb(255,0,0)• #ff0000
• CRGBAaddsalphachanneltospecifytheopacityforacolor• RGBAcolorspecification– rgba(RED,GREEN,BLUE,ALPHA)• Alphavalueof0(transparent)to1.0(opaque)• E.g.,rgba(125,125,125,0.5);
• References:http://www.w3schools.com/css/css3_colors.asp
Numberbases
• Decimalà Base10(e.g.2375)• Whatpeopleuse,why?
• Binaryà Base2(e.g.100110)• Whatcomputersuse
• Hexadecimalà Base16(a4f90)• HTMLcolorsamongotherthings
• Octalà Base8• Let’sseesomeexamplesonthedoccam
Hexadecimal
• Eachdigitisthecoefficientforapowerof16• Needsingledigitslargerthan9• a=10,b=11,c=12,d=13,e=14,f=15
• Eachdigitisthecoefficientforapowerof16• Example:4-digithexnumber• Hexadecimalcolors• Three2-digithexnumbers• #12fe9b• Sameasrgb(18,254,155)
b4fd
16# 16$ 16% 16&
𝑏×16# + 4×16$ + 𝑓×16% + 𝑑×16&11×4096 + 4×256 + 15×16 + 13×1
= 46333
SettingSize
• Lengthunits- centimeters(cm),millimeters(mm),etc.• Whitespacecannotappearbetweennumberandtheunit,• Twotypesoflengthunits:• Relative(e.g.,em,rem)• Absolute(e.g.,cm,pt,pc)
• Relative• emà Relativetothesizeofthecurrentfont• 3emà 3timessizeofcurrentfont• http://www.sitepoint.com/power-em-units-css/
• Preferredà relativeandpercentages• http://www.w3schools.com/cssref/css_units.asp
CSSComments
• Commentsà Surroundedby/**/• Youcanusethemtodisablestyles
Moreonkindsofselectors
• ClassSelectorsà Allowustoapplythesamerulestomanyelements• Usewhenyouneedtoapplyastylemanytimesinyourdocument• Createdwithaperiod(alsoknownasfullstop)
• IDSelectorsà Similartoclassselectorsbutappearonlyonceinthedocument• Usedwhenyouneedtoapplyastyleonlyonceinyourdocument• Createdusing#
Moreonkindsofselectors
• TypeSelectorsà ThosebasedonthenameofanHTMLtag(e.g.,p,table,etc.)• p{color:red;}
• Pseudo-classesà attachedtoselectorstospecifyastate• Fourpopularpseudo-classesare:• a:linkà initialcolorofalink• a:visitedà colorforavisitedlink• a:hoverà colorwhenmousehoveroverlink• a:activeà colorduringtheclickingofthelink• Orderisimportant(LoVeHAte)
MoreonKindsofSelectors
• Descendantselector• Overridethetype,class,andidselectorstyles• Typicallywithtwoelementswherethesecondisadescendant• Exampleà lia{font-size:2em}
• Universalselector• Appliestoallelements• Example:*{font-family:arial,Helvetica;}
• Pseudo-elements• Allowsyoutostyleanitemthatisnotmarkedbyelements• Twopseudo-elementexamplesà :first-letterand:first-line
Someselectorexamples
• a[title]{}à Alinkwithatitleattribute• .myPrefStyle{}à AnyelementswiththeclassmyPrefStyle (sameclassnamecanappearinmanyelements)• #mySchedule {}à AnelementwithidmySchedule (onlyoneelementonthepage)• div.myPrefStyle{}à AdivwiththeclassmyPrefStyle• div#mySchedule{}à AdivwiththeidmySchedule• divtable{}à Atablewithadivancestor• input[type=“submit”]{}à Aninputwithatypeattributethathasthevaluesubmit
Boxmodel
Border
Padding
Content
Margin
Marginedge
Borderedge
Paddingedge
Contentedge
Boxmodel
• CSSboxmodelà boxaroundanHTMLelementwiththefollowingcomponents:margin,border,padding,content• Boxmodelallowustodefinespacebetweendifferentelements• Foursectionscanbeidentified:• Contentà whatliesinthemiddleofthebox(text,image,etc.)• Paddingà surroundsthecontent• Borderà surroundsthepaddingandrepresentstheboxborder• Marginà surroundstheborder
• Noteà Needtospecifyaborder-styleforbordertoappear
Boxmodel
Border
Padding
Content
Margin
Marginedge
Borderedge
Paddingedge
Contentedge
Boxmodelpaddingandmargin
• Youcanadjustindividualpadding/marginpropertiesbyusing:• padding-bottom,padding-left,padding-top,padding-right• margin-bottom,margin-left,margin-top,margin-right
• Themargins,borders,padding,andbackgroundpropertiesofblockelements(e.g.,body,p,etc.)arenotpassedtotheirchildblock-levelelements
Shorthandproperty
• ShorthandPropertyà allowsyoutospecifyseveralpropertiesbyusingonlyone• Ifyoudon’tspecifyoneofthepropertiesadefaultvaluewillbeused• Commonlyusedshorthandproperties• background• font• list-style• margin• border• padding
• Exampleà border:2emsolidgreen;
Backgroundproperties
• background-color• background-imageà locationofimage• background-repeatà howimagerepeats.Possiblevaluesforrepetition:• no-repeatà oneinstanceoftheimage• repeatà tile• repeat–yà repeatsonthey-axis(repeat–xà repeatsonthex-axis)
• background-attachmentà indicatesattachmentoftheimagetothecontainingelement.Possiblevaluesare:• scrollà defaultvalue• fixedà imagewillstaystationaryasthescrollingtakesplace
• background-positionà top,bottom,center,left,right(combinationsvalid)
Genericfontfamilies
• sans-serifà (e.g.,Verdana,Helvetica,Arial)• serifà (e.g.,TimesNewRoman,Georgia,Times)• monospaceà (e.g.,Courier,MSCourierNew)• cursiveà (e.g.,LucidaHandwriting)• fantasyà (e.g.,Whimsey,ComicSans)• Browsercanchooseanavailablefontfromthatfamily