آموزش Css به زبان خودموني

amirlol · Sep 27, 2006

سلام رفقا :
از امروز سعي مي كنم آموزش كلي CSS و سيستم مبتني بر DIV يا همون table less رو براتون بنويسم و بزارم
سعي مي كنم ساده و روان بنويسم و بدون ابهام ولي از شما خواهش مي كنم سوالاتتونو در قسمت هاي ديگه بژرسيد و فقط بزاريد اين تاپيك به آموزش بژردازه
قدم به قدم باهم ميريم جلو و سعي مي كنيم كه تو اين دوره چيزهايي رو يادبگيريم و ياد بديم كه براي آينده امان مفيد باشد

Css مخفف كلمات Cascading Style Sheets مي باشد و در حال حاضر در 2 ور‍ژن css1 و css2 موجود مي باشد كه css2 همان css1 است با همان طرز نوشتن و همان كارايي ولي سيستم مديايي و هوشمنديش بيشتر و امكانات جذاب تر!! و ازجمله كاررايي هاي css 2 در فايل هاي xml است
در كل ميشه به اين رسيد كه css براي صفحه بندي و زيبايي سايت بسيار كارامد است

كلمات اختصارري اي كه از اين به بعد با آنها سر و كار داريم از موارد زير مي باشد.
IE همان اينترنت اكسپلورر خودمان است
F به معني فايرفاكس
N به معني نت اسكيپ
O به معني اپرا
Saf به معني سافاري

مي باشد كه معمولآ براي اينكه بگوييم دستورات در كدام برازر ها و ورژن هاي آن به خوبي كار مي كند استفاده مي شود و w3c هم معرف اينكه اين css ورژن يك است يا دو
براي مثال :
دستور background :
دستوريست براي استفاده بك گراند در سيستم كه دستور هاي زير را پشتيباني مي كند
..............
..........
......
..

W3C = 1
IE = 4
F = 1
N = 6
O = 3
Sof = 1
معني اين ها :
ورژن css ما 1 است
اينترنت اكسپلورر 4 به بالا از اين دستور استفاده مي كنه !
فايرفاكس ورژن 1 به بعد
نت اسكيپ 6 به بعد
اپرا 3 به بعد
سافاري 1 به بعد

اين بود مقدمه بر css
در طول درس سعي مي كنم همه رو با نونه كد ها و مثال هاي متنوع بزارم و يعضي ها رو هم در فايل هاي پيوست ولي اگز باز سوالي پيش آمد در قسمت سوالات قرار دهيد تا بررسي كنم و جواب آن را به شما و بقيه دوستان بدهم

mhofayyaz · Sep 28, 2006

خيلي عالي بود . اميدوارم كه همين طور ادامه بدهيد

amirlol · Sep 29, 2006

قسمت دوم

قسمت دوم روش ها و ...
ببینید ما برای درج کد های CSS از 3 روش استفاده می کنیم که آنها را در زیر می بینیم و مورد بررسی قرار می دهیم
روش اول روش فایل css :
که ما فایلی با پسوند css درت کرد کد ها را در آنها قرار می دهیم و با فرمان زیر کد هارا باز خونی می کنیم

کد:

<LINK ID="StyleSheet" REL="StyleSheet" TYPE="text/css" href="style.css"></LINK>

ببینید در این مدل که از نظر من میشه گفت بهتریم مدل است اینه ک ما با تغییر کامل فایل css کل طراحی صفحه را تغییر می دیم که این خودش بهترین روش برای تملیت بندیه

روش دوم روش درج کد در بالای صفحه

کد:

<STYLE>
... { ..........  }
</STYLE>

در این روش کد در بالای صفحه و در تک style قرار می گیرد

روش سوم روش استفاده در تک منحصری : روش تگ به تگ

کد:

<p style="……..">

در این روش کد فقط و فقط برای این قسمت قابل اجراست و بس

در روش های اول و دوم کد ها در بین تو براکت تعیریف می شوند (براکت باز و بسته "{}" )
برای یک نواختی در کد های html کافیست اسم تگ را بدون علامت کوچکتر و بزرگتز قرار می دهیم و از آن به بعد آن تگ آن خواصیت را دارا می شود

کد:

<STYLE>
P { FONT: normal }
</STYLE>

خوب در اینجا هر بار که از تگ <p> استفاده میشه خواسیت موجود برایش اعمال می شود
خوب ما برای هر تک یک ID و یک CLASS داریم
اگر کلاسی را بخواهیم معرفی کنیم یک نقطه و بعد اسم کلاس را می نویسیم

کد:

<p class="test">
<STYLE>
.test { FONT: normal }
</STYLE>

و برای استفاده از تگ ID اول یک علامت نامبر (#) و بعد اسم متغییر

کد:

<p ID="test">
<STYLE>
#test { FONT: normal }
</STYLE>

مس توانیم از چندین کلاس مختلف نیز استفاده کنیم که بصورت زیر عمل میشه

کد:

<p class="test test1 test2">

اسم هر کلاس یک فاصله اسم کلاس بعد

و حال می خواهیم فقط در قسمتی از صفحه دستور ما اجرا شود و در بقیه صفحه قسمت ها نه
بصورت زیر عمل می کنیم

کد:

<STYLE>
.test { FONT: normal } DIV.cen
</STYLE>

کد:

<div class="cen">
<p class="test">
testing
</p>
</div>


<p class="test">
testing
</p>

در این جا فقط زمانی خاصیت class test اعمال می شود که در تک DIV و کلاسی در آن تگ به نام cen داشته باشیم
پس در کد اول اجرا و در کد دوم غیر قابل اجراسیت

پایان قسمت دوم

NabiKAZ · Oct 20, 2006

منتظر باقیش هستیم ها ...

agri · Oct 21, 2006

خیلی عالیه. امیدوارم سریعتر ادامشو هم بذارین.

echessdesign · Oct 21, 2006

amirlol دوست عزیز
زمانی که شما می خواهید Style sheet خارجی رو به یک صفحه لینک کنید، در تگ link ، استفاده از خصیصه media اجباری است. به ایم مثال توجه کنید:

HTML:

 <link rel="stylesheet" type="text/css" href="root.css" media="all">

ظبق قوانین W3C ، استفاده از خصیصه media در تگ link اجباری بوده، اما خصیصه id را در تگ link برای اولین بار است که می بینم !!!!

در روش دوم که شما نوضیح دادین، طبق قوانین W3C نوشتن خصیصه type در تگ CSS اجباری است:

HTML:

  <style type="text/css">  <!--      --> </style>

استفاده از <-- --!> توصیه می شود زیرا، کد های CSS شما را از دید مرورگر هایی که CSS ساپرت نمی کنند مخفی نگه میدارد و از نشان دادن آن بر روی صفحه مرورگر جلو گیری می کند.

روش دیگری جهت اعمال style sheet خارجی به صفحه وجود دارد، روشی که برای جلوگیری از خطا های برنامه مرورگر (خصوصا Netscape 4) بکار میرود. این قانون باید پیش از هر قانون دیگری نوشته شود:

HTML:

 <style type="text/css"> <!--  @import url('root.css');   -->   </style>

دوست عزیز amirlol
از توجه شما جهت ارتقا سطح علمی دوستان سپاسگزارم.
لطفا از ارایه توضیحات ناقص و عدم توجه به استاندارد ها ، جدا خود داری فرمایید.
موفق باشید.

amirlol · Oct 23, 2006

دوست من خیلی ممنون از توجهت اما کمی هم حق بده که این مسایل که خیلی ابتدایی هست بعضی اوقات آدم یادش میره

logical_82 · Jan 1, 2007

بازم یکی اومد یه چیز یاد بده توپیدید بهش

همین می شه که دیگه ادامه نمی ده دیگه !!!

echessdesign · Jan 2, 2007

logical_82 گفت:
بازم یکی اومد یه چیز یاد بده توپیدید بهش

همین می شه که دیگه ادامه نمی ده دیگه !!!

دوست عزیز
همه ما از آموزش مفید استقبال می کنیم ، اما نباید فراموش کنیم که آموزش در صورتی که اشتباه باشد، چیزی جز بر داشت اشتباه برای دانش آموز ، زیر سوال رفتن سطح علمی آموزش دهنده و Forum مربوطه در بر نخواهد داشت.
کیفیت رو همیشه به کمیت ترجیح بدید.

amirlol · Apr 20, 2007

خوب باز دیک کردم اونم خیلی زیاد

سعی می کنم تا فردا قسمت 3وم را بزارم

amirlol · Apr 22, 2007

خوب درس امروز که میشه جلسه سوم آموزش با کمی دیرکرد که ببخشید
امروز یک راست می ریم سر مباحث اصلی
ببینید برای تگ های لینک دار که در کد های HTML بهش می گن A tag و در نوشتار بصورت <a href="">link</a> نوشته میشود
خوب برای ویرایش و استایل بندی بصورت زیر استفاده کی مکنیم

HTML:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
 { A:hover { color: pink; TEXT-DECORATION: none

خوب حالا این دستور برای همه تگ های لینکی بکار میره ! و اگر بخواهیم فقط در جایی خاص باشد از همون روشی که گفتم استفاده می کنیم
حالا تحلیل بر کد
فرمان a:link زمانی هست که هیچ اتفاقی برای لینک نیوفتاده باشد
نه موس رویش رفته و نه رویش کلیک شده باشه
خوب دستور COLOR رنگ فونت رو مشخص می کنه و دستور font-size اندازه فونت رو تغیر می ده که به 2 صورت است یا درصدی که در مثال بالا نوشته شده و یا بصورت پیکسلی که کافیست عدد + کاراکتر px استفاده شود .

کد:

.exam {font-size : 12px}

توجه داشته باشد زمانی که چند خصیصه برای کلاسی در نظر گرفته می شود از کاراکتر سمیکالون یا همون نقطه ویلگول ";" استفاده می شود.
فرمان A:active زمانی هست کاربر با موس روی لینک کلیک کند .
فرمان a:visited زمانی هست که حتی یک بار آن لینک توسط کاربر دیده شده باشد
فرمان a:hover زمانی هست که کاربر با موس روی آن لینک برود . نیازی به کلیک با موس رویش نیست.

HTML:

TEXT-DECORATION: none

این دستور بصورتی است که حالت فوند را نمایش می دهد در 4 صورت می باشد . که در زیر نمایش داده می شود

line-through بصورت خطی بر درون متن
none بصورت ساده بدون خط
overline بصورت خطی در بالای متن است
Underline بصورت خط زیر دار می باشد

می باشد .
---------------------------------------------------

خوب حالا می ریم یه قسمت دیگه که شاید خیلی مهم باشد .

HTML:

BODY { background: url(bar.gif) white; background-repeat: repeat-x }

خوب این دستور همونطور که می بینید دستور body خودمونه خیلی کارا باهاش می شه کرد .
درستور اول که دستور background است با دستور جانبی url آدرس فیزیکالی و پروی یک عکس رو میگیره و در مرحله بعدش یک پشن زمینه سفید می زاره که تا عکس لود بشه و یا اگه لود نشه استفاده بشه
دستور بعد دستور background-repeat است که یا repeat-x یا repeat-y و یا repeat و یا no-repeat است
که بترتیب از چپ به راست - بالا به پایین - از هر جهت – بدون تکرار می باشد
** در خود دستور background دستوری هست به نام fixed که بعد هر کدوم از متود می تونیم بزاریمش
این باعث میشه عکسمون ثابت بمونه و نوشته ها روی قلط بخوره

و این بود آموزش شماره 3

ULFSoft · Sep 9, 2007

سلام
مي‌خواستم بگم اگه ممكنه آموزش‌ رو ادامه بدين.

hamid_isf_1360 · Oct 7, 2007

واقعا عالی بود ادامه بدید لطفا

NabiKAZ · Oct 11, 2007

بک گراند رو از چپ میشه اینجوری فاصله داد:

HTML:

background: url("error.png") no-repeat 10px center;

از راست چطوری میشه؟

amirlol · Oct 16, 2007

سعی می کنم قست چهارم رو فردا بزارم ! ببخشید یادم رفته بود ! اینجا آموزشی رو شروع کردم

Mohammadreza · Oct 20, 2007

امير جان خسته نباشيد
وجودتون باعث افتخاره !
ممنون مي شم اگه چند تا ترفند توپس هم ياد بدين براي مثال : ( مثل ساخت منوي افقي(هدر) با استفاده از ليستها )

NabiKAZ · Oct 21, 2007

به نظر شما این ستم نیست که در مرورگر IE6، خاصیتهای padding ، border و... روی برچسبهای select و option عمل نمیکنه ؟!
حتی جالبه که در Opera هم کار نمیکنه و تا جایی که من تست کردم تنها در FireFox کار میکند.
هکی وجود نداره ؟

Mohammadreza · Oct 24, 2007

و اينكه خصوصيت hover براي Ie اصلا كار نمي كنه ( به غير از لينكها )
البته با HTC مي شه IE6 رو يه كاريش كرد IE7 كه اصلا با همونم نميشه .

NabiKAZ · Oct 26, 2007

Mohammadreza گفت:
و اينكه خصوصيت hover براي Ie اصلا كار نمي كنه ( به غير از لينكها )
البته با HTC مي شه IE6 رو يه كاريش كرد IE7 كه اصلا با همونم نميشه .

مطمئنی؟!
با توجه به اینکه ie7 جهش بزرگی به سمت استانداردها برداشته ، خیلی بعیده این مورد ساده رو تصحیح نکرده باشه...
الان ie7 در دسترس نیست که تست کنم.
ولی به قول یکی از developer های microsoft در اینجــا
: