شروع آموزش CSS قسمت اول : ( اصول ابتدایی ) CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم <!--[if !supportLineBreakNewLine]--> نحوه تعریف : به چار روش یک استایل تعریف می شود : پیشفرض browser استایل خارجی ( در یک فایل با پسوند .Css و سپس خواندن آن در تگ <head> ) استایل داخلی ( درون تگ <head> ) استایل خطی ( نوشتن استایل برای هر تگ در خود تگ ) دقت کنید که ترتیب اولیت تعریف ها از پایین به بالا است . یعنی اگر یک استایل به دو صورت تعریف شده باشد اولیت با استایل شماره بیشتر است ( بالاترین اولیت با استایل خطی است ) . ___________________________________________________________________ آموزش CSS قسمت دوم اصول نوشتن استایل : یک دستور CSS از سه قسمت تشکیل شده است: سلکتور یا انتخابگر (selector)، ویژگی (property) و مقدار (value). این سه قسمت در CSS به صورت زیر نوشته می شوند: کد: selector {property: value} <!--[if !supportLineBreakNewLine]--> <!--[endif]--> سلکتور معمولاً یکی از تگهای HTML یا سایر عناصر صفحه است که می خواهیم ویژگیهایی را برای آن تعریف کنیم. ویژگی ها مشخصاتی هستند که ما می خواهیم آنها را تغییر دهیم و مقادیر هم مقدار آن ویژگی را تعیین می کنند که ممکن است یک اندازه برای تعیین ارتفاع، یک رنگ، آدرس یک تصویر و … باشند. برای جدا کردن ویژگی ها از مقادیر آنها از علامت دو نقطه ( : ) استفاده می کنیم و ویژگیها و مقادیر را درون آکولاد ( {} ) قرار می دهیم تا از سلکتور مجزا باشند. برای مثال دستور زیر برای مشخص کردن رنگ متن در صفحه استفاده می شود: کد: body {color: black} <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com تذکر: اگر مقداری که استفاده می کنید از چند کلمه مجزا تشکیل شده است از علامت دابل کوت ( ” ” ) در اطراف آن استفاده کنید: کد: body {font-family: “Times New Roman”} <!--[if !supportLineBreakNewLine]--> <!--[endif]--> تذکر : اگر از چند ویژگی برای یک سلکتور استفاده می کنید باید ویژگیها را با یک نقطه ویرگول ( ; ) از هم جدا کنید. برای نمونه در مثال زیر یک پاراگراف با متن وسط چین و آبی رنگ را تعریف می کند: کد: p { text-align: center; color:blue } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> برای اینکه استایلی که می نویسید قابل فهم تر باشد می توانید هر ویژگی را در یک سطر جداگانه بنویسید. مانند زیر: کد: p { font-family: Tahoma; font-size: ۱۰pt; color: black } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> گروه بندی سلکتورها : شما می توانید از یک ویژگی برای چندین سلکتور استفاده کنید بدون آنکه نیازی باشد برای هر سلکتور کد جداگانه ای بنویسید. برای این کا باید نام همه سلکتور ها را به دنبال هم بنویسید اما به خاطر داشته باشید که سلکتور ها باید به وسیله یک کاما از هم جدا شده باشند. در مثال زیر رنگ متن را برای ۵ تگ متفاوت HTML مشخص می کنیم: کد: p,h۱,h۲,div,table { color: blue } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com نکته: نباید بعد از آخرین سلکتور از کاما استفاده شود. این باعث می شود تا بعضی مرورگرها از استایل چشم پوشی کنند. برای مثال نمونه زیر غلط است: کد: p, a, h۱, { color: #۳۳۳۳۳۳ } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> ولی نمونه زیر صحیح است: کد: p, a, h۱ { color: #۳۳۳۳۳۳ } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> چند کلاس و id نیز قابلیت گروهبندی دارند که بعداً به نحوه گروهبندی آنها می پردازیم. کامنتها در CSS : کامنت شامل توضیحاتی است که در مورد کد داده می شود و هنگامی که بعد از اینکه مدتی از نوشتن یک کد گذشت قصد ویرایش آنرا داشته باشید به شما در فهمیدن کدها کمک می کند. کامنتها توسط مرورگر خوانده نمی شوند و در صفحه نمایش داده نمی شوند. یک کامنت در CSS با علامت ( */ ) آغاز می شود وبا علامت ( /* ) پا می یابد. مثال زیر یک کامنت را در CSS نشان می دهد: کد: */این یک کامنت است /* <!--[if !supportLineBreakNewLine]--> <!--[endif]--> __________________________________________________________________ آموزش CSS قسمت سوم برای استفاده از CSS به صورت کلی ۳ حالت داریم ( در مقدمه به آنها اشاره شد) که در آموزش های بعدی با اونها آشنا میشید ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است. که به این روش روش خطی (inline ) می گویند. برای افزودن استایل به یک تگ باید عبارت ” “=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( ” ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید کد: <div style=”property:value” <!--[if !supportLineBreakNewLine]--> <!--[endif]--> برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم: کد DIV: <div style=”color:green”> متن داخل </div> توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( ” ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید: متن داخل DIV به خاطر داشته باشید که برای اینکه خاصیت این استایل از بین برود باید تگی را که استایل در آن به کار رفته است ببندید. در اینجا تا زمانی که تگ DIV بسته نشده باشد متن ما به رنگ قرمز نمایش داده خواهد شد. این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم: کد: <div style=”color:red; font-style:italic”> این متن قرمز رنگ و ایتالیک است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> نتیجه به صورت زیر خواهد بود: این متن قرمز رنگ و ایتالیک است. در این روش می توانیم به هر تعداد که لازم باشد از ویژگیهای مختلف درون یک تگ HTML استفاده کنیم. به مثال زیر توجه کنید: کد: <div style=”color:blue; font-style:italic; font-weight:bold; font-size:۱۲pt; text-align:center”> متن مورد نظر اینجا قرار می گیرد .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت ۱۲pt و در وسط صفحه خواهیم داشت: متن مورد نظر اینجا قرار می گیرد. در قسمتهای بعدی لیستی را از ویژگیهای مختلفی که با استایل می توانیم آنها را کنترل کنیم خواهیم آورد. در اینجا فقط قصد آموزش نحوه قرارگیری استایل در تگهای HTML را داشتیم روش های دیگر استفاده از Style بهینه تر هستند ، اما گاهی اوقات نیاز به استفاده از این روش ضروری می باشد در قسمت های بعد روش های دیگر استفاده از Style را هم بررسی می کنیم __________________________________________________________________ آموزش CSS قسمت چهارم استفاده از استایلها می تواند به ما کمک کند تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد. در قسمت زیر می توانید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کند مشاهده کنید که در بخش HEAD در متن قرار گرفته است. کد: <head> <style> <!– span { color:red; font-style:italic } –> </style> </head> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> همانطور که می بینید استایل با تگ <style> آغاز می شود. سپس یک کامنت را شروع می کنیم تا مرورگرهایی که از CSS پشتیبانی نمی کنند استایل را نادیده بگیرند و در صفحه به نمایش در نیاورند. در قسمت بعد این خط را مشاهده می کنید: کد: span { color:red; font-style:italic } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> ین خط مشخص می کند که هر بار که در صفحه از تگهای <SPAN> <SPAN/> استفاده می شود. متن بین آنها به رنگ قرمز و به صورت ایتالیک نمایش داده می شود. در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( ” ” ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند. وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود. با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم، اما این کافی نیست. در قسمتهای بعدی روشهایی را معرفی می کنیم که یک استایل مشخص به وسیله تگهای مختلفی مورد استفاده قرار بگیرد. این کا را با استفاده از CLASS و ID انجام می دهیم که به آن خواهیم پرداخت. ________________________________________________________________ آموزش CSS قسمت پنجم فرض کنید می خواهیم برای چندین صفحه از یک سری استایل استفاده کنیم که در همه صفحات مشابه هستند. در این مورد می توانیم از یک فایل استایل خارجی استفاده کنیم تا نیازی به چندین بار نوشتن استایلها نباشد. هم چنین این کار باعث میشه تا صفحات سایت بسیار سریعتر بالا بیان ، زیرا یکبار فایل بارگزاری شده و دیگه نیازی به بارگزاری مجدد نیست برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید: کد: div { font-family:Tahoma } .redtext { color:red } <!--[if !supportLineBreakNewLine]--> <!--[endif]--> حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ) برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید: کد: <link rel=”stylesheet” type=”text/css” href=”URL”> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> شناسه “rel=”stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است. شناسه “type=”text/css مشخص کننده نوع متن فایل برای مرورگر است. شناسه ” “=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید. حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید: کد: <link rel=”stylesheet” type=”text/css” href=”http://www.monavarian.com/css/example.css”> یا به صورت تعریف نسبی : <link rel=”stylesheet” type=”text/css” href=”css/example.css”> http://IRNON.com دقت کنید که روش دوم روش صحیح تری است چون در هر آدرسی جواب خواهد داد ( در روش دوم فایل example.css در همان مسیر فایل html شما و در دایرکتوری Css قرار دارد . ) شما باید این کد را در همه صفحاتی که می خواهید از استایل تعریف شده در فایل قبل استفاده کنید وارد کنید وگرنه صفحات آنگونه که طراحی شده اند نمایش داده نمی شوند. حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Tahomaخواهد داشت. ( به فایل exampl.css که ابتدای این آموزش نوشته شده دقت کنید ) کد: <div> این متن با فونت tahoma نمایش داده خواهد شد. </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود: کد: <p class=”redtext”> این متن به رنگ قرمز نمایش داده خواهد شد .<p> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> نتیجه به این صورت خواهد بود: این متن به رنگ قرمز نمایش داده خواهد شد. در قسمت بعدی در مورد Class و ID بحث می کنیم _________________________________________________________________ آموزش CSS قسمت ششم عرض و ارتفاع : width این مشخصه به ما امکان می دهد تا عرض یک بخش از صفحه را تعیین کنیم. برای مثال می توانیم با آن عرض یک DIV را تعیین کنیم. در مثال زیر برای DIV عرضی معادل ۲۰۰ پیکسل تعیین می کنیم: کد: <div style=”width:۲۰۰px”> این جمله پس از اینکه عرض آن از ۲۰۰ پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کن د.</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> نتیجه به صورت زیر خواهد بود: این جمله پس از اینکه عرض آن از ۲۰۰ پیکسل بیشتر شد در سطرهای بعدی ادامه پیدا می کند. مقادیری که برای پارامتر width قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید. height این پارامتر به ما اجازه می دهد تا ارتفاع بخش مشخصی را تعیین کنیم. برای مثال وقتی که ما این پارامتر را برای یک DIV استفاده می کنیم و مقدار آن را ۱۰۰ پیکسل قرار می دهیم تا وقتی که متن موجود در DIV از ۱۰۰ پیکسل کمتر ارتفاع دارد ارتفاع DIV ۱۰۰ پیکسل خواهد بود. ولی وقتی که متن داخل DIV زیاد باشد و از ۱۰۰ پیکسل بیشتر شود در نتیجه ارتفاع DVI هم از ۱۰۰ تجاوز خواهد کرد تا همه متن موجود قابل خواندن باشد. به مثال زیر توجه کنید: ابتدا هنگامی که ارتفاع متن از ارتفاع DIV کمتر است: کد: <div style=”height:۱۰۰px”> ارتفاع این متن از ۱۰۰ پیکسل کمتر است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> حالا هنگامی که ارتفاع متن از ارتفاع DIV بیشتر است: کد: <div style=”height:۱۰۰px”> ارتفاع<br>این<br>متن از<br>۱۰۰<br>پیکسل <br>کمتر<br>است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com نکته : حتما این کد ها که براتون اینجا نتیجه براشون گذاشته نشده ، خودتون تست کنید و نتیجه را ببینید ( به علت محدودیت در نمایش کد های java و html بعضی از کد ها را نمی توان برای شما اینجا نمایش داد ) اگر بخواهیم ارتفاع DIV همان ۱۰۰ پیکسل بماند و تغییر نکند باید از پارامتر overflow در استایل استفاده کنیم. این پارامتر به ما این امکان را می دهد که تعیین کنیم وقتی محتویات DIV از عرض یا ارتفاع DIV بزرگتر می شود چگونه نمایش داده شود. در اینجا برای پارامتر overflow از مقدار hidden استفاده می کنیم که تعیین می کند هر چیزی بزرگتر از عرض یا ارتفاع DIV نمایش داده نشود. به مثال زیر توجه کنید: کد: <div style=”height:۱۰۰px;overflow:hidden”> ارتفاع<br>این<br>متن از<br>۱۰۰<br>پیکسل <br>کمتر<br>است .</div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> مقادیری که برای پارامتر height قرار می دهید می تواند بر اساس پیکسل باشد که در این صورت باید پس از مقدار مربوطه حروف px که نشانه پیکسل است را بنویسید. مقادیر ممکن است بر اساس درصد باشند که در آن صورت باید علامت درصد ( % ) را پس از مقدار قرار دهید. overflow وقتی محتویات قسمتی از صفحه طول یا عرضی بزرگتر از آن قسمت در بر گیرنده داشته باشد، با پارامتر overflow می توانیم مشخص کنیم که آن قسمت زیادی نمایش داده شود یا مخفی شود. به صورت پیش فرض قسمتهای اضافی نمایش داده می شوند ولی با این پارامتر ما می توانیم آنها را مخفی کنیم. به مثال زیر توجه کنید: کد: <div style=”width:۲۰۰px; overflow:hidden”><nobr> طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر ز عرض DIV دیده نمی شون د.</nobr></div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> به طور کلی چند مقدار را می توانیم برای پارامتر overflow استفاده کنیم: ۱. visible یا قرار دادن این مقدار برای overflow همه محتویاتی که طول یا عرض بیش از اندازه داشته اند نمایش داده خواهند شد. ۲. hidden این مقدار باعث خواهد شد تا محتویات با طول یا عرض بیش از اندازه نمایش داده نشوند. ۳. scroll این مقدار باعث خواهد شد تا در صورتی که محتویات اندازه ای بیش از طول و عرض لازم دارند با استفاده از اسکرول بار قابل مشاهده باشند. به یک مثال توجه کنید: کد: <div style=”width:۲۰۰px; overflow:scroll; border:dashed ۱px #۳۳۹۹FF; white-space:nowrap”> طول این سطر بیشتر از عرض DIV است ولی با استفاده از overflow قسمتهای بیشتر از عرض DIV دیده نمی شوند. </div> <!--[if !supportLineBreakNewLine]--> <!--[endif]--> http://IRNON.com برای مثال در صفحه اصلی سایت ، در قسمت کابران حاضر ، در صورتی که تعداد کاربران حاضر در سایت زیاد باشد Scroll نمایش داده میشود ، تا لیست کاربران طولانی و طویل نباشد و باعث اشغال صفحه نشود . و یا همچنین در کادر مخصوص کد ها که در تاپیک ها قرار دارد ، مانند همین کادر کد بالا ، هر گاه که کد ها بیش از ۲ یا ۳ خط باشد Scroll نمایش داده میشود .