Date post: | 21-Dec-2015 |
Category: |
Documents |
View: | 217 times |
Download: | 2 times |
HCI 201 Notes #8A 2
What will we learn today?
Review of what we have learned about CSS The <div> tag The <span> tag Formatting block-level element boxes Resizing the boxes Moving the boxes Image processing 101
HCI 201 Notes #8A 3
Review of last week<style> body {color:green; background: white url(Draft.jpg)
no-repeat fixed center center} h1, h2, h3 {font-family: Arial, Helvetica, sans-
serif} address {font-size:0.6em; font-style:normal; text-
align:center; text-transform:uppercase} ul {list-style: circle url(Apple.jpg) outside} ul b {color: rgb(128, 0, 0)} li.special {color:rgb(50%,0%,75%); font-weight:bold} blockquote {background-color:rgb(200,200,200);
color: maroon; font-style: italic} a {color:green} a:hover {color:red; text-transform: uppercase; font-
weight:bold}</style>
HCI 201 Notes #8A 4
Review of last week
The style of CSS (Inline, embedded, or external?) Inheritance and overriding Selectors and declarations (grouping selectors and
contextual selectors?) Style class (generic, regular, or pseudo class?) Properties
- URL property - Font property
- Color property - Text property
- Background property - List property
HCI 201 Notes #8A 6
The <div> tag
<div class=class_name>content</div> <div> tag does not format content. <div> tag creates a block-level element. Used with class or id property, <div> tag assigns
a name to the document content it contains. class_name is the name of the style class assigned
to the content. You can substitute the id property for the class.
HCI 201 Notes #8A 7
The <div> tag
In style:div.Slogan {font-weight:bold}
In HTML:<div class=Slogan>Maxwell Scientific’s new slogan is: ”We teach science”.</div>
What do you mean by “block-level element”?Maxwell Scientific’s new slogan is: <div class=Slogan>”We teach science”.</div>
HCI 201 Notes #8A 8
Block-level and inline elements
Block-level elementsparagraphs, block quotes, headers, lists, etc.
Inline elementsindividual letters, words, phrases, etc.
How to assign styles to an inline element?the <span> tag
HCI 201 Notes #8A 9
The <span> tag
<span class=class_name>content</span> Browsers treat the <span> tag as a physical or content-
based tag. <span> tag creates an inline element. Used with class or id property, <span> tag assigns a
name to the inline element it contains. class_name is the name of the style class assigned to the
content. You can substitute the id property for the class.
HCI 201 Notes #8A 10
The <span> tag
In style:span {color:purple}span.bigger {font-size:larger}
In HTML:<span class=“bigger”>Maxwell Scientific’s new slogan is: ”We teach science”.</span>
Question: Will we break the line if we change the code to
Maxwell Scientific’s new slogan is: <span class=“bigger”>”We teach science”.</span>
HCI 201 Notes #8A 11
The “boxes”
Control the page layout with CSS- CSS treats block-level elements as if they were enclosed in a
box (remember the inside and outside property of list items?).- Manipulating the size and location of block-level element ---
the “boxes”.- Applying borders and background colors to the boxes.- …
HTML tags that are treated as lock-level elements- <h> tags: <h1> ~ <h6>- <p>- <blockquote> and <address>- List tags: <ul>, <ol>, and <dl>- <div>, <body>, <hr>, and <img>
HCI 201 Notes #8A 12
What’s in the box?
Margin: The area between the box and its parent element. Border: The border around the box Padding: The space between the box border and the content.
Parent Element
Content of the block-level element goes here …
Margin Border Padding
HCI 201 Notes #8A 14
Control the margins
margin-top: The space between the top of the box and the top margin.
margin-right: The space between the right side of the box and the right margin.
margin-bottom: The space between the bottom of the box and the bottom margin.
margin-left: The space between the left side of the box and the left margin.
Margin size: units of length (pt, em, etc.) or a percentage of the width of the parent box.
HCI 201 Notes #8A 15
Control the margins
li {margin-left:3em; margin-right:3em; margin-top:2em; margin-bottom:2em}
body {margin-left:5%; margin-right:5%; margin-top:5%; margin-bottom:5%}
Question: The body margin sizes are 5% of _____________________.
p {margin:1pt,2pt,3pt,4pt} top=1pt, right=2pt, bottom=3pt, left=4pt.
p {margin:1pt,2pt,3pt} top=1pt, right=2pt, bottom=3pt, left=right=2pt.
p {margin:1pt,2pt} top=1pt, right=2pt, bottom=top=1pt, left=right=2pt.
p {margin:1pt} top=right=bottom=left=1pt.
the width of the display window
HCI 201 Notes #8A 16
Set the padding size
padding-top. padding-right. padding-bottom. padding-left. padding. (In the order of top, right, bottom, and left.)
padding size: units of length (pt, em, etc.) or a percentage of the width of the block-level element itself.
HCI 201 Notes #8A 17
Formatting the border
Border properties
border width color style
top border-
top-width
border-
top-color
border-
top-styleright border-
right-widthborder-
right-color
border-
right-stylebottom border-
bottom-widthborder-
bottom-color
border-
bottom-styleleft border-
left-width
border-
left-color
border-
left-style
HCI 201 Notes #8A 18
Formatting the border
Width: expressed with units of length or keywords: thin, medium, thick.
Color: expressed in color names or RGB triplets.
Style: 9 styles: none, solid, dotted, dashed, double, outset, inset, groove, ridge.
Chris wants us to create a container box for the science article:
div.Article {padding:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163)}
HCI 201 Notes #8A 19
Resizing the boxes
width - In absolute or relative units of length, or as a percentage of the width of the parent element.
- Width is seldom modified, except for text boxes and inline images. (The results for other elements can be unpredictable with different browsers.)
height - In absolute or relative units of length, but NOT in percentages.
- Length is seldom modified, except for inline images.
- When the amount of required text exceeds the specified height, browsers might introduce scrollbar, ignore the style, or worse, truncate the extra text.
HCI 201 Notes #8A 20
Moving the boxes
With CSS, we can tell the browser to place the boxes in specific positions on the page.
(We can also make the page look like this:)
HCI 201 Notes #8A 21
Moving the boxes
float - With a specified width, float property can align the box to either “left” or “right”.
- The browser moves the next element up and wrapped around the floating element.
float: rightwidth: 200px
float: leftwidth: 200px
HCI 201 Notes #8A 22
Moving the boxes
clear - Prevent the next element from wrapping around the floating box.
- clear=none, left, right, both - The next element is placed at the first point where the left/right
margin is clear.
float: rightwidth: 200px
float: rightwidth: 200px
hr {clear: right}
HCI 201 Notes #8A 23
Moving the boxes
Chris wants us to resize and float the article box:div.Article {padding:1em; border-style:solid; border-width:2px; background-color: rgb(252,221,163); float: right; width:300px}
HCI 201 Notes #8A 24
Image processing 101
Select- Shape (rectangular, elliptical, polygonal, line)- All, deselect, inverse- Feather
Stroke Copy, Paste, and Layers Transform
HCI 201 Notes #8A 25
Assignment 5 Download the Chem.htm and MWSLogo.gif into one folder. Create a MyCSS.txt in the same folder, use it as an external style
sheet file. In the MyCSS.txt, change the styles for the following elements:
Body: color, font-family Background: place an image in the middle of the display area, no
repeat Choose different font size and colors for <p>, <h1>, <h3> Specify the font style, color, and background color for <blockquote> Change the default hyperlink appearance: link, active, visited, and
hover. Choose a bulletin image for the unordered list. Create a box that contains the “Featured Chemistry Products” (title
and list), specify the border color, border width, and background color.