آشنایی با مفاهیم پایه ای CSS
CSS مخفف عبارت sheets cascading style می باشد و سبک های طبقه بندی شده ای را برای فرمت بندی متن و سایر اجزاء صفحه وب معرفی می کند .در این مقاله همراه ما باشید برای آشنایی با مفاهیم پایه در CSS که باید برای شروع کار بدانید.
آشنایی و آموزش با CSS را شروع کنید
فرمت بندی صفحات توسط CSS ملزم پیمودن دو مرحله است . در مرجله نخست باید Style sheet ها را تعریف کرد . style در بردارنده دستورات style خاصی بوده و قالب بندی متن را کنترل و تنظیم می کند . مرحله دوم نیز شامل اجرای این دستورات در صفحه و اعمال آن به بخش های مختلف فایل است .
با پیمودن عملی این مراحل می توان به موفقیت بیشتر در زمینه فرمت بندی صفحات دست یافت .استفاده از دستورات style در سیستم CSS می توان با ایجاد تعدادی از قواعد style به فرمت بندی مطلوب در متن پرداخت هر دستور Style شامل یک گزینش گر می باشد . و به دنیال آن متغییرهایی قرار می گیرند که نوع واندازه مطلوب هر مشخصه را می توان در بخش مربوط به آن وارد کرد به عنوان مثال به دستور زیر دقت کنید .
P = {font – family: arial ; color : Red ; text – align : center}
حرف P بعنوان یک گزینش گر بوده و عبارات داخل کروشه در نقش متغییر ظاهر می شوند .هر بخشی مفسر حالات و نوع و اندازه متغییر است باید حداقل حاوی یک متغییر باشد به هر متغییر تنها یک مقدار مشخص تعلق خواهد گرفت . ساختار کلی این بخش به صورت {مقدار : متغییر} می باشد . به بخش زیر دقت کنید :
Font – family : arial , color : Red , and text – align : center
برای هر متغییر مقدار مناسب در مقابل هر یک درج شده است . لازم به ذکر است که این دستورات را می توان در یک فایل Style بیرونی گنجانده و با لینک کردن صفحات وب متعدد به آن از دستورات موجود فایل استفاده کرد و آن ها را در تمامی پاراگراف های صفحات لینک شده اعمال کرد .
استفاده از گزینشگرهای ID و Class
در هر Style sheet اعم از داخلی یا خارجی با ترکیب دستورات مختلف ، می توان گزینشگرهای ID یا Class را ایجاد کرد و به جای یک قاعده تنها و منحصر به فرد از آن ها استفاده نمود . به عبارت ساده تر هر گزینشگر گروهی امکان ایجاد چندین دستور Style متنوع را به کاربر می دهد به عنوان مثال با برخورداری از گزینشگر Class می توان سه نوع پاراگراف متفاوت در صفحه ایجاد کرد .
p.left {text – align : left }
p.center {text – align : center }
p.right {text – align : right }
نکته ارزشمند و قابل توجه در این زمینه وجود ویژگی کلاس است که با بهره مندی از آن به همراه تگ ابتدایی هر پاراگراف می توان گزینشگر گروهی مورد نظر را به آن پاراگراف اضافه نمود به عنوان مثال اعمال دستور <”p class=”center> پاراگراف را در مرکز صفحه قرار می دهد . گزینشگرهای گروهی فوق دستورات Style چندگانه را فقط به قسمت های خاصی از متن می افزایند اما باید در نظر داشت که ساختن گزینشگرهای گروهی معینی که به جزء خاصی از متن تعلق ندارد نیر امکان پذیر است به این ترتیب این دستورات را می توان در کلیه قسمت های متن به اجرا درآورد .
به عنوان مثال با ایجاد یک گزینشگر گروهی همچون p.center {text – alignL:center} دستور موردنظر را می توان به هر قسمت از متن اعم از پاراگراف ها ، سرفصل ها ، آدرس ها و توضیحات اضافه نمود . عملکرد گزینشگر ID بسیار شبیه به گزینشگر گروهی است با این تفاوت که ID از نماد (#) به جای علامت (.) استفاده می کند و در ضمن فقط به قطعه انتخاب شده در متن اختصاص خواهد یافت به عنوان مثال دستور زیر را در نظر بگیرید .
P# footer {font – size : small ; font – style : italic}
این دستور به پاراگراف پایینی صفحه اعمال می شود و آن را به شکل یک پاورقی با فونت ریز و خط italic در می اورد .
استفاده از Style Sheet های خارجی در صفحه وب
برای استفاده از دستورات موجود در یک Style Sheet خارجی و گنجاندن آن در صفحات وب لازم است لینکی را در بالای هر صفحه وب درج کنید این لینک نشانگر نام و مکان دقیق Style Sheet می ّاشد لینک دادن صفحه وب به Style Sheet از طریق درج تگ Link در میان تگ های ابتدایی و انتهایی head و در قسمت فوقانی صفحه امکان پذیر است به کد زیر توجه کنید :
<head> <link rel=”style sheet” type=” text / css” href=”formats.css” /> </head>
چنانچه فایل مربوط به Style Sheet در دایرکتوری صفحه وب باشد ، ویژگی href ، نام فایل Style Sheet می باشد در غیر اینصورت قید دایرکتوری Style Sheet همراه با نام فایل الزامی است . به مثال زیر دقت کنید .
Href= “formatting / styles / formats.css “
افزودن Style Sheet داخلی
با تایپ نمودن دستورات Style در قسمت فوقانی یک وب می توان Style Sheet داخلی آن را به صفحه اضافه کرد ثبت این دستورات با پیروی از ساختار {مقدار : ویژگی} گزینشگر امکان پذیر است .
در اینجا قاعده گزینشگر معادل نام قسمتی از صفحه HTML یک Class و یا ID می باشد . ابتدا تگ <style> سپس قوانین Style و بعد از آن تگ <style/> ظاهر می گردد .
آشنایی با CSS : قالب بندی صفحات وب با استفاده از دستورات Style
آن دسته از دستورات Style که گزینشگر آن ها معادل نام قسمتی از صفحه HTml است به صورت خودکار فقط به قالب بندی همان جزء مذکور اختصاص می یابد . به عنوان مثال با اجرای دستور Style زیر پیش زمینه صفحه وب به طور اتوماتیک زرد رنگ خواهد شد . body {color:yellow} اما در خصوص آن دسته از دستورات Style که گزینشگر آن ها معادل یک گزینشگر ID یا Class است وضعیت متفاوت بوده و دستورات Style به صورت خودکار به صفحات افزوده نمی شود . صفحه HTml دارای دو ویژگی به نام های Class و ID است به منظور افزودن سبک Style مطلوب به جزء خاصی از HTML می توان از این دو ویژگی استفاده نمود.
البته مجداد یادآوری می کنم کاربر فقط هنگامی مجاز به استفاده از این ویژگی ها است که با یک گزینشگر ID یا Class مواجه شده باشد . اگر ویژگی Class به همراه تگ ابتدایی یک پاراگراف بکار برود سبب افزایش چند دستور فرمت بندی به آن جزء می شود این دستورات چندگانه به همراه یک گزینشگر Class که بیشتر توضیح دادیم اعمال می شود. دستور <p class=center> مثالی از نحوه استفاده هست . عملکرد ویژگی ID نیز دقیقا مشابه ویژگی Class می باشد . نمونه ای از کاربرد این ویژگی را مشاهده می کنید <”p id=”footer>
HTML دو تگ دیگر با نامهای <div> و <Span> دارد که از آن ها برای افزودن دستورات Style به بخشی از متن استفاده می شود . ازتگ های ابتدایی و انتهایی <div> برای تعیین ابتدا و انتهای قطعه موردنظر می توان استفاده کرد . با درج هر یک از ویژگی های Class یا ID به همراه تگ ابتدایی Div می توان Style مطلوب را به قطعه اعمال کرد . از تگ های <span> نیز جهت فرمت بندی یک پاراگراف گزینش شده استفاده می شود . یکی دیگر از ویژگی های تعریف شده در HTML ، ویژگی Style است که امکان افزودن Style ررا به کاربر می دهد . این ویژگی را می توان بصورت {مقدار : ویژگی} بکار برد . نمونه ای از کاربرد ویژگی Style و نحوه استفاده از آن را دز زیر مشاهده می کنید .
<p.style = “text – align: center ; Font – size: large”
ایجاد یک Sheet Style خارجی و اتصال دادن صفحه وب به آن
با ایجاد یک Sheet Style خارجی و لینک کردن فایل های HTML به آن می توان از آن استفاده کرد و آن ها را در صفخات وب متعددی استفاده کرد . Sheet Style های خارجی ، فایلهای متنی و با پسوند Css می باشند این فایل ها حاوی قواعد و دستورات نگارشی گوناگونی هستند که غالبا از آن ها برای تنظیم فایل های HTML استفاده می کنند .
در این بخش می خواهیم با نحوه ساخت یک فایل css و اتصال فایل های مختلف HTML به آن آشنا شویم . از تگ <link> برای ضمیمه کردن فایل css به فایل HTML می توان استفاده کرد . در این تگ ویژگی href و مکان دقیق فایل css در وب سرور ثبت می شود . علاوه بر رعایت نکات فوق ، افزودن شاخص
type=”text/css” ، rel = “refstylesheet”
به تگ <link> ضروری است . ویژگی rel نشانگر نوع فایل لینک شده به فایل HTml می باشد .
نحوه ایجاد Sheet Style خارجی :
به Notepad رفته و دستورات Style مورد نظر را برای اعمال به یک یا چند بخش از فایل HTML مشخص کنید .
فایل را با پسوند css ذخیره نمایید .
لینک کردن صفحه وب به Sheet Style :
به Notepad رفته تگ <link> را باید بین تگ های ابتدایی و انتهایی <head> بنویسید و ویژگی hrefرا برای آن بنیوسید .
<head> <link rel=”Stylesheet” type=”text/css” href=”Style.css”> </head>
نکته : در تگ Link بالا صفت rel نوع رابطه صفحه CSS را مشخص میکنید که همیشه قیمت آن برابر به Stylesheet میباشد . Type نوعیت سند را که ارتباط میدهید مشخص میکنید و href هم عبارت از همان سند مجزاء Css تان میباشد.
آشنایی با ایجاد Sheet Style داخلی :
این روش معمولاً وقتی استفاده میشود که خواسته باشید که هر صفحه استایل مجزاء داشته باشد. این روش با تگ Style در بین تگ Head اجرا میشود.
<head>
<Style type="text/css"> div{background :#fff;
Font-size:20px; Width:180px;}
</style> </head>
آشنایی با قواعد دستوری CSS
در این قسمت قواعد دستوری CSS را مورد بحث قرار میدهیم.
در کد نویسی فضاهای خالی و خطوط اضافه برای درک بهتر و خوانایی بیشتر کدها به تعداد دلخواه هیچ مشکلی ندارد.
CSS نسبت به حروف بزرگ و کوچک حساس نیست .البته در برخی موارد ، عوامل خارجی مثل نوع زبانی که از CSS استفاده می کند و یا سیستم عامل در این بین نقش دارند .برای استانداردسازی کارتان همیشه دستورات را با حروف کوچک بنویسید.
مثلا نام تگ ها در HTML به حروف بزرگ و کوچک حساس نیستند اما در XHTML این حساسیت وجود دارد . نام فونت ها هم به استثنای فونت های عمومی که برای CSS شناخته شده هستند ، در برخی سیستم عامل ها این حساسیت را دارند .
خوب میرویم طرف قواعد دستوری CSS ، برای نوشتن دستورات CSS میتوانید از نرم افزارهای مختلف استفاده کنید . نرم افزار های که معمولاً استفاده میشود notepad ++ و یا Dream Weaver است. برای شروع به تصویر زیر دقت کنید :
در تصویر بالا:
خط اول توضیحات را نشان میدهد که شما قادر ید در هر قسمت از صفحهء CSS برای آسانی کار و همچنان برای جلوگیری از سردرگمی از کامنت استفاده کنید. برای درج کردن کامنت (توضیحات) باید متن تانرا بین علامه /* و */ قرار بدهید. البته شما نیز میتوانید توضیحات را به زبان فارسی درج کنید.
یادداشت : در صورت درج کردن کامنت فارسی باید در هنگام ثبت کردن سند Encoding آنرا UTF-8 را انتخاب نمایید. برای انجام این کار در برنامه Notepad++ میتوانید از مینوی Encoding نوعیت کد آنرا انتخاب نمایید.
خط دوم نشان دهندهء یک قانون و یک دستور است که فایل بالا را به سند CSS ارتباط میدهد. خط سوم دستوری است که مجموعه ای از قواعد را در برمیگیرد . در این دستور که مشاهده می کنید ما به صفحه که همان body محسوب میشود گفتیم تمامی رنگ فونت ها #۰۰۰باشد و ضخامت فونت ها هم نرمال باشد .
همانطور که مشاهده می کنید و قبلا هم گفتیم ، برای نوشتن قواعد ابتدا نام Selector را مینویسیم سپس با علامت ” { ” بلاک را باز می کنیم و قواعد را نوشته می کنیم و سپس با علامت ” } ” بلاک را بسته میکنیم . قواعد در بلاک ها با کاراکتر ” ; ” از هم جدا میشوند که برای قاعده آخر نیازی به این کاراکتر نیست چرا که قاعده ای بعد از آن نیست اما در صورت استفاده نیز کدام مشکلی ندارد. هر قاعده از یک نام و یک مقدار تشکیل میشود که با علامت ” : ” از هم تفکیک میشوند .
به تصویر زیر دقت کنید:
شکل زیر مطلب بالا را به شکل مفصل تر تشریح میکند.
خوب به پایان مقاله آشنایی اولیه با CSS رسیدیم ، امیدوارم با مفاهیم پایه CSS برای شروع کار نوشتن این زبان کاربردی به اندازه کافی آشنایی کسب کرده باشید ، از مجموعه مقالات آموزش Css ما دیدن کنید. با CSS می توانید در کنار html طرح های شگفت انگیزی را در صفحه وب خود انجام دهید. اگر این مقاله برایتان جالب بود ، می توانید مقاله بعدی ما را بخوانید : ” گروه بندی و کنار هم قرار دادن عناصر صفحه با تگ های Span و Div “
دیدگاه ها