First, we introduce widely used CSS styles that are compatible with almost current browsers.
CSS Background
- In the CSS style background, image url property is set to load an image as the background graph. It puts the image on "left top" and duplicates in the y-axis (repeat-y) for presenting long content.
background: black url(https://lh4.googleusercontent.com/-aX2fSD4Ktyc/U1jOZx2ecxI/AAAAAAAAFaI/Xqx81o6aIMU/w25-h844-no/CSS01.png) left top repeat-y;}
div {
background: black url(https://lh4.googleusercontent.com/-Dfr-YyU5OTU/U1jOcLArNWI/AAAAAAAAFaQ/sEgM7TYU-Lg/w20-h858-no/CSS02.png) left top repeat-y;
}
 |
| Background images in <body> and <div> on the left and repeat-y. |
- Animation effects (CSS3) can be easily added in to style (e.g. <body>). For example, the following codes make the effect as shown in the following video. To be compatible with major browsers, both types of animation statements should be duplicated.
-webkit-animation: bgscroll 1s;/* IE, Safari and Chrome */
animation: bgscroll 1s; /* finish animation within 1 second */
}
@-webkit-keyframes bgscroll {/*Safari and Chrome:*/
from {background-color: white; width: 5%;}
to {background-color: black; width: 100%;}
}
@keyframes bgscroll {
from {background-color: white; width: 5%;}
to {background-color: black; width: 100%;}
}
CSS for Content Presentation
- CSS Text for rendering Paragraphs or Keyphrases: It's convenient to define many p.styles in your template.css. Similar ways can be used in span.styles to highlight significant keywords or phrases.
p.capitalize {text-transform: capitalize;} /* uppercase, lowercase, ... */
p.indent {text-indent: 50px;} /* npx, pt, cm, em, etc. */
p.content {text-align: justify;} /* for general content */
a.none {text-decoration: none;} /* make link like general text */
- To put text into listed items, there are two types of lists in HTML: unordered lists <ul> (default "bullets" or icon images) and ordered lists <ol> (default "numbers" or letters) as following sample codes for CSS list.
ul.square {list-style-type: square;}
ol.uroman {list-style-type: upper-roman;} /* I. II. III. ... */
ol.abc {list-style-type: lower-alpha;} /* a. b. c. ... */
list-style: list-style-type list-style-position list-style-image|initial|inherit; /* put all properties in one line */
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana | "Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console | All monospace characters have the same width |
span.serif {font-family: "Times New Roman", Times, serif;}
span.sansserif {font-family: Arial, Helvetica, sans-serif;}
If the font name is more than one word, it must be in quotation marks, e.g. "Times New Roman". The default font-size is 16px=1em. Setting font-size with em is cleverer since larger/smaller fonts are relative to 1em that will be properly presented in different screen resolutions.
CSS Links
Links can be styled in four links states, in which properties can be set, e.g. "text-decoration: underline;", "text-decoration: underline;" or "background-color: #...;".
- a:link - a normal, unvisited link
- a:visited - a link the user has visited (not work when using Chrome "incognito", i.e. "anonymous")
- a:hover - a link when the user mouses over it (on mouse over)
- a:active - a link the moment it is clicked (on mouse click)
a:visited {color: #00FF00;} /* visited link */
a:hover {color: #FF00FF;} /* mouse over link: MUST come after a:link and a:visited; */
a:active {color: #0000FF;} /* selected link: MUST come after a:hover; */
CSS Box Model
Design your web pages by building blocks (boxes), in which Content is embedded in the HTML element defined with CSS properties as followings.
- Margin - Like you print documents in A4 papers, the default margins, for example, is 1 inch. The margin is completely transparent so that no background-color setting is needed.
- Border - The border is inherited from the color property of the box. E.g. the border line "border: 5px solid black;" is invisible in black background. Ref: border-style values.
- Padding - An area around the content. If you set "padding: 0;", texts within two neighbor blocks will be too closed and the readability is bad.
 |
| CSS Box Model: e.g margin: 5px; border: 0; padding: 10px; |
All settings of 4 lines of the box (e.g. margin, border, padding, outline, etc.) obey the order: top > right > bottom > left. For example: margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
CSS Dimension Properties set the range of the box by: width, height, max-width, max-height, min-width, min-height.
CSS Display and Visibility:
h1.hidden {visibility: hidden;} /* hide the element, but occupy the original space */
h1.hidden {display: none;} /* hide the element without occupying the original space */
li {display: inline;} /* displays list items as inline elements, i.e. items listed in the same line, like a horizontal list */
span {display: block;} /* displays span elements as block elements */
CSS Positioning
Position an HTML element absolute or relative corresponding to using the top, bottom, left, and right properties.
- Fixed Positioning: img.pos_fixed{position: fixed; top: 0px; left: 0px;} /* fix the image in the top-left corner */
- Relative Positioning: h2.pos_left{position: relative; left: -20px;} /* -20 left relative to normal <h2> */
- Absolute Positioning: like "fixed" but it is corresponding to the first parent element. h2{position: absolute; left: 100px; top: 150px;} /* fix top-left position relative to its parent element, e.g. <body> or <div> */
- Overlapping positioning: img{position: absolute; left: 0px; top: 0px; z-index: -1;} /* fix the image as background in the top-left corner */
Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.
CSS Float
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts.
- Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
- A floated element will move as far to the left or right as it can.
- The elements after the floating element will flow around it.
- The elements before the floating element will not be affected.
You can make an image gallery using the float property. Adjust the "width" and "margin" values to control how many thumbnails put in a row.
.thumbnail {float: left; width: 110px; height: 90px; margin: 5px; }
To avoid the influence of "float", clear the property in the tag after "float". For example, p.after_float {clear: both;} .
Align Block Elements
Block elements like <h1>, <p>, <div> have no "center" properties for horizontal alignment, but it can be done with CSS settings.
.center {margin-left: auto; margin-right:auto;} or .center {margin: auto;} /* top and bottom margins are also auto-adjusted */
NOTE: "margin: auto;" will not work in IE8 and earlier, unless a !DOCTYPE is declared.
No comments :
Post a Comment