به نام خدا
CSS - :
در طراحي صفحات وب ما مي توانيم براي زيباتر كردن و بالا بردن بارگذاري صفحه خودمان از Stylesheet ها استفاده نماييم .(در اين جا چگونگي اعمال stylesheetها با استفاده از cssبيان شده است.)
cssيكي از ابزارهاي قدرتمند در طراحي صفحات وب است و بجاي تگهاي از رده خارج شده از آنها استفاده مي شود و مرورگرها نيز از آن پشتيباني مي كنند. و كار با آن بسيار آسان است.
استفاده از css در صفحات وب:
دستورات css را هم مي توانيم به طور مستقيم در سند HTML صفحه مورد نظرمان منظور كنيم و هم مي توانيم به طور يك فايل جدا گانه كه به صفحه HTML ما پيوند خورده است مورد استفاده قرار دهيم.
در زير نحوه پيوند زدن يك فايل css به صفحه HTML توضيح داده شده است:
< link rel="stylesheet " type="text/css" href="url.css " />
درقسمت href شما بايد آدرس فيل cssخود را وارد نماييد .
همچنين ما مي توانيم دستورات css را در فايل HTML مان هم وارد كنيم كه به طريق زير عمل مي نماييم:
<style type="text/css">
</style>
بين دو تگ style شما مي توانيد دستورات خود را وارد نماييد همچنين اين دو تگ به همراه دستوراتشان بايد در قسمت <head> صفحه HTML وارد شوند.
Css را مي توان به طور مستقيم در تگ وارد كرد براي اين كار شما بايد به شكل زير عمل نماييد:(با نوشتن كلمه style در تگ مورد نظر)
<a href=http://irandev.blogfa.com style="background-color:#00ff00;">طراحي وب</a>
انتخاب تگها براي دادن يك يا چند خاصيت به آنها:
براي انتخاب المان يا تگ : { دستورات مربوط به اين تگ } نام تگ
براي انتخاب چند المان : { دستورات مربوط به اين تگها { نام تگ سوم , نام تگ دوم , نام تگ اول
براي انتخاب المان برحسب id : { دستورات مربوط به اين تگ } تگ #id
براي انتخاب المان بر حسب كلاس: { دستورات مربوط به اين تگ } كلاس تگ مورد نظر .
- برخي دستورات CSS :
در انتهاي دستورات css بايد كاراكتر ; را تايپ نماييد .
مقادير موجود در css را نبايد در داخله " " قرار دهيد مگر نام فونت هايي را كه از چند قسمت تشكيل شده اند.
براي مايل نوشتن و يا كج نوشتن يك متن از دستور ; مقدار مناسب font-style: استفاده مي نماييم. مقدار مناسب براي اين دستور italic است. براي اينكه حروف به صورت عادي نمايش يابند مي توانيد مقدار اين دستور را برابر normal قرار دهيد.( براي اين دستور مي توانيد از مقدار Oblique استفاده نماييد كه اين مقدار هم حروف را به صورت مايل نمايش مي دهد). تفاوت دو مقدار italic و Oblique در اين است كه نسخه italic يك فونت معمولا به وسيله طراح فونت ساخته مي شود اما نسخه Oblique به وسيله كامپيوتر توليد مي شود.
براي اينكه نوشته را به صورت پررنگ در آوريم از دستور; مقدار مناسب font-weight: استفاده مي نماييم. مقادير مناسب براي اين دستور عبارتند از:
Bold , bolder , lighter كه به ترتيب از چپ به راست نسبت به يكديگر پررنگ تر هستند همچنين شما مي توانيد از عدد هم براي مقدار اين دستور استفاده نماييد.
براي تنظيم اندازه فونت از دستور ;مقدار مناسب font-size: استفاده مي نماييم. مقدارهاي مناسب براي اين دستور عبارتند از: شما مي توانيد براي اين دستور از عدد بر حسب px و يا em استفاده نماييد.همچنين مي توانيد از اين مقادير نيز استفاده نماييد: xx-smal , x-smal , medium , large , x-large , xx-large .
با استفاده از دستور زير مي توانيد حروف انگليسي را به بزرگ و كوچك تبديل كنيد:
Text-transform: uppercase , lowercase , none ;
در دستور بالا بايد يكي از سه مقدار را قرار دهيد .
براي تنظيم مكان متن از دستور زير استفاده مي كنيم :
Text-align: right , center , left , justify ;
در مثال بالا هم بايد يكي از چهار مقدار مشخص شده را قرار دهيد .
براي تنظيم فاصله بين خطوط از دستور زير استفاده مي كنيم :
Line-height: 3px ;
در دستور بالا به جاي مقدار 3px مي توانيد از هر مقداري كه مي خواهيد استفاده كنيد.
به وسيله دستور زير مي توانيد فاصله بين حروف را تنظيم نماييد و مقدار آن هم با عدد مشخص مي شود :
Letter-spacing: 5px;
دستور زير فاصله بين كلمات را تنظيم مي نمايد و مقدار آن هم با عدد مشخص مي شود :
Word-spacing:3px ;
براي ايجاد كادر از دستورات زير استفاده مي كنيم :
Border-style: solid ; نوع كادر
Border-width: 3px ; ضخامت كادر
Border-color: black; رنگ كادر
مقادير مناسب براي خصيصه border-style عبارتند از:
None ,dotted , dashed,solid,double,groove,ridge,inset,outset
مقدار solid يك خط است.
مقدار dotted به صورت نقطه چين است.
مقدار none به صورت عادي و بدون كادر است.
و بقيه مقادير نيز هر كدام يك شكل خاص دارند .
توجه كنيد خاصيت هايي كه با عدد مشخص مي شوند بايد با يك واحد مانند px همراه باشند. به جز خاصيتهايي كه مقدار آنها برابر با 0 است.
براي تنظيم رنگ پس زمينه از دستور ; نام رنگbackground-color: استفاده نماييم. همچنين رنگ دلخواهمان را با استفاده از اعداد هگزادسيمال به صورت مي توانيم #rrggbb مشخص نماييم.
براي انتخاب تصوير پس زمينه بد مي توانيد از دستور ;(' آدرس تصوير ') background-image:url استفاده نماييم.
موفق باشيد
منبع: Par30theme.Blogfa.Com