آموزش css 2

bluekerm

Member
خب دوستان آموزش CSS رو شروع میکنیم. منبع این آموزش سایت w3school هستش و یک روز در میان آموزشها رو در سایت قرار میدم.
از توضیح مفاهیم اولیه مثل استایل ، کاربرد CSSو... فاکتور میگیرم با این فرض که شما اینارو میدونید!
بریم سراغ آموزش
سه روش برای استفاده از کدهای CSS وجود دارد:
1)external style sheet (شیوه نامه ی خارجی ): در این روش کدهای css رو در یک فایل جداگانه نوشته و با پسوند .css ذخیره میکنیم. سپس در هر صفحه ی html ای که نیاز داشتید ، فایل css رو لینک میکنید. برای لینک کردن از کد زیر استفاده می کنیم:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<link rel="stylesheet" type="text/css" href="mystyle.css" />[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
[/LEFT]
این استایل شیت رو در هر برنامه ی ویرایشگر متنی میتونید تولید کنید ولی به دو نکته حتما دقت کنید:
1) حتما فایل با پسوند css ذخیره بشه
2) در این فایل از هیچگونه تگ html استفاده نکنید.

2)internal style sheet ( شیوه نامه ی داخلی):در این روش کدهای css رو داخل صفحه ی html مینویسم. در این صورت استایل های تعریف شده فقط در همان صفحه html قابل استفاده هستند. برای استفاده از این روش در قسمت head و با تگ style استایل ها را تعریف میکنیم:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]  ……….. [/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
[/LEFT]
3)inline style : در این روش کدهای css رو برای تگ خاصی و درون تگ خاصی مینویسیم. برای این کار از خصوصیت style هر تگ استفاده میکنیم. مثال:
<p style="color:red;"> This is a test!</p>
حال این سوال پیش میاد که کدوم یکی از این روش ها رو استفاده کنیم؟
در صورتی که کدهای شما زیاد باشن و برای چند صفحه بخواهید استفاده کنید بهتره از روش اول استفاده کنید ولی اگه کدها کمه و مربوط به یک صفحه html میشه بهتره از روش دوم استفاده کنید. روش سوم زیاد توصیه نمی شه ولی در موارد جزئی ازش استفاده کنید. البته برای یه صفحه میتونید از هر 3 روش هم استفاده کنید. در این صورت اگه یه استایل رو به هر 3 صورت هم تعریف کرده باشید ، اولویت با روش inline style است و بعد از اون اولویت با internal style sheet است و در آخر external style sheet.

هر دستور css از دو قسمت تشکیل شده : سلکتور و declaration ( متاسفانه معادل فارسی خوبی برای این کلمه پیدا نکردم!)
سلکتور در واقع همان تگ یا جزیی از عناصر html است که قراره استایل رو براش تعریف کنیم. قسمت declaration شامل یک خصوصیت (ویژگی ، property) و مقداری برای آن خصوصیت است.
برای نوشتن دستورات css میتونید به چند روش عمل کنید.
1)یک راه استفاده از تگ هاست. مثل :
کد:
 p {color:red;}
این کد باعث میشه همه ی تگهای P با رنگ قرمز نوشته بشن.
2)راه دیگه استفاده از id است. در این روش از یه اسم دلخواه به همراه # برای تعریف استایل استفاده میشه. و در تگ html ای که میخواهیم این استایل به آن اعمال شود از خصوصیت id اش برای ارجاع به استایل استفاده می کنیم. مثال:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]                                            #setred {color:red;}[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<p id="setred"> Red color! </p>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<h1> Test </h1>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<h1 id="setred"> RED ! </h1>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
این کدها رو نوشته و خروجی رو مشاهده کنید! میبینید که تگ p و تگh1 دوم که id اونها مقداردهی شده با رنگ قرمز نوشته میشوند.
3)روش دیگه استفاده از کلاس هاست. کلاسها رو با . شروع میکنیم و در تگهای html از خصوصیت class برای ارجاع به استایل استفاده میکنیم.
مثال:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]                                            .setred {color:red;}[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<p> Text in default color </p>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<h1 class="setred"> RED ! </h1>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
در اینجا هم تگ p اول و تگ h1 با رنگ قرمز نوشته میشن.
همچنین میتونیم کلاسها رو برای تگ خاصی تعریف کنیم. مثل:

کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]                                            p.setred {color:red;}[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<p>text in default color </p>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<h1 class="setred">NOT RED ! </h1>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
بعد از اجرای کدهای بالا مشاهده میکنید که کلاس setred فقط برای تگهای p کار میکنه! یعنی برای تگ h1 هیچ تاثیری نداره چون موقع تعریف استایل فقط برای تگ p تعریف شده.
*نکته: اسم کلاس ها و id ها رو با عدد شروع نکنید! چون فقط IE از اینجور اسمها پشتیبانی میکنه! یعنی مرورگرهای دیگه اصلا کلاسهای شما رو تشخیص نمیدن و استایلها رو اعمال نمی کنن.

خب امیدوارم خسته نشده باشین. این از استارت آموزش CSS سوالی در این مورد داشتین در خدمتم. ادامه ی آموزش در :oops:11/12/88
 
آخرین ویرایش:

bluekerm

Member
قبل از هر چیز بگم که به یه نکته دقت کنین وقتی تو یه صفحه html میخواهین از css استفاده کنین حتما قسمت DOCTYPE رو قبل از هر چیزی بنوسین که مرورگرها مخصوصا IE از همه ی css ها پشتیبانی کنه! البته اگه از نرم افزارهای طراحی وب استفاده میکنین بصورت خودکار این کدها ایجاد میشن!
نوشتن توضیحات در css : برای نوشتن comment یا توضیحات برای کدهای css میتونید از علامت های */ و /* استفاده کنید مثل :
کد:
 [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]/* set the p tag color */[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]P {color:red;}[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]
[/LEFT]
در واقع هر چیزی رو که در توضیحات می نویسید ، مرورگر ها اونها رو نادیده می گیرن پس می تونید هر چیزی بنویسید !
مزایای استفاده از comment ها: اگه برای قسمت های پیچیده ی کدها توضیحات بنویسید و بعد از مدتی دوباره برید سراغ کدهاتون میفهمید که چیکار کردید .

CSS BACKGROUND
خصوصیت background در css برای تعریف جلوه هایی برای پس زمینه عناصر html استفاده میشه. برای این کار میتونیم از پنج ویژگی (property) استفاده کنیم:
1. Background-color
2. Background-image
3. Background-repeat
4. Background-position
5. Background-attachment
background-color
:این ویژگی برای مشخص کردن رنگ پس زمینه استفاده میشه. مثال:
کد:
body {background-color:#60c40e;}
*نکته: در کلیه کدهای css برای تعیین رنگ ها سه راه وجود داره:
· تعیین رنگها بصورت rgb : مثل-> color: rgb(250,0,0) ( توی پرانتز 3 تا عدد مینویسین بین 0 تا 255 . عدد اول مقدار قرمزی رنگ ، عدد دوم مقدار سبزی رنگ و عدد سوم مقدار آبی رنگ رو مشخص میکنه)
· تعیین رنگها بصورت یه مقدار هگزادسیمال: مثل -> color: #ff0000
· نوشتن اسم رنگ : مثل-> color:blue
البته در صورتیکه از نرم افزارهایی مثل dreamweaver استفاده میکنید بعد از نوشتن color: پانل رنگها باز میشه و رنگ رو از پانل انتخاب میکنید!
background-image
: این ویژگی برای مشخص کردن تصویر پس زمینه عناصر html است. مثال:
کد:
body { background-image:url('bg.jpg');}
background-repeat :به صورت پیش فرض عکسی که با background-image تعیین میشه از هر طرف ( عمودی و افقی ) تکرار میشه تا کل سطح پس زمینه رو بپوشونه . برای کنترل چگونگی تکرار عکس از این ویژگی background-repeat استفاده میکنیم.
مثال: میخواهیم عکس پس زمینه فقط به صورت افقی تکرار بشه:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body { background-image:url('bg.jpg');[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]           background-repeat:repeat-x; }[/SIZE][/FONT][/RIGHT]
[/LEFT]
background-position: موقعیت قرار گرفتن عکس پس زمینه توسط این ویژگی تعیین میشه.
مثال: عکس پس زمینه بدون تکرار و در قسمت بالا سمت راست قرار گیرد.
کد:
کد:
 [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body {  background-image:url('bg.jpg');[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]                          background-repeat:no-repeat;[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]            background-position:top right;}[/SIZE][/FONT][/RIGHT]
[/LEFT]
background-attachment: مشخص میکنه عکس پس زمینه ثابت باشه یا همراه بقیه صفحه scroll بشه.
*نکته : میتونیم کل ویژگی های پس زمینه رو بصورت خلاصه بنویسیم .
مثال :
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]Body {  background-image:url('bg.jpg');[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]                          background-repeat:no-repeat;[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]            background-position:top right;[/SIZE][/FONT]

[FONT=Tahoma][SIZE=3]            background-attachment:fixed;}[/SIZE][/FONT][/RIGHT]
[/LEFT]
بجای نوشتن کد بالا میتونیم این جوری بنویسیم:
کد:
Body { background  url('bg.jpg')  no-repeat  fixed  top right; }
وفتی از این شکل خلاصه استفاده می کنید ترتیب نوشتن باید اینجوری باشه :
{ background background-color background-image background-repeat background-attachment background-position ; }
در این قسمت کلیه خصوصیات و مقادیری که میتونین برای هر کدوم استفاده کنین ذکر شده:


background-attachment

scroll
fixed


background-color

color-rgb
color-hex
color-name
transparent


background-image

url(URL)
none


background-position

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos



background-repeat

repeat
repeat-x
repeat-y
no-repeat

ادامه در 13/12/88
 
آخرین ویرایش:

bluekerm

Member

CSS TEXT

color(1
[FONT=&quot]: برای تعیین رنگ نوشته ، که به همون سه روش گفته شده موتونید مقداردهی کنید. [/FONT]

[FONT=&quot]2)[/FONT]text-align [FONT=&quot] :[/FONT]این ویژگی برای تعیین ترازبندی افقی متن بکار میره. متن میتونه center ، left ، right ، justified باشد.
[FONT=&quot]مثال:[/FONT]

کد:
h1 (text-align:center;}
کد:
 [SIZE=3]
  [/SIZE][LEFT][RIGHT][SIZE=3]   P {text-align:right;}[/SIZE][/RIGHT]
[/LEFT]
[FONT=&quot]3)[/FONT]text-decoration [FONT=&quot]: [/FONT][FONT=&quot]این ویژگی برای حذف یا اضافه کردن مدل هایی به متن استفاده می شه. مثلا حذف[/FONT]Underlineاز لینک های صفحه. مثال:
کد:
a {text-decoration:none;}
[FONT=&quot]*[/FONT]توصیه نمیشه که از underline برای نوشته هایی که لینک نیستند استفاده کنید!
[FONT=&quot]4)[/FONT]text-tarnsform [FONT=&quot]: [/FONT]این ویژگی برای تعیین حروف کوچک و بزرگ استفاده می شود. میتونید از مقدارهایuppercase ، lowercase، capitalize استفاده کنید. (capitalize ابتدای هر کلمه را با حروف بزرگ مینویسه.)
[FONT=&quot]5)[/FONT] text-indent [FONT=&quot]: برای تعیین تورفتگی سطر اول متن استفاده می شه. مثال[/FONT][FONT=&quot]:[/FONT]
کد:
p {text-indent:50px;}
اینم خصوصیات کلی و مقادیر ممکن:

[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین رنگ متن[/FONT]
[FONT=&quot]color[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین جهت متن (راست به چپ یا چپ به راست)[/FONT]
[FONT=&quot]ltr
rtl[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین فاصله میان خطوط[/FONT]
[FONT=&quot]normal
number
length
%
[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]افزایش یا کاهش فاصله میان کاراکترها[/FONT]
[FONT=&quot]normal
length[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تراز کردن متن در یک عنصر[/FONT]
[FONT=&quot]left
right
center
justify[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین مدل خاص متن[/FONT]
[FONT=&quot]none
underline
overline
line-through
blink[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تورفتگی اولین سطر[/FONT]
[FONT=&quot]length
%[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]نحوه ی نمایش حروف[/FONT]
[FONT=&quot]none
capitalize
uppercase
lowercase[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین ترازبندی عمودی[/FONT]
[FONT=&quot]baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تعیین نحوه قرارگیری فضای خالی در یک عنصر[/FONT]
[FONT=&quot]normal
pre
nowrap[/FONT]
[FONT=&quot]1[/FONT]
[FONT=&quot]افزایش یا کاهش فضای خالی میان کلمات[/FONT]
[FONT=&quot]normal
length[/FONT]
[FONT=&quot]
[/FONT]

[FONT=&quot]خب حالا یه مثال کلی میزنم . مثال:[/FONT]
کد:
 [/LEFT]
[SIZE=3]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">[/SIZE]
[SIZE=3]<"html xmlns="http://www.w3.org/1999/xhtml>[/SIZE]
[SIZE=3]<head>[/SIZE]
[SIZE=3]</meta http-equiv="Content-Type" content="text/html"; charset=utf-8>[/SIZE]
[SIZE=3]<title>Untitled 1</title>[/SIZE]
[SIZE=3]<"style type="text/css>[/SIZE]
[SIZE=3] .co {color:red;}[/SIZE]
[SIZE=3] . indent { text-indent:10%;}[/SIZE]
[SIZE=3].dec {text-decoration:none;}[/SIZE]
[SIZE=3]</style>[/SIZE]
[SIZE=3]</head>[/SIZE]
[SIZE=3]<body>[/SIZE]
[SIZE=3]<p class="co"> Change the color ! </p>[/SIZE]
[SIZE=3]<p class="indent"> This paragraph has 10% indent in first line!paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </p>[/SIZE]
[SIZE=3]<p style="text-indent:50px;"> And this paragraph has 50px indent! </p>[/SIZE]
[SIZE=3]<a class="dec" href="#"> This is a link without underline!</a>[/SIZE]
[SIZE=3]<p class="space"> OH! Spaces are unusuall! aren't they?! </p>[/SIZE]
[SIZE=3]</body>[/SIZE]
[SIZE=3]</html>[/SIZE]
[LEFT]
[FONT=&quot]*نکته: بین مقدار خصوصیات و واحد اونها فاصله نزارین !(مثلا ننویسین [/FONT]text-indent:50 px ) چون اینطور نوشتن فقط توسط IE پشتیبانی میشه! (البته خودم با firefox امتحان کردم مشکلی نداشت! ولی طبق گفته ی سایت w3school ممکنه مشکل پیش بیاد)

[FONT=&quot]CSS FONT[/FONT]
[FONT=&quot]font-family[/FONT] : برای تعیین فونت استفاده میشه. مثال:
کد:
p { font-family:"Times New Roman",Times,Serif;}
همون طور که در مثال بالا دیدید اگه اسم فونت بیشتر از یه کلمه است باید اونو با " " بنویسید.
font-style : برای italic نوشتن از این ویژگی استفاده میشه که میتونه این مقادیر رو بگیره : normal-italic-oblique حالت سوم هم یه جور italic هستش .
font-size : برای تعیین سایز.
بهتره سایز فونت نوشته هاتون رو حتما مشخص کنید ( یا بر حسب px یا بر حسب em. 1em=16px ) در صورتیکه این کار رو نکنید اگه کاربر سایز فونت ها رو برای مرورگر خودش تغییر داده باشه سایت شما بهم میزیزه! و سایز فونت های سایت شما هم تغییر میکنه !
font-weight: برای تعین ضخامت فونت ها.
font-variant: اگه این خصوصیت با small-caps تعیین شده باشه متن نوشته شده اینجوری میشه:
کد:
<p style=" font-variant:small-caps;"> This is a tesT </p>
خروجی :
This is a tesT
در واقع این ویژگی میاد همه ی حروف رو با بزرگ مینویسه ولی اونایی رو که شما با بزرگ تایپ کردین رو بزرگتر میکنه :D


 
آخرین ویرایش:

bluekerm

Member
[FONT=&quot]LINK STYLE[/FONT]
[FONT=&quot]خب حالا میخوایم با [FONT=&quot]css[/FONT][FONT=&quot] یرای لینکها استایل بنویسیم. لینک ها در چهار وضعیت زیر قرار میگیرن:[/FONT][/FONT]
[FONT=&quot]1)[FONT=&quot]a:link[/FONT][FONT=&quot] -> لینک نرمال ( کلیک نشده)[/FONT][/FONT]
[FONT=&quot]2)[FONT=&quot]a:visited[/FONT][FONT=&quot]-> لینکی که کاربر آنرا مشاهده کرده[/FONT][/FONT]
[FONT=&quot]3)[FONT=&quot]a:hover[/FONT][FONT=&quot] -> لینکی که موس روی آن قرار میگیره (کلیلک نشده! میتونیم بگیم کاربر با موس فقط به اون لینک اشاره میکنه)[/FONT][/FONT]
[FONT=&quot]4)[FONT=&quot]a:active[/FONT][FONT=&quot] -> دقیقا همون لحظه ای که روی لینک کلیک میشه[/FONT][/FONT]
[FONT=&quot]لینک ها رو میتونین با هر ویژگی دلخواهی که میخواین استایل بدین مثل [FONT=&quot]color – font-family – background-color- text-decoration, …[/FONT][/FONT]
[FONT=&quot]مثال:[/FONT]
کد:
[/SIZE][/FONT][/LEFT][/RIGHT]
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]a:hover { background-color:#0F0;}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<a href="#"> This is a test! </a>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[FONT=&quot] [/FONT]​
[FONT=&quot]CSS LISTS[FONT=&quot][/FONT][/FONT]
[FONT=&quot]در [FONT=&quot]html[/FONT][FONT=&quot] دو نوع لیست داشتیم : [/FONT][/FONT]
[FONT=&quot]1)لیستهای نامرتب که آیتم های لیست با [FONT=&quot]bullet[/FONT][FONT=&quot] ها علامت گذاری میشدن[/FONT][/FONT]
[FONT=&quot]2)لیستهای مرتب که آیتم های لیست با شماره یا علامت گذاری میشدن[/FONT]
[FONT=&quot]list-style-type [FONT=&quot]: نوع علامتهای لیست رو میتونین با این ویژگی مشخص کنین[/FONT][/FONT]
[FONT=&quot]مثال:[/FONT]
کد:
[/SIZE][/FONT][/LEFT][/RIGHT]
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3].listmark { list-style-type:circle;}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<ul class="listmark">[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> a </li>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> b </li>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<li> c </li>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</ul>[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[FONT=&quot]بعضی از ویژگی ها برای لیست های نامرتب هستن و بعضی ها برای لیست های مرتب:[/FONT]
[FONT=&quot]مقادیر برای لیستهای نامرتب[/FONT]​


[FONT=&quot]none[/FONT]​
[FONT=&quot]بدون علامت[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]disc[/FONT]​
[FONT=&quot]پیش فرض. دایره توپر[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]circle[/FONT]​
[FONT=&quot]دایره تو خالی[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]square[/FONT]​
[FONT=&quot]مربع[FONT=&quot][/FONT][/FONT]​
[FONT=&quot] [/FONT]
[FONT=&quot]مقادیر برای لیستهای مرتب[FONT=&quot][/FONT][/FONT]​
[FONT=&quot] [/FONT]​


[FONT=&quot]*armenian[/FONT]​
[FONT=&quot]عدد گزاری سنتی ارمنی[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]decimal[/FONT]​
[FONT=&quot]عدد[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]*decimal-leading-zero[/FONT]​
[FONT=&quot]عدد که با 0 شروع میشود[FONT=&quot] (01, 02, 03, ...)[/FONT][/FONT]​
[FONT=&quot]*georgian[/FONT]​
[FONT=&quot]عددگزاری قدیمی [FONT=&quot]georgian[/FONT][FONT=&quot] [/FONT][FONT=&quot] (an, ban, gan, ...)[/FONT][/FONT]​
[FONT=&quot]lower-alpha[/FONT]​
[FONT=&quot]حروف کوچک الفبا[FONT=&quot] [/FONT][FONT=&quot](a, b, c, d, e, ...)[/FONT][/FONT]​
[FONT=&quot]*lower-greek[/FONT]​
[FONT=&quot]یونانی[FONT=&quot] [/FONT][FONT=&quot](alpha, beta, gamma, …)[/FONT][/FONT]​
[FONT=&quot]*lower-latin[/FONT]​
[FONT=&quot]The marker is lower-latin (a, b, c, d, e, …)[/FONT]​
[FONT=&quot]lower-roman[/FONT]​
[FONT=&quot] i, ii, iii, iv, v, …[/FONT]​
[FONT=&quot]upper-alpha[/FONT]​
[FONT=&quot]حروف بزرگ[FONT=&quot] (A, B, C, D, E, …) [/FONT][/FONT]​
[FONT=&quot]*upper-latin[/FONT]​
[FONT=&quot]حروف بزرگ[FONT=&quot] (A, B, C, D, E, …)[/FONT][/FONT]​
[FONT=&quot]upper-roman[/FONT]​
[FONT=&quot] I, II, III, IV, V, …[/FONT]​
[FONT=&quot] [/FONT]
[FONT=&quot]*نکته: [FONT=&quot]IE[/FONT][FONT=&quot] هیچکدام از ویژگی هایی که با * مشخص شده اند رو پشتیبانی نمیکنه! [/FONT][/FONT]
[FONT=&quot]میتونید از یک عکس بعنوان علامت آیتمها استفاده کنید. برای این کار:[/FONT]
کد:
ul { list-style-image:url('lstimg.gif');}
[FONT=&quot]
[/FONT]​
[FONT=&quot]با نوشتن کد بالا ممکنه عکس در همه ی مرورگرها به یک شکل نمایش داده نشه . یعنی مکان قرارگیری عکس نسبت به آیتم های لیست همونی نشه که شما میخواین. برای این که این مشکلو حل کنیم:[/FONT]
کد:
[/SIZE][/FONT][/LEFT][/RIGHT]
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]ul {[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]list-style-type:none;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]padding:0px;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]margin:0px;}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]li{[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-image:url('listimg.gif');[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-repeat:no-repeat;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-position:0px 5px;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]padding-left:20px;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[FONT=&quot][/FONT]​
 
آخرین ویرایش:

bluekerm

Member
[FONT=&quot]CSS TABLES
[/FONT] [FONT=&quot]Border[FONT=&quot] : برای تعیین حاشیه [/FONT][FONT=&quot](border)[/FONT][FONT=&quot] جدول ها از این ویژگی استفاده میکنیم. [/FONT]
[/FONT] [FONT=&quot]مثال:
[/FONT]
کد:
table { border:2px solid black;}
[FONT=&quot]border-collapse[FONT=&quot]: این ویژگی مشخص میکنه که حاشیه جدول ادغام بشه یا نه جدا باشه! با یه مثال توضیحش میدم :[/FONT]
[/FONT] [FONT=&quot]مثال:
[/FONT]
کد:
   [LEFT][RIGHT][FONT=Tahoma][SIZE=3][FONT=&quot]<[/FONT][FONT=&quot]style type="text/css"[/FONT][FONT=&quot]>[/FONT][/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]
  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3] table { border-collapse:collapse ;[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]                    ;border-color:#300[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]                   border-width:2px ; [/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]                    border-style:dashed ;[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3] td {border:1px solid red ;} [/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]<table width="200" border="1">[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]   <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>&nbsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]</table>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=&quot]اگه خروجی کد بالا رو مشاهده کنین میبینین که جاهیی که خطوط حاشیه جدول استایل دارن استایل سطر ها نادیده گرفته شده :( عکس ضمیمه شده رو نگاه کنین collapse.jpg )
[/FONT]​
[FONT=&quot]ولی اگه بجای [FONT=&quot]border-collapse:collapse[/FONT][FONT=&quot] از [/FONT][FONT=&quot]border-collapse:separate[/FONT][FONT=&quot] استفاده کنین استایل های جدول و سطر ها هر دو نشون داده میشه :[/FONT] ( عکس sep.jpg رو مشاهده کنین)

[/FONT] [FONT=&quot]Width [FONT=&quot]و [/FONT][FONT=&quot]height[/FONT][FONT=&quot] : برای مشخص کردن عرض و طول جدول . مثال:[/FONT]
[/FONT]
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]Table { width:100%;}[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]Td { height:100px;}[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=&quot]در مثال بالا جدولمون 100% صفحه رو میگیره و ارتفاع سطر هاش 100 پیکسل.
[/FONT] [FONT=&quot]Text-align[FONT=&quot] : برای تعیین تراز افقی متن داخل جدول استفاده میشه. میتونه شامل مقادیر [/FONT][FONT=&quot]center, left , right , justify[/FONT][FONT=&quot] باشه.[/FONT]
[/FONT] [FONT=&quot]Vertical-align[FONT=&quot] : برای تعیین تراز عموذی متن داخل جدول استفاده میشه. [/FONT]
[/FONT] [FONT=&quot]مثال: در این مثال متن داخل خونه های جدول وسط و بالا تراز میشن:
[/FONT]
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]Td { text-align:center; [/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]        Vertical-align:top;}[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=&quot]Padding[FONT=&quot] : برای تعیین فاصله بین حاشیه و متن داخل جدول از این ویژگی استفاده میشه. این ویژگی رو برای [/FONT][FONT=&quot]td[/FONT][FONT=&quot] و[/FONT][FONT=&quot] th[/FONT][FONT=&quot] مینویسیم.[/FONT]
[/FONT]
کد:
Td { padding:30px;}
[FONT=&quot]برای اینکه برای جدولتون یه عنوان بنویسین میتونین از تگ [FONT=&quot]caption[/FONT][FONT=&quot] استفاده کنین[/FONT]
[/FONT] [FONT=&quot]مثال:
[/FONT]
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"style type="text/css>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3] caption { caption-side:bottom; }[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]<table width="200" border="1">[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <caption> TABLE ONE </caption>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaa;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  <tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaaaaaaaaaaaap;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>aaaaaap;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]    <td>asfsffdsfsp;</td>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]  </tr>[/SIZE][/FONT][/RIGHT]

