Notice: Undefined property: Database::$query_show in /home3/websea/public_html/lib/class_db.php on line 112
دریای وب - Web Sea | فصل اول آموزش CSS

مقالات آموزشي وب


فصل اول اموزش css
  • نظرات: 0
  • ۱۱ تیر ۱۳۹۳ ۱۹:۴۳
  • به آموزش CSS
  • توسط malekli
  • بازدید کننده: 975
  • css
  • اخرین ویرایش: ۱۱ تیر ۱۳۹۳ ۱۹:۴۵
  • (رتبه فعلی 0.0/5 ستاره ها) مجموع آراء: 0

فصل اول آموزش CSS

1 0
>فصل اول: CSS پایه</h1><div class="clear">&nbsp;</div><h2>چه چیزهایی باید در حال حاضر بدانید؟</h2><p>پیش از شروع یادگیری CSS شما باید یک دانش پایه از HTML داشته باشید. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می توانید به آن مسلط شوید. HTML زبانی است که تمامی عناصر موجود در صفحات وب مانند جعبه های متن، دکمه ها و غیره توسط آن ساخته می شود و با ترکیب آن با کدهای CSS ظاهر صفحه شکل می گیرد.</p><h2>CSS چیست؟</h2><p>CSS دستوراتی است که توسط آنها میتوان تمامی خصوصیات ظاهری صفحه وب سایت را تعیین کرد. بنابراین شما توسط کدهای HTML صفحه وب سایت خود را پیاده سازی میکنید و با دستورات CSS مشخص میکنید هر عنصر چه خصوصیات ظاهری داشته باشد. خصوصیاتی مانند رنگ عنصر، اندازه هر عنصر، رنگ و اندازه فونت های مورد استفاده، فاصله عنصرها از یکدیگر، حاشیه و غیره . CSS مخفف کلمه Cascading Style Sheets و به معنی شیوه نامه آبشاری است. علت این نامگذاری نحوه اعمال دستورات به عناصر موجود در صفحه است. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که بعد از استفاده از دستورات متوجه این موضوع خواهید شد.</p><h2>چرا باید از CSS استفاده کنیم؟</h2><p>CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد. <br /> <br /> <strong>نکته:</strong> در گذشته طراحی و چیدمان عناصر صفحات وب، از طریق جدول انجام می گرفت. در آن روزها جدول مطمئن ترین عنصر برای چیدن عناصر به نحوی که در تمامی مرورگرها ظاهر سایت یکسان باشد و بهم ریختگی نداشته باشیم، محسوب میشد. جداول مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جدداول میتوان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. حتما تاکنون وب سایت هایی را مشاهده کرده اید که در هنگام باز شدن، مدت زیادی هیچ عنصری در صفحه نشان داده نمیشود و پس از چندین ثانیه و یا حتی دقیقه که در حالت انتظار و سردرگمی یک صفحه سفید را مشاهده میکنید، اگر انسان صبوری باشید به یکباره تمامی عناصر بر روی صفحه ظاهر میشود. این ویژگی منفی وب سایت هایی است که با جدول پیاده سازی می شدند. در مقابل در وب سایتی که با CSS پیاده سازی شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت تا زمانی که بارگزاری کامل شود، باشد.</p><h2>ساختار نحوی دستورات CSS</h2><p>در این بخش ساختار دستورات CSS را یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چراکه در بخش های بعدی بطور مفصل انواع استایل های عناصر را آموزش خواهم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت نمایید.</p><p><img style="display: block; margin: 0 auto;" src="/image.axd?picture=2011%2f11%2fCSS-Syntax.gif" alt="" /></p><p>Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.</p><p>Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال <strong>خاصیت رنگ</strong> برابر با <strong>مقدار آبی</strong> است و <strong>خاصیت سایز فونت</strong> برابر با <strong>مقدار 12 پیکسل</strong> است.</p><p><strong>مثال :</strong> در دستور زیر، مشاهده میکنید که مقدار هر خاصیت، بعد از علامت دو نقطه ":" در جلوی آن نوشته می شود. همچنین در پایان هر جفت خاصیت و مقدار علامت ";" گذاشته می شود. کل خاصیت ها و مقدارها در علامت براکت نوشته میشود:</p><pre class="brush:css;">p {color:red;text-align:center;}</pre><p>برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید:</p><pre class="brush:css;">p{color:red;text-align:center;}</pre><h3>CSS Comment</h3><p>در تمامی زبان های برنامه نویسی امکانی وجود دارد که در کنار کدهای اصلی خود، توضیحاتی بنویسید که کدهای آن قسمت را شرح میدهند و هنگامی که مدت ها بعد شما و یا شخص دیگری به آنها مراجعه میکند، این توضیحات اضافه کمک بسیاری برای تغییرخواهند کرد. این توضیحات هنگام اجرای سایت نادیده گرفته می شوند بنابراین هیچ خطایی بوجود نخواهد آمد و می توانید با خیال راحت هرچه را که می خواهید با هر زبانی درج کنید. شرط اینکار اینست که توضیحات خود را با علامت "/*" شروع کنید و با علامت "*/" به پایان برسانید.</p><pre class="brush:css;">/*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}</pre><h2>id و Class در CSS</h2><p>همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می خواهیم استایل روی آن اعمال شود را ذکر میکنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف</p><p>بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.</p><h3>اعمال دستورات فقط بر روی یک عنصر واحد توسط id</h3><p>برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد "#" قبل از آن اضافه کنید</p><p>مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم :</p><pre class="brush:xml;">&lt;p id="para1"&gt;This is a Paragraph.&lt;p&gt;</pre><p>سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت "#" می نویسیم:</p><pre class="brush:css;">#para1{text-align:center;color:red;}</pre><p>بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.</p><p><strong>نکته:</strong> هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.</p><h3>اعمال دستورات بر روی یک گروه از عناصر توسط Class</h3><p>برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد "." قبل از آن اضافه کنید</p><p>مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :</p><pre class="brush:xml;">&lt;p class="cneter"&gt;This is a Paragraph.&lt;/p&gt;</pre><p>سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت "." می نویسیم:</p><pre class="brush:css;">.cneter{text-align:center; }</pre><p>بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.</p><p><strong>نکته:</strong> هرگز صفت Class را با عدد شروع نکنید چراکه فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.</p><h2>دستورات CSS را کجا بنویسیم؟</h2><p>برای نوشتن دستورات CSS در یک وب سایت سه روش وجود دارد:</p><ol><li>External Style Sheet : شیوه نامه خارجی</li><li>Internal Style Sheet : شیوه نامه داخلی</li><li>Inline Style : شیوه درون خطی</li></ol><h3>External Style Sheet</h3><p>در این روش تمامی دستورات CSS در یک فایل مجزا از دیگر فایل ها و صفحات وب سایت نوشته میشود و با فرمت .css در کنار دیگر فایل های وب سایت در فولدر پروژه ذخیره میشود. سپس در هر صفحه ای که می خواهیم این دستورات بر عناصر آن اعمال شوند، به بخش &lt;head&gt; رفته و توسط تگ &lt;link&gt; فایل css خود را به صفحه متصل میکنیم:</p><p>این روش بهترین روش برای وب سایت های چند صفحه ای و بزرگ امروزی است چراکه می توان یکبار نوشت و به هر تعداد صفحه که نیاز است اعمال کرد. همچنین در صورت نیاز به تغییر در ظاهر سایت کافیست به یک فایل مراجعه کرده و تغییرات را به کل سایت اعمال کرد. این فایل های CSS را می توان توسط هر برنامه ویرایش متنی نوشت و در پایان آن را با فرمت .css ذخیره کرد. برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای این منظور قابل استفاده هستند. فراموش نکنید فایل های CSS فقط حاوی دستورات CSS هتند و هیچ کد و تگی از HTML در آنها نباید نوشته شود. در زیر یک نمونه از فایل CSS را مشاهده میکنید که کافیست ان را در یک فایل notepad نوشته و با فرمت .css ذخیره کنید:</p><pre class="brush:css;">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</pre><h3>Internal Style Sheet</h3><p>این روش نوشتن دستورات باید زمانی استفاده شود که قصد دارید یک سری استایل ها را فقط بر روی یک صفحه خاص اعمال کنید و عناصر صفحه مورد نظر با عناصر سایر صفحات وب سایت ظاهر متفاوتی دارد. برای استفاده از این روش به صفحه مورد نظر رفته و دستورات مورد نظر را در بین تگ &lt;style&gt; می نویسیم:</p><pre class="brush:xml;">&lt;head&gt;&lt;style type="text/css"&gt;hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}&lt;/style&gt;&lt;/head&gt;</pre><h3>Inline Style</h3><p>با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که CSS بخاطر آنها به وجود آمد را از دست میدهید. چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود. همچنین باعث افزایش حجم صفحات و در نتیجه کاهش سرعت بارگزاری خواهد شد. در ضمن کدها پیچیده، شلوغ و ناخوانا خواهد شد. پس باید در استفاده از آنها صرفه جویی کنید!</p><p>برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید. در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم:</p><pre class="brush:xml;">&lt;p style="color:yellow;"&gt;This is a paragraph.&lt;/p&gt;</pre><h3>شیوه نامه های چندگانه</h3><p>گفتیم که به سه طریق می توان استایلی را بر روی عناصر موجود در صفحه وب اعمال کرد. حال تصویر کنید که استایلی برای یک عنصر با هر سه روش ذکر شده نوشته شود. چه اتفاقی خواهد افتاد؟ در این حالت استایلی که به صورت خاص و محدودتر نوشته شده است جایگذین استایلی می شود که همگانی نوشته شده است</p><p>برای مثال فرض کنید یک شیوه نامه خارجی حاوی دستورات زیر برای تغییر ظاهر تگ های h3 است:</p><pre class="brush:css;">h3{color:red;text-align:left;font-size:8pt;}</pre><p>سپس دستورات زیر را به صورت شیوه نامه داخلی به یک صفحه وب اضافه میکنیم:</p><pre class="brush:css;">h3{text-align:right;font-size:20pt;}</pre><p>حال اگر شیوه نامه خارجی را توسط تگ link به صفحه حاوی شیوه نامه داخلی متصل کنیم، مجموع دستورا تی که بر روی تگ های h3 اعمال میشوند، به صورت زیر خواهد بود:</p><pre class="brush:css;">color:red;text-align:right;font-size:20pt;</pre><p>همانطور که مشاهده میکنید، دستورات مشترک در دو شیوه نامه، از شیوه نامه داخلی که به صورت خاص برای یک صفحه نوشته شده است مورد استفاده قرار گرفته است و نه از شیوه نامه خارجی که به صورت همگانی برای سایر صفحان نیز استفاده می شود. دستورات غیر مشترک نیز همگی اعماب می شوند. در این دستورات، دستور تغییر رنگ از شیوه نامه خارجی و دو دستور دیگر که در هر دو شیوه نامه مشترک هستند از شیوه نامه داخلی خوانده شده است.</p><p>به طور کلی هنگامی یک دستور به هر سه روش برای یک عنصر HTML نوشته میشود، اولویت اجرای آنها به صورت زیر است:</p><ol><li>استایل های درون خطی</li><li>شیوه نامه های داخلی</li><li>شیوه نامه های خارجی</li></ol><p>پس استایل هایی که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می شود، باعث می شود دستورات مربوط به آن عنصر در شیوه نامه داخلی که در تگ نوشته شده و همچنین دستورات مربوطه در شیوه نامه خارجی که با تگ به صفحه فعلی متصل شده نادیده گرفته شوند.</p><p><strong>نکته:</strong> چنانچه لینک یک شیوه نامه خارجی بعد از دستورات شیوه نامه داخلی در تگ قرار داده شود، در نهایت دستورات شیوه نامه خارجی اعمال خواهند شد.</p><p><img src="/image.axd?picture=2011%2f11%2fCSS-Learning-part1.png" alt="" /></p><p>&nbsp;</p><p>&nbsp;</p>
اشتراک
  • Twitter
  • del.icio.us
  • Digg
  • Facebook
  • Technorati
  • Reddit
  • Yahoo Buzz
  • StumbleUpon

بدون نظر

اطلاعات! با عرض پوزش فقط کاربران ثبت نام شده می توانند نظر ارسال کنند.وارد شوید یا ثبت نام کنید.

دریای وب  --  Web Sea

ارائه دهنده خدمات مبتنی بر وب


ایمیل : Info@WebSea.ir

درياي وب در شبكه هاي اجتماعي
Web Sea in Social Networks



درياي وب در كلوب    درياي وب در اينستاگرام    درياي وب در لنزور
logo-samandehi