CSS 2 Quick-start Tutorial in Persian

وبكارگاه آموزشي توسعه وبكارگاه آموزشي توسعه وب و ي وز وبر و ي وز رCSSCSS - - بخش دوم بخش دوم

عباس نادري: ارائهانجمن علمي دانشجوييمهندسي كامپيوتردانشگاه شهيد بهشتي 11نسخه نسخه

CSSچيست ؟

•CSS يا Casacading Style Sheets است اسناد ظاهري بندي قالب استاندارد يك.•CSS(HTML) .شود ميمنظور(HTML)وباسنادبندي قالببرايCSSاستفادهترينمعمول• وب توسعه و شود تفكيك بندي قالب از محتوا تا شد آن بر تصميم ها، وب شدن پيچيده با•

.گردد تسهيل•CSSدارداصلينسخهسه: ري

•CSS .شد استاندارد W3C توسط 1996 سال در :1•CSS .رود ميبكاراستانداردعنوانبههنوزوشداستانداردW3Cتوسط1998سالدر:2 ي•CSS .است W3C توسط توسعه دست در هنوز :3

•CSSكندمي سريع وسادهراوبتوسعهشدتبه مجدد،استفادهامكاندليلبه. نيلب يريعوراوبوبجاا.بود خواهد مقدور تيمي قالب در آن از استفاده با صفحات بندي قالب همچنين

•CSSقاز اط گ خا گتازنخشانقالان خا ان CSSانتخابگر موتور ازهمچنين.بخشدميسرعترا بنديقالبانتخابگرهاطريقازCSS شود مي برده فراوان بهره ديگر كاربردهاي در.

•Layout Engine: سند كه كاوشگرها در ايست برنامه HTML فايل و CSS دريافت را د كخك اف دفحهگ ل دت ا ن .نمايدميتوليدصفحهرويبرگرافيكيخروجيكرده،•Selector Engine: هاي برچسب از اي زيرمجموعه كه كاوشگر روي بر موتوريست

HTMLكندميانتخابرا.

•CSS كنيم مي بررسي آنرا مثال چند با دارد، اي ساده بسيار گرامر:Template:Selection {

Property: value;P lProperty: value;//Comment /*Comment */

}}

Example:div.main {

background-color:#777777;b d idth 1border-width: 1px;border-style: solid;font-family: ‘Tahoma’;font family: Tahoma ;

}

•CSS خواهيم آشنا بيشتر آنها با ارائه اين طي در كه دارد نيز مختلفي گرامري جزئيات .شدشد:كرد استفاده CSS از توان مي مختلف جاي سه در•

.افزود HTML در آنرا و نوشت جداگانه فايلي در را CSS توان مي :CSS هاي فايل• ياHead در Style برچسب افزودن با توان مي :HTML فايل داخل در Style هاي برچسب•

Body سند، يك CSS كرد تعريف..كردتعريف آنرا CSSبرچسب،هرصفتهايازيكيدر توانمي:هابرچسببرايStyleصفت•.شود مي اعمال برچسب آن براي تنها بندي قالب و نيست مطرح انتخابگر ديگر حالت اين در

