PowerPoint
advertisement
CIS 228
The Internet
11/1/11
Review HFHTML ch 8-14
XHTML Grouping
Block grouping: div element
<div class=“cats”>
<h1>Cats For Sale</h1>
<h2>Six week old Tabby</h2>
<p> … </p>
<h2>Eight week old Siamese</h2>
<p> … </p>
</div>
Inline grouping: span element
<span class=“x”><em>Trotsky</em> arrived</span>
XHTML Tables
Table – 2 dimensional array of cells (explicit)
<table> attribute: summary
<caption> (must be first child of <table>)
Row – 1 dimensional array of cells (explicit)
<tr> table row
Column – 1 dimensional array of cells (implicit)
Cell – a single item (explicit)
Attributes: rowspan colspan (e.g. <th colspan=“3”>)
<td> table data (e.g. <td>$3.79</td>)
<th> table heading (e.g. <th>price</th>)
XHTML Forms
Limited 2-way communication between user & server
(Heretofore server supplies information to the user)
Browser sends name-value pairs to server application
Names are specified by the application
Values are supplied by the user
Application responds with new web page for browser
(Creating server applications beyond this course)
Forms structure the interaction
Give user “natural” means of supplying information
XHTML Form Elements
<form action method >
<input name value type id />
<label for >
<textarea name rows cols >
<select name multiple size >
<option value selected label >
<fieldset> (groups form fields together)
<legend> (caption for a field set)
Form Element
<form action=“url” method=“post|get”>
action
Relative (path to local application)
Absolute (path to application on a different site)
method
post - form data bundled in separate communication
Cannot be bookmarked
get - form data appended to url
Size limited
Do not use to transmit sensitive data
Input Element Types
text value (default), size, maxlength
radio value (value), checked
checkbox value (value), checked
submit value (button text)
reset value (button text)
button value (button text)
password value (default), size, maxlength
file (value invalid), accept
image value (value), src, alt
hidden value (default)
Attaching CSS to a Web Page
Style attribute (on element in <body>)
Value: one or more CSS rules
Deprecated
Style element (in <head>)
Attribute type=”text/css”
Content: one or more CSS rules
Link element (empty element in <head>)
Attribute type=”text/css”
Attribute rel=”stylesheet”
Attribute href=”somepath/file.css”
Setting Defaults
Set defaults for inherited properties on body element
body {
font-family: Verdana, Geneva, “Dejavu Sans”,
Arial, san-serif ;
font-size: medium ;
background-color: #FEA ;
color: #963 ;
}
h1 { font-size: 150% ; }
h3 { font-size: 1.2em ; }
CSS Rules
Template: selector { property : value+ ; }
Selector identifies 0 or more elements in a document
Element names (e.g. blockquote, p, q …)
Class attribute values (e.g. p.legalese or .legalese)
Id attribute values (e.g. p#signature or #signature)
Property governs an aspect of element presentation
Value specifies a property (e.g. 7px, 7%, red, #777, etc.)
Example: p.legalese, #signature {
color: #0BEAF0 ;
}
CSS Selectors
Rule: selector-group { property-declaration * ; }
Selector-group: selector * ,
Selector: simple-selector * operator
Operator: descendant (“”) | child (“>”) | sibling (“+”)
Simple-selector: (universal (“*”|“”) | type) context*
(type is an XHTML element name)
Context selectors
Id-selector: #identifier
Class-selector: .identifier
Pseudo-class: :identifier (e.g. :link, :visited, :hover, etc.)
Attribute-selector: [identifier]
Attribute Selectors
Distinguish elements having the same name
Special cases: class and id attributes
XHTML (and HTML)
Any element (in <body>) can have a class attribute
At most one element can have any value for an id attribute
CSS for class and id attributes
p.legalese { color: red ; }
.legalese { font-size: small ; }
p#signature { font-size: 3em ; }
#signature { border: 1px solid #DEAD29
Attribute Selectors, continued
Match elements based on their attribute
[title] elements with a title attribute
e.g. li > a[title]
[title=UN] matches elements with title UN
e.g. p[class=loser] (same as p.loser)
[title~=UN] matches element with UN in the title
In a value that is a list of identifiers separated by “ ”
[lang|=en] matches elements containing en in lang
In a value that is a list of identifiers separated by “-”
Pseudo Classes and Elements
Refer to state not represented in the element tree
Pseudo-classe selectors
:link, :visited, :hover register the state of hyperlinks
e.g. a:link { color: C4C }
:first-child selects the first element of its parent
e.g. blockquote > p:first-child { indent: 4em }
Pseudo-element selectors (must come last)
:first-letter, :first-line
e.g. p.first-letter { font-size: 5em }
:before, :after (not supported by IE)
e.g. blockquote:before { content: open-quote }
Property Inheritance
Some property values are inherited
e.g. color, font-family
Some are not
e.g. border (why?)
Elements pass inherited values to their children
e.g. em inherits color from p
Inheritance can be overridden by explicit assignment
e.g. em {
color: maroon ;
}
Determining Property Values
What is the value v of property p on element e?
Is there a rule that selects e and defines p?
Only one? that rule gives v
More than one? take the (physically) last one
Is p an inherited property?
Take the value of p for e's parent
Otherwise
Default value
Multiple style sheets are concatenated together
The Cascade
Which declaration for property p applies on element e?
Concatenate style sheets:
Browser defaults
User style sheet
Applicable author style sheet(s) (in order)
Gather declarations whose selectors match the e
(If none, check inheritance)
If any are “! important”, ignore the rest
(You can mark declarations “! important”, but don't!)
Ignore all but the most specific declarations
The physically last remaining declaration wins
Selector Specificity
Rules specified by style attributes are most specific
If there is one, ignore the rest
Id-selectors are most important
Ignore rules with less than the most id-selectors
Context-selectors are very important
Ignore rules with less than the most context-selectors
Type selectors are important
Ignore rules containing less than the most type-selectors
Remember: last remaining rule wins
The Box Model
Element content is surrounded by (optional) boxes:
Padding
transparent space
Border
width
style solid double groove outset dotted dashed inset ridge
color if not specified, same as content text (element color)
Margin
transparent space
Box Model Properties
padding:
10px
border:
2px dotted #A84E19
border-width:
2px
border-style:
dotted
border-color:
#A84E19
margin:
8em
background-image:
url(Images/myDucky.png)
background-repeat:
no-repeat
background-position:
top center
Sides
Each box has four sides:
top right bottom left (clockwise ordering)
Properties of an individual side can be specified
border-bottom-style: dotted
padding-left: 10%
Properties of each side can be specified in turn
border-style: none double dotted inherit
margin: 2em 5% 30px 6pt
padding: 4em 8em (4em 8em)
border-width: 3px (3px 3px 3px)
Some Fonts
Sans-serif
Ariel, Verdana, Geneva, Helvetica, “DejaVu Sans”
Serif
“Times New Roman”, Times, “DejaVu Serif”
Monospace
“Courier New”, Courier, “DejaVu Sans Mono”
Cursive
“Comic Sans”, Cartoon, “Apple Chancery”
Fantasy
Impact, “Last Ninja”, Crush, Papyrus
Font Size
Keywords:
xx-small, x-small, small, medium, large, x-large, xx-large
Absolute size:
Pixels: 14px
Points: 14pt
Relative size:
Reference character: 1.4em
Percentage: 140%
Suggestions:
Default: use keyword (medium or small) in body rule
Otherwise: use relative size measurements
Other Text Properties
font-weight
“bold” or “normal”
font-style
“italic” (“oblique”) or “normal”
text-decoration
“underline”, “overline”, “line-through”, “blink”, “none”
line-height
e.g. 1.6em or 160%
text-align
“left”, “center”, “right”, “justify”, “inherit”
Color Properties
background-color:
color:
Specifying color
17 named colors
black, white, red, green, blue, aqua, fuchsia, yellow, etc.
Red-Green-Blue triples
rgb(255, 127, 63)
rgb(100%, 50%, 25$)
Hex codes
#FF7F3F
#963 (= #996633)
Deciphering Hex Color Codes
Example: #3FE29B
Separate into color pairs: 3F E2 9B
Replace letters with numbers: 3(15) (14)2 9(11)
A->(10) B->(11) C->(12) D->(13) E->(14) F->(15)
Multiply first by 16: (48)(15) (224)2 (144)(11)
Add: 63 226 155
#3FE29B = rgb( 63, 226, 155)
CSS List Properties
Properties of <ol> and <ul>
list-style
list-stype-position
outside, inside, or inherit
list-style-image
none or url (e.g. url(images/dimond.jpg))
list-style-type
disc, circle, square, none
decimal, lower-alpha, upper-alpha,
lower-roman, upper-roman, lower-greek
CSS Table Properties
Standard CSS properties apply to all table elements
color, font, text-align, padding, border, etc.
Property for <table> only
caption-side: top, bottom, inherit
Properties for <table>, <tr>, <th>, and <td>
border-spacing: length length
border-collapse: (separate, collapse, inherit)
Properties for <td> and <th>
align: (left, right, center, justify, inherit)
valign: (top, center, bottom, inherit)
Floats
Floats are
removed from the normal flow
pushed to the right (or left) of the page
at the point they were removed
ignored by block elements in the normal flow
avoided by inline elements in the normal flow
float: right ;
Clear property
delays a block element until after any float
clear: right ;
Normal Flow
Block elements
Arranged vertically
Line break between successive elements
Margins overlap
Ignore floats
Inline elements
Arranged horizontally
Lines wrap (if they get too long)
Margins add
Respect float boundaries
Creating a Sidebar
In XHTML
1 Wrap sidebar content in a div element
2 Give div element an id attribute (e.g. id= “sidebar”)
3 Move div element to where sidebar should start
In CSS
4 Set width property of the sidebar
5 Set float property of the sidebar
6 Increase margin for content next to the sidebar
7 Set clear property for content immediately below sidebar
The Position Property
Absolute
top (right, bottom, left) relative to containing positioned element
z-index property orders absolutely positioned elements
Fixed
Top (right, bottom, left) relative to viewport (browser window)
Relative
Top (right, bottom, left) relative to element's normal flow position
Static
Default (normal flow position)
