CSS: Difference between revisions

From 太極
Jump to navigation Jump to search
(Created page with "The information is obtained from [http://www.w3schools.com/css/css_intro.asp w3schools.com]. = CSS = == Syntax == <pre> p { color:red; text-align:center; } </pre> where '''p'...")
 
No edit summary
Line 41: Line 41:


== Three ways to insert CSS ==
== Three ways to insert CSS ==
# External style sheet
* External style sheet
<pre>
<pre>
<head>
<head>
Line 47: Line 47:
</head>
</head>
</pre>
</pre>
# Internal style sheet
* Internal style sheet
<pre>
<pre>
<head>
<head>
Line 57: Line 57:
</head>
</head>
</pre>
</pre>
# Inline style sheet
* Inline style sheet
<pre>
<pre>
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>
</pre>
</pre>
Cascading order (last one has the highest priority)
# Browser default
# External style sheet
# Internal style sheet (in the head section)
# Inline style (inside an HTML element)
== Background color/image ==
<pre>
body {background-color:#b0c4de;}
body {background-image:url("paper.gif");}
body {background:#ffffff url("img_tree.png") no-repeat right top;}
</pre>
== Text ==
Color, alignment, decoration and indentation, fonts, styles
<pre>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
a {text-decoration:none;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
p {text-indent:50px;}
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</pre>
== Links ==
<pre>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
</pre>
== Lists ==
<pre>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</pre>
== Tables ==
<pre>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</pre>
See [http://www.w3schools.com/css/css_table.asp here] for a link to create a fancy table.
== Border ==
We can create border for a [http://www.w3schools.com/css/css_border.asp paragraph] or an [http://www.w3schools.com/css/css_attribute_selectors.asp image] (CSS [attribute~=value] Selector).
== Padding ==
<pre>
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
</pre>
== Dimension (Width and height) ==
<pre>
img.normal  { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }
</pre>
== Positioning ==
http://www.w3schools.com/css/css_positioning.asp How to show overflow in an element using scroll]
== [http://www.w3schools.com/css/css_float.asp Float] ==
* An image with a caption that floats to the right
* the example of creating a horizontal menu
* the example of creating a homepage without tables (partition of a webpage)
== [http://www.w3schools.com/css/css_align.asp Horizontal Align] ==
<pre>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</pre>
== Pseudo-elements ==
The ::first-line pseudo-element is used to add a special style to the first line of a text.
== [http://www.w3schools.com/css/css_navbar.asp Navigation Bar] ==
<pre>
li { float:left; }
a { display:block; width:60px; }
</pre>
== [http://www.w3schools.com/css/css_image_gallery.asp Image gallery] ==
== Image Opacity/Transparency ==
* Creating transparent images - Hover effect
* Creating a transparent box with text on a background image
*Text in Transparent Box
== [http://www.w3schools.com/css/css_image_sprites.asp Image Sprites] ==
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.
Using image sprites will reduce the number of server requests and save bandwidth.
= CSS3 =

Revision as of 18:26, 20 May 2014

The information is obtained from w3schools.com.

CSS

Syntax

p
{
color:red;
text-align:center;
}

where p is called selector and anything inside {} is declarations with a format of property:value.

Comments

A CSS comment starts with /* and ends with */. Comments can also span multiple lines

Selectors

  • element selector
p {  text-align:center;color:red; }
  • id selector
#para1  { text-align:center;color:red; }
  • class selector
.center { text-align:center;color:red; }

You can also specify that only specific HTML elements should be affected by a class. 

p.center { text-align:center;color:red; }
  • group selectors
h1,h2,p { text-align:center;color:red; }

Three ways to insert CSS

  • External style sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • Internal style sheet
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>
  • Inline style sheet
<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Cascading order (last one has the highest priority)

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

Background color/image

body {background-color:#b0c4de;}
body {background-image:url("paper.gif");}
body {background:#ffffff url("img_tree.png") no-repeat right top;}

Text

Color, alignment, decoration and indentation, fonts, styles 

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

a {text-decoration:none;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

p {text-indent:50px;}

p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Links

a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */

Lists

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

Tables

table, td, th 
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

See here for a link to create a fancy table.

Border

We can create border for a paragraph or an image (CSS [attribute~=value] Selector).

Padding

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Dimension (Width and height)

img.normal  { height:auto; }
img.big { height:120px; }
p.ex { height:100px; width:100px; }

Positioning

http://www.w3schools.com/css/css_positioning.asp How to show overflow in an element using scroll]

Float

  • An image with a caption that floats to the right
  • the example of creating a horizontal menu
  • the example of creating a homepage without tables (partition of a webpage)

Horizontal Align

.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}

Pseudo-elements

The ::first-line pseudo-element is used to add a special style to the first line of a text.

Navigation Bar

li { float:left; }
a { display:block; width:60px; }

Image gallery

Image Opacity/Transparency

  • Creating transparent images - Hover effect
  • Creating a transparent box with text on a background image
  • Text in Transparent Box

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

CSS3

Retrieved from "https://wiki.taichimd.us/index.php?title=CSS&oldid=4146"