1. Home
  2. »
  3. HTML CSS
  4. »
  5. آموزش CSS بخش اول
آموزش CSS

خلاصه این مطلب :

 

صفحات html به تنهایی حرفی برای گفتن ندارند (شاید) .برای جان بخشیدن با انهای میتوان از CSS استفاده کرد که یک زبان بسیار قوی و در عین حال ساده است و هم اکنون CSS3 نیز از راه رسیده است که قدرت مانور بیشتری دارد .من قصد دارم  شروع کنم به آموزش این زبان تا به سطح پیشرفته برسیم  یعنی زمانی که بتونیم یک وبسایت ساده را با CSS رنگ و لعاب ببخشیم. همزمان با این که CSS  را کار میکنیم آموزش  Html را  هم در بخش آموزش HTML  شروع میکنیم . امید وارم که چیز خوبی از آب در بیاد

چیزهایی که در این بخش یاد خواهید گرفت:

قالب دستورات CSS

چگونگی استفاده از css

 

قالب دستورات CSS

هر دستور cssاز سه بخش تشکیل شده است

Selector{property:value}

Selectorدر واقع همان خصوصیاتی هستند که شما قصد تغییر خواصشان را دارید. مانند:

,

,

Propertyها همه خصوصیات موجود دز htmlهستند (font, border) با اندکی تفاوت

Value ها همان مقادیر هستند که property ها میتوانند بپذیرند.

P{

Text-aligne : center;

Color: black;

Font-family: Tahoma ;

}

با صفت font‌ شروع میکنم

برای این که در یک صفحه htmlمشخص کنیم که یک پاراگراف ،یک لینک و ….. چه فونتی داشته باشند از صفت font استفاده میکنیم .

Fontشامل صفات font-style ,font-size,font-familyو… است و به صورت زیر استفاده می شود.

P{font:”Tahoma 12px bold”}

برای جدا سازی این صفات از فاصله استفاده میکنیم.

لازم به ذکر است که هر کدام از این صفات را خود به تنهایی استفاده کرد.

P{font-size:”12px”}

در CSSمی توان برای بیش از یک عنصر خصوصیت تعیین نمود:

H1,h2,h3,h4,h5,h6{color:green;}

چگونگی استفاده از css

1-سراسری

2-محلی

سراسری مانند روش بالا

اما در روش محلی به دو صورت استفاده می شود:

1-class

2-id

با استفاده از clSS

.left{color:red;}

.right{color:green;}

————————————–

Left Side

right side

همانطورکه میبینید ما در قسمت تعریفcssنام هیچ عنطری را قرار نداده ایمو به جای آن از یک نقطه و یک نام استفاده کرده ایم.

و در قسمت htmlمی بینید که آن اسم را (مثلاleft) را در عنصر classآن قرار داده ایم.از این به بعد این عنصر از صفات کلاس left تاثیر می پذیرد.

برای این که این classفقط برای عناصر

عمل کند کد cssرا به شکل زیر تغیییر میدهیم.

p.left{color:red;}

id هم دقیقا مانند classکار میکند با تفاوتی کوچکتر:

#left{color:red;}

 

Left Side

Idمانند classنیست ونمی توانند برای عناصر خاصی مورد استفاده قرار گیرد.

استفاده از CSSدر کدهای HTML

از سه طریق میتوان از کدهای cssدر htmlاستفاده کرد:

1-دستوری

2-صفحه ای

3-خارجی

اگر بخواهیم برای عناصر خواصی از cssاستفاده کنیو مستقیما آن را در صفت style آن قرار میدهیم.

 

In The Name OF God

برای استفاده به صورت صفحه ای باید آن را درون تگهای

قرار داد

 

 

در صورت استفاده به صورت خارجی باید هان کد بالارا به صورت فایل متنی و با پسوند cssذخیره کنیم و سپس آن را به سند Htmlخود اضافه کنیم.

برای اضافه کردن فایcssبه سند htmlاز تگ استفاده میکنیم این تگ در تگدر htmlبه کار میرود و دارای دو صفت مهم است

Rel و href

 

اولویت اجرای هر کدام از روشهای نوشتن css

1- دستوری

2- صفحه ای

3- خارجی

به این ترتیب روش دستوری با لاترین اولویت را دارد.

 

سایر قسمتهای این آموزش :

آموزش CSS بخش اول

آموزش CSS بخش دوم

آموزش CSS بخش سوم

آموزش CSS بخش چهارم

آموزش CSS بخش پنجم

آموزش CSS بخش ششم

آموزش CSS بخش هفتم

آموزش CSS بخش هشتم

آموزش CSS بخش نهم

 

 

امتیاز این post

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

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

لطفا ابتدا به حساب کاربری خود وارد شوید