تبلیغات
امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
کدهای پرکاربرد سی اس اس
webone


سمت : عضو تازه وارد
1
کدهای پرکاربرد سی اس اس
1. پوزیشن ABSOLUTE
اگر میخواهید محل قرار گرفتن یک عنصر را در صفحه دقیقاً تغیین کنید و تحت کنترل داشته باشید میتوانید از پوزیشن absolute استفاده کنید. اگر مرورگرتان را به عنوان یک جعبه در نظر بگیرید، با پوزیشن absolute دقیقاً میتوانید مشخص کنید که عنصر مورد نظرتان در کجای جعبه قرار بگیرد. از ویژگی های top، right، bottom و left به همراه پیکسل استفاده کنید تا مکان قرارگیری آبجکت را مشخص نمایید.
[عکس: css-trick-1.png]
کد CSS بالا، عنصر مورد نظر را به فاصله 20 پیکسل از بالا و راست صفحه مرورگر قرار میدهد. از پوزیشن absolute در داخل div ها هم میتوانید استفاده کنید.
2. کاراکتر * به همراه یک SELECTOR
قرار دادن کاراکتر * در کنار یک selector ، تمامی عناصر آن selector را انتخاب میکند. برای مثال، اگر اگر کاراکتر ستاره را در کنار تگ p قرار دهید به این شکل *p و به آن مقداری CSS دهید، این CSS ها به تمام تگ های p اعمال خواهند شد.
3. کاربرد !IMPORTANT
این دستور باید به میزان کم و با دقت استفاده شود زیرا استفاده بیش از حد آن باعث بروز مشکلاتی در طولانی مدت میشود. اگر میخواهید style ای را به عنصری که خودش در حال حاضر دارای style هست اختصاص دهید و اصطلاحاً آن style را تحمیل کنید میتوانید از !important استفاده کنید. برای مثال، اگر میخواهید تگ های H2 در بخش خاصی از سایتتان به جای آبی به رنگ قرمز باشند، CSS مورد نظر را باید به شکل زیر به آن اعمل کنید:
[عکس: css-tricks-2.jpg]
4. CENTER کردن عناصر
Center کردن عناصر نیاز به دقت دارد زیرا بسته به نوع عنصر طریقه center کردن آن هم متفاوت است.
متن
عنصر متنی به وسیله text-align:center ، وسط نویس میشود. اگر میخواهید راست نویس یا چپ نویس شود، به جای کلمه center ، right یا left را قرار دهید.
عناصر دیگر
یک div یا هر عنصر دیگری با اضافه کردن خصوصیت block و auto کردن margin ، center میشود :
[عکس: css-tricks-3.jpg]
منظور از “anything under 100%” یعنی هر چیزی که زیر 100% بود را center کند چون اگر پهنای عنصری 100% باشد کل پهنای صفحه یا div را میگیرد و نیازی به center شدن ندارد.
5. ALIGNMENTعمودی
این کار را حتما در CSS یک منو استفاده خواهید کرد، شک نکنید. به این وسیله متن را در راستای عمودی تنظیم کرده و در وسط قرار میدهید. تنها کافیست مقادیر height و line-height را یکسان قرار دهید:
[عکس: css-tricks-4.jpg]
6. افکت های HOVER
این افکت ها در سایت برای دکمه ها، لینک ها، آیکون ها و ... استفاده میشوند. با اضافه کردن :hover به یک selector میتوانید تعیین کنید که با آمدن موس روی آن عنصر برخی style هایش تغییر کند:
[عکس: css-trick-5.jpg]
کد CSS بالا، زمانی که موس کاربر روی تگ h2 قرار میگیرد رنگ ان را از مشکی به قرمز تغییر میدهد. :hover فقط مواردی را که مشخص میکنید تعریف میکند و تأثیری بر روی استایل های دیگری که قبلاً برای آن تعریف کرده اید ندارد.
افکت TRANSITION
اگر میخواهید در زمان hover افکت تغییر رنگ به سرعت اتفاق نیفتد میتوانید از خصوصیت transition استفاده کنید. در این حالت تغییر به صورت تدریجی و در یک مدت زمان مشخص اتفاق می افتد:
[عکس: css-trick-6.jpg]
خصوصیت transition در کد بالا باعث میشود تغییر رنگ از مشکی به قرمز به تدریج و در طول 0.3 ثانیه انجام شود.

8. تغییر سایز تصاویر
اگر میخواهید تصویر شما با تغییرات اندازه صفحه هماهنگ باشد و مقیاس پذیر باشد، راهش این است که مقدار خصوصیت max-width را 100% قرار دهید تا با تغییر سایز صفحه عکس هم با آن اندازه شود و ماکسیمم اندازه آن 100% باشد که در بدترین حالت هم از صفحه بیرون نمی زند و پهنای آن هم اندازه پهنای صفحه میشود:
[عکس: css-trick-8.jpg]
بر اساس کد بالا بیشترین پهنای تصویر میتواند 100% باشد و ارتفاع به صورت اتوماتیک هماهنگ با پهنا تغییر میکند.

9. فرزند مستقیم
آشنایی با این مفهوم کمک زیادی در صرفه جویی در زمان میکند. از کاراکتر > برای انتخاب فرزند مستقیم یک عنصر استفاده کنید :
[عکس: css-trick-10.jpg]
کد بالا تمامی لینک هایی که مستقیماً داخل شناسه فوتر هستند را انتخاب میکند(یعنی اگر داخل فوتریک div باشد، دیگر لینک های داخل آن div انتخاب نمی شوند).

10. BOX-SIZING: BORDER-BOX;
این خصوصیت در CSS یک خصوصیت محبوب بین طراحان وب میباشد زیرا مشکلات مربوط به padding و ساختار را حل میکند. وقتی به عنصری padding اضافه میکنید به میزان آن padding به پهنای آن عنصر اضافه میشود برای جلوگیری از این مسئله میتوان از box-sizing:border-box; استفاده کرد.

11. :BEFORE
به کمک این selector میتوانید یک عنصر را انتخاب کرده و قبل آن محتوا قرار دهید. فرض کنید در وب سایتتان میخواهید قبل از هر تگ h2 یک متن مشخص قرار دهید:
[عکس: css-trick-15.jpg]
این selector بسیار کارآمد میباشد به خصوص برای فونت آیکون ها به این ترتیب میتوانید آیکون ها را قبل از عناصر مشخص قرار دهید.

12. :AFTER
این selector هم محتوا را به بعد از یک عنصر مشخص اضافه میکند. در این مثال بعد از هر پاراگراف عبارت Read more… اضافه میشود.


13. CONTENT
همانطور که در مثال های بالا میبینید، content خصوصیتی است که عنصری را جایگذاری میکند. بیشترین کاربرد این خصوصیت برای قرار دادن فونت آیکون ها در یک مکان مشخص میباشد. در صورت قرار دادن متن در content باید ان را داخل " " بگذارید.
14. CSS RESET
در واقع CSS reset به معنی تنظیم یک سری خصوصیت های استاندارد برای نمایش دادن درست سایت در مرورگرهای مختلف میباشد.
15. سبک دادن یه لینک های تماس
اگر لینکی دارید که با کلیک بر روی آن تماس حاصل میشود، ممکن است در استایل دادن به آن با روش های معمول دچار مشکل شوید. میتوانید از CSS زیر برای این کار استفاده کنید:
[عکس: css-trick-19.jpg]

منبع : دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید.

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


سمت : عضو تازه وارد
2
RE: کدهای پرکاربرد سی اس اس
(07-19-2017، 05:41 PM)webone نوشته: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید.1. پوزیشن ABSOLUTE
اگر میخواهید محل قرار گرفتن یک عنصر را در صفحه دقیقاً تغیین کنید و تحت کنترل داشته باشید میتوانید از پوزیشن absolute استفاده کنید. اگر مرورگرتان را به عنوان یک جعبه در نظر بگیرید، با پوزیشن absolute دقیقاً میتوانید مشخص کنید که عنصر مورد نظرتان در کجای جعبه قرار بگیرد. از ویژگی های top، right، bottom و left به همراه پیکسل استفاده کنید تا مکان قرارگیری آبجکت را مشخص نمایید.
[عکس: css-trick-1.png]
کد CSS بالا، عنصر مورد نظر را به فاصله 20 پیکسل از بالا و راست صفحه مرورگر قرار میدهد. از پوزیشن absolute در داخل div ها هم میتوانید استفاده کنید.
2. کاراکتر * به همراه یک SELECTOR
قرار دادن کاراکتر * در کنار یک selector ، تمامی عناصر آن selector را انتخاب میکند. برای مثال، اگر اگر کاراکتر ستاره را در کنار تگ p قرار دهید به این شکل *p و به آن مقداری CSS دهید، این CSS ها به تمام تگ های p اعمال خواهند شد.
3. کاربرد !IMPORTANT
این دستور باید به میزان کم و با دقت استفاده شود زیرا استفاده بیش از حد آن باعث بروز مشکلاتی در طولانی مدت میشود. اگر میخواهید style ای را به عنصری که خودش در حال حاضر دارای style هست اختصاص دهید و اصطلاحاً آن style را تحمیل کنید میتوانید از !important استفاده کنید. برای مثال، اگر میخواهید تگ های H2 در بخش خاصی از سایتتان به جای آبی به رنگ قرمز باشند، CSS مورد نظر را باید به شکل زیر به آن اعمل کنید:
[عکس: css-tricks-2.jpg]
4. CENTER کردن عناصر
Center کردن عناصر نیاز به دقت دارد زیرا بسته به نوع عنصر طریقه center کردن آن هم متفاوت است.
متن
عنصر متنی به وسیله text-align:center ، وسط نویس میشود. اگر میخواهید راست نویس یا چپ نویس شود، به جای کلمه center ، right یا left را قرار دهید.
عناصر دیگر
یک div یا هر عنصر دیگری با اضافه کردن خصوصیت block و auto کردن margin ، center میشود :
[عکس: css-tricks-3.jpg]
منظور از “anything under 100%” یعنی هر چیزی که زیر 100% بود را center کند چون اگر پهنای عنصری 100% باشد کل پهنای صفحه یا div را میگیرد و نیازی به center شدن ندارد.
5. ALIGNMENTعمودی
این کار را حتما در CSS یک منو استفاده خواهید کرد، شک نکنید. به این وسیله متن را در راستای عمودی تنظیم کرده و در وسط قرار میدهید. تنها کافیست مقادیر height و line-height را یکسان قرار دهید:
[عکس: css-tricks-4.jpg]
6. افکت های HOVER
این افکت ها در سایت برای دکمه ها، لینک ها، آیکون ها و ... استفاده میشوند. با اضافه کردن :hover به یک selector میتوانید تعیین کنید که با آمدن موس روی آن عنصر برخی style هایش تغییر کند:
[عکس: css-trick-5.jpg]
کد CSS بالا، زمانی که موس کاربر روی تگ h2 قرار میگیرد رنگ ان را از مشکی به قرمز تغییر میدهد. :hover فقط مواردی را که مشخص میکنید تعریف میکند و تأثیری بر روی استایل های دیگری که قبلاً برای آن تعریف کرده اید ندارد.
افکت TRANSITION
اگر میخواهید در زمان hover افکت تغییر رنگ به سرعت اتفاق نیفتد میتوانید از خصوصیت transition استفاده کنید. در این حالت تغییر به صورت تدریجی و در یک مدت زمان مشخص اتفاق می افتد:
[عکس: css-trick-6.jpg]
خصوصیت transition در کد بالا باعث میشود تغییر رنگ از مشکی به قرمز به تدریج و در طول 0.3 ثانیه انجام شود.

8. تغییر سایز تصاویر
اگر میخواهید تصویر شما با تغییرات اندازه صفحه هماهنگ باشد و مقیاس پذیر باشد، راهش این است که مقدار خصوصیت max-width را 100% قرار دهید تا با تغییر سایز صفحه عکس هم با آن اندازه شود و ماکسیمم اندازه آن 100% باشد که در بدترین حالت هم از صفحه بیرون نمی زند و پهنای آن هم اندازه پهنای صفحه میشود:
[عکس: css-trick-8.jpg]
بر اساس کد بالا بیشترین پهنای تصویر میتواند 100% باشد و ارتفاع به صورت اتوماتیک هماهنگ با پهنا تغییر میکند.

9. فرزند مستقیم
آشنایی با این مفهوم کمک زیادی در صرفه جویی در زمان میکند. از کاراکتر > برای انتخاب فرزند مستقیم یک عنصر استفاده کنید :
[عکس: css-trick-10.jpg]
کد بالا تمامی لینک هایی که مستقیماً داخل شناسه فوتر هستند را انتخاب میکند(یعنی اگر داخل فوتریک div باشد، دیگر لینک های داخل آن div انتخاب نمی شوند).

10. BOX-SIZING: BORDER-BOX;
این خصوصیت در CSS یک خصوصیت محبوب بین طراحان وب میباشد زیرا مشکلات مربوط به padding و ساختار را حل میکند. وقتی به عنصری padding اضافه میکنید به میزان آن padding به پهنای آن عنصر اضافه میشود برای جلوگیری از این مسئله میتوان از box-sizing:border-box; استفاده کرد.

