آموزش Css (قابلي نداره)

Ealireza · May 26, 2004

با سلام به اساتيد
ببخشيد گفتم شايد بد نباشه .....
خوب بگزريم (اگه اشكالي توي اين متن هاي بود به بزرگي خودتون ببخشيد :wink:

)
خوب اول از همه بايد بگم كه Css مخفف cascading style sheets هست و Css ها يك سري فراميني هست كه شما ميتوانيد به واسطه آن يك سري جلوه هاي ويژه و يا يك سري قادير پيش فرض را براي سايتتان تعريف كنيد
براي استفاده از Css دو روش داريد يكي استفاده از تگ مثل

کد:

&lt;Style>
Css Codes
&lt;/Style>

يا بصورت يك فايل تعريف ميشوند مثل :

کد:

&lt;link rel="stylesheet" type="text/css" href="FileName.css">

معولا Css ها داخل تگ [color=]<[/color][color=]Head[/color]> قرار ميگيرند
به وسيله Css ميتوانين يك سري مقادير پيش فرض براي تمامي
كليد ها - متن ها - متن هاي داخل Tabel و Div و.....
براي مقال اگر بخواهيم Font : Tahoma رو پيش فرض قرار دهيم از اين كد استفاده ميكنيم<

کد:

Style>
P {FONT: 11px Tahoma}
&lt;/Style>

با اين كد تمامي متوني كه در تگ <P> قرار بگيرند با اين آرايش نمايش داده ميشوند مثل

کد:

&lt;p>Test&lt;/p>

البته خصوصيات ديگر هم ميشود اضافه كرد كه براي اين كار بايد از ; استفاده كرد مثل :

کد:

