در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش 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 استفاده شود برای دسترسی به تگ مورد نظر پیش از نام آی دی از # استفاده می شود. و در صورتی که از کلاس استفاده کنید باید از علامت . استفاده کنید.

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

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

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

#آموزش_گام_به_گام_css #آموزش_html_و_css #آموزش_html_به_زبان_ساده #آموزش_html #آموزش_css_و_html #آموزش_گام_به_گام_html #آموزش_مقدماتی_html_و_css #یادگیری_html_به_زبان_ساده #آموزش_مقدماتی_html #آموزش_مقدماتی_css
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

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