CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font...
-
Upload
donald-french -
Category
Documents
-
view
220 -
download
0
Transcript of CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font...
![Page 1: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/1.jpg)
CIS234A Lecture 5
Instructor Greg D’Andrea
![Page 2: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/2.jpg)
Font Styles Review
Font-Family: generic family, font familyFont-Size: em, pt, px, %, mm, cm, inFont-Style: Italic, normalFont-Weight: bold, normalWord-Spacing: lengthLetter-Spacing: lengthText-Indent: length, %Text-Decoration: underline,overline,blink,line-
throughLine-Height: length
![Page 3: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/3.jpg)
Measurement Units
Absolute Units• There are five standard units of measurement:–mm (millimeters)– cm (centimeters)– in (inches)–pt (points): 72 points in an inch–pc (picas): 6 picas in an inch, 12 points in a
pica
![Page 4: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/4.jpg)
Measurement Units
Relative Units• px (pixel) : which represents a single dot on the
output device. Depends on the screen resolution. This is the default unit.
• em : 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
![Page 5: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/5.jpg)
Measurement Units
• ex : one ex is the x-height of a font (x-height is usually about half the font-size)
• % : a percentage of an element’s default font size.
![Page 6: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/6.jpg)
Measurement Units
Descriptive words• Seven descriptive words: – xx-small, x-small, small, medium, large, x-
large, xx-large
![Page 7: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/7.jpg)
Span and DivThe span and div elements are a generic means by which we can add structure to documents.
• The span element is inline with surrounding text, that is, it does not cause a line-break (similar to a <b> element) Syntax:
<span> content </span>• The div element is a block-level element and will place its
contents on a separate line from surrounding content. (similar to a <p> element) Syntax:
<div>content</div>
![Page 8: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/8.jpg)
Span and Div• The span and div elements contains no semantic
meaning, and should not be overused in the place of other more meaningful elements.Like using:
<span style=“font-weight: bold”>booyaah!</span>Instead of:
<b>jolly good yes indeed!</b>This is okay:
<span id=“date”>06-29-1955</span><p>…<div style=“somestyles”>…</div>…</p>
• Div has an added attribute align:– align = { “left” | “right” | “center” | “justify” }
![Page 9: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/9.jpg)
Spacing Elements (Basic)
• Margin: the space between the edge of the element and the nearest adjacent element– (top, right, bottom, left)– The largest margin of two adjacent elements will be the
spacing value
• Padding: the space between the edge of the content and the edge of the element – (top, right, bottom, left)
![Page 10: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/10.jpg)
Spacing Elements (Basic)
Properties:• margin: topValue rightValue bottomValue leftValue;
– Each value is specified• margin: topbottom leftright
– Top is mirrored on bottom, right mirrored on left• margin: all
– All have the same value• Explicitly:
– margin-top: value– margin-bottom: value– margin-right: value– margin-left: value
• Example: <img style=“margin: 10px 15px 20px 25px” src=“blah.jpg” />• Padding is the same way:
– padding: top right bottom left– padding-left: value– etc…
![Page 11: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/11.jpg)
Background Images
Inserting a background image• We use the style attribute to set the background
image.• For example, to set a background image for the
whole website:<body style=”background-image: url(image.gif”/>…</body>
![Page 12: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/12.jpg)
Background Images • For example, to set a background image for a
paragraph:<p style=”background-image: url(image.gif”/>…</p>
![Page 13: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/13.jpg)
Background Image Options
• The following style:background-repeat :type
– is used to control how the browsers tile an image across an element’s background.
![Page 14: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/14.jpg)
Background Image Options
type has these four possible values: no-repeat, repeat, repeat-x, repeat-y.
• no-repeat: the image is not repeated at all• repeat: the image is tiled both horizontally and
vertically• repeat-x: the image is one tiled horizontally
across the width of the element• repeat-y: the image is one tiled vertically across
the height of the element
![Page 15: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/15.jpg)
Background Image Options
• To control the position of the background image, the following style is used:– background-position: horizontal vertical
• horizontal’s value can be one of these: a
percentage, a length or a keyword (which is one of these three: left, right, center)
![Page 16: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/16.jpg)
Background Image Options
vertical’s value can be one of these: a percentage, a length or a keyword (which is one of these three: top, bottom, center)
• Percentage: – For example, with a value pair of '0% 0%', the upper left
corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
![Page 17: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/17.jpg)
Background Image Options
• Length: A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.
![Page 18: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/18.jpg)
Background Image Options
• top :Equivalent to '0%' for the vertical position.• right: Equivalent to '100%' for the horizontal
position.• bottom: Equivalent to '100%' for the vertical
position.• left: Equivalent to '0%' for the horizontal
position.• center: Equivalent to '50%' for the horizontal
position if it is not otherwise given, or '50%' for the vertical position if it is.
![Page 19: CIS234A Lecture 5 Instructor Greg D’Andrea. Font Styles Review Font-Family: generic family, font family Font-Size: em, pt, px, %, mm, cm, in Font-Style:](https://reader036.fdocuments.in/reader036/viewer/2022082418/5697bfd81a28abf838caed5d/html5/thumbnails/19.jpg)
Assignment 2
• Create a web page that uses the tags that we’ve learned:– Heading tags– Image tag: <img/>– Paragraph tag: <p></p>– Link tag: <a></a>– Span tag: <span> </span>– Div tag: <div> </div>
• Then use the style attribute to control the colors, fonts and font
styles
• The assignment is due 11:59pm next Friday