DOC PREVIEW
SDSU CS 696 - Emerging Web and Mobile Technologies

This preview shows page 1-2-3-24-25-26 out of 26 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 26 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 2 CSS Part 2Jan 25, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, January 25, 2011References2http://meiert.com/en/indices/css-properties/List of CSS Propertieshttp://www.csszengarden.com/Zen garden - exampleshttp://www.w3.org/TR/css3-selectors/CSS 3 SelectorsCS 683 Lecture notes, http://www.eli.sdsu.edu/courses/fall04/cs683/notes/index.htmlTuesday, January 25, 20113Testing Webpages on MobileTuesday, January 25, 2011Web Server on Rohan4http://www-rohan.sdsu.edu/gdelines.shtmlSeeTuesday, January 25, 2011Web Server on Mac5Tuesday, January 25, 2011Web Server on Windows6Lots of free web servers for windowsTry NGINX easier to install that apachehttp://www.nginx.org/Tuesday, January 25, 2011Viewing on iPhone Emulator7Install iPhone SDKhttp://developer.apple.com/devcenter/ios/index.actionRun the emulatorDeveloper/Platforms/iPhoneSimulator.platform/Developer/ApplicationsRun SafariTuesday, January 25, 2011Viewing on Android Emulator8Download Android SDKhttp://developer.android.com/sdk/index.htmlhttp://developer.android.com/guide/developing/tools/emulator.htmlCreate an AVDemulator -avd <avidName>http://developer.android.com/guide/developing/tools/emulator.htmlTuesday, January 25, 20119CSS PropertiesTuesday, January 25, 2011Text Properties - Demo10http://developer.apple.com/safaridemos/showcase/typography/Tuesday, January 25, 2011Colors11aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,orange,purple,red,silver,teal,white,yellowNamed Colorsem { color: #f00 } /* #rgb */em { color: #ff0000 } /* #rrggbb */em { color: rgb(255,0,0) } em { color: rgb(100%, 0%, 0%) } RGBem { color: red }147 named colors in CSS3Tuesday, January 25, 2011http://www.codenique.com/web_color/css3_color_names.phpLengths - Relative Units12em: the 'font-size' of the relevant fontex: the 'x-height' of the relevant fontpx: pixels, relative to the viewing deviceh1 { margin: 0.5em } /* em */h1 { margin: 1ex } /* ex */p { font-size: 12px } /* px */p { font-size: 120% }em is like % 1em = 100% 1.1em = 110% 0.9em = 90%Tuesday, January 25, 2011Lengths - Absolute Units13in: inches — 2.54 centimeters.cm: centimetersmm: millimeterspt: points — 1/72th of an inch.pc: picas — 12 points.h1 { margin: 0.5in } /* inches */h2 { line-height: 3cm } /* centimeters */h3 { word-spacing: 4mm } /* millimeters */h4 { font-size: 12pt } /* points */h4 { font-size: 1pc } /* picas */Tuesday, January 25, 2011Use em or %14Some users have a preferenceem or % is based on their preference Tuesday, January 25, 2011Borders15A border can haveColorImageLengthRadiusStyleSpacingWidthTuesday, January 25, 2011Width16Valuesthinmediumthick<length>p{ border-color: black; border-top-width: 1pt; border-right-width: 2pt; border-bottom-width: thin; border-left-width: thick; border-style: solid;}p{ border-color: black; border-style: solid; border-width: 1pt 2pt thin thick;}p{ border-color: black; border-width: 1pt; border-style: solid;}Tuesday, January 25, 2011Border Styles17nonehiddendotted dashed solid double groove ridge inset outset The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.p{ border-color: black; border-style: solid dotted double dashed;}Tuesday, January 25, 2011Margins18p{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime;}Tuesday, January 25, 2011Boxes & Displays19Tuesday, January 25, 2011Image from http://www.w3.org/TR/CSS21/box.htmlBackground20attachmentbreakclipcolorimageoriginpositionrepeatsizep{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime;}Tuesday, January 25, 2011Fonts21font-familyfont-stylefont-variantfont-weightfont-sizefont-stretchPropertiesFont-familyValue: <family-name> | <generic-family> | inherit<generic-family>serifsans-serifcursivefantasymonospacep{ margin: 1.5pt 1em 2.3mm 2in; background-color: lime; font-family: 'Monotype Corsiva', Helvetica, sans-serif;}Tuesday, January 25, 2011Actual fonts depend on what is installed on client machineFont variant & Style22Font-variantValues: normal | small-caps | inherith3 { font-variant: small-caps }em { font-style: oblique }Font-styleValues: normal | italic | oblique | inheritTuesday, January 25, 2011Font-Weight23normal (400)bold (700)bolderlighter100200300400500600700800900inheritp { font-weight: normal } /* 400 */h1 { font-weight: 700 } /* bold */strong { font-weight: bolder }p { font-weight: lighter }Tuesday, January 25, 2011Font-Size24CSS absolute-size valuesxx-smallx-smallsmallmediumlargex-largexx-largescaling factor3/53/48/911 1/51 1/22HTML headingsh6h5h4h3h2h1HTML font sizes123456Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit<relative-size> larger | smallerp { font-size: 16px; }@media print { p { font-size: 12pt; }}blockquote { font-size: larger }em { font-size: 150% }em { font-size: 1.5em }Tuesday, January 25, 2011Text25text-indentValues: <length> | <percentage> | inheritp { text-indent: 3em }p.left { text-indent: -1in }text-alignValues: left | right | center | justify | inheritdiv.important { text-align: center }text-decorationValues: none | [ underline || overline || line-through || blink ] | inherita:visited,a:link { text-decoration: underline }Tuesday, January 25, 2011Sample CSS26body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0; }#header h1 { margin: 0; padding: 0;}#header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none;}#header ul { list-style: none; margin: 10px; padding: 0;}Tuesday, January 25, 2011Example from Chapter 2 of Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan


View Full Document

SDSU CS 696 - Emerging Web and Mobile Technologies

Download Emerging Web and Mobile Technologies
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Emerging Web and Mobile Technologies and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Emerging Web and Mobile Technologies 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?