&lt;Style>
P {FONT: 11px Tahoma;COLOR: #000066}
&lt;/Style>

فعلا براي امروز بسه
اگه مشكل / سوالي داشتيد بپرسيد من در خدمتم
خلاصه اگه اشكالي هم ديديد به بزرگي خودتون بيخيال بشين

در جلسات بعدي طريقه طريف كليد ها منوها و... رو هم خدمتتون عرض ميكنم :arrow:

پيروز و موفق باشيد :wink:

ara · May 26, 2004

جالب بود مرسي

sarallah · May 26, 2004

عالي بود ٬ لطفا ادامه بديد

Ealireza · May 28, 2004

چقدر استقبال شد D:
بابا من بیخیال شدم

NorTh HaCkeR · May 29, 2004

آقا عاليه تو ادامه بده به ملت چي كار داري!؟

-------
محمد

Masih · May 29, 2004

بسيار خوبه. خسته نباشي. منتظر مقالات بعديت هم هستيم.

مسيح.

mahyar - r · May 29, 2004

دستت درد نكنه عاليه

Tyros · May 29, 2004

آقا خيلي خوب بود. اميدوارم كه اين آموزش ها به همين منوال جلو بره.
موفق باشيد... .

Ealireza · May 30, 2004

متغيير ها در Css

در Css میتوان یک متغییر را برای چند Tag معرفی کرد
این کار باعث این میشود که هم حجم صفحه کمتر شود و هم سرعت لود
و استفاده از این متغییر ها کار شما را در طراحی خیلی آسان تر میکند

برای تعریف یک متغییر از

کد:

&lt;STYLE>
.Name { Codes }
&lt;/STYLE>

جای Name میتوانید نام متغییر خود را بنویسید
بهترین استفاده از این متغییر ها استفاده در قالب هست که قالب سازان حرفه ای نهایت استفاده را از CSs می برین تا هم سرعت لود و هم حجم صفحه را کم کنند
از این روش میتوان برای جدا کردین تیتر متن از متن اصلی استفاده کرد
مثلا تیتر اصلی نارنجی
متن آبی
این چیزی است که در بیشتر قالب ها ازش استفاده شده
حالا یک مثال برای همین تیتر

کد:

&lt;STYLE>
.Text1 {
FONT-WEIGHT: bold; FONT-SIZE: 22px; COLOR: #ff0000; LINE-HEIGHT: 140%; FONT-FAMILY: veranda
}
.Text2 {
FONT-WEIGHT:bold;  FONT-SIZE: 11px; COLOR: #006699; LINE-HEIGHT: 120%; FONT-FAMILY: Tahoma
}
.Text3 {
FONT-WEIGHT:Normal; FONT-SIZE: 11px; COLOR: #0000ff; LINE-HEIGHT: 120%; FONT-FAMILY: Tahoma
}
&lt;/STYLE>

در اینجا سه تا متغییر داریم که اولی جهت تیتر و دومی جهت سوال و سومی جهت جواب استفاده میشود استفاده میشود
بررسی متغییر ها

کد:

FONT-WEIGHT: bold

این کد باعث کلفت شدن فونت با به اصطلاح بولد شدن آن میشود

کد:

FONT-SIZE: 22px

سایز و اندازه فونت رو کنترول میکند
البته واسه متن بهترین انتخاب 8 هست که جلوه قشنگی دارد

کد:

COLOR: #ff0000

رنگ قلم را مشخص میکند توجه داشته باشید که رنگ حتما باید بصورت HEX CODE باشد

کد:

LINE-HEIGHT: 140%

فاصله بین دو خط را کنترول میکند

کد:

FONT-FAMILY: veranda

نوع قلم رو کنترول میکند
حالا باید یاد بگیریم که چطوری Css خودمون رو احضار کنیم
برای احضار کردن یک Css باید از Class استفاده کرد مانند

کد:

&lt;Div Class="ClassName"> CODES  &lt;/Div>

به وسیله کد بالا کلاس ClassName به تگ Div معرفی میشود و خصوصیات این تگ را کنترول میکنید
حالا برای مثالی که در اول صفحه آوردیم من یک مثال برای استفاده از کلاس هاش میگم

کد:

&lt;Div Class="text1">Test (Title)&lt;/Div>&lt;Br>
&lt;Div Class="text2">Why Majid Online?&lt;A Class="text3"> Beacuse Have Best Engineer And Best Visitor's&lt;/A>&lt;/Div>

خوب دیدید که چطوری برای متن از کلاس و متغییر های Css استفاده کردیم
حالا برای دکمه ها - جداول و... میتوانید از Css کمک بگیرید
البته اگه مشکلی داشتید همین جا بگید تا من راهنمایی کنم :wink:

Masih · May 30, 2004

دوست عزيز اگر اين ارسال آخرت رو بصورت يك تاپيك جداگانه بگذاري خيلي بهتره. درضمن اگر ميتوني مقالاتت رو براي سايت هم بفرست تا در بخش مقالات قرار بگيره.

موفق باشي.
مسيح.

Tyros · May 30, 2004

Masih-Evanescence گفت:
دوست عزيز اگر اين ارسال آخرت رو بصورت يك تاپيك جداگانه بگذاري خيلي بهتره. درضمن اگر ميتوني مقالاتت رو براي سايت هم بفرست تا در بخش مقالات قرار بگيره.

موفق باشي.
مسيح.

با صحبت آقاي Masih-Evanescence موافقم. چون منم ميخوام اين مقالات رو به صورت HTML ذخيره كنم و از ابتدا براي هر مطلب و مقاله به ترتيب نام گزاري كنم پس به نظر من به صورت جدا بنويسيد و يا به صورت مقاله هاي مجزا به سايت اصلي ارسال كنيد خيلي بهتراست...
خلاصه ببخشيد پر حرفي كردم!!!

موفق باشيد... .

Ealireza · May 30, 2004

Masih-Evanescence چشم
مرسي از راهنماييت حالا بايد اين رو به ايميل مجيد بفرستم
ميشه بگي كجا

پيروز و موفق باشيد

iman_flash · Jun 1, 2004

ممنون از آموزشتون
شما همين متني كه نوشتي رو به صورت يك صفحه html ساده با سليقه خودت درست كن بعد اون صفحه رو به ايميل مجيد بفرست

موفق باشيد

Hamed_jon · Jun 1, 2004

موفق باشي همونطور كه دوستان گفتند بفرست برا قسمت مقاله تو سايت تا ديگران هم استفاده كنند...

Ealireza · Jun 3, 2004

چشم دارم متن رو آماده ميكنم

hussein · Jun 4, 2004

دستت درد نكنه خيلي مطالب خوبي بود لطفا ادامه بده و در آموزش هاي بعدي لطف كنيد با مثال پيش برين وفكر كنيد هيچ كس در اين مورد چيزي نميدونه واز صفر شروع كرده .

ممنون