/ آموزش css
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 2 از 2

موضوع: آموزش css

  1. #1
    heidari آنلاین نیست.
    heidari
    کاربر سايت
    9نوشته1مورد پسند

    تاریخ عضویت
    May 2015
    شماره عضویت
    8861
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    11
    No Set

    آموزش css

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    واژه CSS مخفف Cascade Style Sheets جهت طراحي انواع سبک يا استايل براي صفحه هاي وب است. با استفاده از کدهاي CSS ميتوان براي صفحه وب طرح‌ها و قالب‌هاي متنوعي طراحي کرد. کدهاي CSS را مي‌توان درون يک صفحه وب يا در يک فايل خارجي درج و استفاده کرد. مهمترين ويژگي و اهميت CSS تشخيص سريع دستورات آن توسط مرورگرهاي اينترنت است که باعث مي شود صفحه وب سريع و درست بارگذاري شود.


    کدنويسي css داخلي

    اگر بخواهيد در صفحه موجود از کدهاي css استفاده کنيد در بخش head از برچسب style به صورت زير استفاده کنيد. کدهاي css در اين تگ درج ميشوند.
    <style type="text/css"> کدهاي موردنظر </style>
    کدنويسي css خارجي

    با استفاده از css خارجي ميتوانيد سبکهاي مختلفي را طراحي کرده و در تمامي صفحات از آن سبکها استفاده کنيد. براي ساخت يک فايل css نياز به هيچ نرم افزار ويژه‌اي نيست. کدهاي css موردنظر را در يک صفحه notepad وارد کرده و با نامي مانند style.css ذخيره کنيد. البته اگر از dreamweaver استفاده کنيد کارتان ساده تر است. حالا براي اعمال کدها در هر صفحه تنها در بخش head صفحه به اين فايل css خارجي لينک دهيد. به ابتداي بحث طراحي سايت بر مي گرديم. فرض کنيد مجموعه فايلهاي سايت ما به صورت زير است.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    فرض کنيد فايل css خارجي ما با نام style.css در پوشه css ذخيره شده است. براي لينک به اين فايل در بخش head هر صفحه دستور زير را وارد کنيد:
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی در تهيه css خارجي نيازي به استفاده از برچسب style نيست و مستقيماً مي توانيد کدنويسي را انجام دهيد. يک نمونه فايل CSS براي دانلود قرار داده شده است. به هر تعداد که بخواهيد مي توانيد به فايلهاي css خارجي لينک دهيد و همزمان style دروني نيز طراحي کنيد.
    دانلود نمونه css خارجي


    1- تغيير قالب برچسب‌هاي‌ موجود

    برچسب هاي body, p, div, a, ... همه کلاس هاي وب هستند که از قبل طراحي شده اند. با استفاده از کدهاي css مي‌توان اين کلاسها را تغيير داد. با ذکر چند مثال تغيير قالب برچسب هاي استاندارد HTML توضيح داده مي‌شود:
    1-1- فرض کنيد مي خواهيد در تمام بدنه از قلم tahoma استفاده کنيد چون براي فارسي‌نويسي ايده آل است و در تمامي نسخه هاي ويندوز به طور پيش فرض وجود دارد. براي اين کار از کد زير استفاده کنيد. اين کد دستور ميدهد قلم پيش فرض tahoma است. اگر قلم tahoma پيدا نشد از arial استفاده شود و اگر نبود از verdana استفاده شود.

    body { font-family: tahoma, arial, verdana; }
    1-2- حالا فرض کنيد بخواهيد دستور دهيد تا اندازه پيش فرض قلم 13 و رنگ قلم سفيد و زمينه صفحه نارنجي باشد.
    body { font-size:13px; font-family: tahoma, arial; color:#000033; background-color: #FF9900 }
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی براي مشاهده هگز تمامي رنگ ها مي توانيد از نرم افزارهاي dreamweaver,photoshop, corel,... استفاده کنيد يا به سايت web-source.net رجوع کنيد. برنامه RGBFinder با حجم 40 کيلوبايت نيز مي تواند کمک کند.

    برنامه نمايش هگز رنگها

    1-3- براي آنکه دستور دهيد صفحه وب فارسي و راست چين است از کد زير نيز در مجموعه بالا استفاده کنيد.
    body{ direction:rtl; }
    1-4- در اين تمرين مي خواهيم دستور دهيم هايپرلينک در تمام صفحه سبز و به underline آن حذف شود. بنابراين از کلاس ترکيبي body و a استفاده مي شود. به خاطر داشته باشيد ويژگي text-decoration براي تعيين افکت هاي قلم استفاده مي شود.
    body a{ text-decoration:none; color: #009966; }
    1-5- با کد زير هنگاميکه ماوس روي لينک قرار گيرد رنگ لينک آجري مي شود:
    a:hover{ color: #ff3300; }
    کد بالا رويداد hover تمامي لينک هاي صفحه را تحت تاثير قرار مي دهد. فرض کنيد بخواهيد اين کد تنها براي پاراگراف ها قابل اعمال باشد:

    p a:hover{ color: #ff3300; }
    2- طراحي class و id

    وقتي شما قالب يک برچسب را تغيير دهيد هميشه وقتي از آن برچسب استفاده کنيد با ويژگيهاي جديدي که طراحي کرده ايد ظاهر مي‌شود. فرض کنيد شما قالب يک برچسب p را تغيير را داده ايد در اينصورت تمامي پاراگراف هاي شما با قالب جديد ظاهر مي شود. حالا فرض کنيد بخواهيد فقط قالب يک پاراگراف خاص را دهيد حال چه بايد کرد؟

    هر برچسب دو ويژگي به نام id و class دارد. با استفاده از کدهاي css مي توان class و id طراحي کرد و در صورت نياز به برچسب‌ها منسوب کرد. با اين روش انعطاف شما بالا مي رود. مي توانيد کلاس هاي متعددي طراحي و براي هر پاراگراف، div يا برچسب ديگر استفاده کنيد. تنها براي قالب هاي کلي مانند راست چين بودن صفحه، رنگ پس زمينه صفحه يا نوع و اندازه قلم صفحه مانند مثالهاي 1 تا 3 برچسب body را تغيير دهيد و براي تغيير ساير برچسب ها از طراحي کلاس جديد استفاده کنيد.
    مثال: فرض کنيد بخواهيد فقط يک پاراگراف سبز با قلم 14 و bold داشته باشيد. براي انجام اين کار يک کلاس جديد با نام دلخواه مانند headgreen طراحي کنيد. در طراحي class جديد از علامت نقطه قبل از نام کلاس استفاده مي شود.
    .headgreen {font-size: 12px; font-weight: bold; color: #009966;}
    براي استفاده از اين کلاس جديد در هر پاراگراف دلخواه ويژگي class پاراگراف مورد نظر را برابر نام کلاس جديد قرار دهيد:
    <p class="headgreen">عنوان</p>
    علاوه بر کلاس مي توان ID جديد را با همان روش طراحي کلاس جديد استفاده کرد. در اينجا فقط به جاي . از علامت # قبل از نام id استفاده ميشود.
    #headgreen {font-size: 12px; font-weight: bold; color: #009966;}
    براي استفاده از اين id جديد در برچسب دلخواه ويژگي id برچسب مورد نظر را برابر نام id جديد قرار دهيد:
    <p id="headgreen">عنوان</p>
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی تفاوت کلاس و id چيست؟ در يک صفحه HTML تنها بايد يکبار از هر id استفاده شود درحاليکه استفاده از هر کلاس به هر تعداد آزاد است.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی براي اعمال تغييرات مربوط به هايپرلينک کلاس ها مانند قبل از روش ترکيبي استفاده کنيد.


    3- طراحي کادرها با CSS

    مهمترين مزيت کدهاي css از ديدگاه يک طراح حرفه اي استفاده از ويژگيهاي آن جهت دسته بندي و کادربندي صفحه است. يک وب نويس تازه کار براي دسته بندي و مديريت مطالب از جدول و برچسب table استفاده مي کند. استفاده و مديريت جدول براي وب نويس بسيار ساده و راحت است اما براي يک مرورگر وب واقعا پيچيده است . مرورگرها و کراولرها از جدول بيزار هستند و دليل آن را خوب نمي دانم. بنابراين استفاده از توانمنديهاي ترسيم کادر و دسته بندي مطالب با css را خوب ياد بگيريد و کم‌کم جايگزين جدول کنيد. در ترسيم کادر هم از class و id استفاده ميشود.

    پروژه 1: قطعه کد طراحي يک کادر با css

    #boxtext { border-right: #dddddd 1px solid; border-left: #dddddd 1px solid; border-top: #dddddd 1px solid; border-bottom: #dddddd 1px solid; padding-right: 2px; padding-bottom: 8px; padding-left: 2px; padding-top: 8px; background-color: #ffffff; margin-top:0px; margin-bottom: 8px; }
    يادگيري طراحي سايت به توانمنديهاي تحليل شما بستگي دارد و هيچ کس نمي تواند همه چيز را به شما بياموزد. ادامه مطلب چراغ راه شما خواهد بود.

    ويژگي boreder: ويژگي border اندازه، ضخامت و رنگ کادر را تعيين ميکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول يعني #dddddd معادل هگز رنگ بردار است که رنگ نيلي را برمي گرداند. همچنين 1px ضخامت کادر را 1 پيکسل تعيين کرده است. کلمه کليدي solid يز مي تواند با مقاديري مانند Thick, thin, dashed, medium, inset, outset و ... تعيين شود که نرم افزارهاي طراحي سايت مانند dreamweaver همه را نشان مي دهد.
    ويژگي padding: براي تعيين فاصله مندرجات يک کلاس از لبه کادر از ويژگي padding به صورت زير استفاده مي شود:
    padding-right:2px; padding-bottom:8px; padding-left:2px; padding-top:1px;
    ويژگي margin:براي تعيين فاصله يک کلاس از هاي کلاس ديگر از ويژگي margin به صورت زير استفاده مي شود:
    margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;
    علامت px يعني پيکسل، در اين مثالها همه حاشيه ها 0px درجشده است که مي توانيد آن را تغيير دهيد.

    پروژه 2: قطعه کد منوي لغزان


    براي تهيه چنين منوئي ابتدا کلاس زير را تعريف کنيد:
    .navigation:link, .navigation:visited { font-size: 13px; font-style: normal; font-weight: normal; text-decoration: none; text-align:center; color: #FFFFFF; background-color: #239180; display: inline; border: none; padding-bottom: 5px; padding-top:5px; padding-left: 20px; padding-right: 20px; float:right; margin-right: 3px } .navigation:hover { background-color: #74c699; color: #333333 }
    سپس براي برچسب a از اين کلاس استفاده کنيد:
    <a href="../index.html" class="navigation"> برگ نخست </a>

  2. نوين وردپرس تبلیغات شما

  3. #2
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    لطفا منبع هم ذکر کنید ، می کنم پارس مدیر باشه (منبع اصلی) مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    Coming Soon New Project ■

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

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

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی