تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

یکشنبه 12 آبان 1392

آموزش تخصصی css قسمت اول

نویسنده: امیر حسینی   

در این سلسله ازمقالات، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت.

برای یادگیری CSS، شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید.

نمونه از CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

 

CSS چیست؟

  • CSS مخفف Cascading Style Sheets است
  • styleها چگونگی نمایش عناصر HTML را تعریف می کنند
  • styleها برای حل یک مشکل به HTML 4.0 اضافه شدند
  • External Style Sheets می تواند در در انجام کار صرفه جویی کند
  • External Style Sheets در فایل های CSS ذخیره می شوند

نمایش CSS

سند HTML را می توان با styleهای مختلف نمایش داد.

Styleها مشکل بزرگی را حل کردند

HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.

HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.

وقتی tagهایی مانند <font> و attributeهای رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وبسایت های بزرگ، که فونت ها و اطلاعات رنگ به هر صفحه مجزا اضافه شدند، فرآیندی طولانی و پرهزینه شد.

برای حل این مشکل، کنسرسیوم World Wide Web، تصمیم گرفت CSS را ایجاد کند.

در HTML 4.0، می توان کل فرمتینگ را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.

امروزه، همه مرورگرها CSS را ساپورت می کنند.

CSS، در انجام مقدار زیادی کار صرفه جویی می کند

CSS، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.

معمولاً Styleها در فایلهای .css ذخیره می شوند. style sheetهای خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.

مثال

فایل HTML زیر، لینکی به یک style sheet خارجی با تگ <link> است:

<html>
<head>
<link rel="stylesheet"
type="text/css" href="ex1.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>

 

این، فایل style sheet است:

body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}

 

سینتکس CSS

قاعده CSS، دارای دو بخش اصلی است: یک selector، و یک یا چندین تعریف (declaration):

clip_image001

selector، معمولاً عنصر HTML است که می خواهید style کنید.

هر declaration، از یک property و یک value تشکیل شده است.

property، استایل اتریبیوتی (style attribute) است که می خواهید تغییر دهید. هر property دارای یک value است.

نمونه از CSS

declarationهای CSS، همیشه با یک نقطه ویرگول (;) تمام می شوند، و گروههای declaration در کمانک {} قرار می گیرند:

p {color:red;text-align:center;}

 

برای اینکه CSS را بیشتر قابل خواندن کنید، می توانید هر declaration را در یک خط قرار دهید، مانند مثال زیر:

 

p
{
color:red;
text-align:center;
}

Commentهای CSS

می توانید ازcommentها برای توضیح کدتان استفاده کنید، و ممکن است هنگامی که source code را ویرایش می کنید، به شما کمک کنند. مرورگرها، کامنت ها را نادیده می گیرند.

 
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

Selectorهای id و class

CSS علاوه بر تنظیم یک style برای عنصر HTML، به شما اجازه تعیین selectorهای خودتان به نام های "id" و "class" را هم می دهد.

سلکتور id

از سلکتور id برای تعیین style برای عنصر واحد و چندگانه استفاده می شود.

سلکتور id از اتریبیوت عنصر HTML استفاده می کند، و با یک "#" تعریف می شود.

قانون style زیر به عنصری با آی دی ="para1" اعمال می شود:

 
#para1
{
text-align:center;
color:red;
}

نام id را با عدد شروع نکنید! زیرا در Mozilla/Firefox کار نمی کند.

سلکتور class

از سلکتور class برای تعیین یک style برای گروهی از عناصر استفاده می شود. برخلاف سلکتور id، سلکتور class اغلب روی چندین عنصر بکار می رود.

این کار به شما اجازه تعیین یک style معین برای هر عنصر HTML با همان کلاس را می دهد.

سلکتور کلاس از اتریبیوت کلاس HTML استفاده می کند، و با یک "." تعریف می شود.

در مثال زیر، همه عناصر HTML با کلاس ""center، وسط چین خواهند شد:

.center {text-align:center;}

هرگز نام یک کلاس را با عدد شروع نکنید! زیرا فقط در Internet Explorer ساپورت می شود.

سه راه برای insert کردن CSS

  • External style sheet
  • Internal style sheet
  • Inline style

Style Sheet خارجی (external)

Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ <link> به style sheet لینک شود. تگ <link>، درون بخش head قرارمی گیرد:

 
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است:

 
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

فضاهای بین مقدار property و واحدها را خالی نگذارید!

Style Sheet داخلی (internal)

Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. styleهای داخلی با استفاده از تگ <style> در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:

 
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Styleهای Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

 
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Style Sheetهای چندگانه

اگر بعضی از propertyها برای یک selector در style sheetهای مختلف تعیین شده باشد، valueها از style sheet معینی ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای propertyهای زیر برای سلکتور h3 است:

 
h3
{
color:red;
text-align:left;
font-size:8pt;
}

و یک style sheet داخلی دارای propertyهای زیر برای سلکتور h3 است:

 
h3
{
text-align:right;
font-size:20pt;
}

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، propertyهای h3 اینگونه خواهد بود:

 
color:red;
text-align:right;
font-size:20pt;

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

Styleهای چندگانه به یک استایل cascade می شوند

Styleها را می توان به طرق زیر معین کرد:

  • درون یک عنصر HTML
  • درون بخش head صفحه HTML
  • در یک فایل CSS خارجی

نکته: حتی style sheetهای خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن

هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟

معمولاً می توان گفت که همه styleها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

  • پبش فرض مرورگر
  • style sheet خارجی
  • style sheet داخلی (در بخش head)
  • استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد، که بدین معناست که استایلی را که درون تگ <head> تعریف شده، یا در یک style sheet خارجی، یا در مرورگر را override می کند.

نکته: اگر لینک به style sheet خارجی بعد از style sheet داخلی در HTML <head> داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند.


نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com