آموزش CSS | آشنایی با زبان سی سی اس (CSS)

Css چیست ؟

الگوهای آبشاری یا روی‌ انداز آبشاری سَبْک یا سی‌ اس‌ اس (به انگلیسی: CSS: Cascading Style Sheets ) در کنار اچ‌تی‌ام‌ال هستهٔ فناوری ساخت صفحه‌های وب هستند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. الگوهای آبشاری از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.

کاربرد اصلی css چیست ؟ بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.

یکی از مهمترین نکته ها برای طراحی سایت ، استفاده بهینه از  css میباشد در این بخش از آموزش css به شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم.

سه روش برای اضافه کردن CSS به صفحه وجود دارد :

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

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

 

برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ،  کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.

آموزش CSS در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند. آموزش CSS (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است.

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

Css (سی اس اس) به عبارت ساده برای زیبایی صفحات وب در طراحی سایت می باشد.

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

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

از مهمترین مزایای Css میتوان به انعطاف پذیری بالای css ، کاهش استفاده از پهنای باند شبکه، کم حجم کردن فایل html ، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف و … اشاره نمود.

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

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

امیدواریم بخش آموزش سی اس اس برای شما مفید باشد.

  • مقدمات آموزش CSS
  • CSS چیست ؟
  • مزایای سی اس اس ( CSS )
  • طریقه نوشتن CSS – خاصیت Style تگ ها
  • طریقه نوشتن CSS – تگ Style در Head صفحه
  • طریقه نوشتن CSS – فایل خارجی در پروژه
  • اصول نوشتن کدهای CSS
  • آموزش خواص مقدماتی CSS
  • تنظیم طول و عرض ( Height , Width ) عناصر در CSS
  • تنظیم پس زمینه Background در CSS
  • تنظیم قلم و فونت CSS Styling Font
  • تنظیم متن و نوشته CSS Styling Text
  • تنظیم لیست ها CSS Styling List
  • تنظیم خواص باکس ها Border , Margin , Padding
  • آموزش خواص پیشرفته CSS
  • خواص مربوط به سرریزی Overflow عناصر در CSS
  • محل قرارگیری عناصر – خواص مربوط به Position
  • محل قرارگیری عناصر – خواص Clear , Float
  • خواص نمایش عناصر Cursor , Display , Visibility
  • تنظیم شفافیت عناصر Opacity
  • آموزش و معرفی انتخابگرها CSS Selectors
  • مرجع امکانات CSS
  • مرجع واحدهای شمارش در CSS
  • مرجع نام و شماره رنگ ها در CSS
  • مرجع انتخابگرها در CSS – بخش اول
  • مرجع انتخابگرها در CSS – بخش دوم
  • مرجع انتخابگرها در CSS – بخش سوم

     مزایای CSS

    با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

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

    برای مثال می تونیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کارببریم.
    در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

    مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

    • CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
    • تغیییرات مجدد تگ های HTML بسیار راحت میشه.
    • طراحی صفحه بدون نیاز به تگ های قالب بندی HTML 
    • طراحی صفحات دینامیک به کمک javascript
    • و …

 

 

ارسال دیدگاه