این یکی برای مبتدیان مطلق است. هنگامی که یاد گرفتید مدل جعبه چگونه کار می کند و چگونه آن جعبه ها را شناور کنید، وقت آن است که در مورد CSS خود جدی بگیرید. برای این منظور، ما فهرست عظیمی از نکات، ترفندها، تکنیک‌ها و هک‌های کثیف گاه به گاه را گردآوری کرده‌ایم تا به شما در ایجاد طرحی که می‌خواهید کمک کند. CSS می تواند مشکل ساز شود و شما نیز باید این کار را انجام دهید. و اکنون، بدون ترتیب خاصی، (تقریبا) همه چیزهایی که باید بدانید:

1. موقعیت یابی مطلق

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

position:absolute;
top:20px;
right:20px

CSS بالا موقعیت یک عنصر را به گونه ای تنظیم می کند که 20 پیکسل از لبه های بالا و سمت راست مرورگر شما باقی بماند. شما همچنین می توانید از موقعیت مطلق در داخل یک div استفاده کنید.

2. * + انتخابگر

این * شما را قادر می سازد تا تمام عناصر یک انتخابگر خاص را انتخاب کنید. مثلا اگر استفاده کردید *پ و سپس استایل های CSS را به آن اضافه کرد، این کار را با تمام عناصر سند شما با a انجام می دهد

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

3. نادیده گرفتن همه سبک ها

از این باید به مقدار کم استفاده کنید، زیرا اگر این کار را برای همه چیز انجام دهید، در دراز مدت با مشکل مواجه خواهید شد. با این حال، اگر می خواهید سبک CSS دیگری را برای یک عنصر خاص لغو کنید، از آن استفاده کنید !مهم بعد از سبک در css شما. به عنوان مثال، اگر من می خواستم سرفصل های H2 در قسمت خاصی از سایت من به جای آبی قرمز باشد، از CSS زیر استفاده می کنم:

.section h2 { color:red !important; }

4. مرکز دادن

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

متن

متن با استفاده از text-align:center;. اگر می‌خواهید در هر دو طرف باشد، به جای وسط از چپ یا راست استفاده کنید.

محتوا

آ بخش (یا هر عنصر دیگری) را می توان با افزودن ویژگی block به آن و سپس استفاده از حاشیه های خودکار در مرکز قرار داد. CSS به شکل زیر خواهد بود:

#div1 {
 display: block;
 margin: auto;
 width: anything under 100% 
}

دلیل اینکه من “هر چیزی را زیر 100٪” برای عرض قرار دادم این است که اگر 100٪ عرض بود، اگر تمام عرض بود و نیازی به مرکز کردن نداشت. بهتر است یک عرض ثابت مانند 60٪ یا 550 پیکسل و غیره داشته باشید.

5. تراز عمودی (برای یک خط متن)

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

.nav li{
 line-height:50px;
 height:50px;
}

6. جلوه های شناور

این برای دکمه ها، لینک های متنی، بخش های باک سایت شما، نمادها و موارد دیگر استفاده می شود. اگر می‌خواهید زمانی که شخصی ماوس خود را روی آن می‌گذارد، چیزی تغییر رنگ دهد، از همان CSS استفاده کنید، اما اضافه کنید : شناور به آن و تغییر یک ظاهر طراحی شده. در اینجا یک مثال است:

.entry h2{
 font-size:36px;
 color:#000;
 font-weight:800;
}

.entry h2:hover{
 color:#f00;
}

کاری که این کار انجام می دهد این است که وقتی کسی روی آن قرار می گیرد، رنگ تگ h2 شما را از سیاه به قرمز تغییر می دهد. نکته مهم در مورد استفاده از :hover این است که نیازی نیست اندازه فونت یا وزن را دوباره اعلام کنید، اگر تغییر نمی کند. این فقط چیزی را که شما مشخص می کنید تغییر می دهد.

انتقال

برای جلوه‌های شناور، مانند منوها یا روی تصاویر در وب سایت شما، شما نمی خواهید رنگ ها خیلی سریع به نتیجه نهایی تبدیل شوند. شما در حالت ایده‌آل می‌خواهید تغییر را به تدریج کاهش دهید، جایی که ویژگی transition وارد عمل می‌شود.

.entry h2:hover{
 color:#f00;
 transition: all 0.3s ease;
}

این باعث می‌شود که به جای اینکه فوراً به رنگ قرمز درآید، تغییر بیش از 0.3 ثانیه اتفاق بیفتد. این باعث می شود که اثر شناور برای چشم دلپذیرتر و کمتر تحریک شود.

7. ایالت های پیوند

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

a:link { color: blue; }
a:visited { color: purple; }

8. اندازه تصاویر را به راحتی تغییر دهید

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

img {
 max-width:100%;
 height:auto;
}

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

9. کنترل عناصر یک بخش

با استفاده از مثال تصویر بالا، اگر می خواهید فقط تصاویر یک بخش خاص را هدف قرار دهید، مانند وبلاگ خود، از یک کلاس برای بخش وبلاگ استفاده کنید و آن را با انتخابگر واقعی ترکیب کنید. این به شما امکان می‌دهد فقط تصاویر بخش وبلاگ را انتخاب کنید، و نه تصاویر دیگر، مانند لوگوی خود، یا نمادهای رسانه اجتماعی، یا تصاویر موجود در سایر بخش‌های سایت خود، مانند نوار کناری. در اینجا روش ظاهر CSS آمده است:

.blog img{
 max-width:100%;
 height:auto;
}

10. کودکان را هدایت کنید

ای کاش وقتی برای اولین بار استفاده از CSS را شروع کردم، این را می دانستم. این باعث صرفه جویی در وقت من می شد! استفاده کنید > برای انتخاب فرزندان مستقیم یک عنصر. مثلا:

#footer > a

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

عناصر خاص کودک

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

li:nth-child(2) {
 font-weight:800;
 color: blue;
 text-style:underline;
}

CSS بالا دومین مورد در لیست را هدف قرار می دهد و آن را پررنگ، زیرخط دار و آبی می کند. بعد از عدد داخل پرانتز یک “n” اضافه کنید و می توانید هر مورد دوم لیست را هدف قرار دهید. تصور کنید که بتوانید هر خط دیگر را در یک طرح به سبک جدول برای خواندن آسان استایل کنید. CSS خواهد بود:

li:nth-child(2)

11. CSS را برای چندین کلاس یا انتخابگر اعمال کنید

فرض کنید می خواهید یک حاشیه یکسان در اطراف همه تصاویر، بخش وبلاگ و نوار کناری اضافه کنید. لازم نیست دقیقاً همان CSS را 3 بار بنویسید. فقط آن موارد را با کاما از هم جدا کنید. به عنوان مثال:

.blog, img, .sidebar {
 border: 1px solid #000;
}

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

12. box-sizing: border-box;

این مورد در میان بسیاری از طراحان وب مورد علاقه است، زیرا مشکل padding و مسائل طرح بندی را حل می کند. اساساً وقتی یک جعبه را روی یک عرض مشخص تنظیم می کنید و به آن بالشتک اضافه می کنید، بالشتک به اندازه جعبه اضافه می شود. با این حال، با box-sizing:border-box;، این نفی می شود و جعبه ها به اندازه ای که قرار است باشند باقی می مانند.

13. :قبل

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

h2:before { 
 content: "Read: ";
 color: #F00;
}

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

14. :بعد

مانند انتخابگر :before، می توانید از :after برای درج محتوا به صورت سراسری استفاده کنید روی عناصر خاص یک کاربرد عملی اضافه کردن “بیشتر بخوانید” بعد از هر گزیده ای است روی یک وبلاگ در اینجا روش انجام این کار آمده است.

p:after{ 
 content: " -Read more… ";
 color:#f00;
}

15. محتوا

محتوا یک ویژگی CSS است که در مواقعی که نیاز به وارد کردن عنصری دارید که می‌خواهید بتوانید آن را کنترل کنید، مفید است. رایج‌ترین استفاده‌ای که برای این کار دیده‌ام، قرار دادن یک نماد از فونت آیکون در یک مکان خاص است. در مثال های بالا می بینید که باید متنی را که می خواهید درج کنید در گیومه قرار دهید.

16. بازنشانی CSS

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

17. کلاه ها را رها کنید

همه عاشق دراپ کلاه هستند. ما را به یاد کتاب های چاپی سنتی می اندازد و راهی عالی برای شروع یک کتاب است page از محتوا که 1^خیابان، حرف بزرگ واقعا توجه شما را جلب می کند. یک راه آسان برای ایجاد یک drop cap در css وجود دارد، و آن با استفاده از عنصر شبه: :first حرف است. در اینجا یک مثال است:

p:first-letter{
 display:block;
 float:left;
 margin:3px;
 color:#f00;
 font-size:300%;
}

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

18. متن را مجبور کنید که تمام حروف بزرگ، کوچک یا بزرگ باشد

تایپ یک بخش کامل با تمام حروف غیر منطقی است. تصور کنید که بعداً زمانی که قالب وب‌سایت تغییر می‌کند یا به‌روزرسانی می‌شود، باید به عقب برگردید و آن را برطرف کنید. در عوض، از سبک های css زیر استفاده کنید تا متن را به یک قالب بندی خاص مجبور کنید. این css تگ عنوان h2 را هدف قرار می دهد.

• h2 { text-transform: بزرگ; } – همه سرپوش ها
• h2 { text-transform: حروف کوچک; } – تمام حروف کوچک
• h2 { text-transform: بزرگ کردن; } – 1 را با حروف بزرگ می نویسد^خیابان حرف هر کلمه

19. ارتفاع صفحه نمایش عمودی

گاهی اوقات شما می خواهید یک بخش تمام صفحه را پر کند، صرف نظر از اندازه صفحه. شما می توانید این را با vh یا ارتفاع را کنترل کنید. عدد قبل از آن یک درصد است، بنابراین اگر می‌خواهید 100٪ مرورگر را پر کند، آن را روی 100 تنظیم کنید. ممکن است آن را روی مقداری مانند 85٪ تنظیم کنید تا یک منوی ناوبری ثابت را در خود جای دهد. ایجاد کلاس برای container و مقدار vh که می خواهید داشته باشد را اعمال کنید. یکی از مواردی که ممکن است نیاز به تغییر آن داشته باشید، مقدار درخواست رسانه برای صفحه‌های خاص یا جهت‌گیری‌هایی مانند تلفن‌های در حالت عمودی است. تصور کنید که یک تصویر منظره را متناسب با حالت پرتره کشیده اید. این فقط خوب به نظر نمی رسد.

.fullheight { height: 85vh; }

20. لینک های تلفنی سبک

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

a(href^=tel) {
 color: #FFF;
 text-decoration: none;
}