رتبه موضوع:
  • 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش گام به گام css
#1
آموزش کار با استایل (CSS)
CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.

اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق «فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در جهت بهبود این بخش استفاده کنیم.
[تصویر: p1yi5d6sh60hdpc948p.jpg]
#2
man khopdaye css hastam kari dashti az in id bepors
dr3dr3@ymail.com
#3
با اجازه آقا محمد از اونجایی که دیدم کلاس تعطیله و کسی هم اینجا فعالیتی در این زمینه نداره، به عنوان یه دانش آموز خود جوش یه سری اطلاعات که در این زمینه دارم رو به صورت سلسله مراتبی در اختیار دوستان قرار میدم. امیدوارم برای دوستان مفید واقع بشه.

دستور های CSS
برگه های آبشاری ( CSS ) از تعدادی دستور تشکیل شده اند که نحوه ی نمایش عناصر صفحات وب را تعیین میکنند. این قوانین گرچه گاهی طراحان تازه کار را دچار سردرگمی می کند اما تسلط بر آنها دشوار نیست. هر دستور CSS از یک انتخاب گر ( Selector ) و یک اعلان ( Declaration ) تشکیل شده است. انتخاب گر در ابتدای دستور CSS قرار گرفته است و مشخص می کند که این دستور بر کدام یک از قسمت های سند HTML تاثیر می گذارد. اعلان نیز از تعدادی ویژگی یا مقدار تشکیل شده که ویژگی های خاصی دارند و تعیین می کنند که عنصر مربوطه چگونه بایدنمایش داده شود. در مثال زیر p یک انتخاب گر و تمام قسمت های بعد از آن اعلان محسوب می شود.

