آموزش Css قسمت بیستم – Overriding styles

با سلام خدمت دوستان عزیز

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

این جلسه در مورد نحوه ی Override کردن یک استایل بروی style دیگر ، برای اختصاصی کردن صفحاتی مشخص ضمن استفاده از یک استایل کلی است.

مشاهده ویدیو بصورت آنلاین

دانلود ویدیو

شما میتوانید دیدگاهی بگذارید، یا بازخوردی از سایتتان.

۳۷ دیدگاه برای “آموزش Css قسمت بیستم – Overriding styles”

  1. محمد گفت:

    ……لطفا در مورد ..پوزیشنها و FLOAT و CLEAR هم بگید..با تشکر..

  2. admin گفت:

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

  3. پویا گفت:

    من هم با position مشکل دارم تو مرورگرها خوب در نمیاد ظاهرا
    یا مثلا وقتی position رو absolute قرار میدم همه چیز می ریزه به هم

  4. admin گفت:

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

  5. کیانوش گفت:

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

  6. admin گفت:

    دوست عزیز cpanel یا direct-admin برنامه هایی برای مدیریت هاستینگ هستند که به شما کمک می کنن بهتر بر هاستی که دارید نظارت کنید و برای اون قانون تعریف کنید .

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

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

  7. h@mid گفت:

    با سلام خدمت شما دوست عزیز.واقعا دستتون درد نکنه من ۱۳ ساله هستم.آرزوی من یاد گرفتن این زبانا بود که با حمت وتلاش شما دارم به آرزوم میرسم.لطفا آموزش های بعدی رو سریعتر قرار بدهید. بعدش یک سوال داشتم.زبان بازی سازی چیه.موتورشو دارم اما ۲۰%به برنامه نویسی نیاز داره شما اطلاعی دارید؟با تشکر فراوان

    • admin گفت:

      سلام ، خواهش میکنم ، سن بسیار خوبی داری و اگه الان دنبال برنامه نویسی بری ، بهتون قول میدم جزو موفق ترین و حتی ثروتمندترین برنامه نویس های آینده میشی 😀
      در مورد موتور های بازی و زبان برنامه شون من اطلاعات زیادی ندارم ، ولی معولا بهترین زبان برای بازی سازی رو ++C معرفی کردن.

  8. h@mid گفت:

    سلامی دوباره.واقعا شما مدیریت خوبی رو سایتتون داریید رو هر سایت معروفی که کامنت مزاشتم اصلا جواب نمیدادن.شرمندم که هی سوال میکنم.شما که انقدر زحمت میکشید یه زحمت دیگه هم یکشید.
    در باره ی html , css و php یک مقاله بنویسید که کامل و جامع(ساده)باشه که کسایی مثل من تزه کار بتونن بفهمن.چون تو هر سایت یه چیزی نوشته شده.در ضمن مثلا من یه قالب میخوام بسازم.اگه html بود باید رویه هاست چی نصب کنیم؟
    php nuke برای php هست؟
    برا html چیه؟
    زبان ساخت قالب چیه؟
    بهترین زبان چیه؟
    راستش من یه هاست دارم هر جا که رفتم پول زیادی میگرفتن.واسه همین تصمیم گرفتم خودم یاد بگیرم تا تو آپارات این ویدیو رو دیدم.میخواستم از طریق کلاس یاد بگیرم اما واقعا پول خیلی زیادی میگیرفتن.
    خدا کنه انسان های مثل شما زیاد شه.
    انشاالله خدا عمر طولانی به شما وخانواده محترمتان بدهد.امیدوارم مراحل زدگیتونو یکی یکی طی کنید و به رستگاری برسید
    اگه آموزش کار با فلش رو هم بزارید عالی میشه.(انیمیشن سازی)

  9. admin گفت:

    مرسی دوست عزیز ، زیاد عجله نکنید ، فعلا شما html و css رو یاد بگیرید و در کنارش php رو هم یاد بگیرید.

    در مورد مقالات ، همه ی مقالات یک حرف برای گفتن دارن و مطمین باشید همه یک چیزو به شما بگن ( اگر مقاله های درستی باشن ) فقط ممکنه روش هر کدام ازین مقالات متفاوت از دیگری باشه و هر کدوم از یک نقطه ای شروع کرده باشن.

    php nuke برای برنامه نویسی php نیست ، بلکه یک سیستم مدیریت محتوی ایرانی هستش که چیزی مثل wordpress یا جوملاست و از طریق اون شما می تونید یک سایت بالا بیارید که از طریق اون سیستم محتوی اون وبسایت رو مدیریت کنید یا مثلا پست بدید یا قالب براش بزارید یا غیره…

    در اصل روی هر هاستی که شما میگیرید یک چیزی به اسم Apachi نصب هست ، که آپاچی قابلیت داشتن یک وب-سرور یا همون وبسایت رو روی اون کامپیوتر یا هاست براتون فراهم میکنه که بصورت اتوماتیک نصبه ، فقط کافیه شما فایلتون رو بروی پوشه public_html هاستتون قرار بدید تا وبسایتتون رو بتونید مشاهده کنید ، البته در آینده همه ی اینارو آموزش میدم ، پس اگه موفق نشدید ، نا امید نشید و منتظر باشید تا یاد بگیرید . با تشکر

  10. shayan گفت:

    همونتور که در فیلم ماتون آقای پیمان قادر کوره پز گقتند با ارزش ترین کار تبادل لینک با مست من شما را با عنوان بهترین سایت آموزش برنامه نویسی طراحی وبسایت ir sarzamin لینک کردم خوشحال می شوم که شما هم ما را لینک کنید شما منو با عنوان اس ام اس و جوک و آدرس

    لینک کنید
    تازه فیلماتون هم خیلی متنوع بود
    موفق باشد

    • admin گفت:

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

  11. پویا گفت:

    آقا پیمان یه سوال داشتم
    چطوری میتونم یه کلاسی بسازم که در سطح افقی تمام صفحه من رو بدون این که اسکرول افقی بخوره پوشش بده؟
    وقتی width رو ۱۰۰ درصد قرار میدم همه صفحه رو نمیگیره و یکم خالی میمونه
    ممنون میشم راهنمایی کنین

  12. محمدعلی حاجیان گفت:

    adminعزیزسلام
    من امروزhtmlوcssراتاهمین جاکه درس دادیدبدون این که سئوالی برایم پیش بیادبه خاطرمفهوم بودن آموزشتون یادگرفتم البته هرروزبایددرس های گذشته راتمرین کنم که ملکه ذهنم بشه ومنتظرادامه درس های آینده cssهستم وبه این منظورهرروزسایت ایران سرزمین راسرمی زنم وخیلی زیادازتون ممنون هستم
    درضمن دربالای وبلاگم که درآینده با کمک شمابه سایت تبدیلش می کنم سایت محبوب شمارالینگ کردم
    باتشکر

  13. h@mid گفت:

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

    • admin گفت:

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

  14. h@mid گفت:

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

    • admin گفت:

      بله ، برای ساختن قالب فرم ها از Html و Css استفاده میشه ولی در کل ۱۰۰% به یادگیری پی اچ پی نیاز دارید تا بتونید اطلاعات را از طریق get یا post در دیتابیس ذخیره کنید. برای بقیه موارد هم به زبان پی اچ پی یا زبان های مشابه نیاز دارید.

  15. h@mid گفت:

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

    • admin گفت:

      من آدم تنبلی هستم ، حوصله آپلود دوباره و اینکارارو ندارم ، خودم زیاد کپی میکنم 😀 شما هم مشکلی نیست ، حالا چیرو کپی کردید 😀 ؟

  16. h@mid گفت:

    kole saito:D
    alaan man tarze neveshtanetoonetoono daram.alaan be raahati mitoonam az ghalebetoon estefade konam:D
    admin man mitoonam baraatoon yekari anjam bedam.man baraatoon too fire work hameye inaro misazam.age mikhayd be man begid taa man baraatoon dar arz 2 3 rooz ayande tahviletoon bedam.intory saitetoon copy nemishe

  17. h@mid گفت:

    در ضمن ایمیلتونو میشه بهم بدید؟
    یک سوال.شما بخواید یه سایت برام طراحی کنید چه قدر هزینش میشه؟
    آخه دامین من ۲ ماهه که رو هواست.نمیخوام از قالب های آماده استفاده کنم چون زشتن

    • admin گفت:

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

  18. علی عسگری گفت:

    باسلام.
    می خوایم خصوصیات پاراگراف ها توی صفحه‌ی x ، با بقیه ی صفحات فرق داشته باشه. برای انجام اینکار سه روش هست:

    روش اول) استایل اصلی از نوع داخلی هست
    بجای استفاده از overrinding styles ، فقط خصوصیات پاراگراف ها رو توی استایل اصلی تغییر بدیم. چون هر صفحه استایل خودش رو استفاده می کنه ، وضعیت نمایش پاراگراف ها توی صفحات دیگه تغییر نمی کنه و اینطوری کدهای بهینه تری هم داریم.

    روش دوم) استایل اصلی از نوع خارجی هست
    از استایل اصلی ، فقط خصوصیات پاراگراف هارو تغییر بدیم و توی یه فایل سی اس اس جداگونه ذخیره کنیم. بعد صفحه‌ی x رو فقط به همین فایل سی اس اس جدید لینک بدیم.

    روش سوم) استایل اصلی خارجی یا داخلی هست
    روش اورراید و استفاده از دو استایل پی در پی توی یک صفحه هست.

    توی روش اول و دوم ، می خوایم استایل اضافی رو(همون استایل اورراید) رو حذف کنیم.
    اینجا مزیت استفاده از این تکنیک اورراید(روش سوم) بجای استفاده از استایل مخصوص(روش اول و دوم) برای هر صفحه چیه؟
    اینکه ما توی هر صفحه فقط یه استایل داشته باشیم به بهینه بودن کدنویسی ، بهبود سئو و سرعت وبسایت کمک نمی کنه؟

    امیدوارم تونسته باشم منظورمو درست بگم.
    ممنون از زحماتتون.

    • admin گفت:

      سلام دوست عزیز ، در مورد بهینه سازی و seo باید خدممتون عرض کنم که موتور های جستوجو فقط با کد های html سروکار دار دارن و در نتیجه اصلا نگران نباشید ، حتی اگر از ۵ یا ۱۰ استایل در یک صفحه استفاده کنید ، باز هم تاثیری در بهینه سازی برای موتور های جستوجو نداره.
      چون کدهای html حاوی محتوی و کد های Css حاوی استایل هستند و موتور های جستوجو به محتوی اهمیت میدن.

      مزیت استفاده از اورراید اینه که شما استایل Css اصلی خودتون رو در صفحه load کردید و دیگه نیازی نیست دوباره از اول همه ی استایل تویسی هارو انجام بدید ، فقط یک استایل دیگه رو اوراید میکنید که تغییراتی که لازمه انجام بشه و اتمام.

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

      بیشتر طراحها گاهی حتی از ۳ استایل بصورت اووراید روی همدیگه استفاده میکنند ، پس استفاده از چند استایل در صفحه نشان از آماتور بودن شما نمیده و حتی حرفه ای بودن و منظم بودن شمارو میرسونه.مثلا یک استایل برای ریست کردن استایل ها به نام reset.css و دو فایل استایل دیگر .

  19. علی عسگری گفت:

    در مورد چیزی مثل css reset درست می گید. در این مورد نیاز به اورراید هست.
    اما توی موردی که من گفتم نیازی به نوشتن استایل ها از اول نیست. شما استایل های اصلی رو دارید و فقط اون بخشی رو که نیاز به تغییر داره دوباره می نویسید(دقیقا همین کارو برای اورراید هم انجام میدیم). بعد این فایل سی اس اس اصلی که بخشی از اون رو تغییر دادید با یه نام دیگه ذخیره می کنید. حالا این فایل جدید رو لینک می کنید به صفحه ی اچتمل مورد نظرتون. یعنی دیگه سی اس اس اصلیرو استفاده نمی کنید.
    به نظرتون اینطوری کدها بهینه تر و مرتب تر نیستن؟

    راستی در مورد خاصیت float جایی توضیح دادید؟ من با این خاصیت خیلی مشکل دارم. در عین اینکه تقریبا توی طراحی هر وبسایتی این خاصیت استفاده میشه برای چیدن عناصر کنار هم ، مشکل موقعیت دهی به اونها ایجاد میشه.
    مثلا من میام به سایدبارم خاصیت float راست رو میدم. خب حالا بخش content میاد کنار sidebar. اما مشکلی که ایجاد میشه اینه که هر دوتای اونا می چسبن به سمت راست صفحه و سایدبار دیگه موقعیت نمی گیره. مگه بصورت absolute بهش موقعیت بدیم.
    برای حل این مشکل راه حلی هست؟

    ضمنا من توی قرار دادن عناصر توی وسط صفحه مشکل دارم. چطور می تونم اینکار رو انجام بدم؟ وقتی مارگین رو برابر auto قرار میدم ، اصلا عمل نمی کنه و هیچ تغییری ایجاد نمیشه. چجوری میشه عناصر رو دقیقا وسط قرار داد؟

    ممنون.

    • admin گفت:

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

      در مورد Float هم باید بگم کارش اینه و برای اینکه براتون مشکل ساز نشه شما میتونید خیلی راحت یک Div قبل از Sidebar و مثلا Content اضافه کنید که هر دوتارو در بر بگیره و خیلی راحت اون رو استایل و موقعیت بدید و این استایل و موقعیت خیلی راحت بروی تگ هایی که در داخل اون هم قرار دارند اعمال میشه.

      برای درک بهتر میتونید این مثال رو مشاهده کنید:
      http://irsarzamin.com/css/3column-example.html

      که در آن یک Div به نام main تعریف شده و به اون margin:0 auto و width:800px داده شده که باعث شده عرضش مشخص بشه و در وسط قرار بگیره.
      اگه این مثال رو مطالعه کنید فکر کنم که تا حدی با نحوه ی مواجه شدن با این مشکلات اشنا بشید

  20. ندا گفت:

    یه سوال شخصی دارم ؟؟؟؟؟؟؟؟؟؟داخل این دوره زمونه کسی به کسی خوبی نمیکنه ؟؟؟؟شما چطور وقتتونو ، اطلاعاتتونو در اختیارمون راحت میزارید ؟؟؟؟؟؟؟درصورتی که این وقت تایی که میزاریدو در آموزشگاهی تدریس میکردید هزینه خوبی شاملتون میشد ؟؟؟؟؟؟؟ببخشیدا اما کنجکاوم ؟؟؟؟؟؟؟دوم اینکه از عکستون مشخصه سنتون کمه ؟؟؟؟؟؟چند وقته کار میکنید که به اینجا رسیدید ؟ درست تر بگم دوس دارم رمز موفقیتتونو بدونم ، با کلاس رفتن ، ………….؟؟؟؟ممنونم بازم بابت همه چی مرسی .

    • admin گفت:

      البته شاید سنم خیلی زیاد نباشه ولی ۲۱ سال کمم نیست! :دی
      هفته ای چند ساعت وقت گذاشتن چیزی نیست که خوبی محسوب بشه.
      من از بچگی به کامپیوتر ، برنامه نویسی ، شبکه و … علاقه داشتم.
      کلاس رفتن خیلی خوبه ، مخصوصا وقتی آدم منظم بره و کلاس های مفیدی رو هم انتخاب کنه ، خوشبختانه هیچ وقت از کلاس رفتن پشیمون نشدم.
      اگر در شهری که زندگی میکنید کلاس های طراحی وب و یا هر کلاسی در ضمینه ای که بهش علاقه دارید وجود داره ، دریغ نکنید و برید.

  21. ندا گفت:

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

    • admin گفت:

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

دیدگاهی بگذارید

عضو خوراک مطالب شوید مرا در توییتر دنبال کنید!
به اين صفحه امتياز دهيد

--------------------
به سايت ما امتياز دهيد