آموزش Css به زبان خودموني

شروع موضوع توسط amirlol ‏27 سپتامبر 2006 در انجمن زبان HTML

  1. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    سلام رفقا :
    از امروز سعي مي كنم آموزش كلي CSS و سيستم مبتني بر DIV يا همون table less رو براتون بنويسم و بزارم
    سعي مي كنم ساده و روان بنويسم و بدون ابهام ولي از شما خواهش مي كنم سوالاتتونو در قسمت هاي ديگه بژرسيد و فقط بزاريد اين تاپيك به آموزش بژردازه
    قدم به قدم باهم ميريم جلو و سعي مي كنيم كه تو اين دوره چيزهايي رو يادبگيريم و ياد بديم كه براي آينده امان مفيد باشد


    Css مخفف كلمات Cascading Style Sheets مي باشد و در حال حاضر در 2 ور‍ژن css1 و css2 موجود مي باشد كه css2 همان css1 است با همان طرز نوشتن و همان كارايي ولي سيستم مديايي و هوشمنديش بيشتر و امكانات جذاب تر!! و ازجمله كاررايي هاي css 2 در فايل هاي xml است
    در كل ميشه به اين رسيد كه css براي صفحه بندي و زيبايي سايت بسيار كارامد است


    كلمات اختصارري اي كه از اين به بعد با آنها سر و كار داريم از موارد زير مي باشد.
    IE همان اينترنت اكسپلورر خودمان است
    F به معني فايرفاكس
    N به معني نت اسكيپ
    O به معني اپرا
    Saf به معني سافاري

    مي باشد كه معمولآ براي اينكه بگوييم دستورات در كدام برازر ها و ورژن هاي آن به خوبي كار مي كند استفاده مي شود و w3c هم معرف اينكه اين css ورژن يك است يا دو
    براي مثال :
    دستور background :
    دستوريست براي استفاده بك گراند در سيستم كه دستور هاي زير را پشتيباني مي كند
    ..............
    ..........
    ......
    ..

    W3C = 1
    IE = 4
    F = 1
    N = 6
    O = 3
    Sof = 1
    معني اين ها :
    ورژن css ما 1 است
    اينترنت اكسپلورر 4 به بالا از اين دستور استفاده مي كنه !
    فايرفاكس ورژن 1 به بعد
    نت اسكيپ 6 به بعد
    اپرا 3 به بعد
    سافاري 1 به بعد


    اين بود مقدمه بر css
    در طول درس سعي مي كنم همه رو با نونه كد ها و مثال هاي متنوع بزارم و يعضي ها رو هم در فايل هاي پيوست ولي اگز باز سوالي پيش آمد در قسمت سوالات قرار دهيد تا بررسي كنم و جواب آن را به شما و بقيه دوستان بدهم
     
    نوشته شده توسط amirlol در ‏27 سپتامبر 2006
    omidjasad، Ash.Angel، TINA 061 و 12 نفر دیگر از این ارسال تشکر کرده اند.
  2. mhofayyaz

    mhofayyaz Member

    ارسال‌ها:
    207
    تشکر شده:
    31
    امتیاز دستاورد:
    16
    خيلي عالي بود . اميدوارم كه همين طور ادامه بدهيد
     
    نوشته شده توسط mhofayyaz در ‏28 سپتامبر 2006
    Ash.Angel، khak313 و tajerman از این ارسال تشکر کرده اند.
  3. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    قسمت دوم

    قسمت دوم روش ها و ...
    ببینید ما برای درج کد های CSS از 3 روش استفاده می کنیم که آنها را در زیر می بینیم و مورد بررسی قرار می دهیم
    روش اول روش فایل css :
    که ما فایلی با پسوند css درت کرد کد ها را در آنها قرار می دهیم و با فرمان زیر کد هارا باز خونی می کنیم
    کد (Text):

    <LINK ID="StyleSheet" REL="StyleSheet" TYPE="text/css" href="style.css"></LINK>
     
    ببینید در این مدل که از نظر من میشه گفت بهتریم مدل است اینه ک ما با تغییر کامل فایل css کل طراحی صفحه را تغییر می دیم که این خودش بهترین روش برای تملیت بندیه

    روش دوم روش درج کد در بالای صفحه
    کد (Text):

    <STYLE>
    ... { ..........  }
    </STYLE>
     
    در این روش کد در بالای صفحه و در تک style قرار می گیرد

    روش سوم روش استفاده در تک منحصری : روش تگ به تگ
    کد (Text):

    <p style="……..">
     
    در این روش کد فقط و فقط برای این قسمت قابل اجراست و بس

    در روش های اول و دوم کد ها در بین تو براکت تعیریف می شوند (براکت باز و بسته "{}" )
    برای یک نواختی در کد های html کافیست اسم تگ را بدون علامت کوچکتر و بزرگتز قرار می دهیم و از آن به بعد آن تگ آن خواصیت را دارا می شود


    کد (Text):

    <STYLE>
    P { FONT: normal }
    </STYLE>
     
    خوب در اینجا هر بار که از تگ <p> استفاده میشه خواسیت موجود برایش اعمال می شود
    خوب ما برای هر تک یک ID و یک CLASS داریم
    اگر کلاسی را بخواهیم معرفی کنیم یک نقطه و بعد اسم کلاس را می نویسیم
    کد (Text):

    <p class="test">
    <STYLE>
    .test { FONT: normal }
    </STYLE>
     
    و برای استفاده از تگ ID اول یک علامت نامبر (#) و بعد اسم متغییر
    کد (Text):

    <p ID="test">
    <STYLE>
    #test { FONT: normal }
    </STYLE>
     
    مس توانیم از چندین کلاس مختلف نیز استفاده کنیم که بصورت زیر عمل میشه
    کد (Text):

    <p class="test test1 test2">
     
    اسم هر کلاس یک فاصله اسم کلاس بعد

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

    <STYLE>
    .test { FONT: normal } DIV.cen
    </STYLE>
     
    کد (Text):

    <div class="cen">
    <p class="test">
    testing
    </p>
    </div>


    <p class="test">
    testing
    </p>
     
    در این جا فقط زمانی خاصیت class test اعمال می شود که در تک DIV و کلاسی در آن تگ به نام cen داشته باشیم
    پس در کد اول اجرا و در کد دوم غیر قابل اجراسیت


    پایان قسمت دوم
     
    نوشته شده توسط amirlol در ‏29 سپتامبر 2006
    Ash.Angel، baviran، khak313 و 6 نفر دیگر از این ارسال تشکر کرده اند.
  4. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    منتظر باقیش هستیم ها ...
     
    نوشته شده توسط NabiKAZ در ‏20 اکتبر 2006
    khak313 از این پست تشکر کرده است.
  5. agri

    agri Member

    ارسال‌ها:
    185
    تشکر شده:
    11
    امتیاز دستاورد:
    16
    خیلی عالیه. امیدوارم سریعتر ادامشو هم بذارین.
     
    نوشته شده توسط agri در ‏21 اکتبر 2006
    khak313 از این پست تشکر کرده است.
  6. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    amirlol دوست عزیز
    زمانی که شما می خواهید Style sheet خارجی رو به یک صفحه لینک کنید، در تگ link ، استفاده از خصیصه media اجباری است. به ایم مثال توجه کنید:
    HTML:
     <link rel="stylesheet" type="text/css" href="root.css" media="all">  
    ظبق قوانین W3C ، استفاده از خصیصه media در تگ link اجباری بوده، اما خصیصه id را در تگ link برای اولین بار است که می بینم !!!!

    در روش دوم که شما نوضیح دادین، طبق قوانین W3C نوشتن خصیصه type در تگ CSS اجباری است:
    HTML:
      <style type="text/css">  <!--      --> </style>  
    استفاده از <-- --!> توصیه می شود زیرا، کد های CSS شما را از دید مرورگر هایی که CSS ساپرت نمی کنند مخفی نگه میدارد و از نشان دادن آن بر روی صفحه مرورگر جلو گیری می کند.



    روش دیگری جهت اعمال style sheet خارجی به صفحه وجود دارد، روشی که برای جلوگیری از خطا های برنامه مرورگر (خصوصا Netscape 4) بکار میرود. این قانون باید پیش از هر قانون دیگری نوشته شود:
    HTML:
     <style type="text/css"> <!--  @import url('root.css');   -->   </style>  

    دوست عزیز amirlol
    از توجه شما جهت ارتقا سطح علمی دوستان سپاسگزارم.
    لطفا از ارایه توضیحات ناقص و عدم توجه به استاندارد ها ، جدا خود داری فرمایید.
    موفق باشید.
     
    نوشته شده توسط echessdesign در ‏21 اکتبر 2006
    Ash.Angel، TINA 061، khak313 و 2 نفر دیگر از این ارسال تشکر کرده اند.
  7. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    دوست من خیلی ممنون از توجهت اما کمی هم حق بده که این مسایل که خیلی ابتدایی هست بعضی اوقات آدم یادش میره
     
    نوشته شده توسط amirlol در ‏23 اکتبر 2006
    khak313 از این پست تشکر کرده است.
  8. logical_82

    logical_82 Member

    ارسال‌ها:
    875
    تشکر شده:
    296
    امتیاز دستاورد:
    16
    بازم یکی اومد یه چیز یاد بده توپیدید بهش [​IMG]
    همین می شه که دیگه ادامه نمی ده دیگه !!!
     
    نوشته شده توسط logical_82 در ‏1 ژانویه 2007
  9. echessdesign

    echessdesign مدیر انجمن طراحی وب

    ارسال‌ها:
    4,375
    تشکر شده:
    3,833
    امتیاز دستاورد:
    113
    دوست عزیز
    همه ما از آموزش مفید استقبال می کنیم ، اما نباید فراموش کنیم که آموزش در صورتی که اشتباه باشد، چیزی جز بر داشت اشتباه برای دانش آموز ، زیر سوال رفتن سطح علمی آموزش دهنده و Forum مربوطه در بر نخواهد داشت.
    کیفیت رو همیشه به کمیت ترجیح بدید.
     
    نوشته شده توسط echessdesign در ‏2 ژانویه 2007
    khak313 از این پست تشکر کرده است.
  10. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    خوب باز دیک کردم اونم خیلی زیاد


    سعی می کنم تا فردا قسمت 3وم را بزارم
     
    نوشته شده توسط amirlol در ‏20 آوریل 2007
    khak313، mhofayyaz و echessdesign از این ارسال تشکر کرده اند.
  11. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    خوب درس امروز که میشه جلسه سوم آموزش با کمی دیرکرد که ببخشید
    امروز یک راست می ریم سر مباحث اصلی
    ببینید برای تگ های لینک دار که در کد های HTML بهش می گن A tag و در نوشتار بصورت <a href="">link</a> نوشته میشود
    خوب برای ویرایش و استایل بندی بصورت زیر استفاده کی مکنیم
    HTML:

    A:link    { color: red }
    A:active  { color: blue; font-size: 125% }
    A:visited { color: green; font-size: 85% }
     { A:hover { color: pink; TEXT-DECORATION: none
     
    خوب حالا این دستور برای همه تگ های لینکی بکار میره ! و اگر بخواهیم فقط در جایی خاص باشد از همون روشی که گفتم استفاده می کنیم
    حالا تحلیل بر کد
    فرمان a:link زمانی هست که هیچ اتفاقی برای لینک نیوفتاده باشد
    نه موس رویش رفته و نه رویش کلیک شده باشه
    خوب دستور COLOR رنگ فونت رو مشخص می کنه و دستور font-size اندازه فونت رو تغیر می ده که به 2 صورت است یا درصدی که در مثال بالا نوشته شده و یا بصورت پیکسلی که کافیست عدد + کاراکتر px استفاده شود .
    کد (Text):

    .exam {font-size : 12px}
     
    توجه داشته باشد زمانی که چند خصیصه برای کلاسی در نظر گرفته می شود از کاراکتر سمیکالون یا همون نقطه ویلگول ";" استفاده می شود.
    فرمان A:active زمانی هست کاربر با موس روی لینک کلیک کند .
    فرمان a:visited زمانی هست که حتی یک بار آن لینک توسط کاربر دیده شده باشد
    فرمان a:hover زمانی هست که کاربر با موس روی آن لینک برود . نیازی به کلیک با موس رویش نیست.
    HTML:

    TEXT-DECORATION: none
     
    این دستور بصورتی است که حالت فوند را نمایش می دهد در 4 صورت می باشد . که در زیر نمایش داده می شود



    line-through بصورت خطی بر درون متن
    none بصورت ساده بدون خط
    overline بصورت خطی در بالای متن است
    Underline بصورت خط زیر دار می باشد


    می باشد .
    ---------------------------------------------------


    خوب حالا می ریم یه قسمت دیگه که شاید خیلی مهم باشد .
    HTML:

    BODY { background: url(bar.gif) white; background-repeat: repeat-x }
     
    خوب این دستور همونطور که می بینید دستور body خودمونه خیلی کارا باهاش می شه کرد .
    درستور اول که دستور background است با دستور جانبی url آدرس فیزیکالی و پروی یک عکس رو میگیره و در مرحله بعدش یک پشن زمینه سفید می زاره که تا عکس لود بشه و یا اگه لود نشه استفاده بشه
    دستور بعد دستور background-repeat است که یا repeat-x یا repeat-y و یا repeat و یا no-repeat است
    که بترتیب از چپ به راست - بالا به پایین - از هر جهت – بدون تکرار می باشد
    ** در خود دستور background دستوری هست به نام fixed که بعد هر کدوم از متود می تونیم بزاریمش
    این باعث میشه عکسمون ثابت بمونه و نوشته ها روی قلط بخوره



    و این بود آموزش شماره 3
     
    آخرین بار توسط مدیر ویرایش شد: ‏17 اکتبر 2007
    نوشته شده توسط amirlol در ‏22 آوریل 2007
    hosseintdk775، amirabbas_p30magazine، MDP و یک نفر دیگر از این ارسال تشکر کرده اند.
  12. ULFSoft

    ULFSoft Member

    ارسال‌ها:
    86
    تشکر شده:
    7
    امتیاز دستاورد:
    6
    سلام
    مي‌خواستم بگم اگه ممكنه آموزش‌ رو ادامه بدين.
     
    نوشته شده توسط ULFSoft در ‏9 سپتامبر 2007
  13. hamid_isf_1360

    hamid_isf_1360 New Member

    ارسال‌ها:
    4
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    واقعا عالی بود ادامه بدید لطفا
     
    نوشته شده توسط hamid_isf_1360 در ‏7 اکتبر 2007
  14. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    بک گراند رو از چپ میشه اینجوری فاصله داد:
    HTML:

    background: url("error.png") no-repeat 10px center;
     
    از راست چطوری میشه؟
     
    نوشته شده توسط NabiKAZ در ‏11 اکتبر 2007
  15. amirlol

    amirlol Well-Known Member

    ارسال‌ها:
    1,859
    تشکر شده:
    298
    امتیاز دستاورد:
    83
    سعی می کنم قست چهارم رو فردا بزارم ! ببخشید یادم رفته بود ! اینجا آموزشی رو شروع کردم
     
    نوشته شده توسط amirlol در ‏16 اکتبر 2007
  16. Mohammadreza

    Mohammadreza Well-Known Member

    ارسال‌ها:
    1,206
    تشکر شده:
    634
    امتیاز دستاورد:
    113
    امير جان خسته نباشيد
    وجودتون باعث افتخاره !
    ممنون مي شم اگه چند تا ترفند توپس هم ياد بدين براي مثال : ( مثل ساخت منوي افقي(هدر) با استفاده از ليستها )
     
    نوشته شده توسط Mohammadreza در ‏20 اکتبر 2007
  17. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    به نظر شما این ستم نیست که در مرورگر IE6، خاصیتهای padding ، border و... روی برچسبهای select و option عمل نمیکنه ؟!
    حتی جالبه که در Opera هم کار نمیکنه و تا جایی که من تست کردم تنها در FireFox کار میکند.
    هکی وجود نداره ؟
     
    نوشته شده توسط NabiKAZ در ‏21 اکتبر 2007
    echessdesign از این پست تشکر کرده است.
  18. Mohammadreza

    Mohammadreza Well-Known Member

    ارسال‌ها:
    1,206
    تشکر شده:
    634
    امتیاز دستاورد:
    113
    و اينكه خصوصيت hover براي Ie اصلا كار نمي كنه ( به غير از لينكها )
    البته با HTC مي شه IE6 رو يه كاريش كرد IE7 كه اصلا با همونم نميشه .
     
    نوشته شده توسط Mohammadreza در ‏24 اکتبر 2007
  19. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    مطمئنی؟!
    با توجه به اینکه ie7 جهش بزرگی به سمت استانداردها برداشته ، خیلی بعیده این مورد ساده رو تصحیح نکرده باشه...
    الان ie7 در دسترس نیست که تست کنم.
    ولی به قول یکی از developer های microsoft در اینجــا
    :
    پس باید کار بکنه !

    از طرفی در اينجا گفته شده:
    پس دوباره امتحان کن !
     
    آخرین ویرایش: ‏26 اکتبر 2007
    نوشته شده توسط NabiKAZ در ‏26 اکتبر 2007
  20. NabiKAZ

    NabiKAZ Well-Known Member

    ارسال‌ها:
    1,184
    تشکر شده:
    430
    امتیاز دستاورد:
    83
    z-index براي selectbox عمل نميکنه ! داشتم در موردش سرچ ميکردم که به اين اعترافيه برخوردم !
    اينم به مشکلات بدون جواب قبلي اضافه ميکنيم !
     
    نوشته شده توسط NabiKAZ در ‏26 اکتبر 2007

به اشتراک بگذارید