קורס מזורז ב- css

מדוע והיכן

* מדוע css ?

* היכן לשים הגדרות css ?

inline, on a specific HTML element:

<div style="color:red; font-family:Arial;"> ... </div>

in the HEAD section:

<style>
DIV {color:red}
TABLE {background-color:purple;}
</style>

in an external file:

<link rel="stylesheet" href="telem.css" type="text/css">

* css של האפליקציה, של המשתמש, ושל מחבר העמוד

הערות ב css

Selectors

by type:

BODY {margin:0px; padding:0px; color:navy}
DIV {margin-top:10px; margin-bottom:0px;}

by class:

DIV.special {color:red}
DIV.remark {font-weight:bold}
.english {direction:ltr; }

by ID:

DIV#header {border:solid 3px green;}

by descendance:

DIV.special IMG {border:solid 1 px blue;}
DIV.special DIV.remark {background-color:oldlace}
DIV#header TD TD LI {background-color:lime;}

by child, by nextSibling, by First-child, by attribute value, ....

css2 , not supported by current IE - לא להשתמש

by Pseudo-class:

A:link {color:blue; text-decoration:none}
A:hover {text-decoration:underline}
A:visited {color:gray; text-decoration:none;}

DIV:first-line {font-weight:bold;}
DIV:first-letter {font-size:1.5em;}

grouping selectors (do not confuse w descendance) :

H1, H2, H3 {background-color:yellow}

התיבה - the Box Model

* width, height, padding, margin, border - הסבר

example :

DIV#moo {width:400px; height:250px; padding-top:10px; padding-right:20px; margin:0px; border-color:red; border-width: 2px; border-style:solid;}

shorthand notation:

P {margin:5px 15px; padding:5px; border:solid 2px green; border-right:dashed 5px red;}

margin can be negative:

P {margin-top:-15px; margin-right:20px;}

* עץ ה- layout, או ה- offset , להבדיל מעץ ה- HTML.

מיקום - Positioning and stacking

absolute:

position:absolute; top:50px; left:50px;

absolute right (shifted relative to the right edge!) :

position:absolute; top:50px; right:50px;

relative:

position:relative; top:25px;

relative can be negative:

position:relative; top:-25px; left:50px;

stacking:

z-index:5;