[RIGHT][FONT=Tahoma][SIZE=3]</table>[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3][FONT=&quot]</[/FONT][FONT=&quot]body[/FONT][FONT=&quot]>[/FONT][/SIZE][/FONT]
[FONT=&quot]فکر کنم مثال کاملا واضحه . با [FONT=&quot]caption-side[/FONT][FONT=&quot] میتونین جای قرار گیری عنوان رو تعیین کنین.[/FONT]
[/FONT] [FONT=&quot]*[FONT=&quot]IE8[/FONT][FONT=&quot] به بالا این ویژگی رو پشتیبانی میکنن.![/FONT][/FONT]
 

پیوست ها

  • collapse.jpg
    collapse.jpg
    7.3 کیلوبایت · بازدیدها: 15
  • sep.jpg
    sep.jpg
    9.2 کیلوبایت · بازدیدها: 9
آخرین ویرایش:

bluekerm

Member
[FONT=&quot]CSS BOX MODEL
[/FONT] [FONT=&quot]همه ی عناصر [FONT=&quot]css[/FONT][FONT=&quot] میتونن بعنوان جعبه هایی در نظر گرفته بشن. این مدل برای طرح بندی عناصر صفحه استفاده میشه برای درک بهتر این مدل شکل ضمیمه شده رو نگاه کنید. [/FONT]
[/FONT] [FONT=&quot]خب همون طور که از شکل پیداست [FONT=&quot]content[/FONT][FONT=&quot] درواقع همون قسمت اصلی اطلاعات یه عنصر هستش. [/FONT][FONT=&quot]Border[/FONT][FONT=&quot] خطوط حاشیه اون محتوا [/FONT][FONT=&quot]padding[/FONT][FONT=&quot] ناحیه ای است بین محتوا ( و خطوط حاشیه ) و [/FONT][FONT=&quot]margin[/FONT][FONT=&quot] و [/FONT][FONT=&quot]margin[/FONT][FONT=&quot] هم فضای خالی دور هر عنصر هستش.[/FONT]
[/FONT] [FONT=&quot]وقتی طول و عرض عنصری رو با [FONT=&quot]css[/FONT][FONT=&quot] و با ویژگی های [/FONT][FONT=&quot]width[/FONT][FONT=&quot] و[/FONT][FONT=&quot] height [/FONT][FONT=&quot] مشخص میکنین در واقع فقط فضای لازم برای نمایش محتوای هر عنصر رو مشخص می کنین. برای این که فضای کلی یه عنصر مشخص بشه از فرمولهای زیر استفاده میکنیم:[/FONT]
[/FONT]
[FONT=&quot]Total Width= width + left padding + right padding + left border + right border + left margin + right margin[/FONT]​
[FONT=&quot]Total Height= height + top padding + bottom padding + top border + bottom border + top margin + bottom margin[/FONT]​
[FONT=&quot]Border-style[FONT=&quot] : مشخص میکنه خطوط حاشیه چه جوری باشن[/FONT]
[/FONT] [FONT=&quot]Border-width[FONT=&quot]: برای تعیین ضخامت خطوط حاشیه. هم میتونیم یه مقدار بر حسب پیکسل بدیم و هم از مقادیر [/FONT][FONT=&quot]thin , medium, thick[/FONT][FONT=&quot] استفاده کنیم.[/FONT]
[/FONT] [FONT=&quot]Border-color[FONT=&quot]: برای تعیین رنگ خطوط حاشیه. میتونین بصورت شفاف نیز تعریف کنین. یعنی :[/FONT]
[/FONT]
کد:
Border-color: transparent;
[FONT=&quot]در این صورت خطوط حاشیه دیده نمیشن!
[/FONT] [FONT=&quot]در [FONT=&quot]css[/FONT][FONT=&quot] میتوینم برای جانب های یک عنصر [/FONT][FONT=&quot]border[/FONT][FONT=&quot] های مختلفی تعریف کنیم. مثال:[/FONT]
کد:
[/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]P { border-top-style:dotted;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-right-style:solid;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-bottom-style:dotted;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]     Border-left-style:solid;}[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]
[/FONT][FONT=&quot]کد بالا رو می تونیم بصورت خلاصه تری هم بنویسیم:
[/FONT] [FONT=&quot]به ترتیب : بالا – راست – پایین – چپ
[/FONT]
کد:
Border-style: dotted solid dotted solid;
[FONT=&quot] و یا: بالا – راست+چپ – پایین
[/FONT]
کد:
Border-style: dotted solid dotted;
[FONT=&quot] و یا : بالا+پایین – راست+ چپ
[/FONT]
کد:
Border-style: dotted solid;
[FONT=&quot]علاوه بر این که میتونیم [FONT=&quot]style[/FONT][FONT=&quot] های مختلفی به جانب های [/FONT][FONT=&quot]border[/FONT][FONT=&quot] بدیم ، امکانش هست که هر کدوم از جانب ها رنگی خاص و ضخامتی خاص داشته باشن. مثال:[/FONT]
کد:
[/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-top-color:red;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-left-color:yellow;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-top-width:10px;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]  [/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Border-left-width:20px;[/SIZE][/FONT][/RIGHT]
[/LEFT]
[FONT=Tahoma][SIZE=3]
[/FONT][FONT=&quot]
CSS OUTLINE
[/FONT][FONT=&quot]این ویژگی به خطی هستش دور عناصر .(دور [FONT=&quot]border[/FONT][FONT=&quot]) [/FONT]
[/FONT]
[FONT=&quot]تعیین رنگ[/FONT]​
[FONT=&quot]color_name
hex_number
rgb_number
[FONT=&quot]invert
inherit[/FONT]
[/FONT]​
[FONT=&quot]تعیین استایل[/FONT]​
[FONT=&quot]none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
[/FONT]​
[FONT=&quot]تعیین ضخامت[/FONT]​
[FONT=&quot]thin
medium
thick
length
inherit
[/FONT]​

[FONT=&quot]CSS MARGIN
[/FONT] [FONT=&quot]این ویژگی فضای اطراف یه عنصر رو مشخص میکنه و بدون رنگ هستش . برای فضای بالا- پایین – چپ- راست میتونیم مقادیر مختلفی داشته باشیم. ترتیب نوشتن هم مثل [FONT=&quot]border[/FONT][FONT=&quot] هاست. ( یعنی بالا- راست-پایین-چپ و ...)[/FONT]
[/FONT] [FONT=&quot]سه جور میتونین این خصوصیت رو مقدار دهی کنین:
[/FONT] [FONT=&quot]1)[FONT=&quot]auto [/FONT][FONT=&quot] : در این حالت مرورگر حاشیه ([/FONT][FONT=&quot]margin[/FONT][FONT=&quot]) ها رو تنظیم میکنه[/FONT]
[/FONT] [FONT=&quot]2)[FONT=&quot]length[/FONT][FONT=&quot]: در این صورت حاشیه های ثابتی بر حسب [/FONT][FONT=&quot]px,em,pt,…[/FONT][FONT=&quot] رو تعیین میکنیم[/FONT]
[/FONT] [FONT=&quot]3)% :[FONT=&quot] بصورت درصدی مشخص میکنیم[/FONT]
[/FONT]
[FONT=&quot]فضای پایین[/FONT]​
[FONT=&quot]auto
length
%
[/FONT]​
[FONT=&quot]فضای چپ[/FONT]​
[FONT=&quot]auto
length
%
[/FONT]​
[FONT=&quot]فضای راست[/FONT]​
[FONT=&quot]auto
length
%
[/FONT]​
[FONT=&quot]فضای بالا[/FONT]​
[FONT=&quot]auto
length
%
[/FONT]​