11. :BEFORE
به کمک این selector میتوانید یک عنصر را انتخاب کرده و قبل آن محتوا قرار دهید. فرض کنید در وب سایتتان میخواهید قبل از هر تگ h2 یک متن مشخص قرار دهید:
[عکس: css-trick-15.jpg]
این selector بسیار کارآمد میباشد به خصوص برای فونت آیکون ها به این ترتیب میتوانید آیکون ها را قبل از عناصر مشخص قرار دهید.

12. :AFTER
این selector هم محتوا را به بعد از یک عنصر مشخص اضافه میکند. در این مثال بعد از هر پاراگراف عبارت Read more… اضافه میشود.


13. CONTENT
همانطور که در مثال های بالا میبینید، content خصوصیتی است که عنصری را جایگذاری میکند. بیشترین کاربرد این خصوصیت برای قرار دادن فونت آیکون ها در یک مکان مشخص میباشد. در صورت قرار دادن متن در content باید ان را داخل " " بگذارید.
14. CSS RESET
در واقع CSS reset به معنی تنظیم یک سری خصوصیت های استاندارد برای نمایش دادن درست سایت در مرورگرهای مختلف میباشد.
15. سبک دادن یه لینک های تماس
اگر لینکی دارید که با کلیک بر روی آن تماس حاصل میشود، ممکن است در استایل دادن به آن با روش های معمول دچار مشکل شوید. میتوانید از CSS زیر برای این کار استفاده کنید:
[عکس: css-trick-19.jpg]

منبع : ترفندهای ضروری css


ممنون

کاربران در حال بازدید این موضوع:

1 مهمان
پرش به انجمن:
آخرین ارسال ها
برترین ارسال کنندگان
sitecup1 102
sitecup 99
avestakarami 96
ehsannasr 67
eh3an2018 32
salam 30
minaf 27
جدیدترین کاربران
ghalishoieabedini 12-04
nargeskamali 11-25
moblekma 11-25
bahareafshar 11-03
ghalishoienovin 10-31
asreasia 10-17
tebway 10-15
بیشترین بازدیدها
درباره مراحل ابتدا... 13556
قوانین و اساسنامه ... 7758
دانلود نرم افزار ه... 6797
درباره ما 6709
چگونه یک نام دامین... 6601
ساخت و طراحی وب سا... 5679
ایجاد صفحه php دلخ... 5152
بیشترین پاسخ ها
گوگل چه نوع لینک ه... 9
درباره مراحل ابتدا... 6
چگونه یک نام دامین... 2
راه های تبدیل مشتر... 2
کدهای پرکاربرد سی ... 1
آموزش گام به گام ط... 1
هاست سرعت بالا و ب... 1
آخرین ارسال ها
موضوع تاریخ، ساعت  نویسنده آخرین ارسال کننده انجمن
  خرید کاغذ دیواری ، سیپ ترانک و قالی... 12-07, 18:47 moblekma moblekma آموزش های عمومی
  قیمت هاست ایرانی 11-25, 14:13 nargeskamali nargeskamali آموزش های عمومی
  اجاره آپارتمان مبله در تهران 11-25, 12:45 moblekma moblekma تالار گفتگو
  استخدام گرافیست در اصفهان 10-17, 21:31 asreasia asreasia چت و گفتگو
  استخدام طراح سایت در اصفهان 10-17, 21:28 asreasia asreasia چت و گفتگو
  کدهای پرکاربرد سی اس اس 10-15, 17:08 webone tebway CSS
  درباره مراحل ابتدایی طراحی سایت چه ... 10-13, 13:43 atlasweb happyland آموزش های عمومی
  چطور از حراجی کسب درآمد کنم؟ 10-06, 10:50 kafeniaz kafeniaz حراجی آنلاین
  Script  آشنایی با پروسه ی طراحی سایت 09-15, 14:06 lemon lemon آموزش های عمومی
  نحوه استفاده از ابزارک ها 07-16, 10:47 eh3an2018 eh3an2018 MyBB
  گوگل چه نوع لینک هایی را دوست ندارد... 07-02, 16:48 sitecup1 rashadoor98 Html
  نحوه اجاره کوتاه مدت سوئیت مبله در ... 06-30, 07:44 seoface3 seoface3 MyBB
  خرید بازدید واقعی گوگل و دریافت ورو... 06-10, 15:23 seoface3 seoface3 MyBB
  صفحه ارایی چیست 06-06, 18:57 afrag1371 afrag1371 آموزش های عمومی
  طراحی کاتالوگ و چاپ بنر 06-06, 18:50 hora27 hora27 بنر ، لوگو ، هدر

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