آموزش سی اس اس
در قسمت اول با استفاده از CSS یک قالب دو ستونی کلاسیک با navigation سمت چپ ایجاد کردیم که تنها چند نوع تگ HTML داشت. قسمت اول کد صفحه را ارائه کرده و توضیح می‌داد که قرار است از چه تگهای HTML استفاده کنیم.
همانطور که می‌دانید، تمام محتوایی (متن، عکس، فلش، و غیره) که کاربر هنگام مشاهده یک صفحه وب می‌بیند با HTML مشخص شده و بین تگهای <body> و </body> قرار دارد.
در این مورد داریم:
<body>
<div id=”navigation”>
<h2>The Main navigation</h2>
</div>
<div id=”centerDoc”>
<h1>The Main Heading</h1>
<p>
</p>
</div>
</body>
توجه :
شما باید صفحه HTML ساده خودتان را ایجاد کنید به طوری که بتوانید با من همراهی کرده و گام به گام صفحه را ایجاد کنید.
در کد بالا دو بخش اصلی مشاهده می‌کنیم که هر کدام در داخل تگهای <div> محصور شده‌اند. همانطور که در قسمت اول این آموزش یاد گرفتیم، تگهای <div> برای این طراحی شده‌اند تا برای ایجاد یک «قسمت» در سند یا به عبارت دیگر، یک ظرف مورد استفاده قرار بگیرند.
دو لفاف مانند آنچه گفتیم ایجاد کرده و هر یک از آنها را با یک ID (یا شناسه) منحصر به فرد نامگذاری می‌کنیم:
<div id=”navigation”>
…
<div id=”centerDoc”>
متوجه خواهید شد که کل محتویات صفحه در یکی از این دو قسمت عمده صفحه قرار گرفته است. بنابراین سوال اول این است: قواعد ID در صفحات HTML چیست و چرا از آنها استفاده کرده و به هر یک از عناصر صفحه مانند DIVها یکی از آنها را اختصاص می‌دهیم؟
اول از همه، میتوانید به هر تگ HTMLی یک ID اختصاص دهید. بنابراین می‌توانم به یک تگ <p> هم یک ID اختصاص بدهم.
در یک صفحه یک ID فقط یک بار می‌تواند مورد استفاده قرار بگیرد. به این مفهوم که هیچ دو عنصر مختلفی در یک صفحه نمی‌توانند یک ID یکسان داشته باشند. شناسه‌های ID برای شناسایی یک عنصر منحصر به فرد در صفحه بکار می‌روند. بنابراین در مثال بالا می‌توانیم درک کنیم که تنها یک عنصر صفحه با ID «navigation» و تنها یک عنصر صفحه با ID «centerDoc» وجود دارد. تصمیم دارم از IDهایی استفاده کنم که با شما سخن بگویند تا معلوم شود در هر یک از قسمت‌هایی که ایجاد کرده‌ایم چه اتفاقی قرار است بیفتد.
شناسه‌های ID عناصر صفحه HTML (تگ‌ها) در CSS استفاده می‌شوند. می‌توانیم ID موجود در کد CSS را چنان هدف‌گذاری کنیم که با اشاره به آن ID، عنصر تغییر ظاهر، تغییر موقعیت، و حتی تغییر رفتار دهد.
در داخل تگ <div> تگهای عنوان (<h1> و <h2>) را قرار می‌دهیم تا قسمت سر‌صفحه (عنوان) را تنظیم کنیم. برای‌تان توضیح می‌دهم هر یک از تگهای عنوان قسمت اول این آموزش به چه معنا است.
در نهایت، چند تا تگ <P> دارم که صد البته متن مورد نظرم را که صفحه ساده‌مان را خواهد ساخت داخل آنها وارد می‌کنم.
حال می‌خواهم سراغ فایل CSSی برم که به صفحه HTMLمان متصل (لینک) شده است. سند CSSمان را با این خط کد در بین تگهای <head> و </head> پیوست می‌کنیم:
<head>
<link href=”myCSS.css” rel=”stylesheet” type=”text/css”>
</head>
مثل یک لینک صفحه معمولی، یک ویژگی «href» داریم که در این مثال در حال اشاره به همان سند CSSی است که تمام کد‌های CSSمان را درون خود دارد؛ کد‌هایی که قرار است صفحه‌ای که به آن لینک شده را تحت تاثیر خود قرار دهد. این تنها راه ارتباط دادن کد CSS به صفحات‌مان نیست (چند راه دیگر هم برای این‌کار وجود دارد) اما توضیح آنها را می‌گذاریم برای یک مقاله دیگر. بنابراین در لینک بالا نام فایل CSSمان را می‌گذاریم: «href=”myCSS.css”» و به مرورگر می‌گوییم که این لینک به یک صفحه CSS با این ویژگی زیر متصل است: «type=”text/css”». تنها موضوعی که اهمیت دارد این است که لینک دارد به یک فایل CSS با نام «myCSS.css» اشاره می‌کند.
حال که صفحه قالب بندی‌مان به سند مربوطه متصل شد، اجازه دهید نگاهی بیندازیم به بعضی از کد‌های CSS. این خرده کد شکل و شمایل IDهای منحصر به فردی که درباره آنها صحبت کردیم را تعیین می‌کند:
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
در اینجا اتفاقات زیادی دارد می‌افتد بنابراین فعلاً تنها روی تعداد کمی‌از عناصر تمرکز می‌کنیم. در عنصر فوق دو گزینشگر داریم («#navigation» و «#centerDoc»)، هر کدام متعلق به یک ID است و هر دنباله هر گزینشگر یک جفت آکولاد قرار می‌گیرد: {}. میان آکولاد «صفاتی» را فهرست می‌کنیم که شکل و شمایل گزینشگرمان را تعیین می‌کند. در زیر کد گزینشگر CSS را آورده‌ایم که تمام دل و روده آن (صفات آن) حذف شده است:
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
من متن «/*Look ma no CSS rules!*/» را فقط به این دلیل گذاشته‌ام که نشان دهم کد‌های CSS قاعدتاً در کجا قرار می‌گیرند. حال میتوانید ببینید که هر چیزی بین آکولاد قرار دارد بخشی از یک گروه یا بسته است که در CSS با نام صفات شناخته می‌شوند.
در مثال بالا می‌بینید که متنی هست که قبل از آکولاد آمده است. این متن نامی برای گزینشگر انتخاب می‌کند. بنابراین در این مورد دو نام گزینشگر و در نتیجه دو گزینشگر خواهیم داشت: #centerDoc و #navigation. حال چرا در مقابل متن نماد # را قرار داده‌ایم؟ چرا نمی‌توانیم خیلی راحت آنها را «centerDoc» و «navigation» بنامیم؟
همانند HTML و برنامه نویسی، متنی خاص در مکان‌هایی خاص دارای معانی ویژه‌ای هستند که به سیستم می‌گویند کاری خاص را انجام دهد. در این مورد، هر زمان که علامت # را در مقابل نام یک گزینشگر CSS قرار می‌دهیم داریم می‌گوییم که این گزینشگر، گزینشگر خاصی است که به آن گزینشگر ID (شناسه) می‌گویند. گزینشگر ID چه چیز خاصی دارد؟ این نوع گزینشگر تنها می‌تواند به یک عنصر در صفحه HTML اشاره نماید. آشنا به نشر می‌رسد، نه؟
بنابراین هر کدام از شما که تاکنون پشت کامپیوتران خواب‌تان نبرده می بیند که به ازای هر یک div HTMLمان یک گزینشگر CSS ID داریم که دارای یک ID است، و نام‌های آنها به یکدیگر مربوط است. بنابراین گزینشگر CSS #centerDoc روی div با نام «<div id=”centerDoc”>» عمل می‌کند، متوجه شدید؟ هر قانون/ سبک CSS که برای کد کردن آن در گزینشگر ID انتخاب کنیم محتویات div مربوطه به خود را تغییر خواهد داد. بنابراین برای div با شناسه «navigation» این قوانین CSS را داریم:
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
اگر به خطر آخر کد توجه کنید با اختصاص صفت normal برای متن، وزن فونت‌های متن در حالت معمولی (نرمال) خواهد بود:
font-weight: normal;
اگر می‌خواستیم تمام متن موجود در div (div با شناسه «navigation») کلفت بشود، صفت چنین می بود:
font-weight: bold;
اما داریم از موضوع منحرف می‌شویم چون در مقاله قبلی درباره جزئیات CSS صحبت کرده‌ایم. قرار بود این آموزش درباره ایجاد یک قالب صفحه برای استفاده راحت صحبت کند، بنابراین به دو نکته اصلی اشاره می‌کنم تا به مقصود مورد نظر برسیم.
در صفحه‌مان div «navigation» در سمت چپ نشسته و دارای لبه است، … چرا؟ این div یک خط لبه یک پیکسلی سبز کم رنگ زیبا دارد چون در CSSام چنین چیزی تنظیم کرده بودم:
border-right: 1px solid #C6EC8C;
خودش زبان گویایی دارد، نه؟ پیشنهاد می‌دهم رنگ خط لبه و ضخامت پیکسلی آن را تغییر دهیم و ببینیم چه شکلی پیدا خواهد کرد.
چرا navigation در سمت چپ صفحه قرار دارد در حالی که centerDoc در سمت راست آن است؟ خب اولین چیزی که باید آن را کنترل کنیم خط زیر در گزینشگر navigation است:
position: absolute;
این کد محل قرار گیری div فوق روی صفحه را به مرورگر می‌گوید. این نوع بیان ساده انگاری بیش از حد موضوع است، ولی فعلاً کار ما را راه میندازد.
جادوی واقعی کد CSSای است که در centerDoc قرار دارد:
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
خط:
margin-left: 235px;
به مرورگر می‌گوید یک حاشیه px 235 (پیکسل) در سمت چپ div با شناسه «centerDoc» قرار دهد. این‌کار باعث می‌شود div فوق به جلو هل داده شده و جا برای div با شناسه «navigation» باز شود. یا مثلاً در این مورد، فقط یک ستون خوب در سمت چپ ایجاد می‌کند.
قبل از تعیین حاشیه‌ها، چیزی به نام “لفافه” را تنظیم کرده‌ایم که دقیقاً کاری مانند اسمش انجام می‌دهد: فضایی است که در اطراف یک عنصر (تگ) پیچیده می‌شود.
CSS دارای ویژگی و مفهوم مدل چهارچوبی است که اساساً چهارچوبی است که در اطراف عناصر HTML قرار می‌گیرد. این مدل چهارچوب شامل محتوی لفافه، خط‌های لبه، حاشیه‌ها، و محتوای واقعی. این کار به ما اجازه می‌دهد در اطراف عناصر یک حاشیه ایجاد کرده و فضای حضور عناصر در ارتباط با عناصر دیگر را تعیین کنیم. ترتیب اجزا از داخل به خارج چنین است:
محتوا -> لفافه -> خط مرزی -> حاشیه
بنابراین در مثال ما، هر چیزی که در میان تگهای <div> قرار دارد «محتوا» است. بلافاصله بعد از آن لفافه قرار می‌گیرد. سپس یک خط مرزی و در نهایت حاشیه قرار می‌گیرد. ممکن است فکر کنید حاشیه و لفافه شبیه هم‌اند، اما اگر خوب فکر کنید خواهید دید امکان کنترل فضای قبل از خط مرزی (لفافه) و پس از خط مرزی (حاشیه‌ها) واقعاً می‌تواند روی قالب‌بندی‌مان تاثیر‌گذار باشند.
در این مثال متوجه شدید که div navigation در صفحه بالاتر از centerDoc div قرار می‌گیرد. دلیل آن ترتیب نمایش آنها در HTML نیست هر چند بدون وجود CSS چنین می بود. به جای آن، دلیل این موضوع تنظیماتی است که برای حاشیه هر یک از گزینشگر‌ها در نظر گرفته‌ام؛ برای centerDoc حاشیه بالایی را px 50 تنظیم کرده‌ام:
margin-top: 50px;
و برای div navigation آن را به شکل زیر تنظیم کردم:
margin-top: 0px;
این کار حاشیه بالای آن را صفر پیکسل تنظیم می‌کند و در نتیجه 50 پیکسل بالاتر از div centerDoc خواهد بود. پیشنهاد می‌کنم برای این‌که ببینید چه اتفاقی می‌فتد موقعیت div navigation را در HTML زیر div سند میانی صفحه قرار دهید، خواهید دید که در حال حاضر که از موقعیت دهی CSS استفاده شده، محل نمایش div در کد واقعی HTML به جایی که آن عنصر برای کاربر به نمایش در خواهد آمد هیچ ارتباطی ندارد. یکی دیگر از چیزهایی که میتوانید امتحان کنید بازی با مقادیر CSS است برای این‌که ببینید در نتیجه آن چه اتفاقی می‌افتد مثل تغییر لفافه، تغییر حاشیه‌ها و غیره.
نتیجه گیری این بحث را به قسمت سوم آموزش CSS موکول می‌کنیم.
1. کد‌های HTML دیگری هستند که در بالای اولین تگ <body> نوشته می شوند و اهمیت زیادی دارند، اما در واقع و به طور مستقیم کاری با نحوه نمایش صفحه (از دید کاربر) ندارند، بنابراین نمی‌خواهم در این مقاله وارد بحث آنها شوم.
منبع: آموزش سی اس اس
