آشنایی با چگونگی استفاده از CSS در صفحات وب
در این سلسه مقالات از آموزش های CSS می خواهیم چگونگی استفاده از CSS را به شما عزیزان و علاقه مندان به طراحی وب آموزش دهیم. پس با ما همراه باشید. سعی خواهد شد آموزش ها کاربردی ، همراه با مثال و به صورت کوتاه و مفید باشد.
آشنایی با چگونگی استفاده از CSS در صفحات وب
در سری آموزش ها شما با چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهد گرفت.
برای یادگیری CSS، شما باید درکی از مفاهیم HTML و XHTML داشته باشید که می توانید به سری آموزش های زبان HTML نگاهی بیندازید و اطلاعات مورد نیاز را در این دسته آموزشی فرا بگیرید.
قبل از هر چیز برای اینکه می خواهیم آموزش ها به صورت کاربردی و همراه با مثال های مفید و جامع باشد، یک نمونه از کدهای CSS را به نظر شما می رسانیم :
مثال : یک نمونه از CSS
body{
background-color :#d0e4fe;
}
h1{
color :orange;
text-align :center;
}
p{
font-family: "Times New Roman";
font-size :20px;
}
خب شاید از خودمان بپرسیم که CSS چیست و چه کاربردی در صفحات وب دارد؟
CSS چیست؟
عبارت CSS مخفف Sheets Style Cascading است.
Style ها چگونگی نمایش عناصر HTML را تعریف می کنند.
Style ها برای حل یک مشکل به HTM 4.0 اضافه شدند.
External Style Sheets می تواند در انجام کار صرفه جویی کند.
External Style Sheets در فایل های CSS ذخیره می شوند.
نمایش CSS
سند HTML را می توان با Style های مختلف نمایش داد.
Style ها مشکل بزرگی را حل کردند.
HTML هرگز به قصد برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.
HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.
وقتی tag ها و attribute های رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وب سایت های بزرگ، که فونت ها و اطلاعات رنگ در هر صفحه مجزا بودند، فرآیندی طولانی و پرهزینه ای شد.
CSS در انجام مقدار زیادی کار صرفه جویی می کند.امروزه همه مرورگرها، CSS را ساپورت می کنند.
برای حل این مشکل، کنسرسیوم World Wide Web ، تصمیم گرفت CSS را ایجاد کند.
در HTML 4.0 ، می توان کل قالب بندی را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.
امروزه همه ی مرورگرها، CSS را ساپورت می کنند.
CSS در انجام مقدار زیادی کار صرفه جویی می کند.
CSS تعریف می کند عناصر HTML چگونه نمایش داده می شوند.
معمولا Style ها در فایل های css. ذخیره می شوند. Style sheet های خارجی شما را تنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.
مثال : فایل HTML زیر ، لینکی به یک style sheet خارجی با تگ است.
<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 آشنا شدیم. در سری آموزش های بعدی از این مطلب با دستورات مختلف CSS آشنا خواهیم شد. پس با بعد…
