طراحی سایت و طراحی وب سایت حرفه ای را با گروه سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

20 ترفند مهم CSS برای طراحی سایت

20 ترفند مهم CSS برای طراحی سایت

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

1. موقعیت مطلق المان ها

برای کنترل و تنظیم موقعیت تمامی المان هایی که در صفحه وجود دارند باید موقعیت مطلق (absolute positioning) را انجام دهیم. با تنظیم موقعیت مطلق المان ها و با جهت دادن به آن ها بر اساس پیکسل می توانید هرچیز را در جایی که می خواهید قرار دهید. کد زیر را به عنوان نمونه مشاهده کنید:

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

کد بالا باعث می شود که المان مورد نظر 20 پیکسل از بالا و سمت راست فاصله بگیرد.

2. * + selector

شما با استفاده از * می توانید یک استایل را برای خودتان بسازید و برنامه ریزی کنید. به عنوان مثال با استفاده از * و p می توانید یک استایل مشخص برای تگ <p> ایجاد کنید تا این استایل برای این تگ اجرا شود.

3. یک استایل دائمی

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

.section h2 { color:red !important; }

4.مرکز بندی

برای جهت دادن به متن و المان های صفحه از روش های ساده و مناسب باید استفاده کنید. به عنوان مثال برای وسط چین کردن متن از text-align:center; استفاده کنید و برای راست و یا چپ چین کردن، به جای center از right و یا left استفاده می شود. یک div و یا هر عنصر دیگری در صفحه توسط یک بلاک ویژگی می تواند جهت موردنظر را بگیرد. مثلا وقتی عرض کل صفحه ی شما 100% باشد از کد زیر می توانید استفاده کنید:

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

5. هم ترازی عمودی خط

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

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

6. افکت های شناور (Hover effects)

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

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

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

اگر نمی خواهید این تغییر به سرعت ایجاد شود و در زمان مورد نظر شما و به آرامی و در طول یک زمان مشخص انجام بشود می تواند آن را هم در کد مشخص کنید و دستوری شبیه به کد زیر را اعمال کنید:

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

7. استایل و رنگ لینک ها

شما می توانید به لینک های موجود در صفحه استایل و رنگ مورد نظرتان را بدهید. همچنین می توانید برای لینک هایی که کلیک شده اند و آن هایی که نشده اند تفاوت قائل شوید و استایل و رنگ متفاوتی به آن ها بدهید. برای این کار از کدی مانند کد زیر می توانید استفاده کنید:

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

8. اندازه ی مشخص تصاویر

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

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

9. کنترل المان های یک بخش

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

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

10. کنترل فرزندان و زیر مجموعه ها!

این مورد واقعا کاربردی و مهم است! به عنوان مثال اگر می خواهید با تمامی فرزندان فوتر کاری انجام دهید و تغییری یکسان را بر روی همه ی آن ها اعمال کنید کافیست این دستور را بنویسید:

#footer > a

برای آن که بتوانید تمامی عناصر موجود زیر مجموعه ی یک المان را تغییر دهید کافیست تا تعداد آن ها را بدانید و سپس با استفاده از کد زیر و قرار دادن تعداد المان ها به جای عدد درون پرانتز این کار را به سادگی هر چه تمام تر انجام دهید.

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

11. CSS را به کلاس های چندگانه و یا selector اعمال کنید

به عنوان مثال اگر یک استایل خاص را می خواهید به چندین تصویر در صفحه اعمال کنید لازم نیست استایل مورد نظرتان را برای هر کدام از آن ها بنویسید و می توانید از روش زیر استفاده کنید:

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

12. box-sizing: border-box;

این یک مسئله ی بسیار مهم و عصبی کننده است که وقتی به عنوان مثال یه یک باکس اندازه ی خاصی می دهید و بعد از آن با پدینگ، اندازه ی اولیه و اصلی آن به هم میریزد! با استفاده از box-sizing:border-box; می توانید انی مشکل را حل کنید . اندازه ی دلخواهتان را برای آن باکس حفظ کنید.

20 ترفند مهم CSS برای طراحی سایت

13. :before

این یک ویژگی کاربردی است که می تواند کار شما را در موارد مختلفی راه بیاندازد! از این دستور می توانید برای اعمال یک استایل یا ویژگی خاص برای تمامی موارد قبل از یک المان استفاده کنید. مثلا اگر می خواهید به نوشته ی قبل از تگ H2 در یک صفحه استایل خاصی بدهید از این کد استفاده کنید:

h2:before { 
    content: "Read: ";
<span class="Apple-converted-space">    color: #F00;</span>
}

نتیجه ی این کد را در تصویر زیر می بینید:

20 ترفند مهم CSS برای طراحی سایت

14. :after

دقیقا بر عکس مورد قبلیست و عناصر بعد از یک المان را تغییر می دهد. مثال زیر مفهوم و کاربر این دستور را برای شما ملموس تر می کند:

p:after{ 
    content: " -Read more… ";
    color:#f00;
}
20 ترفند مهم CSS برای طراحی سایت

15. content

content یا همان محتوا یکی از ویژگی های مهم در CSS است که می توانید به صورت دستی یک محتوا را وارد کنید. در مثال بالا دیدید که از آن استفاده کردیم و در ابتدا و انتهای متن نیز از علامت ” استفاده کردیم که به آن کوتیشن (quotation) می گویند.

16. CSS reset

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

17. کلاه

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

p:first-letter{
    display:block;
    float:left;
    margin:3px;
    color:#f00;
    font-size:300%;
}
20 ترفند مهم CSS برای طراحی سایت

18. متن ها را به طور کامل حروف بزرگ و یا حروف کوچک کنید

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

  • h2 { text-transform: uppercase; } – همه ی حروف بزرگ باشند
  • h2 { text-transform: lowercase; } – همه ی حروف کوچک باشند
  • h2 { text-transform: capitalize; } – اولین حرف هر کلمه بزرگ باشد

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

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

.fullheight { height: 85vh; }

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

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

a[href^=tel] {
<span class="Apple-converted-space">    color: #FFF;</span>
<span class="Apple-converted-space">    text-decoration: none;</span>
}

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

عنوان
تاریخ بازبینی
عنوان
20 ترفند مهم CSS برای طراحی وب
امتیاز
51star1star1star1star1star

دیدگاه ‏خود را بنویسید