08 - Implementing CSS

به نام ایزد دانا

در این پست آموزشی در مورد انواع پیاده سازی CSS صحبت خواهیم کرد.

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

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000<br/>

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

خب. من در این پست قسط دارم در مورد انواع پیاده سازی CSS صحبت کنم و نه خود CSS؛ بنابراین در مسائل CSS در این جلسه ریز نمیشیم.

خب از اونجا که تا الان با مسائل CSS هیچ آشنایی نداشتیم، بهتره اول بفهمیم CSS چیه و کارش چیه.

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

• محتوا یا Content: این بخش وب بوسیله کد هایHTML ایجاد می‌شود.
• نمایش یا Presentation: این بخش وب بوسیله کد هایCSS ایجاد می‌شود.
• رفتار یا Behavior: این بخش وب بوسیله  JavaScript ایجاد می‌شود.

خب ما با بخش دوم کار داریم یعنی CSS:

زبان CSS چیست؟

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

چرا باید از کدهای CSS استفاده کنیم؟

کدهای CSS می‌تواند در بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط کدهای CSS مشخص کنید، سپس هر کجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید.  خوب است بدانید گوگل در رتبه بندی وب سایت ها یعنی همان سئو، سرعت بارگذاری سایت و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.

نکته: در گذشته طراحی سایت و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جداول مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جداول میتوان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب سایت هایی است که با جدول پیاده سازی می شدند. در مقابل در وب سایتی که با کدهای CSS پیاده سازی شود، عناصر یکی پس از دیگری در هنگام بارگزاری بر روی صفحه پدیدار میشوند و کاربر از لحظه درخواست میتواند مشغول مطالعه و مشاهده وب سایت تا زمانی که بارگزاری کامل شود، باشد.

ساختار نحوی کدهای CSS

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

انتخاب کننده یا Selector : این بخش نام عنصر HTML است که می خواهیم استایل مورد نظر را بر روی آن اعمال کنیم.

تعریف یا Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.

برای اینکه دستورات خوانایی بیشتری داشته باشد و بتوانید با یک نگاه سریعا بخش مورد نظر خود را پیدا کنید، می توانید هر جفت خاصیت و مقدار را در یک خط بنویسید

p {
    color:red;
    text-align:center;
}

شناسه(id)ها و Classها در CSS

همانطور که در بخش ساختار نحوی دستورات مشاهده کردید، در بخش Selector عنصری که می‌خواهیم استایل روی آن اعمال شود را ذکر می‌کنیم. به عنوان نمونه در تمامی دستورات فوق عنصر مورد نظر پاراگراف بود و استایل های نوشته شده در براکت ها، بر روی همه پاراگراف های موجود در صفحه وب اعمال میشد. حالا اگر بخواهیم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال شود باید از id و Class استفاده کنیم.

اعمال دستورات فقط بر روی یک عنصر واحد توسط id

برای این منظور ابتد باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت id که برای عنصر مورد نظر تعریف کرده اید را نوشته و یک نماد “#” قبل از آن اضافه کنید

مثلا چنانچه بخواهیم دستورات فقط بر روی یک پاراگراف خاص اعمال شود، ابتدا برای آن پاراگراف یک صفت id در کدهای HTML تعریف میکنیم:

<p id=&quotpara1&quot>This is a Paragraph.<p>

سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1 {
     text-align:center;
     color:red;
}

بدین ترتیب این دستورات فقط بر روی پاراگرافی اعمال میشوند که دارای id برابر با para1 است و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.

نکته: هرگز صفت id را با عدد شروع نکنید چراکه در مرورگر فایرفاکس کار نخواهد کرد.

اعمال دستورات بر روی یک گروه از عناصر توسط Class

برای این منظور ابتد باید به کدهای HTML رفته و برای همه عناصری که میخواهید خصوصیت های ظاهری یکسان داشته باشند صفت Class را تعریف کنید. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Classکه برای عناصر مورد نظر تعریف کرده اید را نوشته و یک نماد “.” قبل از آن اضافه کنید

مثلا چنانچه بخواهیم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال شود، ابتدا برای آن دسته از پاراگراف ها یک صفت Class مشترک در کدهای HTML تعریف میکنیم :

<p class=&quotcneter&quot>This is a Paragraph.</p>

سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:

.cneter {
text-align:center;
}

بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال میشوند که دارای Class برابر با Center هستند و سایر پاراگراف های موجود در صفحه از این دستورات تاثیرپذیر نیستند.

نکته: هرگز صفت Class را با عدد شروع نکنید چرا که فقط در مرورگر اینترنت اکسپلورر کار خواهد کرد.

کدهای CSS را کجا بنویسیم؟

برای نوشتن کدهایCSS در یک وب سایت سه روش وجود دارد:

1. External Style Sheet : شیوه نامه خارجی
2. Internal Style Sheet : شیوه نامه داخلی
3. Inline Style : شیوه درون خطی

External style sheet یا شیوه نامه خارجی

استایل های خارجی فایل هایی هستند که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک سایت که از صفحات زیادی درست شده اند می باشند.

در استایل های خارجی یک فایل را با پسوند css در اینترنت ذخیره (آپلود) می کنیم و آدرس آن را در تگ <link> می گذاریم. در آن فایل باید از سلکتور هایی استفاده کنیم که بتوان آنها را به کد ها و تگ های موجود در صفحه وصل کرد.

توجه داشته باشید که همیشه باید تگ <link> درون تگ <head> قرار داشته باشد تا عملکردی مناسب داشته باشد. البته نه ازلحاظ کد نویسی بلکه از لحاظ سئو بودن.

برنامه هایی مثل notepad، DreamWeaver، Visual Studio و هر برنامه ای که با آن احساس راحتی بیشتری دارید برای نوشتن این کدها قابل استفاده هستند. فراموش نکنید فایل های CSS فقط حاوی دستورات CSS هستند و هیچ کد و تگی از HTML در آنها نباید نوشته شود.

یک نمونه کد که میتوانید آن را در یک notepadنوشته و با فرمت cssذخیره کنید .

hr {
   color: sienna;
}
p {
   margin-left:20px;
}
body {
   background-image:url(&quotimages/back40.gif&quot);
}

Internal Style Sheet یا شیوه نامه ی داخلی

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

نحوه نوشتن این استایل ها مانند استایل خارجی می باشد ولی تنها فرق آن این است که به جای تگ <link> از تگ <style> استفاده می کنیم.

کد زیر یک نمونه از استایل خارجی می باشد .

<head>
  <style type=&quottext/css&quot>
    hr {
      color: sienna;
        }
    p {
       margin-left:20px;
       }
    body {
       background-image:url(&quotimages/back40.gif&quot);
       }

  </style>
</head>

Inline Style یا شیوه نامه ی درون خطی

با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که دستورات  CSS بخاطر آنها به وجود آمد را از دست میدهید. چراکه برای هر عنصر باید دستورات مختص آن را بنویسید و بدیهی است که برای تغییر باید به تک تک عناصر مراجعه کرده و آنها را تغییر دهید که بسیار زمانبر و گاهی همراه با خطا خواهد بود.

برای استفاده از این روش باید به عنصر مورد نظر صفت Style را افزوده و سپس خاصیت ها و مقدارها را به این صفت اضافه کنید. در مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده میکنیم:

<p style=&quotcolor:yellow;&quot>This is a paragraph.</p>

استایل ها یا شیوه نامه های چندگانه

شیوه نامه ها و یا استایل های چندگانه ، استایل هایی هستند که خاصیت یک تگ HTML را در کل صفحه برای تمام تگ های موجود در سلکتور (انتخابگر) را تعیین می کنند. برای مثال:

h3 {
   color:red;
   text-align:left;
   font-size:8pt;
}

به طور کلی هنگامی یک دستور به هر سه روش برای یک عنصر HTML نوشته میشود، اولویت اجرای آنها به صورت زیر است:

1. استایل های درون خطی
2. شیوه نامه های داخلی
3. شیوه نامه های خارجی

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

نکته: چنانچه لینک یک شیوه نامه خارجی بعد از دستورات شیوه نامه داخلی در تگ قرار داده شود، در نهایت دستورات شیوه نامه خارجی اعمال خواهند شد.

در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.

نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