تا %60 تخفیف خرید برای 5 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن

البته اشتباه نکنید این قسمت صرفا آموزش کلی از سی اس اس می باشد نه خود سی اس اس، چون سی اس اس به صورت کلی مبحثی طولانی تر حتی از خود اچ تی ام ال می باشد. خب در این قسمت می خواهم شما را کمی با سی اس اس و رابطه آن با اچ تی ام ال آشنا کنم.سی اس اس مخفف کلمات Cascading Style Sheets به معنی تحت و الفظی آن شیوه نامه آبشاری می باشد. خب توسط یک شیوه نامه می توانید یک صفحه اچ تی ام ال را زیبا تر کنید، در واقع با سی اس اس می توانید به اجزا و المنت های اچ تی ام ال استایل بدهید. مثلا تگ های H1 را به رنگ آبی در بیاورید. با استفاده از سی اس اس می توانید از کدهای اضافه پرهیز کنید. مثلا شما فقط یکبار احتیاج دارید که یک استایل را به تگ خاصی بدهید نه با هر بار استفاده از آن تگ. استفاده از سی اس اس به سه صورت در وب امکان پذیر می باشد:

  1. سی اس اس درون تگ یا Inline
  2. سی اس اس درون اچ تی ام ال یا Internal
  3. سی اس اس به صورت یک فایل جداگانه یا External

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

<h1 style="color:red;">This is a heading with red color</h1>

در این مثال یک متن به صورت <H1> و با رنگ قرمز نمایش داده می شود.در استفاده از سی اس اس باید مراقب باشید (منظورم شیوه نگارش هستش .

StyleName:Value;

روش دوم در صورتی استفاده می شود که مقدار کدهای سی اس اس مورد استفاده کم باشد، در این حالت مدیریت سی اس اس بسیار مهم نیست. در واقع در این حالت شما فقط یک فایل که اچ تی ام ال با استایلهای سی اس اس دارید. خب برای استفاده از این حالت شما باید استایلهای خودتان را در دو تگ <style></style> قرار دهید. به مثال زیر توجه کنید:

<!doctype html>
<html>
<body>
<style>
    h1{
        text-align: center;
        color: blue;
        font-size: 20px;
    }
</style>
    <h1>I</h1>
    <h1>T</h1>
    <h1>P</h1>
    <h1>R</h1>
    <h1>O</h1>
</body>
</html>

قصد ندارم که دستورات سی اس اس را بررسی کنم اما با نگاهی به این کدها متوجه می شوید که من پنج بار از تگ <h1> استفاده کردم اما فقط یک بار برای این تگ استایل نوشتم.

  • Text-Align: طرازبندی متن که در این مثال مقدار Center گرفته است.
  • Color: برای تعیین رنگ متن استفاده می شود. در این مثال رنگ آن Blue می باشد.
  • Font-Size: اندازه متن تعیین می شود. در این مثال مقدار 20 پیکسل می باشد.

زمانی که شما در حال ساخت یک پروژه بزرگ هستید نمی تواند که کدهای سی اس اس، جاوا اسکریپت و اچ تی ام ال را همگی در یک فایل قرار دهید. منظورم اینست که روش دوم تنها برای زمانی استفاده می شود که حجم کدها کم باشد به این دلیل که تعداد خط کدها هر چقدر کمتر باشد ویرایش آنها راحت تر خواهد بود.در روش سوم فایل سی اس اس از فایل اچ تی ام ال به صورت مستقل از هم هستند و فقط با یک کد به همدیگر متصل می شوند. برای این کار یک فایل در همان مسیر فایل اچ تی ام ال با نام Style.css ساخته و ذخیره کنید. حالا وارد فایل html شوید و در بین تگ های <head></head> تکه کد زیر را بنویسید.

    <link rel="stylesheet" href="style.css">

چند مثال کاربردی

رنگ: برای تعیین رنگ یک المنت در سی اس اس باید از استایل Color:Value; استفاده کنید، برای مقدار این استایل هم می توانید از نام رنگ ها استفاده کنید هم از کدهای RGB و هگزادسیمال.

H1
{
Color:#FF0000;
}

اندازه فونت: برای تغییر اندازه یک متن می توانید از سی اس اس به راحتی استفاده کنید. برای این کار از خاصیت Font-Size استفاده می شود. مقدار این خاصیت باید برحسب پیکسل باشد.

H1
{
Font-size:30px;
}

نوع فونت: برای تعیین نوع فونت می توانید از خاصیت Font-Family بهره ببرید. توجه داشته باشید مقدار آن باید فونتی باشد که روی سیستم نصب است.

H1
{
Font-family:B Yekan;
}

حاشیه یا Border: برای ساخت یک حاشیه دور نوشته ها می توانید از خاصیت border استفاده کنید که مقدار آن باید برحسب پیکسل باشد.

H1
{
Border: 1px solid black;
}

خاصیت Solid برای تعیین رنگ حاشیه ها استفاده می شود.

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

H1
{
Border: 1px solid black;
Padding: 30px;
}

Margin: این خاصیت برای تعیین فاصله خارجی یک المنت از المنت دیگریست.

H1
{
Margin: 20px;
}

ID و Class: از مهمترین خاصیت های سی اس اس این دو خاصیت می باشند. ببینید فرض کنید که شما می خواهید از چند تگ هم نام استفاده کنید و برای هر یک استایل جداگانه ای بسازید خب برای اینکار می توان از صفت Style تگ ها استفاده شود اما زمانی که بخواهیم از فایل سی اس اس در روش سوم استفاده کنیم این کار امکان پذیر نیست. در این مواقع برای انجام این کار از ID و Class استفاده می کنیم. در واقع این دو گزینه آدرس دسترسی به یک تگ را برای ما فراهم می کند. مثلا:

<p id="p1">THIS TAG HAS A ID</p>

حال فایل سی اس اس خارجیتان را باز کرده و کد زیر را در آن قرار دهید:

#p1{
    color: blueviolet;
}

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

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

نظر شما
برای ارسال نظر باید وارد شوید.
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند