آنچه که باید قبل از یادگیری css بدانید؟

یادگیری css

کلمه Css  مخفف  Cascading Style Sheets می باشد. شاید برای شما سوال باشد که چرا یادگیری css مهم است. خوب دوستان با زبان css و زبان  html می توانید صفحات وب را طراحی کنید. با زبان css  شما می توانید روی زیبا سازی صفحات کار کنید مثلاً نوع فونت و رنگ فونت و اندازه آن را تعیین کنید که چطور در سایت محتوا نمایش داده شود.
با ۳ روش زیر می توان css را به صفحه اضافه کنید:

  • Cssخارجی
  • Css داخلی
  • سبک درون خطی

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

  • خیلی در زمان صرفه جویی می کند چون یک بار ویژگی یک مشخصه را تعیین می کند.
  • با css می توانید صفحه را بدون این که نیازی به تگ های اضافی در html باشد طراحی کنید.
  • می توانید صفحات پویا و دینامیک با javascript طراحی کنید.

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

  •        آموزش نوشتن css
  •         اصول اولیه نوشتن کدهای css
  •      قوانین مهم درنام گذاری فایل های css
  •     تنظیم کردن ابعاد در css با چند خصوصیات

 آموزش نوشتن css

با کمک ویژگی style در یک عنصر می توانید می توانید خصوصیت خود را اعمال کنید که به این نوع نوشتن سبک درون خطی(inline style) گفته می شود .

<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>

اصول اولیه نوشتن کدهای css

 

یکی از نکات بسیار مهم این است نباید بین مقدار و واحد فاصله قرار دهیم. این نکته را با مثال زیر ببینید.

مثال درست:

margin-left:20px;

مثال غلط:

 

margin-left:20  px;

قوانین مهم درنام گذاری فایل های css

  • کاراکترهایی که مجاز هستید استفاده کنید حروف a-z، اعداد۹-۰،خط زیر(_)،خط فاصله می باشد.
  • هیچ وقت از کاراکتر فضای خالی استتفاده نکنید چون این کار باعث مشکل در وب سرور شما می گردد.
  • نام فایل تان را با یک حرف شروع کنید.
  • حتما برای نام گذاری فایل css از حروف کوچک استفاده کنید.
  • سعی کنید نام فایل را کوتاه انتخاب کنید.
  • حتماً یادتان باشد نام فایل را با پسوند css ذخیره کنید.

تنظیم کردن ابعاد در css با چند خصوصیات

 

بیایید ببینیم چطور می توانید ابعاد را با چند ویژگی که مهم ترین آن ها Width و Height  است تعیین کنید. این ویژگی ها را با ذکر ورژن پشتیبانی شده تعریف می کنیم.

 height : این ویژگی در تمام مرورگر ها پشتیبانی می شود.

p
{
height:100px; 
}

شاید برایتان جالب باشد با دو ویژگی  max-height و max-width می توانید حداکثر طول و عرض را در زبان cssتعیین کنید.

max-height : این ویژگی را تمام مرورگرها به جز مرورگرهای اینترنت اکسپلورر ۶ و ورژن های پایین تر  این مرورگر  پشتیبانی می کنند.

 p
{
max-height:50px;
}

max-width  : این ویژگی را تمام مرورگرها به جز مرورگرهای اینترنت اکسپلورر ۶ و ورژن های پایین تر  این مرورگر  پشتیبانی می کنند.

p
{
max-width:100px;
}
}

با دو ویژگی min-height و min-width  می توانید حداقل طول و عرض را تعیین کنید.

min-height: این ویژگی را تمام مرورگرها به جز مرورگرهای اینترنت اکسپلورر ۶ و ورژن های پایین تر  این مرورگر  پشتیبانی می کنند.

p
{
min-height:100px;
}

min-width : این ویژگی را تمام مرورگرها به جز مرورگرهای اینترنت اکسپلورر ۶ و ورژن های پایین تر  این مرورگر  پشتیبانی می کنند.

p.ex
{
width:100px;
}

نکته دیگری را که باید به شما بگوییم این است که عرض استاندارد برای طراحی سایت با توجه به رزولیشن استاندارد(۷۶۸*۱۰۲۴) ۹۸۰px تنظیم کنید . این عرض طبق استانداردهای صفحه وب انتخاب شده است.

از سال 86 فعالیتم رو در حوزه IT شروع کردم و علاقمند فناوری جدید در حوزه IT شدم ، از همان سال های اولیه به فکر راه اندازی کسب کار بودم و تا اینکه خودم رو به عنوان کار افرین پیدا کردم و عاشق کار افرینی شدم . در حال حاضر یک توسعه دهنده حرفه ای هستم و عاشق خدمت رسانی به مردم کشورم ....

ارسال دیدگاه

* .ایمیل ادرس شما منتشر نخواهد شد