صفحه 1:
آموزش طراحی وب سایت
جلسه جهارم- سى اس اس 3
تدريس طراحى وب
براى اطلاعات بيشتر تماس بكيريد
تاو
شماره تماس: 09125773990
09371410986
پست الکترونیک
TargetLearning@gmail.com
صفحه 2:
Cascading Style
Sheets
Author: Babak Tavatav
Part 04
صفحه 3:
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML
elements
Styles were added to HTML 4.0 to solve
a problem
External Style Sheets can save a lot of
work
External Style Sheets are stored in CSS
files
۰
۰
۰
صفحه 4:
CSS Syntax
Selector Declaration Declaration
@ {color:blue; font-size: 12px; }
Property Value Property Value
صفحه 5:
CSS Id and Class
صفحه 6:
The id Selector
The id selector is used to specify a
style for a single, unique element.
The id selector uses the id attribute of
the HTML element, and is defined
with a "#",
The style rule below will be applied to
the element with id="para1":
صفحه 7:
#paral
{
text-align:center;
color:red;
}
صفحه 8:
The class Selector
The class selector is used to specify a style
for a group of elements. Unlike the id
selector, the class selector is most often
used on several elements.This allows you
to set a particular style for any HTML
elements with the same class.The class
selector uses the HTML class attribute,
and is defined with a "."
In the example below, all HTML elements
with class="center" will be center-aligned:
صفحه 9:
.center {text-align:center;}
صفحه 10:
Three Ways to Insert CSS
٠ External style sheet
* Internal style sheet
* Inline style
صفحه 11:
External Style Sheet
* apply to many pages.
٠ using the <link> tag. The <link>
* <head>
<link rel="stylesheet"
type="text/css"
href="mystyle.css" />
</head>
صفحه 12:
An external style sheet can be written in any
text editor. The file should not contain any
html tags. Your style sheet should be saved
with a .css extension.
An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body
{background-image:url("images/back40.gif");
}
صفحه 13:
* Do not leave spaces between the
property value and the units!
"margin-left:20 px" (instead of
"margin-left:20px") will work in IE,
but not in Firefox or Opera.
صفحه 14:
Internal Style Sheet
An internal style sheet should be used
when a single document has a
unique style. You define internal
styles in the head section of an HTML
page, by using the <style> tag, like
this:
صفحه 15:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
</style>
</head>
صفحه 16:
Inline Styles
٠ loses many of the advantages of
style sheets
<p style="color:sienna;margin-
left:20px">This is a paragraph.</p>
صفحه 17:
Multiple Style Sheets
If some properties have been set for
the same selector in different style
sheets, the values will be inherited
from the more specific style sheet.
For example, an external style sheet
has these properties for the h3
selector:
صفحه 18:
1.65
h3
{
color:red;
text-align:left;
font-size:8pt;
}
صفحه 19:
2.655
h3
{
text-align:right;
font-size:20pt;
}
صفحه 20:
if the page with the internal style
sheet also links to the external style
sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
صفحه 21:
The color is inherited from the external
style sheet and the text-alignment
and the font-size is replaced by the
internal style sheet.
صفحه 22:
Multiple Styles Will Cascade into One
Styles can be specified:
inside an HTML element
inside the head section of an HTML
page
in an external CSS file
صفحه 23:
Tip: Even multiple external style
sheets can be referenced inside a
single HTML document.
Cascading order
What style will be used when there is
more than one style specified for an
HTML elemen
صفحه 24:
Generally speaking we can say that all the
styles will "cascade" into a new "virtual"
style sheet by the following rules, where
number four has the highest priority:
1.Browser default
2.External style sheet
3.Internal style sheet (in the head section)
A.lnline style (inside an HTML element)
صفحه 25:
So, an inline style (inside an HTML
element) has the highest priority,
which means that it will override a
style defined inside the <head> tag,
or in an external style sheet, or ina
browser (a default value).
صفحه 26:
Note: If the link to the external style
sheet is placed after the internal
style sheet in HTML <head>, the
external style sheet will override the
internal style sheet!
صفحه 27:
CSS Styling
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
صفحه 28:
CSS Background
Y background-color
¥ background-image
¥ background-repeat
¥ background-attachment
Y background-position
صفحه 29:
Background Color
The background-color property
specifies the background color of an
element.
The background color of a page is
defined in the body selector:
صفحه 30:
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
1
</style>
</head>
صفحه 31:
<body>
<h1>My CSS web page!</h1>
<p>Hello world! </p>
</body>
</html>
صفحه 32:
صفحه 33:
The background color can be specified
by:
* name - acolor name, like "red"
* RGB - an RGB value, like
"rgb(255,0,0)"
* Hex - a hex value, like ۲
صفحه 34:
Background Image
The background-image property
specifies an image to use as the
background of an element.
By default, the image is repeated so it
covers the entire
Example
body {background-
image:url(‘paper.gif'); }
صفحه 35:
<html>
<head>
<style type="text/css">
body {background-image:url(‘paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
صفحه 36:
صفحه 37:
Background Image - Repeat
Horizontally or Vertically
صفحه 38:
body
{
background-
image:url(‘gradient2.png');
background-repeat:repeat-x;
}
صفحه 39:
صفحه 40:
صفحه 41:
Background Image - Set
position and no-repeat
صفحه 42:
<html>
<head>
<style type="text/css">
body
{
background-image:url(‘img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
صفحه 43:
<body>
<h1>Hello World!</h1>
<p> background image example.</p>
<p>The background image is only showing
once, but it is disturbing the reader!</p>
</body>
</html>
صفحه 44:
showing once, butit is disturbing the reader!
صفحه 45:
<html>
<head>
<style type="text/css">
body{
background-image:url(‘img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
صفحه 46:
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set
postion example.</p>
<p>Now the background image is only show
once, and positioned away from the
text.</p>
<p>lIn this example we have also added a
margin on the right side, so the background
image will never disturb the text.</p>
</body>
</html>
صفحه 47:
Hello World!
‘eackground no-repeat, set postin example
‘Nowe the background image i nly show once, and
positioned away Bom the tex
Tn this exanple we have aleo added a margin on the doht
sude, so the background image wil ever disturb the lea.
صفحه 48:
<html>
<head>
<style type="text/css">
body{
background: #ffffff url(‘img_tree.png')
no-repeat right top;
margin-right:200px;
}
</style>
صفحه 49:
</keol>
حریس>
<K0> Well Dork! </hd>
erage ts coy show pace, ved postivoed away Brow the لصب خصيحاصصط جملا بيد (])<م>
ent </p>
<p>e this excep we hove dso added a carga oo the right side, so the:
اس و مسا cever disturb the text.</p>
</b>
</hicrl>
صفحه 50:
Hello World!
Now the background image is oniy show once, and
posttioned away from the text
Ja this example we have also added a margin on the right
side, so the background image will never disturb the text.
صفحه 51:
الات الات ا 1
‘background-color
Dbackground.image
‘background:-sepeat background
attachment background position
inner
2 امد
fixed
Inherit
color 1
olor hex
موه
transparent
Inher
1 تناس
سس
left top 1
left center
left bottom
‘ight top
Fight center
right bottom
center top
‘enter center
‘center bottom
بر
pos ypos
و
repeat 1
repeat x
repeaty
مور
Inher
‘Sets all the background properties
in one deciaration
Sets whether a background image
is fixed or srale withthe vest of
the page
‘Sets the background color ofan
‘element
Sets the background image for an
clement
‘Sets the starting postion of
background image
Sets بو a background image
willbe repeated
ackground-attachment
‘backaround-color
ackaroung.image,
‘backaround postion
backoround-repeat
صفحه 52:
CSS Text
The color property is used to set the
color of the text.
The color can be specified by:
name - acolor name, like "red"
RGB - an RGB value, like
"rgb(255,0,0)"
Hex - a hex value, like "#ff0000"
صفحه 53:
The default color for a page is defined
in the body selector.
Example:
body {color:blue; }
۱1 {color:#OOff00;}
h2 {color:rgb(255,0,0);}
صفحه 54:
Text Alignment
The text-align property is used to set the
horizontal alignment of a text.
Text can be centered, or aligned to the
left or right, or justified.
When text-align is set to "justify", each
line is stretched so that every line has
equal width, and the left and right
margins are straight (like in magazines
and newspapers).
صفحه 55:
Example
h1 {text-align:center; }
p.date {text-align:right;}
p.main {text-align:justify; }
صفحه 56:
Text Decoration
صفحه 57:
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline; }
h2 {text-decoration:line-through; }
h3 {text-decoration:underline; }
h4 {text-decoration:blink;}
</style>
</head>
صفحه 58:
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value
is not supported in IE, Chrome, or
Safari.</p>
</body>
</html>
صفحه 59:
This is heading 1
Thisi ۲
‘This is heading 3
‘This is heading 4
‘Note: ‘he "bi! value isnot suppented i. IB, Cizome, or Salar,
صفحه 60:
Text Transformation
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase; }
p.lowercase {text-transform:lowercase; }
p.capitalize {text-transform:capitalize; }
</style>
</head>
صفحه 61:
<body>
<p class="uppercase">This is some
text.</p>
<p class="lowercase">This is some
text.</p>
<p class="capitalize">This is some
text.</p>
</body>
</html>
صفحه 62:
* THIS IS SOME TEXT.
* this is some text.
* This Is Some Text.
صفحه 63:
Text Indentation
The text-indentation property is used
to specify the indentation of the first
line of a text.
Example
p {text-indent:50px;}
صفحه 64:
<html>
<head>
<style type="text/css">
p {text-indent:50px;}
</style>
</head>
<body>
صفحه 65:
<p>In my younger and more vulnerable
years my father gave me some advice that
I've been turning over in my mind ever
since. 'Whenever you feel like criticizing
anyone,’ he told me, just remember that all
the people in this world haven't had the
advantages that you've had.'</p>
</body>
</html>
