تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 4 1234 آخرینآخرین
نمایش نتایج: از 1 به 10 از 32

موضوع: مقدمه آموزش CSS

  1. Top | #1
    مدیریت کل سایت

    تاریخ عضویت
    Aug 2009
    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,685
    مورد پسند
    54,811 بار
    نوشته های وبلاگ
    14
    اطلاعات
    میزان امتیاز
    3117

    پیش فرض مقدمه آموزش CSS

    درود.

    در این تاپیک پیش از آغاز آموزش سی اس اس قصد داریم تا اندازه ای شما را با CSS آشنا کنیم .



    قبل از شروع سی اس اس باید چه معلوماتی داشته باشید :
    • HTML


    سی اس اس (CSS) چیست ؟

    سی اس اس یک سری جلوه برای المنت های اچ تی ام ال است .



    المنت چیست ؟

    به قسمت های مختلف HTML المنت گفته می شود .

    مثل :
    • <div>
    • <span>
    • <p>
    • <body>
    • ...
    برای مثال شما یک div تعریف میکنید و به این div یک سری خواص میدید . مثلاً تعریف میکنید که بصورت معمولی عکس نارنجی باشد و به هنگام رفتن روی div رنگ آن تغییر کند و ..

    یکی از معروف ترین و پر کاربرد ترین المنت های HTML المنت div است که بخش ها را در یک HTML مشخص میکند و میتوان آن را به عنوان یک کادر نامرئی دانست که با دادن ویژگی به آن مرئی و قابل دید میشود که در فصل های مختلف سعی میکنیم بصورت کامل آموزش دهیم .



    طراحان وب به چه علت به سی اس اس علاقه مند هستند ؟

    طراحان وب پیش از سی اس اس باید برای هر قسمت از سایت از تگ های اچ تی ام ال مثل <font> و color و .. استفاده میکردند ولی وقتی سی اس اس آمد با استفاده از سی اس اس یک Class تعریف می کنند و برای تمام بخش های مورد نظرشان سی اس اس را اعمال میکنند .



    کلس چیست آن را باید چگونه نوشت ؟ چگونه باید یک سی اس اس را در صفحه قرار داد .

    کلس به هر یکی از ویژگی های سی اس اس گفته میشود .

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

    1. بصورت اکسترنال ( یعنی خارج از سایت ) ، به این صورت که شما یک فایل در هاست درست میکنید و با استفاده از یک کد آن را در سایت فراخوانی میکنید .

    کد:
    <link rel="stylesheet" type="text/css" href="http://www.vbiran.ir/test.css"><link rel="stylesheet" type="text/css" href="http://www.vbiran.ir/test.css">
    2. به صورت اینترنتال ( درون سایت ) ، به این صورت که شما به این صورت کد را قبل از تگ در صفحه میزنید :

    <style type="text/css">
    اینجا کلس ها قرار میگیرند
    </style>
    کد:
    <style type="text/css"> 
    اینجا کلس ها قرار میگیرند
    </style>
    برای نوشتن کلس باید بصورت زیر عمل کنید :

    کد:
    .class1 {
    property:value;
    }
    قسمت بالا یک شکل کلی برای سی اس اس است . class1 نام ویژگی ما هست . پس ما میتوانیم class2 class3 و .. را هم بسازیم ( لازم نیست حتماً اول آن کلس باشد هر اسمی که دوست دارید میتوانید به آن بدهید ) .

    قسمت property ویژگی ای است که ما قصد داریم بدهیم و value مقدار ویژگی که در قسمت بعدی بیشتر با آن آشنا میشوید . یک کلس سی اس اس با } آغاز و به { ختم میشود . ( ممکن است چون وی بی ایران RTL است این کد ها برای شما برعکس نمایش داده شود )

    مثلاً شما میخواهید یک ویژگی جدید برای سایتتان بنویسید که در آن نوشته را سفید کنید ، به کادر سایه بدهید و یک بک گراند قرمز انتخاب کنید !

    .vijegi {
    text-color:red;
    box-shadow:#b2b2b2 0 0 7px;
    -moz-box-shadow:#b2b2b2 0 0 7px;
    -webkit-box-shadow:#b2b2b2 0 0 7px;
    background:red;
    }

    که ما در واقع قرار هست همین ویژگی ها را به شما آموزش دهیم مثلاً Property هایی مثل moz box shadow یا background و ..



    چگونه یک سی اس اس را به یک تگ اچ تی ام ال نسبت دهیم ؟

    برای نسبت دادن یک سی اس اس به یک تگ اچ تی ام ال کافی هست به المنت مورد نظر class را اضافه کنید مثلاً :

    <div>

    -->

    <div class="vijegi">

    متن ما یا عکس ما و ..



    امیدوارم این مقدمه ، مقدمه مناسبی برای آموزش CSS باشد همچنین باید عرض کنم یادگیری این مقدمه برای سی اس اس بسیار مهم است و اگر تاکنون با HTML سر و کار نداشته اید سعی کنید هر چه سریعتر یک نرم افزار ویرایشگر مثل Sharepoint Designer دانلود کنید تا کار های خود را مستقیماً با آن چک کنید و زودتر با CSS و HTML آشنا شوید .

    موفق باشید .

    منبع : وی بی ایران




  2. گیفت کارت آیتونز

  3. Top | #2
    مدیریت کل سایت

    تاریخ عضویت
    Aug 2009
    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,685
    مورد پسند
    54,811 بار
    نوشته های وبلاگ
    14
    اطلاعات
    میزان امتیاز
    3117

    پیش فرض

    این هم یک نمونه دیگر سی اس اس : <br><br><br> <style type="text/css"> #vb { font-family:Calibri; width:73px; height:74px; background:#56d6e5; color:#ffffff; position:relative; font-weightold; font-size:20px; animation:vb 5s infinite; -moz-animation:vb 5s infinite; -webkit-animation:vb 5s infinite; border-radius:20px; -webkit-border-radius:20px; float:right; } @keyframes vb { 0% {transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {transform: rotate(20deg);right:0px;padding:40px;} 50% {transform: rotate(0deg);right:90%;} 55% {transform: rotate(0deg);right:90%;padding:50px;} 70% {transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {transform: rotate(0deg);right:0px;} } @-webkit-keyframes vb { 0% {-webkit-transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {-webkit-transform: rotate(20deg);right:0pxpadding:40px;;} 50% {-webkit-transform: rotate(0deg);right:90%;} 55% {-webkit-transform: rotate(0deg);right:90%;padding:50px;} 70% {-webkit-transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {-webkit-transform: rotate(0deg);right:0px;} } @-moz-keyframes vb { 0% {-moz-transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {-moz-transform: rotate(20deg);right:0px;padding:40px;} 50% {-moz-transform: rotate(0deg);right:90%;} 55% {-moz-transform: rotate(0deg);right:90%;padding:50px;} 70% {-moz-transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {-moz-transform: rotate(0deg);right:0px;} } </style> <div id="vb"><img src="http://up.vbiran.ir/images/yib6incsq34hz34cmx7h.png"><br /><span>VBIran</span><br /><br /></div>

  4. Top | #3
    مدیر بازنشته

    تاریخ عضویت
    Oct 2010
    ورژن ویبولتین
    4.1.11
    نوشته ها
    1,541
    مورد پسند
    1,696 بار
    اطلاعات
    میزان امتیاز
    195

    پیش فرض

    مرسی علی خوندم خیلی عالی توضیح دادی
    همه چیز رو کامل گرفتم(البته زیاد هم پرت نبودم از اولش)


  5. Top | #4
    کاربر اخراجی

    تاریخ عضویت
    Feb 2011
    ورژن ویبولتین
    3.8.6
    نوشته ها
    215
    مورد پسند
    128 بار
    اطلاعات
    میزان امتیاز
    0

    پیش فرض

    كد نويس وردپرس هم تو همين حوزه هست ديگه ؟
    راستي من يه سوال پرسيدم يه نگاه بندازيد : اضافه كردن تنها يك كادر خالي

  6. Top | #5
    مدیر بازنشته

    تاریخ عضویت
    Oct 2010
    ورژن ویبولتین
    4.1.11
    نوشته ها
    1,541
    مورد پسند
    1,696 بار
    اطلاعات
    میزان امتیاز
    195

    پیش فرض

    بله HTML,CSS,PHP


  7. Top | #6
    مدیر بازنشته

    تاریخ عضویت
    Feb 2011
    ورژن ویبولتین
    4.2
    نوشته ها
    527
    مورد پسند
    956 بار
    اطلاعات
    میزان امتیاز
    79

    پیش فرض

    نقل قول نوشته اصلی توسط masuod نمایش پست ها
    كد نويس وردپرس هم تو همين حوزه هست ديگه ؟
    راستي من يه سوال پرسيدم يه نگاه بندازيد : اضافه كردن تنها يك كادر خالي
    یه div تعریف کنید با یه کلس جدید ، یا از یکی از کلس های نوشته شده استفاده کنید.

    کاربر مقابل از Light بابت این پست مفید تشکر کرده است:









  8. Top | #7
    مدیریت کل سایت

    تاریخ عضویت
    Aug 2009
    ورژن ویبولتین
    4.2.2
    نوشته ها
    21,685
    مورد پسند
    54,811 بار
    نوشته های وبلاگ
    14
    اطلاعات
    میزان امتیاز
    3117

    پیش فرض

    به هنگام آموزش یک سری تگ ها بخاطر روشن بودن HTML حذف شده بود که تصحیح شد..

    3 تشکر توسط:


  9. Top | #8
    مدیر بازنشته

    تاریخ عضویت
    Aug 2011
    ورژن ویبولتین
    ندارم
    سن
    23
    نوشته ها
    1,934
    مورد پسند
    1,503 بار
    نوشته های وبلاگ
    2
    اطلاعات
    میزان امتیاز
    229

    پیش فرض

    نقل قول نوشته اصلی توسط VBIran نمایش پست ها
    منبع : وی بی ایران
    درود علی آقا من از آموزشی که دادی استفاده کردم خوب بود. ولی اینو چه جور انجام بدیم؟ منبع: وی بی ایران تو یه کادر زرد هست و سبز میشه!! ممنون

    **نکته: وردپرس هست

    کاربر مقابل از Zirmizi بابت این پست مفید تشکر کرده است:


  10. Top | #9
    مدیر بازنشته

    تاریخ عضویت
    May 2011
    ورژن ویبولتین
    4.1.9
    سن
    28
    نوشته ها
    2,927
    مورد پسند
    2,829 بار
    نوشته های وبلاگ
    3
    اطلاعات
    میزان امتیاز
    356

    پیش فرض

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

    css:
    کد HTML:
    .ali {
    background: none repeat scroll 0% 0% rgb(209, 229, 240); 
    border: 10px 10px 10px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px 0pt;
    margin: 0pt 20px;
    -webkit-box-shadow: 0px 0px 5px 3px #CCCCCC !important;
    -moz-box-shadow: 0px 0px 5px 3px #CCCCCC !important;
    box-shadow: 0px 0px 5px 3px #CCCCCC !important; 
    }
    .ali {
        padding:4px 0;
        text-align:right;
    }
     
    
    .ali {
    -webkit-transition: background-color 700ms ease-in;
    -moz-transition: background-color 700ms ease-in;
    transition: background-color 700ms ease-in;
    }
    
    .ali:hover {
    color: #cc0033;
    }
    .ali:hover {
    background-color: #33ff00;
    }




    5 تشکر توسط:


  11. Top | #10
    کاربر سایت

    تاریخ عضویت
    Aug 2011
    ورژن ویبولتین
    الینا گیلبرت
    نوشته ها
    563
    مورد پسند
    185 بار
    اطلاعات
    میزان امتیاز
    65

    پیش فرض

    ممنون . ببخشيد من دوتا سوال داشتم . اول اينكه شما گفتيد كلاس به ويژگي هاي سي اس اس ميگن و طبيعتا اين ويژگي ها اسم هاي خاصي دارن اما چرا شما وقتي ميخوايد يه كلاس تعريف كنيد ب نام دلخواه تعيريف مكيند ؟ مگه نبيد به همون اسم property ها باشه ؟

    سوال دومم اينه كه اول اسم هر كلاس و نوشتن يه كلاس يه نقطه ( .) گذاشتيد . آيا واجبه اين نقطه كه بزاريم ؟
    اگه جایره هایی مثل آیفون4S میخوای یا انواع گوشی ها رو کلیک کن
    به خدا شوخی نیست ...

    باربی موزیک
    ، باربی کیوی موزیک های خارجی و ایرانی روز دنیا !



صفحه 1 از 4 1234 آخرینآخرین

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

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

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

موضوعات مشابه

  1. آموزش طراحی قالب وردپرس به زبان ساده
    توسط Amir Lord در انجمن آموزش های وردپرس
    پاسخ: 17
    آخرين نوشته: 2016/04/13, 11:45 PM
  2. آموزش آپگراید ویبولیتن ورژن 3 به 4 ( اموزش تصویری )
    توسط Reza در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 5
    آخرين نوشته: 2014/11/17, 09:38 PM
  3. آموزش كامل ftp
    توسط Zirmizi در انجمن آموزش ( غیر از ویبولتین )
    پاسخ: 0
    آخرين نوشته: 2011/09/14, 03:07 AM
  4. اموزش هماهنگ کردن رنگ کاربر ها با این هک
    توسط musicbl4st در انجمن پرسش و پاسخ
    پاسخ: 3
    آخرين نوشته: 2011/06/11, 12:39 PM

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

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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