کد PHP:
p{
colorblue;


همان طور که می دانید در HTML تگ p مربوط به پاراگراف است. بنابراین اگر ما این دستور را در صفحه ی وب قرار دهیم ، اعلان آن در تمامی پراگراف های صفحه اعمال می شود و تمام پاراگراف ها به رنگ آبی در می آیند.


نکته:
اسامی CSS ، حساس به حروف کوچک یا بزرگ نیستند اما بهتر است همیشه برای نامگذاری از حروف کوچک استفاده شود تا یکپارچگی صفحات حفظ شود. در استانداردهای w3c نیز توصیه شده که خصیصه ها و عناصر در برگه های آبشاری باید حتما با حروف کوچک نوشته شود.

اعلان ها در CSS باید درون علامت کروشه { } قرار گیرند. خصیصه ها و مقادیر آنها باید توسط علامت (: ) از یکدیگر جدا شوند و در انتهای خصیصه ها و مقادیر آنها نیز باید علامت (; ) قرار گیرد. اصولا قرار دادن علامت (; ) در انتهای قوانین CSS ضروری نیست اما اکثر طراحان معتقدند که بهتر است از آن استفاده شود، زیرا ممکن است ویژگی و مقداری را به یک دستور اضافه کنید، و جود این علامت باعث می شود که اضافه شدن دستور جدید را در روزهای بعد به راحتی به یاد آورید.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#4
به نحوه نوشته شدن این دو اعلان دقت کنید

اعلان اول
کد PHP:
H1 colorredbackgroundyellow

اعلان دوم
کد PHP:
H1{
colorred;
backgroundyellow;


شما می توانید قوانین CSS را در یک سطر و به دنبال هم بنویسید اما فرمت کد نویسی دوم ، خواندن آنها را آسانتر می کند. در بعضی موارد خصیصه ها ، مقادیر و کروشه ی بسته شده با دکمه Tab کمی به سمت داخل کشیده می شوند، این کار باعث می شود که پیدا کردن انتخاب گرها به صورت عمودی آسان تر شود.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#5
انواع انتخاب گرهای CSS
در مورد انتخاب گر یک عنصر که اصلی ترین عنصر CSS است توضیح داده شد. با استفاده از انتخاب گر شکل ظاهر یک تگ را می توان تعریف کرد. در قسمت های زیر سایر انتخاب گر های CSS که کاربرد زیادی دارند ( و به خوبی توسط مرورگرها پشتیبانی میشوند) را مورد بررسی قرار می دهیم.

انتخاب گرهای کلاس
گاهی ممکن است بخواهید یک عنصر یا گروهی از عناصر را تغییر دهید. مثلا ممکن است بخواهید کل متن نوشته شده در سایت شما به رنگ آبی در آید، اما بعضی از قسمت ها قرمز باشند، ساده ترین روش انجام این کار استفاده از انتخاب گر کلاس است. در CSS ، نام یک انتخاب گر کلاس بعد از نقطه قرار میگیرد. مانند
کد PHP:
.warningText{
Colorred;

این ایستایل را می توانید با استفاده از خصیصه ی class به تمام عناصر HTML در هر صفحه ای که استایل شیت به آن متصل است، اعمال کنید. مانند:
کد PHP:
<h2  class=”warningText”This heading is red.</h2>
<
class=”warningText”This text is red.</p>
<
pThis is a paragraph, <span class=”warningText”> and this text is red</span>.</p
در صورتی که بخواهید یک کلاس را به عنصر خاصی نسبت دهید، تگ HTML مربوط به آن را قبل از نقطه قرار دهید:
کد PHP:
p.warningText{
colorred;

اگر دستور بالا را با عناصر HTML مانند مثلا بالا بنویسید، متن پاراگراف های صفحه به رنگ قرمز در می آیند. اما تگ های Heading یا span شامل این قانون نمی شوند. زیرا کلاس Warning text را فقط برای پاراگراف تعریف کرده ایم.
یک عنصر را میتوان با چندین کلاس مقدار دهی کنید. برای این کار باید چندین مقدار را در یک خصیصه ی کلاس که با فاصله از یکدیگر جدا شده اند قرار دهید. مثال:
کد PHP:
<class=”warningText  hugeText”
در مثال بالا متن پاراگراف بر اساس کلاس های Warningtext و Hugetext تغییر می کند.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#6
انتخاب گرهای ID
شناسه های selectors ID فقط یکبار در صفحه می توانند مورد استفاده قرار گیرند. شما در HTML میتوانید با استفاده از خصیصه ی ID ، یک شناسه ی اختصاصی را به یک عنصر نسبت دهید:
کد PHP:
<p id=”footer”>&copy200px The companyAll rights reserved.</p
برای اینکه این عنصر را در CSS سبک دهید باید نام ID را بعد از علامت (#) بنویسید:
کد PHP:
# Footer{
Padding20px;

در مثال بالا کادر Footer از تمام جهات 20 پیکسل فاصله ( Padding ) دارد. به طور کلی کلاس ها را میتوان چندین بار در صفحه مورد استفاده قرار داد، اما از IDها نمی توان بیش از یکبار استفاده کرد. معمولا شناسه ها یا IDها برای تعیین ویژگی های عناصر تکی در صفحه مورد استفاده قرار میگیرند در حالی که کلاس ها برای تعیین سبک آیتم های زیادی میتوانند مورد استفاده قرار گیرند.

انتخاب گرهای گروهی
اگر بخواهید مقدار یک ویژگی را برای چندین انتخاب گر تعریف کنید، می توانید از انتخاب گرهای گروهی استفاده کنید که با یک (,) از یکدیگر جدا میشوند.
کد PHP:
H1h2h3h4h5h6 {
Colorgreen;

در مثال بالا، تمام عناوین سایت به رنگ سبز تبدیل می شوند. لازم نیست برای هر عنصر یک دستور CSS جدا بنویسید. شما می توانید برای عبارت های مشترک از انتخاب گرهای گروهی و برای مقادیر ویژگی های خاص از انتخاب گرهای مجزا استفاده کنید. مانند:
کد PHP:
H1h2h3h4h5h6 {
Colorgreen;
}
H1 {
Font-size1.5em;
}
H2 {
Font-size1.2 em;

نکته: اگر مقدار یک ویژگی را دوبار بنویسید، مرورگرها عنصر صفحه ی شما را با توجه به محل قرار گرفتن هر دستور در برگه ی آبشاری ترجمه می کنند. یعنی همیشه نزدیک ترین مقدار به یک عنصر در آن دستور اعمال می شود. در این مورد بعدا توضیحات بیشتری خواهم داد.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#7
انتخاب گرهای مفهومی

این نوع انتخاب گرها معمولا در CSS پیشرفته مورد استفاده قرار میگیرند. انتخاب گرهای مفهومی همان طور که از نامشان پیداست مقادیر ویژگی های عناصرHTML را با توجه به محتوای آنها معین می کنند. به مثال زیر دقت کنید:

کد PHP:
<pI am a paragraph.</p>
<
pSo am I.</p>
<
div id=”navigation”>
<
pI am a paragraph within the navigation div.</p>
<
pAnother paragraph within the navigation div.</p>
</
div

شما می توانید با استفاده از یک انتخاب گر استاندارد، پاراگراف های کل صفحه را سبک دهی کنید، سپس با استفاده از یک انتخاب گر مفهومی مقادیر خاصی را برای پاراگراف های درون div navigation تعیین کنید.

کد PHP:
{
Colorblack;
}
#navigation p {
Colorblue;
Font-weightblod;


همان طور که می بینید ساختار انتخاب گرهای مفهومی ساده است( #navigation p ) کافی است هر یک از انتخاب گرها را با فاصله از یکدیگر جدا کنید. نتیجه دو عبارت فوق به صورت زیر است:
. رنگ تمام پاراگراف ها در صفحه مشکی می شود.
. دستور #navigation p نسبت به دستور p برای تمام پاراگراف های درون کادر navigation در اولویت قرار میگیرد و رنگ آنها به آبی تبدیل شده و به صورت توپر نیز نمایش داده می شوند.

با استفاده از انتخاب گرهای مفهومی می توانید عناصر صفحات وب را به شکل خاص سبک دهی کنید. در قسمت های بعد از این نوع انتخاب گرها زیاد استفاده خواهیم کرد.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#8
افزودن استایل به صفحه ی وب
رایج ترین روش اعمال دستورهای CSS به یک صفحه ی وب، استفاده از برگه های آبشاری خارجی ( External Style Sheet ) است. در این روش دستورهای CSS در یک سند متنی نوشته می شوند و با پسوند .css ذخیره می گردند. این سند به دو روش به سند HTML متصل میشود که در هر دوی این روش ها باید عناصر HTML را به تگ HEAD اضافه کنید.
اولین روش چسباندن فایل به صفحه ی وب با استفاده از تگ لینک است:

کد PHP:
<link rel=”stylesheet”  herf=”mystylesheet.css”  type=”text/CSS”  media=”screen”  /> 

نکته: دقت کنید که در زبان XHTML ، علامت خط مورب در تگ link به معنای تگی است که هیچ محتوایی در آن قرار نگرفته است.
روش دوم این است که برگه ی آبشاری را در عنصر style وارد کنید.

کد PHP:
<style type”text/CSS”  media=”screen”>
/*<!CDATA[*/
@import  url (mysylesheet.css);
/*]]*/
</style

روش دوم به منظور پنهان ساختن دستورهای CSS از مرورگرهای ناسازگار به وجود آمد تا کاربرانی که از این نوع مرورگرها استفاده می کنند اگر نمی توانند طراحی ضاهری سایت را ببینند، حداقل قادر باشند به محتوای سایت دسترسی داشته باشند. در بعضی از مرورگرها ( به خصوص Internet Explorer ) این روش ممکن است منجر به ایجاد صفحه ای بدون استایل، قبل از بار گذاری صفحه شود.
( روش Import برای وارد کردن برگه ی آبشاری اصلی در صفحه و روش Link برای ایجاد پیوند به یک برگه ی آبشاری چاپی است. )
تگ style را نیز می توانید به طور مستقیم در بخش Head یک سند HTML وارد کنید. به این روش Embedded Style گفته می شود. مثال:

کد PHP:
<head>
<
style type=”text/CSS”>
/*<!CDATA[*/
P{
Colorblack;
}
#navigation p{
Colorblue;
Font-weightbold;
}
/*]]*/
</style>
</
head

بسیاری از ابزارهای بصری طراحی وب، CSS را به این روش اینجاد می کنند. اما اضافه کردن دستورهای CSS به عنصر Style فقط زمانی خوب است که سایت شما یک صفحه ای باشد یا اینکه بخواهید فقط در تگ های یکی از صفحات تغییرهایی ایجاد کنید تا آن تگ ها نسبت به CSS خارجی که به صفحه متصل شده است اولویت داشته باشند ( در قسمت بعدی در این مورد کاملا توضیح خواهیم داد). افزودن استایل به روش بالا به تمام صفحات کار صحیحی نیست زیرا برای تغییر و به روز رسانی آنها باید در تک تک صفحات تغییر ایجاد کنید. اما در برگه ی آبشاری خارجی، یک تغییر در سند CSS کل صفحات وب را به روز رسانی خواهد کرد.
سومین روش اعمال CSS در سند HTML روش استایل داخلی ( Inline style ) نام دارد. در این روش دستورهای CSS مستقیما درون تگ HTML نوشته می شوند:

کد PHP:
<p style=”colorblue;this paragraph will be displayed in blue.</p

همان طور که می بینید در این روش از خصیصه ی style استفاده می شود. این تگ را تنها یک بار می توان مورد استفاده قرار دهید. استفاده از روش برگه ی آبشاری داخلی برای ایجاد تغییر در کل صفحات وب سایت کار درستی نیست. از این روش فقط در جاهایی که فقط یک تغییر لازم است مس توانید استفاده کنید. برگه ی آبشاری داخلی در XHTML 1.1 منسوخ شده اند و دیگر مورد استفاده قرار نمی گیرند. این روش کم کم در حال از بین رفتن است.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#9
برگه های آبشار (Cascade )
دستورهای CSS را می توانید چندین بار برای یک عنصر مورد استفاده قرار دهید. این کار را هم می توانید در همان برگه های آبشاری و هم در برگه ی آبشاری دیگر انجام دهید و آنها را به سند HTML خود بچسبانید. به عبارت دیگر هم از استایل داخلی و هم از استایل های Embedded می توانید استفاده کنید. به روش عملکرد دستور های CSS آبشار (Cascade ) گفته می شود و قانون کلی آن به صورت زیر است:

همیشه نزدیک ترین مقدار به یک عنصر در آن دستور اعمال می شود.

در مثال زیر ویژگی font-size دوم نسبت به font-size اول در اولویت قرار می گیرد زیرا در سند HTML این دستور به پاراگراف نزدیکتر است:

کد PHP:
P{
Font-size1.1em;
}
P{
Font-size1.2em;


در این مثال اندازه ی قلم تمام پاراگراف هیا صفحه ای که دستور بالا به آن متصل شده است 1.2em می شود.
اگر این نوع دستورها به صورت یک ایستایل embedded زیر قسمت import یا link قرار گیرند، آن دستور دارای اولویت می شود. همچنین اگر یک برگه ی آبشاری به عنوان برگه ی آبشاری داخلی ( inline ) به صورت مستقیم وارد تگ مربوطه شود، آن دستور نسبت به سایر دستورها در اولویت قرار میگیرد.
ممکن است در قسمت head یک صفحه ی وب چندین برگه ی آبشاری به صورت link یا import قرار گیرد، قوانین cascade در ین موارد نیز به کار گرفته می شود. به عبارت دیگر هر دستوری که در برگه ی ابشاری دوم قرار گیرد نسبت به برگه ی آبشاری قبلی دارای اولویت می شود.
یکی از اصطلاحاتی که در CSS به کار می رود وراثت یا inheritance می باشد. یک عنصر HTML وضعیت سلسله مراتبی محدودی دارد. این عناصر با تگ html آغاز می شوند سپس وارد شاخه های head و body می شوند که هر یک از این تگ ها عناصر فرزند بی شماری درون خود دارند ( مانند تگ های title و meta که برای head و تگ p و img که برای body عناصر فرزند به شمار می روند). وقتی استایلی به یک عنصر نستب داده می شود تمام فرزندان آن عنصر نیز ( تمام عناصری که درون این عنصر قرار گرفته اند) مقدار ویژگی CSS را به خود میگیرند. مگر اینکه استایل خاص دیگری به آنها نسبت داده شده باشد. اما تمام ویژگی های CSS وراثتی نیستند.
توضیحات بیشتر رو در این زمینه اگه تونستم بعدا در اختیار دوستان گل قرار میدم.
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است


#10
مدل جعبه ای در CSS
تمام طراحان با این مدل سرو کار دارند، بنابراین باید کاملا آن را متوجه شوند تا بتوانند چگونگی ارتباط عناصر را با یکدیگر و نحوه ی تاثیر گذاری خصیصه های مختلف روی یک عنصر را درک کنند. اصولا هر عنصر در CSS، درون یک کادر مستطیل شکل قرار میگیرد که ابعاد آن بستگی به محتوای داخل آن دارد. با استفاده از ویژگی های width و height می توانید ابعاد این کادرها را مشخص کنید. همچنین در اطراف محتوای یک کادر می توانید از ویژگی Padding استفاده کنیدو یک خط مرزی (border) و حاشیه (Margin) نیز برای آن تعریف کنید. برای تصویر پس زمینه از Background image و برای رنگ آن نیز از background color استفاده کنید. هر تصویر پس زمینه یا رنگی که به کادر شما نسبت داده میشود در پشت محتوای آن کادر قرار میگیرد اما در مورد margin این طور نیست.
مجموع طول و عرض جعبه ( ابعاد محتوای جعبه) به اضافه padding، border و margins میزان فضای اشغال شده توسط این کادر در صفحه را تعیین می کند. بنابراین جعبه ای که 500 پیکسل عرض و 20 پیکسل padding از دو طرف و 5 پیکسل خطوط مرزی ( border) دارد مجموعا 550 پیکسل فضای افقی اشغال می کند.
5+20+500+20+5
در بعضی موارد حاشیه های (Margins) بین دو عنصر حذف می شوند و فقط حاشیه ی بزرگ تر به کار گرفته می شود.

[تصویر: ta7wxwesr1b58sztes9b.jpg]
[تصویر: ie_pnu_arm.png]

به اميد هر آنچه كه بهتر است




پرش در انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان