طراحی سایت استاندارد (2)
خب با قسمت دوم و پاياتي آموزش طراحي سايت استاندارد در خدمت شما هستيم حالا كه سايز بندي استاندارد و همينطور واحد هاي استاندارد را فرا گرفتيد بهتر است بريم سراغ طراحي وب سايت استاندارد يا همان استايل زني استاندارد وب سایت,طراحی سایت استاندارد می تواند کمک فراوانی به سئو سایت بکند که نمی توان آن را نادیده گرفت.
اولين بخش استايل css قالب ما به جز css reseat که برای نمایش یکسان وب سایت در مرورگرهای مختلف نوشته می شود, با گزينشگر * (ستاره) آغاز مي شود اين گزينشگر تمامي عناصر را انتخاب مي كند.
* { font-family:Tahoma, Geneva, sans-serif; font-size:12px; direction:rtl; }
نوشتن اين سه خاصيت باعث مي شود فونت و سايز فونت شما استاندارد شود به طبع ما فارسي زبان ها از سمت راست مي خوانیم و مي نويسیم پس جهت دهي سايت ما بايد از سمت راست باشد. نكته بعدي كامنت گذاري است كه باعث خوانايي كدهاي شما مي شود و در صورت زياد شدن كدهاي سايت به راحتي قسمت هاي سايت تحت كنترل طراح سايت است مخصوصا اگر طراحي را خودمان به صورت دستي انجام داده باشيم و همچنین با کامنت گذاری در کدنویسی می توانیم به صورت تیمی روی پروژه های موردنظر کار کنیم.
اما چيدمان و ستون بندي و تقسيم بندي سايت با خاصيت هاي float , display و position و ... امكان پذير است. ما در اين پست فقط به صورت مختصر به float و display:inline-block اشاره مي كنيم در گذشته براي چيدمان باكس هاي هم سطح از float كه به معني شناور شدن است استفاده مي شد اما در طراحي نوين با استفاده از خاصيت جديد css3 از display:inline-block استفاده مي كنيم. فرض كنيد يك div داريد كه داخل آن چند div ديگر گذاشته ايد براي div هاي دروني كلاس زیر را بنويسيد.
.box } float: left; width: 300px; height: 150px; margin: 1em; }
صورت منظم و هم سطح در div اصلي قرار گرفت.
خب حالا اگر خواستيم يك فوتر در زير باكس ها بسازيم بايد حتما از خاصيت clear استفاده كنيم تا خاصيت float براي فوتر اجرا نشود به اين شكل يكي از سه مقدار زيرا مي نويسيم كه در اينجا نياز به مقدار left است.
.after-box { clear: left / both / right ; }
اما با مقدار جديد خاصيت display ديگر نيازي به نوشتن clear براي به هم نريختن فوتر نيست فقط كافي است تا كلاس زير را براي باكس ها بنويسيد و پس از آن فوتر را بدون خاصيت clear و به هم ريختگي تعريف كنيد.
.box {
display: inline-block;
width: 300px;
height: 150px;
margin: 1em;
}
مهمترین صفت در CSS برای کنترل پیکربندی قطعا
display است. هر عنصری، با توجه به نوعش، یک مقدار پیش فرض برای display دارد. معمولا این مقدار پیش فرض برای بیشتر عنصر ها block یا inline است. یک عنصر با block معمولا عنصر سطح بلاک خوانده می شود مانند تگ div. به یک عنصر با inline عنصر درون خطی می گویند مانند تگ span.
none , یکی دیگر از مقادیر رایج برای display مقدار
none است. برخی عنصرهای خاص مانند script از این مقدار به صورت پیش فرض استفاده می کنند. در جاوا اسکریپت و جی کوئری از این ویژگی برای پنهان نمودن و پویای برخی است قسمت های صفحه وب، بدون حذف نمودن آنها استفاده می شود.
این کار با پنهان سازی به کمک
visibility کاملا متفاوت است. قرار دادن display به none جایی را که عنصر در آن بوده است را رزرو نمی کند، اما استفاده از visibility: hidden; یک فضای خالی را نگه خواهد داشت.
سایر مقادیر برای display مقادیر قابل پذیرش دیگری هم وجود دارند که کاربرد های خاص خودشان را دارند،
اين آموزش تمام شد اما سعي مي كنيم در پست هاي بعدي شما را بيشتر با پيكر بندي استاندارد سايت با css آشنا كنيم.
هیچ نظری موجود نیست:
ارسال یک نظر