[FONT=&quot]CSS PADDING
[/FONT] [FONT=&quot]این خصوصیت برای تعیین فضای بین [FONT=&quot]BORDER[/FONT][FONT=&quot] و [/FONT][FONT=&quot]CONTENT[/FONT][FONT=&quot] است.[/FONT]
[/FONT]
[FONT=&quot]تعیین فاصله پایین یک عنصر[/FONT]​
[FONT=&quot]length
%
[/FONT]​
[FONT=&quot]تعیین فاصله چپ یک عنصر[/FONT]​
[FONT=&quot]length
%
[/FONT]​
[FONT=&quot]تعیین فاصله راست یک عنصر[/FONT]​
[FONT=&quot]length
%
[/FONT]​
[FONT=&quot]تعیین فاصله بالا یک عنصر[/FONT]​
[FONT=&quot]length
%
[/FONT]​
 

پیوست ها

  • box-model.gif
    box-model.gif
    4.4 کیلوبایت · بازدیدها: 31

bluekerm

Member
[FONT=&quot]گروه بندی و تو در تو نوشتن سلکتور ها :[FONT=&quot] (CSS Grouping & Nesting Selectors)[/FONT][/FONT]
[FONT=&quot]گروه بندی سلکتورها: در استایل شیت ها اغلب عناصری وجود دارند که می خواهیم استایل مشابهی داشته باشند برای این که حجم کد ها رو کم کنید، میتونیم چند سلکتور رو با هم بنویسیم[/FONT]
[FONT=&quot]مثال:[/FONT]
کد:
H1,h2,p { color:green;}
[FONT=&quot]
[/FONT]​
[FONT=&quot]تو در تو نوشتن سلکتور ها : با یه مثال این طرز نوشتن استایل رو توضیح میدم[/FONT]
[FONT=&quot]مثال:
کد:
[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3][/SIZE][/FONT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"style type="text/css>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]P {[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]color:blue;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]text-align:center;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]marked.[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]{[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]background-color:blue;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]marked p.[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]color:white;[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]{[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<style/>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<body >[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<"div class="marked>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<p > This paraghraph is using marked class nesting in p tag </p>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</div>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<h1 class="marked"> this is a h1 tag with marked class </h1>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]<p> this is a normal p tag </p>[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[/FONT] [FONT=&quot]با این مثال میبینید که تو در تو نوشتن تگ ها چه جوری صورت میگیره. یعنی اگه جایی از کلاس [FONT=&quot]marked[/FONT][FONT=&quot] استفاده کرده باشین و داخل اون تگ از تگ [/FONT][FONT=&quot]p[/FONT][FONT=&quot] استفاده کرده باشین استایل [/FONT][FONT=&quot]marked p [/FONT][FONT=&quot] اعمال میشه.[/FONT][/FONT]
[FONT=&quot] [/FONT]
[FONT=&quot]CSS DIMENSION[/FONT]
[FONT=&quot]خصوصیات زیر برای تعیین اندازه عناصر [FONT=&quot]html[/FONT][FONT=&quot] توسط [/FONT][FONT=&quot]css[/FONT][FONT=&quot] استفاده میشن.[/FONT][/FONT]
[FONT=&quot]تعیین ارتفاع[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]auto
length
%

[/FONT]​
[FONT=&quot]تعیین حداکثر ارتفاع[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]none
length
%

[/FONT]​
[FONT=&quot]تعیین حداکثر عرض[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]none
length
%

[/FONT]​
[FONT=&quot]تعیین حداقل ارتفاع[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]length
%

[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]تعیین حداقل عرض[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]length
%

[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]تعیین عرض[FONT=&quot][/FONT][/FONT]​
[FONT=&quot]auto
length
%

[/FONT]​
[FONT=&quot] [/FONT]
[FONT=&quot]برای مخفی کردن یک عنصر از این دو کد میتونیم استفاده کنیم:[/FONT]
کد:
[/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Display:none[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Visibility:hidden[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[FONT=&quot]
[/FONT] [FONT=&quot]به تفاوت این دو کد توجه کنید:[/FONT]
[FONT=&quot]Visibility:hidden[FONT=&quot] : این کد باعث میشه عنصر مربوطه مخفی بشه ولی مثل حالت نرمال فضا میگیره[/FONT][/FONT]
[FONT=&quot]Display:none[FONT=&quot] : این کد عنصر رو مخفی میکنه و فضایی هم نمیگیره مثل اینه که اصلا این عنصر وجود نداره.[/FONT][/FONT]
[FONT=&quot] [/FONT]
[FONT=&quot]CSS BLOCK AND INLINE ELEMENTS[FONT=&quot][/FONT][/FONT]
[FONT=&quot]در [FONT=&quot]css[/FONT][FONT=&quot] دو دسته میشن عناصر صفحه . یه دسته [/FONT][FONT=&quot]block[/FONT][FONT=&quot] یا بلوکی هستند و دسته ی دیگه [/FONT][FONT=&quot]inline[/FONT][FONT=&quot] . یه عنصر بلوکی کل عرض ممکنه صفحه رو میگیره و یه خط فاصله ایجاد میکنن قبل و بعد از خودشون. مثل [/FONT][FONT=&quot]h1 , p , div[/FONT][FONT=&quot][/FONT][/FONT]
[FONT=&quot]ولی عناصر [FONT=&quot]inline [/FONT][FONT=&quot] فقط همونقدر عرض رو اشغال میکنن که نیاز باشه و فاصله هم ایجاد نمیکنن مثل [/FONT][FONT=&quot]span,a[/FONT][FONT=&quot][/FONT][/FONT]
[FONT=&quot]گاهی لازم میشه عناصر [FONT=&quot]inline[/FONT][FONT=&quot] رو تبدیل به بلوکی کنیم یا برعکس. برای این کار از ویژگی [/FONT][FONT=&quot]display[/FONT][FONT=&quot] استفاده میکنیم[/FONT][/FONT]
[FONT=&quot]مثال:[/FONT]
کد:
[/SIZE][/FONT][LEFT][RIGHT][FONT=Tahoma][SIZE=3]Li { display:inline;}[/SIZE][/FONT][/LEFT][/RIGHT]
  [LEFT][RIGHT][FONT=Tahoma][SIZE=3]Span {display:block;}[/SIZE][/FONT][/LEFT][/RIGHT]
[FONT=Tahoma][SIZE=3]
[FONT=&quot]
[/FONT]​
 

bluekerm

Member

CSS POSITIONIG
ویژگی position در css اجازه میده که موقعیت قرار گیری عناصر رو تنظیم کنید.
4 متد برای تنطیم مکان عناصر وجود دازه:
1) Static : بصورت پیش فرض عناصر html به این صورت تنظیم میشن. یعنی موقعیت اجزا طبق حالت نرمال صفحه تنظیم میشه و عناصر با این positioning توسط ویژگیهای top,left,… تغییر نمی کنند.
2) Fixed : با این روش مکان عناصر بستگی به پنجره مرورگر داره و عناصر با scroll شدن صفحه حرکت نمی کنن. عناصری که دارای این ویژگی باشن میتونن overlap بشن.
3) Relative : تغییرات به حالت نرمال نمایش عناصر بستگی داره. در این حالت هم overlap عناصر امکان پذیره.
4) Absolute : با توجه به اولین والدی که position ای به جز static داشته باشه تعیین میشه اگه همچین عنصر والدی پیدا نشد <html> رو در نظر میگیره به عنوان والد. در اینجا هم overlap امکان پذیره.
حالا چند تا مثال برای اینکه این positioning ها رو بهتر متوجه بشین:
مثال 1:

کد:
 [RIGHT]<"style type="text/css>


table {position:static;


;top:130px


;}left:150px


</style>


<body>


<table width="200" border="1">


<tr>


<td>&nbsp;</td>


<td>&nbsp;</td>


</tr>


<tr>


<td>&nbsp;</td>


<td>&nbsp;</td>


</tr>


</table>


</body>[/RIGHT]

خب اگه این کد رو بنوسید و خروجی رو مشاهده کنین میبینید که ویژگی های top و left هیچ تاثیری نداشته و جدول بالای صفحه قرار میگیره
مثال 2:


کد:
 [RIGHT]<"style type="text/css>


table {position:fixed;


;top:130px


;}left:150px


</style>


<body>


<table width="200" border="1">


<tr>


<td>&nbsp;</td>


<td>&nbsp;</td>


</tr>


<tr>


<td>&nbsp;</td>


<td>&nbsp;</td>


</tr>


</table>


</body>[/RIGHT]

خب حالا خروجی این کد رو مشاهده کنید. جدول از بالا 130 پیکسل و از چپ 150 پیکسل فاصله داره و اگه صفحه مرورگر رو هم کوچیک یا بزرگ کنید هیچ تفاوتی در مکان جدول ایجاد نمی شه.
مثال 3:

کد:
 [RIGHT]<"style type="text/css>


img {position:absolute ;


;top:0px


;left:0px


{ ;z-index:-1


p { position:relative


;}top:0px;left:0px


</style>


<body>


</"img src="../root/logo222.jpg>


<p > This is an OVERLAPPING paragraph!</p>


</body>[/RIGHT]

تو قسمت توضیحات گفتم که با برخی ویژگی ها میشه overlap هم داشته باشیم. با این مثال میبینید چه جوری overlap میشن . اگه به جای position:absolute در استایل img بنویسید position:fixed هم خروجی به همون شکل خواهد بود و overlap میشن. ولی اگه بنویسید static دیگه امکان overlapping وجود نداره.
در مثال بالا از یه ویژگی دیگه هم استفاده کردم به نام z-index .این ویژگی تعیین میکنه کدوم عنصر باید رو قرار بگیره و کدوم زیر. مقدار این ویژگی میتونه منفی یا مثبت باشه و عنصری که z-index بزرگتر رو داشته باشه روی عنصری قرار میگیره که z-index کوچک تری داره.
مثال 4:

کد:
 [RIGHT]<style type="text/css>


.img1 {position:absolute ;


;top:20px


;left:20px


;border:#0F0 dotted


.img2 {position:absolute ;


;top:20px


;left:300px


;border:#F00 dashed


img3 {position:absolute ;.


;top:20px


;left:650px


;border:#0FF solid


;p1 { position:relative.


;top:0px;left:0px


p2 { position:relative.


;top:10px;left:0px


</style>


<body>


<p class="p1">


<img class="img1" src="../root/logo222.jpg" /<


</p>


<p class="p2">


</img class="img2" src="../root/logo222.jpg" <


</p>


<img class="img3" src="../root/logo222.jpg"/<


</body>[/RIGHT]

خب تو این مثال هم میبینین که relative چه جوری عمل میکنه. عکس های اول و دوم با توجه به تگ p که در اون قرار دارن موقعیتشون تنظیم میشه ولی عکس آخر چون parent ای نداره با تگ html تنظیم میشه.
اینم ویژگی هایی که میتونین برای تعیین موقعیت استفاده کنین:




تعیین فاصله از پایین صفحه


auto
length
%




تعیین نوع اشاره گر ماوس


url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left


تعیین فاصله از چپ


auto
length
%




وقتی عنصر اورلپ شد چه اتفاقی بیفته


auto
hidden
scroll
visible


position
absolute
fixed
relative
static




تعیین فاصله از راست


auto
length
%


top


تعیین فاصله از بالا


auto
length
%


z-index
number
auto




 

bluekerm

Member
CSS Float
با ویژگی float در css یک عنصر رو میتوند به راست یا چپ هل بدید. معمولا از این ویژگی برای عکس ها استفاده میشه ولی موقع کار با layout ها هم کاربرد داره.
عناصر فقط بصورت افقی float میشن (یعنی فقط چپ و راست نا بالا و پایین ). خب تو قسمت تعریف float گفتم هل دادن منظور از هل دادن ایه که مثلا یه عکس رو به سمت چپ یه متن هل بدین ، متن مجبور میشه تغییر وضعییت بده تا بتونه عکس رو جا بده تا هم متن نشون داده بشه و هم عکس. مثل کد های زیر:
کد:
<body>
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
<img src="../root/3.jpg" style="float:left">
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text </p>
  </body>
اگه خروجی مثال بالا رو نگاه کنین میبینید که متن بعد از img تغییر وضعییت داده پس:عناصر float شده روی عناصر قبل از خودشون تاثیری ندارن و فقط روی عناصر بعد از خودشون تاثیر میزارن.
حالا برای اینکه تفاوت استفاده از float رو بهتر متوجه بشین یه باره دیگه مثال بالا رو اجرا کنین ولی اینبار قسمت style در تگ img رو حذف کنین.
همچنین میتونین اجازه ندین که عناصری float بشن برای این کار از clear استفاده می کنین.
مثال:
کد:
<"style type="text/css>
Thumbnail. 
}
float:left;
width:110px;
height:90px;
margin:5px;
{
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<"img class="thumbnail" src="../root/2.jpg" width="107" height="90>
<img class="thumbnail" src="../root/2.jpg" width="107" height="80">
<h3>first row without any style!</h3>
<"img class="thumbnail" src="../root/2.jpg" width="116" height="90>
<"img class="thumbnail" src="../root/2.jpg" width="120" height="90>
<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="../root/2.jpg" width="107" height="90">
<"img class="thumbnail" src="../root/2.jpg" width="107" height="80>
<"img class="thumbnail" src="../root/2.jpg" width="116" height="90>
<img class="thumbnail" src="../root/2.jpg" width="120" height="90">
</body>
خروجی این مثال رو ببینین و تفاوت استفاده از float و clear رو بهتر متوجه میشین.
clear
تعیین میکنه از کدوم سمت قابلیت فلوت شدن نداشته باشه left
right
both
none

float
left
right
none
 

bluekerm

Member
CSS Navigation Bars
Navigation bars = لیستی از لینک ها ( منو)
برای ایجاد لیستی از لینک ها به صورت یک منو ساده ابتدا توسط li و ul لیست را ایجاد میکنیم:
کد:
<ul>
<li><a href="1.htm">Page One</a></li>
<li><a href="2.htm">Page Two</a></li>
<li><a href="3.htm">Page Three</a></li>
</ul>
و در قسمت استایل ها برای لیست ، حاشیه ها و تورفتگی ها و بالت های لیستهای معمولی را حذف میکنیم:
کد:
<style>
ul { list-style-type:none;
      margin:0;
     padding:0;}
</style>
خب حالا اگه منوی عمودی می خواهیم باید برای تگ a یه استایل کوچولو بنویسیم. در واقع تگ a رو به بلوکی تبدیل میکنیم :
کد:
a { display:block; 
     width:60px;}
حتما width رو مقدار ثابت بدین تا شکل منو بشه.
حالا یه مثال کامل:
کد:
<head>
 < "  style type="text/css>
 ; ul { list-style-type:none
      ; margin:0px
	  ; padding:0px
  }
 ; a:link { display:block
     ; border:1px
	;  border-color:#F3F
	 ; border-style:dashed
     ; font-weight:200px
	;  color:#F0F
	 ; background-color:#373737
	 ; width:120px
	 ; text-align:center
	 ; padding:4px
	 ; text-decoration:none
  }
  a:hover,a:active
  {; background-color:#404040}
<style/>
<head/>
<body>
<ul>
<li><a href="1.htm">Page One</a></li>
<li><a href="2.htm">Page Two</a></li>
<li><a href="2.htm">Page Three</a></li>
</ul>
برای ساخت منو های افقی از دو روش میتونین استفاده کنین.
روش اول: li ها را به صورت inline نمایش میدهیم.
مثال: همون مثال قبل ولی قسمت استایل این جوری تغییر میکنه:
کد:
<" style type="text/css>
 ; ul { list-style-type:none
      ; margin:0px
	  ; padding-top:7px
	  ; padding-bottom:7px
  {
 ; li{ display:inline
{
  a:link {
     ; border:1px
	 ; border-color:#F3F
	 ; border-style:dashed
     ; font-weight:200px
	 ; color:#F0F
	 ; background-color:#373737
	 ; text-align:center
	 ; text-decoration:none
	  {
  a:hover,a:active
  {; background-color:#404040}
</style>
روش دوم: استفاده از float
در مثال بالا همه لینک ها عرض های متفاوتی داشتند برای این که عرض همه یکسان باشهfloat ، li ها را تنظیم میکنیم و width رو هم برای a تنظیم میکنیم.
کد:
[LEFT]{;Li { float:left
A { display:block; width:120px[/LEFT]
 

bluekerm

Member
CSS Image Gallery
با css میتونیم یه گالری عکس داشته باشیم. مثال زیر یه گالری ساده رو میسازه
مثال:
کد:
<style type="text/css"> 
div.img { margin: 2px;
 border: 1px solid #0000ff;
 height: auto;
 width: auto;
 float: left;
 text-align: center; }
 div.img img { display: inline;
 margin: 3px;
 border: 1px solid #ffffff; }
 div.img a:hover img {border: 1px solid #0000ff;}
 div.desc { text-align: center;
 font-weight: normal;
 width: 120px;
 margin: 2px; }
 </style>
</head>
 <body>
 <div class="img"> <a target="_blank" href="1.htm"> <img src=" l.jpg" width="110" height="90" /></a>
 <div class="desc">image one</div>
 </div>
 <div class="img"> <a target="_blank" href="2.htm"><img src="2.jpg" width="110" height="90" /></a> 
<div class="desc">image two</div>
 </div>
 <div class="img"> <a target="_blank" href="3.htm"><img src="3.jpg" width="110" height="90" /></a>
 <div class="desc">image three</div>
 </div>
 <div class="img"> <a target="_blank" href="4.htm"><img src="4.jpg" width="110" height="90" /></a>
 <div class="desc">image four</div>
 </div>
 </body>
 

bluekerm

Member
CSS Image Opacity/Transparency
این یکی از ویژگی های css استاندارد نیست ولی در همه ی مرورگرهای مدرن کار میکنه.
برای ساخت یه عکس شفاف :
کد:
<img  src="1.jpg" width="150" height="113" style="opacity:0.4;filter:alpha(opacity=40)"/>
Firefox از ویژگی opacity:x برای شفافی استفاده میکند و IE از filer:alpha(opacity=x) استفاده میکند.
در firefox در دستور opacity:x عدد x میتونه عددی بین 0.0 تا 1.0 باشه.و عدد کوچکتر باعث شفافیت بیشتر میشه. ( تا اونجایی که من امتحان کردم google chrome هم از همین ویژگی استفاده میکنه)
در IE در دستور filter:alpha(opacity=x) عدد x میتونه بین 0 تا 100 باشه. و عدد کوچکتر باعث شفافیت بیشتر میشه.
مثال:
کد:
<img src="3.jpg" 
style="opacity:0.4;filter:alpha(opacity=40)"
 onmouseover="[COLOR="Red"]this.style.opacity=1[/COLOR];[COLOR="SeaGreen"]this.filters.alpha.opacity=100[/COLOR]"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
در این مثال هر وقت رویداد ماوس روی عکس قرار میگیره عکس به حالت اولیه ( بدون شفافیت) نمایش داده میشه. درواقع دستو onmouseover وقتی اجرا میشه که ماوس روی عکس قرار بگیره و onmouseout وقتی اجرا میشه که ماوس روی عکس نباشه.
قسمتی که با قرمز مشخص شدن برای مرورگر firefox هستن و قسمت های سبز برای IE.
مثال: اینم یه کاربرد جالب از این ویژگی CSS
کد:
<html>
<head>
<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  background:url(3.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
   filter:alpha(opacity=60);
   opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>
خروجی این مثال رو میتونین در عکس ضمیمه شده ببینید.
 

پیوست ها

  • transparent_example.jpg
    transparent_example.jpg
    51.9 کیلوبایت · بازدیدها: 24

ArefGod

Member
خوب پس کی کامل میشه هر وقت کامل شد pdf بزار :mad:اصلا pdf بدرد هم نمی خوره!:green:
 

bluekerm

Member
خوب پس کی کامل میشه هر وقت کامل شد pdf بزار :mad:اصلا pdf بدرد هم نمی خوره!:green:

:-? نظر شماست
در ضمن قرار نبود تو pdf چیز خاصی باشه و چیزی اضافه بشه همین مطالب رو که نوشتم در چند تا پست همینا رو خواستن pdf کنم :green:
 

bluekerm

Member
Image Sprites
Image sprite در واقع یه مجموعه از تصاویر است که در یک عکس قرار دارند . مثل عکس 1
این عکس سه قسمته ولی در یه فایل.
با css ما می تونیم فقط یه قسمت عکس رو که می خوایم نشون بدیم
مثال: در اینجا فقط یه قسمت عکس که شامل عکس "خونه" هست رو نشون می دیم.
کد:
[LEFT]<"DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd!>
<html>
<head>
<"style type="text/css>
img.home
}
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
{
</style>
<head/>
<body>
<"img class="home" src="img_trans.gif" / >
<body/>
		<html/>
[/LEFT]
در قسمت css مشخص کردیم چقدر از عکس مشخص بشه.
خب حالا می خواهیم از این ویژگی استفاده کنیم و یه navigation list ( معادل فارسیشو نمی دونم دقیقا ) ایجاد کنیم.
مثال:
کد:
[LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html> 
<head>
<style type="text/css"> 
#navlist{position:relative;}
 #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} 
#navlist li, #navlist a{height:44px;display:block;}
 #home{left:0px;width:46px;}
 #home{background:url('img_navsprites.gif') 0 0;}
 #prev{left:63px;width:43px;}
 #prev{background:url('img_navsprites.gif') -47px 0;}
 #next{left:129px;width:43px;}
 #next{background:url('img_navsprites.gif') -91px 0;}
 </style>
 </head> 
<body>
<ul id="navlist"> <li id="home"><a href="home.htm "></a></li>
 <li id="prev"><a href="prev.htm"></a></li>
 <li id="next"><a href="next.htm"></a></li>
 </ul>
 </body>
 </html>
[/LEFT]
با یه مثال دیگه نشون میدیم که میشه با این ویژگی از حالت hover هم استفاده کنیم. فقط کافیه یه عکس دیگه اضافه کنیم. (عکس 2) قسمت بالا برای حالت نرمال و قسمت پایین برای حالت hover.
مثال:
کد:
[LEFT]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <style type="text/css">
 #navlist{position:relative;} 
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
 #navlist li, #navlist a{height:44px;display:block;}
 #home{left:0px;width:46px;}
 #home{background:url('img_navsprites_hover.gif') 0 0;}
 #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
 #prev{left:63px;width:43px;}
 #prev{background:url('img_navsprites_hover.gif') -47px 0;}
 #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
 #next{left:129px;width:43px;}
 #next{background:url('img_navsprites_hover.gif') -91px 0;} 
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style> 
</head> 
<body>
 <ul id="navlist">
 <li id="home"><a href="default.asp"></a></li>
 <li id="prev"><a href="css_intro.asp"></a></li>
 <li id="next"><a href="css_syntax.asp"></a></li> 
</ul> 
</body>
 </html>
[/LEFT]
 

پیوست ها

  • img_navsprites.gif
    img_navsprites.gif
    2.9 کیلوبایت · بازدیدها: 7
  • img_navsprites_hover.gif
    img_navsprites_hover.gif
    5.1 کیلوبایت · بازدیدها: 9
آخرین ویرایش:

bluekerm

Member

خب حالا تعیین می کنیم که document ما چه جوری نشون داده بشه در رسانه های مختلف مثلا روی صفحه نمایش ، روی کاغذ و ... چه جوری باشه.
بعضی از ویژگی های css فقط برای بعضی از رسانه ها قابل استفاده هستند مثل voice-family که فقط برای رسانه های شنوایی قابل استفاده اند ولی font-size برای صفحه نمایش و پرینت استفاده میشه. و یا مثلا اگه قرار باشه document روی مانیتور نشون داده بشه باید فونت درشت تری داشته باشه و اگه قرار باشه چاپ بشه فونت سایز کوچیک تر هم قابل استفاده است.
@media
@media این امکان رو میده تا قوانین مختلفی رو برای رسانه های مختلف تعریف کنیم.
مثال:
کد:
<html>
<head>
<style>
@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  p.test {font-weight:bold;}
  }
</style>
</head>

<body>
....
</body>
</html>

در این مثال مشخص کردیم که اگه روی مانیتور نشون داده شد فونت سایز 14 از خانواده verdana و sans-seif باشه ( @media screen) و همین طور در قسمت @media print ویژگی که باید موقع پرینت داشه باشه رو تعیین کردیم. @media screen,print هم که تعیین میکنه کدوم ویژگی در هر دو مشترک باشه.

all : برای همه رسانه ها
aural : برای رسانه های گفتاری و شنیداری
braille : برای رسانه هایی که از بریل استفاده می کنن (نابینایان)
embossed: برای پرینتر های بریل
handheld: برای وسایل کوچک و قابل حمل
print : برای پرینتر
projection: برای نمایش با ویدئو پروژکتورمثل سلاید ها
screen : برای نمایش در مانیتور
tty : برای نمایش در رسانه هایی مثل ترمینال ها و تله تکست ها
tv : برای نمایش در تلوزیون

 
آخرین ویرایش:

جدیدترین ارسال ها

بالا