.يابد مي افزايشترتيببهآنهااولويت.باشند همزمانتوانندميCSSتعريفنوعسه• نويروع شروز يزInline( سوم حالت از استفاده• CSS( زير را قالب از محتوي جدابودن و شود نمي توصيه

كندمراحتترراكارآنازاستفادهخاصجاهايدرامابردمسوال .كندميراحتترراكارآناز استفادهخاصيجاهايدرامابرد،ميسوال

:HTML در آن از استفاده و جدا CSS فايل در تعريف•//S Fil//SomeFile.css

input[text] {

width:200px;

background-color:#000000;background color:#000000;

border:solid 0px;

}



<head>

<link rel="stylesheet" href=“SomeFile css" type="text/css" /><link rel stylesheet href SomeFile.css type text/css />

</head>

:HTML سند بدنه در CSS تعريف•h d<head>

<style>

Div {

color:#ff0000;color:#ff0000;

text-align:center;

}

P {

font-size: 16px;}

</style></style>

</head>

:برچسب يك صفت در CSS تعريف•di l ‘b k d l bl k l hi ’<div style=‘background-color:black;color:white;’>

<p style=‘font-family:tahoma;’>

This is some text with tahoma font

</p></p>

</div>

چگونگي انتخاب برچسبها

انتخابگرها از بايد شود، اعمال صفحه يك اشياء كدامين به CSS يك اينكه كردن مشخص براي•فا خانا خااHTMLفكشاكگان كان ميسپس و كند ميانتخابراHTMLصفحهيكدر شيءچنديايكگرانتخابهر.نموداستفاده.كرد اعمال آن به را نظر مورد هاي قالب توان

اوليهنيازهاي كه حديدربخشايندربنابرايندارند سزاييبهقدرتوتنوعCSSانتخابگرهاي••.كرد خواهيم بررسي را آنها شوند مرتفع

:زير قالب به هستند استفاده قابل ها CSS تعريف اوليه نحوه دو در ها انتخابگر•

SelectorStatement {SelectorStatement {

Css Properties & Values;

}

* : ها برچسب تمام انتخاب

t N tagName:خاصهايبرچسبانتخاب

ParentTag :ديگر برچسب يك هاي زيربرچسب از برچسبي انتخاب DescendantTag

ParentTag : ديگر برچسب يك فرزندان از برچسبي انتخاب > ChildTag

Tag1:ديگربرچسبيكازبعدبرچسبيانتخاب + Tag2 Tag1:ديگربرچسبيكازبعدبرچسبيانتخاب + Tag2

Tag[attrib=“value”] :خاص صفتي با برچسبي انتخاب

:خاصهايوضعيتدربرچسبيكآنتخابآ

Tag:hover Tag:link استرويشماوسكهبرچسبي نشدهديدهلينك

Tag:active كليك درحال برچسب

Tag:focus ب چ صفحهفعالب

Tag:visited شده ديده لينك

Tag:focus صفحهفعالبرچسب

كه صفاتي .باشد داشته را خاصي صفات تواند مي HTML در بچسب هر شد، ذكر قبال كه همانطور•CSSكا classفكك idاا كفاااخ classصفتدوكنند،ميكمكمابهCSSدر , idيكبه صفت دو ايندادناختصاصبا.هستند.كرد كنترل سادگي به آنرا CSS ويژگيهاي توان مي HTML در برچسب

CSS ويژگيهاي كهدادقرارايدستهجزوآنراتوانمي ، برچسبيبرايخاصكالسيكتعريفبا••

.شود اعمال آنها همگي روي بر خاصي مشترك

Unique( منحصره مشخصه يك تعريف با• Identifier( هاي كنترل توان مي برچسب، يك براي .كرداعمالبرچسب آن رويبرجاوااسكريپتوCSSطريقازخاصي قزي پور ر رلرچنرورو

اينصورت غير در باشند، يكسان نبايد HTML سند يك در برچسبي دو هيچ id كه گردد توجه بايد•شقابلنتايج نپ اهدب دنخ ب .بودنخواهدبينيپيشقابلنتايج

* {font-family: “Tahoma”, “Trebuchet”,”MS Sans Serif”

}}div.Container {

background-color:#777777;border-width: 1px;

}P#title {

font-weight:bold;}}H1 + P {

font-style:italic;}}input [type=‘button’] {

border-style:none;}Body Form > input[type=‘text’] {

text-align:center;}DIV P * [title] {DIV P * [title] {

color:#ffffff;}

گروهي صورت به را آنها توانيم مي كنيم، اعمال يكجا انتخابگر چند به را خاصي CSS اينكه براي•ا :دهيمقرارق

div.Container , p , input[type=‘text’] {

font-family: ‘Tahoma’, ‘Comic Sans MS’ ;

}}

مي باقي آنها آخرين شوند، اعمال خاص برچسب يك به CSS يكسان دستور چند كه صورتي در •.ماندماند

• CSSشرايط به نسبت( پويا مقادير تواند مي جاوااسكريپت عبارات از استفاده با Client( به را Propertyكنداعمالها:

Width: expression( document.width /2 )px;

CSS 2مشخصه هاي استاندارد

oBackground : مشخصات تمام تنظيم براي اي خالصه Background

oB k d Att h t ( ll fi d)oBackground-Attachement (scroll,fixed):درتصوير قرارگيريوضعيت Background، كه صورتي در fixed،كرد نخواهد حركت آن صفحه پشت صفحه جابجايي با باشد.

oBackground-color (RGB Value) : صفحه پشت رنگ

oBackground-image:مقدارياnoneازاستفادهباياوگيردميURL(adress)يك g gزورير)وب آدرس( تصويري فايل آدرس

oBackground-position:ي topانندقاد left center center oBackground position:مانند مقاديريtop left, center center , …

oBackground-repeat: مي مشخص آنرا تكرار روش شود، استفاده تصوير از كه صورتي در ,no-repeatازعبارتندمجازمقادير.كند repeat-x,repeat-y,repeat

oBorder: گيرد مي رنگ و نوع عرض، ترتيب به حاشيه، مشخصات تنظيم براي اي خالصه.

oB d idthآ oBorder-width:اندازهديگرهايواحدودرصدعدد،به)آن ضخامت(حاشيهعرض

oBorder-color: به حاشيه رنگ RGB

oBorder-style: مقادير از حاشيه نوع none, hidden, dotted, dashed, solid,

double, groove, ridge, inset, outset, g , g , ,

oاتغا ظ ااشطت لفن ان)اااال(خ اات oچهاراز توانيد مي)راستچپ،پايين،باال،(مختلفنواحيحاشيهبهمربوطتنظيماتتغييربراي:مثال براي نماييد، استفاده نظر مورد طرف نام همراه به باال ويژگي

oBorder-left-width

oBorder-top-color

oBorder-bottom

oCursor: از عبارتند مجاز مقادير سازد، مي معين را ماوس گر اشاره شمايل url(file), auto,

crosshair default pointer move e resize ne resize nw resize ncrosshair, default, pointer, move, e-resize, ne-resize, nw-resize , n-

resize, se-resize, sw-resize, s-resize, w-resize , text, wait , help

oDisplay:ازعبارتندمجازمقاديربرچسب،يكنمايشنحوهnone, inline, block, list-

item, run-in, compact, marker, table, inline-table , ….

oFloat: از عبارتند مجاز مقادير خاص، طرفي به برچسب يك شناوري و گرايش left, right,

none

oPosition: از عبارتند مجاز مقادير سند، يك در برچسب يك قرارگيري نحوه Static,

Relative Absolute FixedRelative, Absolute, Fixed

oHeight: اي اندازه مشخصه .سند در برچسب يك ارتفاع

oLi H i htoLine-Height:سند در متنخطدوبينفاصله

oMax-Height: باشد داشته تواند مي برچسب يك كه ارتفاعي حداكثر

oMin-Height: برچسب يك ارتفاع حداقل

oWidth:برچسبيكعرض oWidth:برچسبيكعرض

oMax-Width: برچسب يك عرض حداكثر

od hoMin-Width:برچسبيكعرضحداقل

oFont: قلم و فونت كامل مشخصات اعمال براي ميانبري

oF t F il oFont-Family:شودانتخاب ها سيستمازپشتيبانيبهبستهقلمهااز ليستياستبهترقلم،نام..شوند مي داده نمايش خوب Tahoma قلم با فارسي هاي نوشته معموال

oFont-Size: مقادير از يكي تواند مي هم شود داده قرار مقداري انواع از تواند مي هم .قلم اندازه ,xx-smallباشدمجاز x-small, small, medium, large, x-large, xx-large,

smaller, larger

oFont-Stretch:ازيكيياعدديمقداريا)آنحرفهايمابينافقيفاصلي(فونتكشيدگي oFont Stretch:ازيكي يا عدديمقداريا)آنحرفهايمابينافقيفاصلي(فونتكشيدگي,normal مقادير wider, narrower, ultra-condensed, extra-condensed,

condensed semi-condensed semi-expanded expanded extra-expandedcondensed, semi condensed, semi expanded, expanded, extra expanded,

ultra-expanded

oFont-StyleقادازكNormal Italic Oblique oFont-Style:مقاديرازيكيNormal, Italic, Oblique

oFont-Weight: مقادير از يكي normal, bold, bolder, lighter عددي مقدار يا و

oList-Style: گيرد مي را ليست تصوير و موقعيت ، نوع ترتيب، به .ليست تنظيمات براي ميانبري

oLi t St l Il(fil ) oList-Style-Image:none , url(file)

oList-style-Position: inside, outside

oList-Style-Type: از عبارتند مجاز موارد ليست، موارد شكل none, disc, circle,

square, decimal, decimal-leading-zero, lower-roman, upper-roman,q , , g , , pp ,

lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin,

hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana,hebrew, armenian, georgian, cjk ideographic, hiragana, katakana,

hiragana-iroha, katakana-iroha

oMarker Offsetل ااالفا ا(ش )autoاق oMarker-Offset:يامقدار( نوشتارازعالمتفاصلهauto(

oMargin: مي را چپ و پايين راست، باال، هاي كناره اندازه ترتيب به .كناره تنظيمات براي ميانبري د د(گ تگ )ا )ساعتگرد(گيرد

oMargin-left, Margin-right, Margin-top, Margin-bottom: مقدار كناره، مقدار auto يا

oPadding:چپ و پايينراست،باال،ترتيببهگذاري،اليي مشخصاتتنظيمبرايميانبري

oPadding-left, Padding-right, Padding-top, Padding-bottom: اليي مقدار autoيامقدارگذاري، autoيامقدارگذاري،

oOutline: عرض و نوع رنگ، ترتيب به حاشيه، خط تنظيمات تمام براي ميانبري

oO tli lRGB oOutline-color:بهحاشيهخطرنگ RGB

oOutline-style: از عبارتند مجاز انوع شيء، يك حاشيه خط نوع none, dotted,

dashed, solid , double , groove, ridge, inset, outset

oOutline-width:مقاديرازيكيياعدديمقدارحاشيه،خطقطوري thin, thick, رزييروريmedium

oOverflow: مي معين مشخصه اين نگيرند، جاي آن در برچسب يك محتويات كه صورتي در تاقاافاتفاقكا Visibleاا Hidden Auto Scroll ,Visibleاز عبارتندمجازمقادير.بيافتداتفاقيچهكهسازد Hidden, Auto, Scroll

oPosition: از عبارتند مجاز مقادير سند، به نسبت برچسب قرارگيري نحوه Static, Relative,

Absolute, Fixed

oVertical-Align:مشخص را خود پدربرچسبداخلدربرچسبيكعموديقرارگيرينحوه,baseline از عبارتند مجاز مقادير .كند مي sub, super, top, text-top, middle,

bottom, text-bottomعدديمقدارياو رو

oZ-Index: ها برچسب ديگر پشت جلو يعني( صفحه در سوم بعد در قرارگيري اولويت(. Auto يا عدديك عدديك

oBorder-Collapse: بهم خط مجموعه يك يا و باشند جدا جداول حواشي كه سازد مي معين Separateاقااش Collapse Separateمجازمقادير.باشندپيوسته , Collapse

oBorder-Spacing: كه صورتي در تنها جدول، حاشيه دو ميان فاصله Seperate باشد.

oٍEmpty-Cells: مدل در خالي هاي سلول كه كند مي مشخص Seperate و شوند داده نمايش Show/Hideمجازمقادير.خير يا

oTable Layout: جدول، يك سلولهاي نمايش نحوه الگوريتم Auto/Fixed

oColor: سازد، مي مشخص را متن يك رنگ RGB

oDi tiLTR/RTL oDirection:مجازمقاديرسازد،ميمشخصرابرچسب يك)محتوياتو(متنجهت LTR/RTL

oText-Align: مجاز مقادير Left, Right, Center, Justify

oText-Decoration: از عبارتند مجاز مقادير متن، به افكتي افزودن none, underline,

overline, line-through, blink, g ,

oText-Indent: عددي مقدار .متن يك خط اولين رفتگي تو

oWord Spacingل اافا ااnormalكل ق oWord-Spacing:متن، يكلغاتميانفاصلهnormalعدديمقداريا

oLetter-Spacing: متن، يك حروف ميان فاصله normal عددي مقدار يا

CSSتسلط كامل بر

oدر CSS كرد مشخص توان مي شيوه دو به را رنگها:o4اRGBا آ oبيتي24مقدارتعيينRGBآنهاoرنگ نام از استفاده

oرنگ200 حدود دومروشدراما دارند،وجودانتخاب برايمختلفرنگميليون16اولروشدر.هستند استفاده قابل مختلف هاي نام با

oبنويسيد را رنگ نام كافيست آن، نام با رنگ كردن مشخص براي: Cyan, Purple

oرنگكردنمشخصبرايRGB،مقدارترتيببه#عالمتدادنقرارازپسRوGوBدررا oرنگكردنمشخصبرايRGB،مقدارترتيببه#عالمتدادنقرار ازپسR و G و BدرراFFFFFF# :كنيم مي وارد 16 مبناي , #00FF00

oگكااRGBكل oرنگكردن مشخصبرايتوانميهمچنينRGBكردعمل روبروصورتبه:RGB(100,255,10) يا وRGB(70%,20%,100%)

oدر اي اندازه مقادير تمامي CSS همان واحد ترين اي پايه .پذيرند مي را متفاوتي هاي واحد Pixelاكاpxا اان اگشخق تگا اا Pixelباكهاستpxازعبارتندديگرواحدهاي.گرددمي مشخصمقدارانتهايدر:

o%: درصد!

ooIn:اينچ

oCm: سانتيمتر

oMm: ميليمتر

oEm: فونت اندازه

oPt: 1/72 اينتچ

oPc:12ptp

oPx: نقطه يك

oشفافيت (Transparency) گرافيكي كارت كه هاييست سيستم براي پيچيده عمليات يك ند ت دقد كتندا اف شگگ داداكا اازشدتآك دق گ .گيرد ميقراربارزيربشدتآنكردنپياده برايكاوشگرگرافيكيموتورونداردقدرتمندي

oكندي كه داشت دقت بايد اما برد، باالتر بسيار را بصري جذابيت توان مي شفافيت از استفاده با .نكندمزاحمتايجادكاربربرايسايتتصويريپردازش

oكاوشگرمتاسفانهIEنيستند استانداردكهكندمياستفادهخوددستوراتازشفافيتبراي.

o از استادارد، كاوشگرهاي در شفافيت ايجاد براي Opacity : .شود مي استفاده 5.

oجاداي تا تفادهfilter:alpha(opacity=50)ازIEدشفاف دا ش oدرشفافيتايجادبرايIEازfilter:alpha(opacity=50)شودمياستفاده.oبكار باال دستور هردو است الزم شود داده نمايش درست كاوشگرها تمامي در شفافيت اينكه براي .روند

oمانند كاوشگرهايي Firefox دستورات CSS البته( دارند اي ويژه IE خود مخصوص دستورات نيز تا ا )دا .)داراست را

oعبارت –moz-border-radius را آنها و درآورده تيزي از را ها مستطيل هاي گوشه تواند مي :moz-border-radius-:كندنرم 5px;

oدرتنهانمااينزيراشودنميپيشنهاد مشابههايحلراهوعبارتاينازاستفاده Firefoxقابل.بود خواهد مشاهده

oCSS توانيد مي مثال براي !كند تفاوت خاص هاي رسانه براي كه داراست آنرا توانايي CSS يك ت فطاا دت شتهنگكهكن زآان دشكنتنگالاشدق ش .شود مشكيپرينتهنگاموليباشدقرمزآن هاينوشتهرنگكهكنيدتعريفطوريراسايت

oاينكه كردن مشخص براي CSS از نويسيم، مي اي رسانه چه براي را @media مي استفاده :كنيم

@media screen

* { color:#ff0000;}

@media print@media print

* { color:#000000;}

,all:ازعبارتندمعمولهايرسانه braille, handheld, print, projection, screen, tv,

…

CSSرا قورت بده!

oفايل HTML تمرينات در كه اي HTML از استفاده با داراست، را ها برچسب تمامي و ايد ساخته ا ااقالكافاككقالCSSات سندبراي مناسببنديقالبوكافيزيباييكنيدسعي .كنيدبنديقالبCSSهايبرچسبتمامي

هاي برچسب به يا و كنيد اضافه SPAN و DIV برچسبهاي توانيد مي تنها سند داخل در !بيافتد اتفاقID CLASS IDموجود , CLASSبيافزاييد.

oاز استفاده با تنها و جداول از استفاده بدون CSS مانند( ستوني سه صفحه يك SBCE.ir( بسازيد.

oاز استفاده با توان مي آيا CSS كنيد معين را حل راه بله اگر ساخت؟ منو.

oنوشتنمعايبومزاياCSSبرشماريدراجداگانهفايليكدر. oنوشتنمعايبومزاياCSSبرشماريدراجداگانه فايليكدر.

oاز استفاده با CSS يك taskbar پنجره پايين قسمت در همواره كه بسازيد صفحه يك براي شگ ا(كا ال اش)ا .باشد)سندانتهايلزومانه(كاوشگر

Documents

CSS 2 Quick-start Tutorial in Persian