آموزش CSS

همه چیز در مورد css

 

 موارد تشکیل دهنده css

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

اگر یک فایل css را برای اولین بار می خواهید بسازید بهتر است آن را با یک استاندارد درست ایجاد نمایید این استاندارد می تواند به صورت زیر باشد :

 

معرفی قالب با استفاده از کامنت ها (در وردپرس)

برای استاندارد سازی قالب با وردپرس ابتدا باید فایل css قالب رو به وردپرس معرفی کرد که این کار با استفاده از یکسری کامنت از پیش تعیین شده در اول فایل استایل انجام می پذیرد. در واقع توسط این کدها نویسنده ، نسخه قالب و برچسب ها و… را به وردپرس معرفی می کنیم.

  • /*
    Theme Name: haman
  • Theme URL: www.hamannews.ir
  • Author: رضا
  • Author URI: www.hamannews.ir
  • Description:news theme for sale
  • Version: 1.0.2
  • License: GNU General Public License
  • License URI: license.txt
  • tags:hamanweb , web design ,
  • */

  ساختار css-reset

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

کدهای ریست css

 

هدف CSS Reset :

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

مهم : محل CSS Reset باید قبل از سایر CSS ها باشد. در زیر یک نمونه بسیار ساده از Css Reset را ملاحضه می کنید :

  • ol, ul { list-style: none;
    }
  • html, body, div, form, label
    {
    margin: 0;
    padding: 0;
    }

در صورتی که قصد دارید از CSS Reset های آماده استفاده کنید به ورژن HTML آن دقت کنید.

 

  معرفی فونت ها

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

 

  هک css

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

هک css

 

رسپانسیو کردن با css

زمانی که قالب معمولی سایت خود را طراحی نمودید هم اکنون لازم است قالب سایت سازگار با دستگاه های مختلف طراحی نمایید. برای انجام این کار کافی است ابتدا کد زیر را بین دو تگ head خود اضافه نماییم:

  • <meta name=”viewport” content=”width=device-width”>

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

سپس کافی است فایل های CSS برای رزولوشن های مختلف طراحی نموده و در سند HTML خود لینک نمایید:

  • <link rel=”stylesheet” media=”only screen and (min-width: 0px) and (max-width: 327px)” href=”mobile.css”>
  • <link rel=”stylesheet” media=”only screen and (min-width:328px) and (max-width: 768px)” href=”templates/template/tablet.css”>

ساخت فایل print.css

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

  • ><link href=”آدرس” rel=”stylesheet” type=”text/css” media=”print” />

نکته : در فایل print.css معمولا عکس ها و موارد اضافه را حذف کرده و فونت ها برای پرینت تنظیم می گردد.

 

css compact

در نهایت پس از ایجاد تمام فایل های css ای مورد نظر حال نوبت به فشرده سازی تمامی آن ها می رسد برای این منظور سایت های بسیاری وجود دارد که بهترین آن ها css compressor می باشد.

شاید این سوال در ذهن شما بوجود آمده که چرا باید css ها را فشرده سازی کرد جواب آن در یک کلمه می باشد سرعت ( سرعت لود سایت ) یعنی وقتی فایل استایل را فشرده می کنید از حجم آن کاسته و باعث افزایش سرعت در لود سایت می شوید.

فشرده سازی کدهای css

تا الان همه چیز در مورد یک فایل css مورد بررسی قرار دادیم اما ادامه این مقاله را از دست ندهید، چون می خواهیم چند تکنیک ویژه و مهم در سبک را برای شما توضیح دهیم:

 

چند تکنیک ویژه در css :

 

راست چین کردن قالب با css

احتمالا تا به حال با سایت های چند زبانه مواجه شده اید اگر شما زبان آن ها را تغییر دهید متوجه خواهید شد سبک نمایش هر زبان متفاوت خواهد بود. تمامی قالب های دو زبانه ترجمه شده به زبان فارسی (یا هر زبان راست چین دیگر) دارای یک فایل css به نام rtl.css می باشند.

در فایل rtl.css تمامی موارد مربوط به سمت و سوی قالب (فایل css اصلی) به صورت عکس مورد استفاده قرار می گیرند. یعنی اگر در فایل css اصلی (direction:ltr) می باشد در فایل راستچین قالب (direction:rtl) خواهد بود.

برخی از موارد مربوط به سمت و سوی پوسته ها در css عبارتند از :

  • direction:ltr(direction:rtl)
  • text-align:left(text-align:right)
  • float:left(float:right)
  • border-right(border-left)
  • margin-left(margin-right)
  • padding-left(padding-right)
  • left(right)

ساخت انیمیشن با css

انیمیشن و متحرک سازی در css

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

برای ایجاد انیمیشن در CSS3 ، شما باید قانون keyframes@ در CSS3 را یاد بگیرید .

شما در داخل keyframes ها تعریف میکنید که در چه زمانی باید چه تغییراتی درون CSSها انجام شود.

نکته : اینترنت اکسپلورر از انیمیشن و keyframe@ پشتیبانی نمی کند. فایرفاکس کروم و سافاری و اپرا برای عملکرد درست این ویژگی نیاز به پیشوندهای مخصوص خود یعنی -webkit- -moz- و -o- دارند.

 

پس از آنکه حرکت مورد نظر را با keyframes@ تعریف کردید نوبت آن است که انیمیشن را به یک عنصر متصل کنید .

برای انجام دادن آن شما باید دو کار انجام دهید :

  • نام انیمیشن را تعریف کنید مثلاً myanimate
  • مدت زمان انیمیشن

به صورت زیر :

  • عنصر مورد نظر{
    animation: myfirst 5s;
  • -moz-animation: myfirst 5s; /* Firefox */
  • -webkit-animation: myfirst 5s; /* Safari and Chrome */
  • -o-animation: myfirst 5s; /* Opera */
    }
همچنین بخوانید...!

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

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