my notes

User Tools

Site Tools

Trace: • html-and-css
webdesign:html-and-css

Table of Contents

HTML

Layout with <div> tag

refer:
The render tree relation to the DOM tree
positioning scheme

display blocks using <div> tag with none property float

HTML code: 

<html>
<head>
<title>Example</title>
<style>
* {
  margin:0;
}
 
body {
  text-align:center;
}
 
#wrapper {
  margin:auto;
  width:300px;
}
 
#header {
  height:30px;
  background:#99CC66;
}
#body_left {
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  width:80%;
  height:100px;
  background:#99CCFF;
}
#footer {
  height:30px;
  background:#339933;
}
</style>
</head>
 
<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="body">
    <div id="body_left">body_left</div>
    <div id="body_main">body_main</div>
  </div>
  <div id="footer">footer</div>
</div>
</body>
</html>

display in ie

display in chrome

display blocks using <div> tag with property float and none tag <div style="clear:both">

footer display correctly in ie but wrong in chrome 

<style>
#body_left {
  float:left;
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  float:left;
  width:80%;
  height:100px;
  background:#99CCFF;
}
</style>

display in ie

display in chrome

display blocks using <div> tag with property float and tag <div style="clear:both"/>

<html>
<head>
<title>Example</title>
<style>
* {
  margin:0;
}
 
body {
  text-align:center;
}
 
#wrapper {
  margin:auto;
  width:300px;
}
 
#header {
  height:30px;
  background:#99CC66;
}
#body_left {
  float:left;
  width:20%;
  height:100px;
  background:#FF9900;
}
 
#body_main {
  float:left;
  width:80%;
  height:100px;
  background:#99CCFF;
}
#footer {
  height:30px;
  background:#339933;
}
</style>
</head>
 
<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="body">
    <div id="body_left">body_left</div>
    <div id="body_main">body_main</div>
  </div>
  <div style="clear:both"/>
  <div id="footer">footer</div>
</div>
</body>
</html>

Display correctly in both ie and chrome

A Simple Menu Using HTML Lists And CSS

vertical menu

<html>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

Horizontal menu with property float in tag <li>

<html>
<style>
#menu li
{
    float: left;
    margin-right: 0.5em;
}
</style>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

Horizontal menu with property display:inline in tag <li>

<html>
<style>
#menu li
{
    display: inline;
    margin-right: 0.5em;
}
</style>
<div id="menu">
    <ul>
        <li><a href="#">Who</a></li>
        <li><a href="#">What</a></li>
        <li><a href="#">Where</a></li>
    </ul>
</div>
</html>

HTML blocks and inline element

HTML elements can be grouped together with <div> and <span>.

HTML Block Elements

Most HTML elements are defined as block level elements or as inline elements.

Block level elements normally start (and end) with a new line when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the “old way” of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Grouping Tags

Tag Description
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)

CSS

CSS Selectors

refer: http://www.w3schools.com/cssref/css_selectors.asp

SelectorExampleExample descriptionCSS
.class.introSelects all elements with class=“intro”1
#id#firstnameSelects the element with id=“firstname”1
**Selects all elements2
elementpSelects all <p> elements1
element,elementdiv, pSelects all <div> elements and all <p> elements1
element elementdiv pSelects all <p> elements inside <div> elements1
element>elementdiv > pSelects all <p> elements where the parent is a <div> element2
element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements2
element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element3
[attribute][target]Selects all elements with a target attribute2
[attribute=value][target=_blank]Selects all elements with target=“_blank”2
[attribute~=value][title~=flower]Selects all elements with a title attribute containing the word “flower”2
:activea:activeSelects the active link1
::afterp::afterInsert content after every <p> element2
::beforep::beforeInsert content before the content of every <p> element2
:checkedinput:checkedSelects every checked <input> element3
:disabledinput:disabledSelects every disabled <input> element3
:emptyp:emptySelects every <p> element that has no children (including text nodes)3
:enabledinput:enabledSelects every enabled <input> element3
:first-childp:first-childSelects every <p> element that is the first child of its parent2
::first-letterp::first-letterSelects the first letter of every <p> element1
::first-linep::first-lineSelects the first line of every <p> element1
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent3
:focusinput:focusSelects the input element which has focus2
:hovera:hoverSelects links on mouse over1
:in-rangeinput:in-rangeSelects input elements with a value within a specified range3
:invalidinput:invalidSelects all input elemets with an invalid value3
:lang(language)p:lang(it)Selects every <p> element with a lang attribute equal to “it” (Italian)2
:last-childp:last-childSelects every <p> element that is the last child of its parent3
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent3
:linka:linkSelects all unvisited links1
:not(selector):not(p)Selects every element that is not a <p> element3
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent3
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child3
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child3
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent3
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent3
:only-childp:only-childSelects every <p> element that is the only child of its parent3
:optionalinput:optionalSelects input elements with no “required” attribute3
:out-of-rangeinput:out-of-rangeSelects input elements with a value outside a specified range3
:read-onlyinput:read-onlySelects input elements with the “readonly” attribute specified3
:read-writeinput:read-writeSelects input elements with the “readonly” attribute NOT specified3
:requiredinput:requiredSelects input elements with the “required” attribute specified3
:root:rootSelects the document's root element3
::selection::selectionSelects the portion of an element that is selected by a user
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)3
:validinput:validSelects all input elements with a valid value3
:visiteda:visitedSelects all visited links1

Some Examples with CSS

webdesign/html-and-css.txt · Last modified: 2022/10/29 16:15 by 127.0.0.1