طراحی وب سایت
درباره سایت
آخرین مطالب
امکانات وب
سبک دهي به عناوين :
اولين عنصري که در سايت به آن استايل مي دهيم تيتر موجود در صفحه است که آن را با تگ h1 مشخص مي کنيم، حالا بياييد چند استايل به اين تگ مان اضافه کنيم.
h1 {
Font-family: " Trebuchet MS ", Arial, Helvetica, San-serif;
}
اين خط css بيان مي کند که تمامي عناوين صفحه Trebuchet MS مي شوند در حاليکه ساير متون صفحه verdana خواهند بود.
h2 {
Font-family: byekan, Arial, Sans-Serif;
}
تمامي تيتر هاي سايت و عناوين از خط فوق استايل خود را مي گيرند در حالي که ساير متون سايت فونت تگ body يعني tahoma را مي خوانند.
body {
Font-family: Tahoma,Serif,Sans-Serif;
}
همانطور که مي بينيد براي فونت Trebuchet MS از دبل کتيشن استفاده شد، اما براي ساير فونت ها استفاده نکرديم، به طور کلي اگر اسم فونت انتخابي مان تک کلمه اي باشد نيازي به استفاده از کتيشن نيست در غير اينصورت براي نام فونت هايي که دو يا سه کلمه اي هستند(مثل: "Times New Roman") حتما از کتيشن استفاده مي کنيم.
design-web-92.jpg
جهت مشخص شدن موضوع مثال ديگري نيز براي شما مي زنم، به عنوان مثال در سايت شرکت وب اسکالا تيتر هاي صفحه byekan است و سايز متون صفحه Tahoma .
توضيح : يکي از مشکلاتي که در وب فارسي با آن مواجه هستيم، محدوديت فونت است که معمولا به 3 نوع فونت ختم مي شود اما اخيرا" امکان درج انواع فونت ها در صفحه وجود دارد .
چند نکته :
اگر مرورگر خود را refresh کردين و تغييرات را مشاهده نکردين، ابتدا بررسي کنيد و ببينيد که آيا پس از اعمال تغييرات CSS خود را ذخيره کرده ايد يا نه. اگر اين مورد درست بود بررسي کنيد و ببينيد که آيا لينک CSS خود را درست داده ايد و اسم آن را درست تايپ کرده ايد، آخرين مورد نيز ممکن است به دليل cache کردن مرورگرتان باشد، که در اين صورت براي مرورگر IE از دکمه R + Ctrl استفاده مي نماييد و براي مرورگر فاير فاکس Ctrl + F5 کمک مي گيريد، تا cache مرورگر خود را پاک نماييد.
حالا بياييد کمي ظاهر سايت را عوض کنيم، در اين قسمت ويژگي هاي بيشتري به تگ body مان مي افزاييم و ظاهر منو را نيز تغيير مي دهيم، CSS زير را به فايل CSS خود اضافه کنيد.
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
li{
font-size: small;
}
h2{
color: blue;
font-size: medium;
font-weight: normal;
}
p{
font-size: small;
color: navy;
}
حالا پس از ذخيره کردن فايل css تان مرورگر خود را يکبار ديگر refresh نماييد و تصويري مشابه با تصوير زير ملاحظه نماييد.
design-web-94.jpg
حالا توضيح خصوصيات اضافه شده در بالا:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
line-height: 125%;
padding: 15px;
}
خصوصيت background-color براي اکثر تگ هاي HTML کاربرد دارد و با روشهاي گوناگوني مي توان رنگ دهي به پيش زمينه سايت را اعمال کنيم. براي تعيين کردن رنگ پيش زمينه دو روش وجود دارد، يکي اينکه نام رنگ را بنويسيم، مثل؛ yellow, blue, white, red,.... و روش ديگر استفاده از اعداد دسيمال مانند؛ 4ab390# است. بهترين روش و راحت ترين آن براي انتخاب و استفاده از رنگ مورد دلخواه خود در سايت استفاده از color picker نرم افزار photoshop است که به راحتي رنگ را به صورت عددي در اختيار شما قرار مي دهد.
نحوه استفاده از اين ارقام نيز بدين صورت است:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12...
خصوصيت بعدي line-height است که با افزايش دادن مقدار آن مي توان فواصل بين خطوط متن را بيشتر کرد و خصوصيت padding نيز براي ايحاد فاصله ميان تگ مورد نظر و عنصر خارجي آن که درون تگ body قرار دارد مي باشد. اين فاصله را مي توان براي هر چهار جهت بالا، پايين، چپ و راست و با يک يا دو و يا تنها سه جهت آن قرار داد. انشالله در فصل بعدي در مورد padding به طور کامل توضيح خواهم داد.
تنها نکته باقي مانده مقدار دهي به padding است که به صورت عددي در مبناي پيکسل استفاده مي کنيم، مانند px15 و اين مقدار باعث ايجاد فاصله براي body مي شود که مطالب سايت از هر چهار جهت به اندازه px15 فاصله يابد. همانطور که قبلا نيز اشاره کرديم، واحد پيکسل براي سايز دهي به تصاوير نيز به کار مي رود، اصولا پيکسل کوچکترين واحد موجود در صفحه نمايش است.
همانطور که گفتيم به متون سايت نيز مي توان هم رنگ و هم سايز داد، همانطور که در تصوير فوق ديديد رنگ استفاده شده در اينجا ، آبي است.
p{
font-size: small;
color: navy;
}
براي منو نيز سايز فونت را small در نظر گرفتيم که با توجه به نوع مرورگر سايز پيش فرض small آن ، در مرورگرهاي مختلف تفاوت دارد، محدوده مقدار دهي آن small, medium, large, x-large و xx-large است.
براي تگ h1 نيز سبک جديدي از استايل دهي را قرار مي دهيم، چون اين تگ براي تيتر اصلي صفحه استفاده مي شود، سايز آن را بسيار بزرگ يا همان x-large انتخاب کرديم.
h1{
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: x-large;
}
و براي تگ h2 سايز فونت را متوسط برگزيديم.
و تگ p تنها سايز و رنگ گرفته است .
با اين مثال ها سبک دهي به عناصر را آغاز کرديم ولي تازه شروع کار است .
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: pouya