در اين مقاله شما ياد ميگيريد چگونه بجاي جداول از CSS و كلاس هاي آن استفاده كنيد .
ساخت كلاسي براي عناصر تگ < div > : اولين قدم ساخت كلاس CSS است كه المنت هاي تگ < DIV> از آن استفاده مي كنند . بصورت زير :
div.leftnav{
background: white;
color: black;
/* other display information here */
/* add Positioning information here */
}
]
اين كلاس بسيار ساده است و در اصل الان كاري انجام نميدهد . فقط متن سياه را روي زمينه سفيد تعريف ميكند . شما بايد از اين المنت در جايي از صفحه استفاده كنيد .
موقعيت يابي وابسته ساده :
اين بدین معناست كه ما فقط هر عنصر را در موقعيتش قرار ميدهيم و بدون تعريف كردن جاي دقيق آن درصفحه .
div.leftnav{
background: white;
color: black;
/* Other display information here */
width: 15%;
}
خوب ما چه انجام داديم ؟ ما گفتيم كه هدايتگر چپ بايد در سمت چپ باشه ، جاييكه در صفحه قرار ميگيرد .
اين بد نيست ، اما براي انعطاف بيشتر ممكنه شما به موقعيت يابي مطلقي نياز داشته باشيد . همچنين اين خيلي مهمه كه بدونين كه چيزي كه شما تا حالا انجام داديد موقيت نمايي اصلي نيست . تمام چيزي كه تعريف كرديد بود . بنابرين يك المنت با پهناي 15 %(width) ساخته خواهد شد.
موقعيت نمايي مطلق :
موقعيت نمايي مطلق به معناي اين است كه شما بگوييد دقيقا المنت هاي شما كجاي صفحه ظاهر شوند .
اينكار با تعريف خاصيت هاي امكان پذير ميشود : top , bottom, left , right
div.content{
background: white;
color: black;
position: absolute; /* Says which positioning we are using */
left: 17%; /* 17% from the left side of the screen */
width: 69%; /* This is the width */
}
نكته اينجاست كه در كد بالا فقط خاصيت left تعريف شده، این كافيه ! نيازي نيست كه شما تمامي تمام خاصيت هايش را تعريف كنيد . اما براي انعطاف پذيري بيشتر ممكنه خودتون بخواهيد اينكارو بكنيد . بطورمثال ممكنه شما بخواهيد يك منو در سمت راست اضافه كنيد:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
}
اساسا در موقعيت نمايي مطلق اين المنت ها معاني زير را دارند:
:Leftفاصله از چپ صفحه ، معمولا بر حسب درصد
:Right فاصله از راست صفحه ، معمولا بر حسب درصد
:Top فاصله از بالاي صفحه ، معمولا بر حسب پيكسل
:Bottom فاصله از پايين صفحه ، معمولا بر حسب پيكسل
نكته اينكه bottom به ندرت استفاده ميشود، اما گاهي لازم ميشود . اگر شما از 4 يا 3 تا پراپرتي با هم استفاده كنيد، بايد قادر به قرار دادن تگ DIV در هر كجا كه ميخواهيد باشيد. همچنين در نظر داشتن اين نكته مهم است كه راه هاي بيشتري نيز براي موقعيت نمايي يك المنت در كنار موقعيت نمايي مطلق وجود دارد. اما تمام مرورگر هاي وب آن راه ها را پشتيباني نمي كنند .
اگر شما از 4 يا 3 تا پراپرتي با هم استفاده كنيد، بايد قادر به قرار دادن تگ DIV در هر كجا كه مي خو اهيد باشيد . همچنين در نظر داشتن اين نكته مهم است كه راه هاي بيشتري نيز براي موقعيت نمايي يك المنت در كنار موقعيت نمايي مطلق وجود دارد. اما تمام مرورگرهاي وب آن راه ها را پشتيباني نميكنند .
افزودن : Border
ممكنه شما بخواهيد كمي عناصرصفحه را با لبه كنار صفحه يا هر چيز ديگر فاصله دهيد ، border ها براي اين امر مناسبند . اما صفحه خود را در مرورگر هاي مختلف تست كنيد تا نتيجه درستي دريافت كنيد و حال طرز ساخت حاشيه ها:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
border-color: white; /* Keep the border invisible */
border-style: solid; /* It is a solid invisible line which is fine */
border-bottom-width: 2px; /* These attributes are pretty self-explanatory */
border-top-width: 2px;
border-left-width: 3px;
border-right-width: 4px;
}
ا
فزودن حاشيه يا : margin
Marginها ابزار هاي قدرتمندي در سايت هاي css ميباشند .در مقدمه مي بينيد كه شما مي توانيد چيزي را بكمك تعيين فاصله درصدي از طرفين margin ها در وسط قرار دهيد .
div.content{
background: white;
color: black;
margin-left: 20%; /* 20% from the left side of the screen */
margin-right: 20%; /* 20% from the right side of the screen */
}
افزودن تگ : DIV
افزودن تگ DIV براي گره زدن تمام اطلاعات بسادگي زير انجام پذير است :
<div class = "leftnav">
// Insert Links
</div>
همانطور كه مي بينيد خيلي ساده اينكار انجام شد و بيشتر كار در فايل انجام ميشود . شما مي توانيد از تگ DIVدر هرجاي صفحه استفاده كنيد . در انتها اينجا يك صفحهXHTML ساده را مي بينيد كه كد CSS آنرا ساخته و نماي آن سه ستون دارد :
<
div class = "content">
// Content
</div>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>
منبع : Macromediax.com طبقه : طراحي سايت و وبلاگ
Linkback: https://irmeta.com/meta/b1394/t8518/
اشتراک و بوک مارک کردن این تاپیک در شبکه های اجتماعی
