آموزش css یا استایل نویسی در صفحات وب

حامد محمدیحامد محمدی
117 بازدید

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

با سلام خدمت شما همراهان گرامی وب سایت پرنیان طرح

در این اموزش قصد داریم CSS یا استایل نویسی در صفحات وب را به شما آموزش دهیم.

CSS چیست؟

کلمه CSS سرواژه سه کلمه Style Sheet Language و به معنای شیوه نامه آبشاری است.

در اصل باید گفت که css یک زبان برنامه نویسی نیست.زیرا هیچ یک از ویژگی های یک زبان برنامه نویسی مثل توابع،حلقه ها و… را ندارد. اما در این آموزش و با توجه به کلمه language ما از آن به عنوان زبان نام می بریم.

از این زبان برنامه نویسی برای طراحی ظاهری صفحات وب سایت و تنظیم نحوه چیدمان المان ها در صفحه استفاده می شود.

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

css در نسخه های مختلفی با نام css1 تا css4 عرضه شد.برای style دادن به صفحاب وب سایت از طریق css سه روش اصلی وجود دارد.

آموزش css

آموزش css

روش اول: استفاده از inline style

در این روش، استایل دادن به تگ مورد نظر در حین کدنویسی انجام می شود و استایل نوشته شده، تنها در همان تگ اعمال می شود.

مثال:

[php]
<p style=”color:red>learn web design at parniantarh.ir</p>
[/php]

روش دوم: ایجاد استایل در HTML HEADER

در این روش، استایل شما روی کل صفحه جاری اعمال می شود.

مثال:

[php]
H1 {
COLOR: RED;
{
[/php]

روش سوم: ایجاد استایل با فایل CSS

در این روش، شما فایلی مانند فایل HTMLایجاد خواهید کرد. این فایل از نوع PLAIN TEXT خواهد بود که دارای پسوند CSS. می باشد.

مثال:

[php]
body{
background-color: blue;
color:#008000;
}
} h1
color:red;
}
[/php]
در هنگام استفاده از فایل CSS باید توجه داشته باشید که برای اعمال شدن تغییرات، شماباید بین فایل CSS و صفحه HTML مورد نظرتان ارتباط برقرار کنید.

برای برقراری این ارتباط، از لینک زیر در تگ HTML HEAD استفاده می کنیم:

[php]
<head>

<link rel=”stylesheet” type=”text/css” href=”style.css” title=”style”>

</head>
[/php]

 

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

روش اول: آدرس دهی برای اعمال تغییرات فقط روی یک عنصر خاص با id

برای کار با این روش ابتدا باید در بخش کدهای html برای عنصر مورد نظر یک صفت id تعریف کنید.

<p id=”para1″> this is a paragraph.</p>

و در مرحله بعد باید در بخش دستورات css تغییرات دلخواه را با ذکر نام صفت مورد نظر اعمال کنید.

توجه داشته باشید که تغییرات مورد نظر شما فقط روی المانهایی که دارای صفت ذکرشده در ابتدای دستور css می باشند اعمال خواهد شد.

نکته:در ابتدای دستورات css باید از علامت ” # “استفاده نمایید.

نکته: هرگز از عدد برای مقداردهی به id استفاده نکنید زیرا مرورگر فایرفاکس آنرا اعمال نخواهد کرد.

#para1 {

text-aligen:center;

color:red;

}

این تغییرات تنها بر روی پاراگرافی که دارای id با صفت para1 هستند اعمال می شود.

 

روش دوم: آدرس دهی برای اعمال تغییرات روی گروهی از عناصر با استفاده از class

برای این کار باید در بخش کدهای html  برای تمامی عناصری  که میخواهید خصوصیات ظاهری یکسانی داشته باشند، صفت class را تعریف کنید.

<p class =”center”> this is a paragraph. </p>

 

نکته: در این روش باید از علامت” . “(نقطه) در ابتدای کدهای css استفاده کنید.

در بخش کدهای css نیز کدهای زیر را وارد کنید:

.center{

text-aligen:center;

}

این دستورات تنها بر روی المان هایی که دارای مقدار classبرابر با centerهستند اعمال خواهند شد.

 

میخواهم بیشتر بدانم.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

2 پاسخ به “آموزش css یا استایل نویسی در صفحات وب”

  1. مقاله درباره نحوی استفاده از افزونه Styles بنویسید
    چگونه برای اکسنتشن Stylesاستایل برای صفحه وب بنویسم که برای همه سایت قابل اجرا باشد که مشخصات فونت ان مثله shahrvanddaily.ir
    و چگونه میتوان قالب فونت و رنگ زمینه و نام فونت صفحه سریع با Inspect Element استخراج کرد علی الخصوص فایر فاکس

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت