طراحی وب سایت
آخرین مطالب
امکانات وب
Font-family
با اين خصيصه هر فونتي را که بخواهيد مي توانيد به متون سايت خود اعمال کنيد، تنها توجه کنيد که نحوه مقدار دهي آن همانند مثال هاي قبلي است که به طور مفصل راجب به آن توضيح داده ام.
Font-size
مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:
1- نام هاي آماده براي سايز دادن به فونت ؛
• XX-small
• X-small
• Small
• Medium
• Large
• X-large
• Xx-large
2- فونت دهي به صورت نسبي؛
• به صورت درصدي : %120
• به صورت 1.2em : em
3- فونت دهي به صورت مطلق؛
• به صورت pixel ، مانند: px12
• به صورت point، مانند: pt12
قطعاً زمانيکه بخواهيم اين امکان را به خوانندگان مطالب وب سايتمان بدهيم که با تغيير سايز صفحه مرورگر خود ( مثلا سايز %150 به جاي %100) بتوانند سايز فونت متناسب با آن را ببينند فونت دهي به صورت نسبي را مد نظرمان قرار مي دهيم.
براي مطالعه بيشتر، اين مقاله را مطالعه نماييد.
Font-weight
ضخامت فونت است که به دو صورت normal يا bold مقدار دهي مي شود.
Font-style
سبک فونت است که به دو صورت normal يا italic مقدار دهي مي شود.
Text-decoration
مدل دهي به متن به صورت: none, underline, overline و يا line-through است.
نکته : قبل از شروع به کار و استفاده از css هاي متنوع، ابتدا از css اي که تا کنون آن را ساخته ايد يک back up بگيريد و سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.
تمامي موارد بالا را مي بايست در مرورگر خود تست کنيد تا با آنها آشنا شويد ولي حالا بيائيد استايل دهي بيشتري برروي عناصر موجود در سايتمان اعمال کنيم.
- پاراگراف زير را پيدا کرده و تگ em را که جهت نمايش بيشتر يا به عبارتي تاکيد بهتر بر روي آن کلمه بکار رفته است را اضافه کنيد.
<p>And when we're not diving, we often meet up in a local pub
to talk about our recent adventures (<em>any</em> excuse,
eh?).</p>
- فايل را ذخيره کرده و در مرورگر خود به صورت local مشاهده کنيد، تصويري که مشاهده مي کنيد بايد مشابه عکس زير نمايش يابد.
design-web-101.jpg
- حالا فايل css خود را باز کرده و استايل زير را به آن اضافه نماييد.
em {
Font-style: normal;
Text-transform:uppercase;
{
حالا فايل css را ذخيره کرده، سپس صفحه نمايش خود را refresh نماييد، تصويري که مشاهده مي کنيد مي بايست مشابه عکس زير باشد.
design-web-102.jpg
مشابه اين مثال را مي توانيد در منوي سمت راست خدمات طراحي سايت وبسکالا مشاهده کنيد. اگر از تگ em در متون انگليسي استفاده نماييم استايل آن به صورت پيش فرض italic خواهد بود، (مانند مثال زير) که اگر بخواهيد استايل آم متن هم مانند ساير متون در آم پاراگراف باشد به آن استايل normal مي دهيم و اگر بخواهيم با حروف بزرگ ( به جز زبان فارسي )نمايش يابد از uppercase استفاده مي کنيم.
نکته :
برخي از تگ هاي و عناصر HTML هستند که به مرور زمان با تگهاي ديگري جايگزين مي شوند و از استفاده از آنها صرف نظر مي گردد، به عنوان مثال تا چند وقت پيش تگي که براي bold کردن يا ضخيم کردن متون يه کار مي رفت <b> بود که به جاي آن هم اکنون از تگ strong استفاده مي شود. اهميت اين موضوع زماني است که افراد نابينا براي کار با وب سايت ها از نرم افزارهايي استفاده ميکنند که بجاي نمايش صفحات وب آن را براي کاربر خود مي خوانند که به اصطلاح به آن ها screen reader مي گويند.در اينجاست که آنها در هنگام خوانندن مطلب متني را که با تگ em مشخص شده است را مهمتر ميدانند تا متني را که درون تگ i قرار گرفته همچنين موتورهاي جستجو در گوگل به متني که با تگ strong ضخيم شده است بيشتر توجه ميکنند و به عنوان متن مهمي که در يک متن استفاده شده است مي نگرند تا به متني که با تگ b ضخيم شده باشد.
نگاهي به عناصر درون صفحه:
در پاراگراف زير همانطور که ملاحظه مي کنيد، براي استايل دهي به پاراگراف ها استايل زير تعريف شده است، که توسط تگ body نوع فونت اين متون مشخص گرديده است.
Body{
Font-family: verdana, Helvetica, Arial, San-serif;
}
P{
Font-size: small;
Color: navy;
}
خط بالا به ما ميگه که هر تگ p که در صفحه بود استايل بالا را بگيرد.
اما دليل ما از به کاربردن اين مثال براي اين است که مي خواهيم پاراگرافي را متمايز از ساير متون وب سايتمان کنيم و آن اولين پاراگراف متن ما است. حالا براي متمايز کردن اين پاراگراف براي آن به صورت زير عمل مي کنيم:
<div id="tagline">
<p>Diving club for the south-west UK - let's make a splash! </p>
< /div>
متن درون اين تگ از خصوصيات گرفته شده ساير متون پيروي نمي کند و در عوض خصوصيت مربوط به div خود را مي گيرد که شامل خصيصه خاصي است که با id اي به نام tagline تعريف شده است که اين خصوصيت تنها به براي همين تگ خواهد بود. حالا براي تعريف درون فايل css براي آن خصوصيات زير را تعريف مي کنيم:
#tagline p {
Font-style: italic;
Font-family: Georgia, Times, Serif;
}
فايل css را ذخيره کرده و سپس پنجره مرورگرتان را refresh کنيد . صفحه شما نيز مي بايست مانند عکس زير باشد.
design-web-103.jpg
براي هر متني که درون تگ p قرار گرفته باشد و id آن tagline باشد، نوع فونت آن italic و از نوع Georgia يا Times و يا Serif خواهد بود.
يعني هر تگ p که داخل آي دي tagline قرار گرفته است و نه p هاي ديگر .
علامت # در CSS به عنصري اشاره مي کند که شامل يک Id خاص با خصوصيات مربوط به خود است. در مورد Id در قسمت هاي جلوتر به طور کامل خواهيم پرداخت.
گزينشگر متني
#tagline p يک گزينشگر متني است، در اينجا چند مثال ديگر برايتان مطرح مي کنم.
Navigation a{#
Text-decoration: none;
}
براي هر تگ a اي که درون تگي با navigation =id است، آن لينک فاقد زير خط در هنگام کليک کردن آن لينک خواهد بود.
#footer {
line-height: 150%;
}
درون تگي که id footer دارد، تمامي متون داراي %150 فاصله ميان خطوط خواهند بود.
h1 strong {
color: red;
}
هر تگ strong ي که درون تگ h1 قرار گيرد رنگ آن قرمز خواهد بود.
سبک دهي گروهي
گاهي اوقات مي بينيد که در هنگام استايل دهي يکسري از تگ ها هستند که خصوصيات يکساني دارند اما در فايل CSS براي هر يک از آنها کلاس و يا تگ جداگانه اي در نظر گرفته شده مثلا:
h1 {
color: yellow;
background-color: black;
}
h2 {
color: yellow;
background-color: black;
}
h3 {
color: yellow;
background-color: black;
}
اين کار باعث مي شود تا علاوه بر اينکه حجم فايل CSS تان زياد شود فايلتان نيز کثيف به نظر برسد، به همين دليل در اين مواقع بهتر است مانند زير عمل نماييد:
h1, h2, h3 {
color: yellow;
background-color: black;
}
توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,) کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.
حالا بياييد تا در پروژه مان دسته بندي کردن عناصر را انجام دهيم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ايم اما به زودي اين کار را خواهيم کرد.
فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
حالا فايل css را ذخيره کرده و پنجره مرورگر خود را ويرايش نماييد تا تصويري چون عکس زير را ببينيد.
design-web-104.jpg
يک سوال ؟
به مثال زير دقت کنيد
h1, h2, h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
background-color: navy;
color: white;
}
h3 {
color: red;
}
تگ h3 چه رنگي مي گيرد ؟
يک بار تگ h3 سفيد شده و بعد از آن رنگ آن قرمز شده پس رنگ قرمز به خود مي گيرد .
البته ارجعيت دستورات سي اس اس بحث خود را دارد که در دوره هاي بعدي حتما به آن مي پردازيم .
ما را در سایت طراحی وب سایت دنبال میکنید
برچسب: طراحی وب سایت,طراحی سایت,طراحی وب,
نویسنده: parham
بازدید: 238