با ما همراه باشید

منتشر شده

در

آموزش طراحی وب صفرتاده (css – قسمت چهارم)
5 (100%) 1

با سلام در خدمت شما هستیم با آموزش طراحی صفحات وب صفرتاده قسمت چهارم.

در قسمت قبل ما  جزئیات مختصری راجب Css گفتیم و این جلسه میخوایم تکمیلش کنیم.خب  قبل از شروع یه نیم نگاهی به اون چه که جلسه قبل گفتیم میندازیم.

 

مقاله‌های مرتبط:

 

 

CSS چیست؟

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

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

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

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

CSS می‌تونه در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کنه. ما میتونیم یکبار خصوصیات ظاهری عناصر رو در وب سایت با دستورات CSS مشخص کنیم، وبعد هرکجا در وب سایت از عنصر مورد نظرمون استفاده کنیم،همچنین هر وقت بخواید ظاهر وب سایت را تغییر بدید، کافیه به جایی که دستورات CSS رو نوشتید برید واون هارو تغییر بدید تا ظاهر عنصر مورد نظرمون در تمام صفحات وب سایت تغییر کنه و نیازی به تغییر تمام کدهای HTML نیست.

بنابراین حجم صفحات وب سایت هم کمترمیشه و در نتیجه سرعت بارگزاری صفحه وب افزایش پیدا میکنه.

دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML نوشته بشن و این تفکیک، تمیزی و پیچیدگی کمتر کدها را در تمام صفحات وب سایت برای ما به ارمغان میاره.

خوب که بدونیدگوگل در رتبه بندی وب سایت ها، سرعت بارگذاری و کیفیت کدها را هم مدنظر قرار میده و وب سایت هایی که سرعت بارگذاری اونها مناسب نباشه، کمتر به جستجو کنندگان معرفی میشن.

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

جدول ها  مشکلات زیادی داشتند و به این خاطر با ظهور CSS کاملا منسوخ شدند. از جمله مشکلات جدول ها میشه به حجم بالای پردازش اون ها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد.

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

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

ساختاردستورات CSS

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

Declaration : قسمتی که بین علامت {} نوشته می شن، در این قسمت باید نام خاصیت مورد نظرمون، که می خوایم  تغییرات روش اعمال بشه و مقدار اونو تعیین کنیم.

تو این مثال  رنگ خاصیتآبیه و  خاصیت سایز فونت مساوی با ۱۲ پیکسل هستش.

مثال : در کد زیر، می‌بینید که مقدار هر خاصیت، بعد از علامت دو نقطه “:” در جلوی اون نوشته میشه. و در آخر هر خاصیت و مقدار علامت “;” میزاریم که معنی اتمام کد رو میده:

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

CSS Comment

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

شرطش فقط اینکه که توضیحات خودتون روبا علامت “/*” شروع و با علامت “*/” به پایان برسونید.

 خب حالا جلسه جدید رو شروع میکنیم:

«استایل عناصر»

استایل پس زمینه ها

با CSS می تونید برای عناصر در صفحات وب پس زمینه قرار بدید. این پس زمینه ها می تونن یک تصویر و یا یک رنگ مورد نظر ما باشند.

دستوراتی که در CSS برای کار با پس زمینه ها وجود داره:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

استفاده از رنگ برای پس زمینه ( background-color)

با این دستور میتونیم رنگ پس زمینه عنصر مورد نظرمون رو تغییر بدیم. مثلا پس زمینه یک پاراگراف، کادر متن، div و یا هر عنصر دیگه ای روبا رنگ دلخواه پر کنیم. به عنوان مثال کد زیر رنگ پس زمینه کل صفحه رو  سبز می کنه:

ما به سه روش می تونیم رنگ مورد نظر خودمون رودر دستور فوق بنویسیم:

  1. از طریق کد هگزای رنگ- مانند b0c4de#
  2. از طریق کد rgb رنگ – مانند (rgb(255,0,135
  3. از طریق نام رنگ – مانند “blue”

در مثال زیر عناصر h1، p و div  پس زمینه هایی با رنگ های متفاوت خواهند داشت:

استفاده از تصویر برای پس زمینه ( background-image )

با این دستور می تونیم یک عکس دلخواه رو به عنوان پس زمینه عنصر مورد نظرمون در صفحه وب قرار بدیم. نحوه استفاده از این دستور:

در کد بالا  ‘paper.gif’ نام تصویرمونه. همیشه در پس زمینه متن ها از تصویر استفاده کنید که از خوانایی متن کم نشه.

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

برای مثال اگه تصاویر مورد استفاده در وب سایت، در فولدرimages باشه، کدبالا باید به این شکل نوشته بشه:

تکرار تصویر پس زمینه در محور افقی و عمودی ( Background-repeat )

برای داشتن صفحه ای با سرعت بارگزاری بالا، باید حجم صفحه را پایین نگه داریم.

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

به عنوان مثال با تصویر زیر میشه یه پس زمینه برای کل صفحه وب ایجاد کرد:

توجه کنید که بطور پیش فرض، با نوشتن دستور پس زمینه به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار میشه:

اگر بخوایم تصویر فقط در محور افقی تکراربشه، باید از دستور زیر استفاده کنیم:

خروجی:

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

خروجی:

اگر بخوایم تصویر فقط یکبار نشون داده بشه و تکرار نشه، باید از دستور زیر استفاده کنیم:

تعیین موقعیت مکانی تصویر در پس زمینه ( background-position )

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


 

به عنوان مثال با مجموعه دستورات زیر، پس زمینه صفحه وب سایت، در سمت چپ و بالای صفحه نشون داده میشه:

 

ثابت و یا قابل اسکرول بودن تصویر پس زمینه ( background-attachment )

شاید وبسایت هایی را دیده باشید که،وقتی که صفحه رو برای مطالعه اسکرول میکنید، پس زمینه آنها در جای خود ثابت موندن و محتوای اون صفحه حرکت میکنه.این کار توسط دستور background-attachment انجام میشه.

برای اینکه تصویر با اسکرول کردن صفحه در جای خود ثابت بمونه،از دستور زیر استفاده میکنیم:

 

برای اینکه تصویر با اسکرول کردن صفحه همراه سایر عناصر حرکت کنه، از دستور زیر استفاده میکنیم:

خب به پایان این بخش از آموزش صفر تا ده رسیدیم،امیدوارم که براتون مفید باشه.

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

برای افزودن دیدگاه کلیک کنید

یک پاسخ بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *