در قسمت اول با استفاده از CSS یک قالب دو ستوني کلاسیک با navigation سمت چپ ايجاد كرديم كه تنها چند نوع تگ HTML داشت. قسمت اول کد صفحه را ارائه كرده و توضیح ميداد که قرار است از چه تگهاي HTML استفاده کنیم.
همانطور که ميدانید، تمام محتوایي (متن، عکس، فلش، و غیره) که کاربر هنگام مشاهده یک صفحه وب ميبیند با HTML مشخص شده و بین تگهاي <body> و </body> قرار دارد.
در این مورد داريم:
<body>
<div id=”navigation”>
</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> نوشته مي شوند و اهميت زيادي دارند، اما در واقع و به طور مستقیم كاري با نحوه نمايش صفحه (از دید کاربر) ندارند، بنابراین نميخواهم در این مقاله وارد بحث آنها شوم.
منبع: آموزش سی اس اس
هیچ نظری موجود نیست:
ارسال یک نظر