Background-color و گزينش گر متني

ساخت وبلاگ

آخرین مطالب

امکانات وب

Background-color و گزينش گر متني

 با  درود به همه دوستان با قسمت  دهم آموزش طراحي سايت از پايه در خدمتتون هستم و اميدوارم اين مقاله هم مانند مقاله هاي گذشته بازخورد هاي خوبي داشته باشد .

Background-color و گزينش گر متني و سبک دهي گروهي صحبت خواهم کرد .
 
تا اينجاي کار به چند مثال ساده اما کاربردي  با CSS  براي استفاده در وب سايت نگاهي انداختيم. براي استايل دهي خصوصيات بسيار زيادي وجود دارد که البته طراحی وب سایت  من قصد دارم آنها را اينجا ليست کنم
 
Color
همانطور که قبلا هم ديديد براي رنگ دادن به عناصر استفاده مي شود.
 
Background-color
به دو صورت مقدار دهي مي شود يا نام رنگ (blue, red, green,..)  يا با اعداد دسيمال،  مانند: #3acbef
 
Font-family
با اين خصيصه هر فونتي را که بخواهيد مي توانيد به متون سايت خود اعمال کنيد، 
Font-size
مقدار دهي آن مي تواند مثل يکي از گزينه هاي زير باشد:
1-    نام هاي آماده براي سايز دادن به فونت ؛
 
•    X-small   
•    Small       
•    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  است.
 
 سپس با استايل هاي مختلفي که در بالا ياد گرفتيد استايل هاي مختلفي را بسازيد.
تمامي موارد بالا را مي بايست در مرورگر خود تست کنيد تا با آنها آشنا شويد ولي حالا بيائيد استايل دهي بيشتري برروي عناصر موجود در سايتمان اعمال کنيم.
 
-    ابتدا فايل about.html  را باز کنيد (در تمرين هاي قبلي ساخته شده است)
 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>About Bubble Under: who we are, what this site is
    for</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
    <div id="header">
    <div id="sitebranding">
    <h1>BubbleUnder.com</h1>
    </div>
    splash!</p>
    </div>
    </div> <!-- end of header div -->
    <div id="bodycontent">
    <h2>About Us</h2>
    the south-west UK who meet up for diving trips in the
    summer months when the weather is good and the bacon
    rolls are flowing. We arrange weekends away as small
    <p>Although we're based in the south-west, we don't stay on
    our own turf: past diving weekends away have included
    trips up to Scapa Flow in Scotland and to Malta's
    numerous wreck sites.</p>
    <p>When we're not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse,
    eh?).</p>
    </div> <!-- end of bodycontent div -->
 
  پاراگراف زير را پيدا کرده و تگ  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>
 
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{
         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 است، آن لينک فاقد زير خط در هنگام کليک کردن آن لينک خواهد بود.
 
درون تگي که 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;
    }
 
    h1, h2, h3 {
     color: yellow;
     background-color: black;
    }
 
 
توجه داشته باشيد که براي جداکردن تگ ها از همديگر از کاراکتر ( ,)    کاما ، استفاده کرديم که اين علامت را مي توانيد به معناي يا تعبير کنيد.
حالا بياييد تا در پروژه مان دسته بندي کردن عناصر را انجام دهيم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ايم اما به زودي اين کار را خواهيم کرد.
فايل css تان را با اضافه کردن css زير به انتهاي آن ويرايش کنيد.
 
    h1, h2, h3 {
     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
     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;
    }
طراحی وب سایت...
ما را در سایت طراحی وب سایت دنبال می کنید

برچسب : طراحی وب سایت, طراحی سایت, طراحی وب, نویسنده : zahra webdesign23 بازدید : 305 تاريخ : دوشنبه 21 مرداد 1392 ساعت: 16:52

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه