/ Css رو قورت بده ( قسمت دوم - اصول پایه )
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
صفحه 1 از 3 123 آخرینآخرین
نمایش نتایج: از 1 به 10 از 28

موضوع: Css رو قورت بده ( قسمت دوم - اصول پایه )

  1. #1
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir

    Css رو قورت بده ( قسمت دوم - اصول پایه )

    درود
    با جلسه دوم از سری آموزش های Css رو قورت بده در خدمت دوستان هستم .

    این جلسه به بخش های زیر تقسیم میشه :

    1 - کامنت گذاری در CSS
    2 - کاربرد class و id در CSS
    3 - فراخوانی CSS در برگه HTML ( فراخوانی فایل CSS و فراخوانی class ها و id ها )
    4 - کاربرد خاصیت های زیر :
    background
    height
    width
    float
    margin
    color

    لطفا کد ها رو کپی نکنید و خودتون بنویسید در غیر این صورت متوجه هیچی نمیشید .
    در پایان کار کل آموزش گردآوری میشه و کد هایی داده میشه که داخل ادیتور آنلاین بتونید نتیجه رو ببینید .

    1 - کامنت گذاری در CSS

    کامنت گذاری اجباری نیست اما گاها شاید به هر دلیلی بخواید داخل فایل css متنی یا تاریخی یا هر اطلاعاتی بنویسید که روی عملکرد تاثیری نداشته باشه و فقط بشه در سورس دیدش برای مثال ابتدای فایل css قصد دارید بنویسید این قالب توسط ویکی وی بی طراحی شده است به این صورت :

    Theme Designed By WikiVB.Ir

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

    برای اینکار باید به این صورت عمل کنیم :

    کد:
    /* Theme Designed By WikiVB.Ir */
    دقت کردید که /* */ باعث غیر فعال شدن متن در موقع اجرا میشه و بین این دو تگ هرچند خط متن به هر زبانی بنویسید غیر فعال میشه و فقط داخل سورس قابل مشاهده هست .
    از اینکار در مواقعی که به یک کلاس نیاز نداریم که اجرا بشه اما ممکنه بعدا لازمش داشته باشیم هم استفاده میشه قبل از کلاس

    کد:
    /*
    و بعدش :

    کد:
     */
    اضافه میکنیم و کلاس غیر فعال میشه .

    2 - کاربرد class و id در CSS

    قطعا دیدید که داخل css ها گاها از . ( نقطه ) و گاها از # ( مربع ما میگیم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی ) استفاده میکنن و مطمئنا پرسیدید خب چه فرقی داره !؟ طراح مرض داشته مگه ؟ مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی باید بگم که خیر فرق داره و طراح مرض نداشته مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

    اما گاها ممکنه ( میگم کلاس که بهتر متوجه بشید در اصل id هست ) کلاس ما داخل HTML فقط یک جا فراخوانی بشه یعنی مثلا تصویری که فقط و فقط داخل header هست بنابر این از # یا همون id استفاده میکنیم .

    مشکلی نیست که همیشه از class استفاده کنید اما اگر از id استفاده کنید و داخل HTML چند بار فراخوانی بشه فقط یک جا عمل میکنه .

    3 - فراخوانی CSS در برگه HTML ( فراخوانی فایل CSS و فراخوانی class ها و id ها )

    خب قبل از هرچیز لازمه شما داخل فایل HTML ، استایلتون رو فراخوانی کنید برای اینکار باید به صورت زیر عمل کنید و کد زیر رو بین تگ head قرار بدید :

    کد:
    <link rel="stylesheet" type="text/css" href="style.css"/>
    و به جای style.css لینک فایل Css خودتون رو بدید .

    اما حالا چطور class ها و id ها رو داخل HTML فراخوانی کنیم ؟

    خیلی سادست ما یک کلاس داریم به این صورت :

    کد:
    .wikivb {
    
    }
    حالا میخواید به یک متن این کلاس رو بدیم به این صورت فراخوانی میشه :

    کد:
    <div class="wikivb">ویکی وی بی</div>
    تگ div class رو باز میکنیم فراموش نکنید تگ حتما باید بسته بشه با /div البته در این باره توضیح نمیدم زیاد چون آموزش CSS هست و قبلا گفته شده فرض بر این میگیریم شما HTML بلد هستید .

    برای id هم به این صورت عمل میشه :

    کد:
    <div id="wikivb">ویکی وی بی</div>
    4 - کاربرد خاصیت ها

    background :

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

    برای رنگ به این صورت نوشته میشه :

    کد:
    background: #000000;
    یعنی بکگراند مشکی باشه ( کد رنگ رو باید استفاده کنید البته برای رنگ های پایه میشه از اسم انگلیسی رنگ هم استفاده کرد یعنی به جای #000000 میتونید بنویسید red , black , blue , white و ... )

    و برای قرار دادن تصویر به این صورته :

    کد:
    background: url(linkeakx.jpg);
    که به جای linkeakx.jpg لینک تصویر مورد نظرتون رو میزارید ، قرار دادن تصویر حالت های زیادی داره مثل repeat , no-repeat , repeat-x , repeat-y , right , left و ... که دستوریاتی برای موقعیت تصویر هستن و پیکسل هم گاها برای اسپرایت کردن داده میشه اما چون در سطح حرفه ای هستن اسپرایت کردن رو به جلسات آخر واگذار میکنیم .

    height
    width

    height به معنای ارتفاع هست و width به معنای عرض یعنی هنگامی که به صورت زیر قرار داده بشن :

    کد:
    height: 200px;
    width: 400px;
    یعنی کلاس ما ارتفاع 200 پیکسلی و عرض 400 پیکسلی داشته باشه ، فکر نکنم نیاز به توضیح بیشتر باشه چون کاملا واضحه

    float

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

    همونطور که میدونید right به معنای راست و left به معنای جپ هست بنابر این :

    کد:
    float: right;
    به معنای قرار گرفتن در سمت راست و

    کد:
    float: left;
    به معنای قرار گرفتن در سمت چپ هستش .

    حالا در خاصیت بعدی این دو لازم هست مورد توجه قرار بگیرن یعنی اگر right دادید باید margin-right بدید و اگر left بود ، margin-left بدید ، سردرگم نشید الان margin هم توضیح میدم .

    margin

    margin موقعیت مکانی کلاس رو از چهار طرف بالا ، پایین ، راست و چپ مشخص میکنه و به صورت های زیر هست :

    کد:
    margin:
    margin-top:
    margin-right:
    margin-bottom:
    margin-left:
    درز واژه های بالا top به معنای بالا ، right به معنای راست ، bottom به معنای پایین و left به معنای چپ هست یعنی کلاس ما از هرکدوم از این جهت ها به مقدار مورد نظر فاصله داشته باشه اما خیلی راحت میشه خلاصه نویسی کرد یعنی چهار خط زیر رو :

    کد:
    margin-top: 20px;
    margin-right: 60px;
    margin-bottom: 10px;
    margin-left: 5px;
    در یک خط خلاصه کرد به این صورت :

    کد:
    margin: 20px 60px 10px 5px;
    به ترتیب از اول هر عدد مال جهت های : بالا ، راست ، پایین و چپ هست یعنی در جهت عقربه های ساعت .

    color

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

    کد:
    color: #ffffff;
    یعنی رنگ متن ها ffffff یا همون سفید باشه .

    حالا ما چون قراره آموزش رو یک جمع بندی بکنیم به کارمون float: right میدیم و margin-top , margin-right میدیم تا متوجه عملکرد بشید :

    برای امروز کافیه ، اگرچه آموزش گنگ بود اما بعد از کپی کرد کد های زیر کارکرد ها رو درک میکنید بعدش هم هر سوالی بود تو تاپیک بپرسید شفاف سازی میشه .

    به ادیتور آنلاین ویکی وی بی برید : http://www.wikivb.ir/editor.html

    حالا کد های زیر رو درش کپی کنید :

    کد:
    <style>
    
    /* Theme Designed By WikiVB.Ir */
    
    .wikivb {
    background: #000000;
    height: 200px;
    width: 400px;
    float: right;
    margin-top: 20px;
    margin-right: 60px;
    color: #ffffff;
    }
    
    </style>
    
    <div class="wikivb">ویکی وی بی</div>
    با ویرایش خاصیت ها عملکرد هرکدوم رو تست کنید تا متوجهش بشید .

    سوالاتتون رو داخل تاپیک بپرسید ، حاشیه سازی نکنید پست های حاشیه ساز حذف میشه و اخطار دریافت میکنن فقط سوال .

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

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

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

  3. #2
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    خیلی ممنون عزیز فقط یه سوال فرق بین مارجین و position چیه؟
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  4. #3
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir
    margin همونطور که توضیح داده شد مقدار فاصله رو از اطراف مشخص میکنه اما position به نوع دیگه ای موقعیت رو در حجم صفحه مشخص میکنه که داخل صفحه ثابت باشه ، روی دیگر بخش ها تاثیر نزاره وجودش و ... ( absolute , fixed و ... ) کلا این دو مغوله ای جدا از هم هستن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    10 نفر از اعضا پست WikiVB را پسندیده اند


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

  5. #4
    local آنلاین نیست.
    local
    کاربر سايت
    2,070نوشته1,232مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1475
    پسندیده است
    1,828 پست
    بلاگ
    7 پست
    میزان امتیاز
    1241
    No Set
    نقل قول نوشته اصلی توسط WikiVB نمایش پست ها
    margin همونطور که توضیح داده شد مقدار فاصله رو از اطراف مشخص میکنه اما position به نوع دیگه ای موقعیت رو در حجم صفحه مشخص میکنه که داخل صفحه ثابت باشه ، روی دیگر بخش ها تاثیر نزاره وجودش و ... ( absolute , fixed و ... ) کلا این دو مغوله ای جدا از هم هستن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    متوجه شدم فقط میشه این دو هر دوتا رو تو یه کلاس کار برد اخه یه جا شنیده بودم مشکل ساز میشه.
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  6. #5
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir
    مشکل ساز که نمیشه ، غیر استاندارد میشه مثلا شما این خاصیت رو به کلاس دادید :
    کد:
    position: fixed
    دیگه float بدید کار نمیکنه float باید موقعیتش رو با top , right , bottom , left بدید برای مثال میخواید مثل بنر گوشه ای ویکی وی بی بزارید اینجوری میشه :
    کد:
    position: fixed;
    left: 0px;
    bottom: 0px;

    8 نفر از اعضا پست WikiVB را پسندیده اند


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

  7. #6
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    درود

    ممنون عالی بودمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی یک سوال! چرا بعضی جاها right میدن ولی بعضی جاها margin right؟

    کاربر زیر پست Farshad Ghanbari را پسندیده است:



  8. #7
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir
    نقل قول نوشته اصلی توسط FaRsHaD نمایش پست ها
    درود

    ممنون عالی بودمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی یک سوال! چرا بعضی جاها right میدن ولی بعضی جاها margin right؟
    وقتی که margin-right داده میشه ، موقعیت کلاس به صورت float داده میشه اما بعضی اوقات کلاس position: absolute میگیره ، بهترین چیزی که به ذهنم میرسه براش بگم یعنی یک موقعیت شناور میگیره ، داخل صفحه هست اما بودنش روی مکان هیچکدوم از عناصر تاثیر نمیزاره در این مواقع float کار نمیکنه و کافیه موقعیت رو خیلی ساده به صورت right: x px یا left: x px بدیم تا کلاس بره سمت راست یا چپ با فاصله ای که تعیین میکنیم .
    چی گفتم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    4 نفر از اعضا پست WikiVB را پسندیده اند


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

  9. #8
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    نقل قول نوشته اصلی توسط WikiVB نمایش پست ها
    وقتی که margin-right داده میشه ، موقعیت کلاس به صورت float داده میشه اما بعضی اوقات کلاس position: absolute میگیره ، بهترین چیزی که به ذهنم میرسه براش بگم یعنی یک موقعیت شناور میگیره ، داخل صفحه هست اما بودنش روی مکان هیچکدوم از عناصر تاثیر نمیزاره در این مواقع float کار نمیکنه و کافیه موقعیت رو خیلی ساده به صورت right: x px یا left: x px بدیم تا کلاس بره سمت راست یا چپ با فاصله ای که تعیین میکنیم .
    چی گفتم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    واقعانم چی گفتی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی شیش بار خوندم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست Farshad Ghanbari را پسندیده اند



  10. #9
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,611مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26488
    wikivb.ir
    حالا ما شوخی کردیم ولی دور از شوخی به بهترین نحو ممکن براتون توضیح دادم !

    3 نفر از اعضا پست WikiVB را پسندیده اند


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

  11. #10
    Farshad Ghanbari آنلاین نیست.
    Farshad Ghanbari
    مدير بخش
    3,560نوشته8,085مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    219
    پسندیده است
    7,092 پست
    بلاگ
    پست
    میزان امتیاز
    8092
    مسئول 2 ستاره
    www.farshadghanbari.ir
    میدونیم داداش، دستت دردنکنه واقعا گل کاشتی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    2 نفر از اعضا پست Farshad Ghanbari را پسندیده اند



صفحه 1 از 3 123 آخرینآخرین

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

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

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

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

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

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