mojtaba031

آموزش css به صورت كامل و جامع

آغاز شده توسط: mojtaba031,

35 پست در این موضوع

ارسال شده در (ویرایش شده)

سلام به تمام كاربران جوملا

اين دفعه با آموزش جديد يعني آموزش css امدم

اين آموزش به صورت جامع است يعني اگه بلد نباشي بعد از آموزش يك كاربر حرفه اي هستي

ايشاالله كه مورد پذيرش همگان باشه

اگه مديرم خاص اين تايپيكو مهم كنه با تشكر

بچهايي كه در اين مورد چيزي بلد هستند لطفا پيام خصوصي بدند

زود تر من پست ندند

ویرایش شده در توسط mojtaba031

Share this post

Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

ارسال شده در

در اين آموزش پيش فرض را بر اين مي گزاريم كه خواننده بر اصول پايه html و xhtml بلد است

css چيست؟

css از سر كلمه cascading style sheet (شيوه نامه ابشاري)گرفته شده است. شيوه نامه قواعدي براي چگونگي نمايش عناصر html است.

اگر كمي با زبان نشانه گزاري html كار كرده باشيد مي دانيد كه هر كدام از عناصر (هر آنچه كه در html تعريف مي كنيد مثل table، radiobuttonو ...) آن داراي خصوصياتي مي باشد كه چگونگي نمايش آنها را در مرورگر مشخص مي كند به عنوان مثال: align، color، fontو ....

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

css را مي توان به دو صورت استفاده كرد به صورت داخلي و خارجي. در صورتي كه ب شكل داخلي استفاده مي كنيد آن را بايد درون تگ <head> نوشت. اما وقتي css را به صورت خارجي استفاده مي كنيد بايد به شكل يك فايل متني با پسوندcss. در خارج از سندhtml تان قار دهيد.

Share this post

Link to post
Share on other sites

ارسال شده در

هر دستور css از سه بخش درست شده : انتخابگر، خصوصيت، مقدار

{selector{property:value

انتخابگر در واقع همهن عناصري هستند كه شما قصد تغيير خصوصيات آن ها را داريد

property ها همه خصوصيات موجود در html هستد با هستند با تفاوت هاي اندكي كه در ادامه به آن مي پردازيم

value ها كه جلوي خصوصيت و بعد از علامت : قرار مي گيرند

در css مي توان براي بيشتر از يك عنصر خصوصيت تعيين نمود براي مثال

{h1,h2,h3,h4 {color:green

1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

ارسال شده در (ویرایش شده)

برای id های html هم می تونید از این دستور استفاده کنید .

در html بنویسید:

<p id=phantom>test</p>

و حالا در css بنویسید:

#phantom
}
text-align:center;
}

و حالا در اون بخش تغییرات اعمال میشه.

(بچه ها آموزش هاتون خیلی پراکندس ... !):13:

موفق و موید باشید:auizz3ffy9vla57584x

ویرایش شده در توسط Phantom Wolf
غلط املایی
1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

ارسال شده در

CSS را مي توان به دو طريق استفاده كرد

1- سراسرس

2- محلي

در صورت سراسري بايد در قسمت انتخابگر نام عنصر مورد نظر و در پي آن خصوصيت و مقدار آن را درون پوشه {} قرار دهيم

اما نوع دوم به دو صورت استفاده مي شه

1- صفت CLASS

2- صفت ID

صفت CLASS

شايد از خود پرسيده باشيد كه ممكن است از يك عنصر در دوجاي متفاوت با صفات متفاوت استفاده كنيم تكليف چيست؟ در اين صورت بايد كمي بيشتر دقت كنيم. حال مثالي ميزنم

{left{color: red.

{right{color: red.

*********************

<p class="left">click</p>

<p class="right">click</p>

همانطور كه مشاهده كرديد ما در بخش تعريف css در قسمت انتخابگر نام هيچ عنصري را قرار نداديم و بجاي آن از نقطه و يك نام استفاده كرديم

حال اگر به قسمت زير ان برويد مي بينيد كه آن اسم را در يك عنصر<p> با استفاده از صفت class قرار داده ايم. حال از اين پس اين عنصر از صفت بالا تاثير مي پذيرد

اگر اين كلاس را به هر عنصر html دهيم در صورتي كه آن خصوصيات تعريف شده در كلاس بالا باشد از آن تبعيت مي كند

* نكته: نام ها كاملا دلخواه مي باشد.

اگر دستورات بالا به اين صورت استفاده مي شد:

{p.left{color:"red

فقط براي عناصر <p> استفاده مي شد

صفت id

اين صفتم مانند صفت قبل كار مي كند با تفاوت كوچكي در قالب دستوري بايك مثال روشنتان مي كنم

{left {color: red#

********************

<p id="left">click</p>

همانطور كه مشاهده مي كنيد به جاي نقطه از # استفاده و بجاي class از id استفاده شده

* نكته: توجه داشته باشيد كه مقادير id بايد يكسان باشد و انعطاف كمتري نسبت به class دارد يعني نمي توان براي عنصري خاص مورد استفاده قرار داد:

1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

ارسال شده در

css را مي توان به سه طريق مورد استفاده قرار داد:

1- دستوري

2- صفحه اي

3- خارجي

اگر بخواهيم براي عناصري خاص از css استفاده كنيم دستو رات را مستقيما در صفت style عنصر قرار مي دهيم به عنوان مثال :

<p style="font-size: 15px:>click</p>

در صورت استفاده صفحه اي بايد دستورات را درون تگ <style tape="text/css"></style> قرار داد مانند مثال زير:

<style>

{left {color: red#

{left {color: red.

</style>

اگر بخواهيم به صورت خارجي استفاده كنيم بايد همان تگ <style> بالا را در يك فايل متني با پسوند css. خارج از سند html خود بنويسيم.

حال پس از تعريف فايل css خود بايد آن را به سند html خود بشناسانيم. اين مهم با استفاده از تگ </ link> انجام مي شود. اين تگ كه در تگ <head> بكار مي رود داراي دو صفت مهم است: rel و href

صفت rel واسط بين فايل html و فايل حاوي css را نام گزاري مي كند و به صورت "rel="stylesheet استفاده مي شود.

صفت href مسير فايل css را مشخص مي كند. به مثال زير توجه كنيد:

</"link rel="stylesheet" href="test.css>

حال به راحتي مي توان از css اضافه شده به سند html استفاده كرد.

1 کاربر پسند دیده است

Share this post

Link to post
Share on other sites

ارسال شده در

مي توانيم با استفاده از */ هر جا كه نياز داشتيم توضيحات اضافه كنيم مانند زير:

/* مكان متن*/

} p

;text- aligin: center

{

Share this post

Link to post
Share on other sites

ارسال شده در

بچها آموزش مقدماتي css با موفقيت تمام شد.

در آموزش هاي بعدي مي خوام شروع به كد نويسي كنيم و مرحله به مرحله با توضيحات به كد نويسي مشغول بشيم تا به صورت حرفه اي اين كارو كنيم

لذا خواهشمندم براي هزارمين بار زود تر من پست نديد درصورت ديده شدن با كاربر برخورد مي شود

با اميد موفقيت براي همه شما عزيزان

Share this post

Link to post
Share on other sites

ارسال شده در

بچها آموزش مقدماتي css با موفقيت تمام شد.

در آموزش هاي بعدي مي خوام شروع به كد نويسي كنيم و مرحله به مرحله با توضيحات به كد نويسي مشغول بشيم تا به صورت حرفه اي اين كارو كنيم

لذا خواهشمندم براي هزارمين بار زود تر من پست نديد درصورت ديده شدن با كاربر برخورد مي شود

با اميد موفقيت براي همه شما عزيزان

دستتون درد نکنه:25:

فقط یکم کدنویسیاتون حالت عملی و پروژه ای تر باشه ممنون می شم:128fs318181::25:

Share this post

Link to post
Share on other sites

ارسال شده در

دستتون درد نکنه:25:

فقط یکم کدنویسیاتون حالت عملی و پروژه ای تر باشه ممنون می شم:128fs318181::25:

تشكر عزيزم اگه بتونم به صورت كاملا تصويري انجام مي دم تو فكرم هست

اگه برسم چشم

Share this post

Link to post
Share on other sites

ارسال شده در

خصوصيت پس زمينه كه با نام backgraound استفاده مي شه داري پنج صفت هست

backgraound-color

backgraound-image

backgraound-repeat

backgraound-attachment

backgraound-position

اين پنج صفت مي توانند هم به صورت تند نويس در خصوصيت backgraound استفاده شوند و هم مي توانند خود در يك خصوصيت جدا استفاده شوند.

صفت backgraound-image

يك تصوير را براي پس زمينه مشخص مي كند.

مثال:

body

}

(backgraound-image: url(stars.gif

backgraound-color: #000000

{

url تابعي است كه مسير تصوير زمينه را مشخص مي كند.

صفت backgraound-attachment

اين صفت براي تصوير زمينه استفاده مي شود و تعيين مي كند كه ثابت باشد يا اسكرول

مثال:

body

}

(backgraound-image: url(stars.gif

backgraound-attachment: scroll

{

اگر در حالت scroll باشد با استفاده از scroll ها تصوير زمينه قادر به حركن انيم اما اگر در حالت fixed باشد قادر به حركت نمي باشد.

صفت backgraound-color

براي رنگ پس زمينه انتخاب مي شود و به سه صورت مي نوان اعمال كرد رنگ هارا:

1- تابع rgb كه به ترتيب قرمز سبز ابي

2- مبناي 16 (hex)

3- نام رنگ كه با محدوديت همراه است

مثال:

p

}

backgraound-color: #00ff00

{

صفت backgraound-position

اين صفت موقعيت هاي تصوير را مشخص مي كند كه داري مقدار هاي زير است:

top left-top center-top right

center left-center center-center right

botton left-botton center-botton right

%-x-% y

x-pos y-pos

اين مقدار ها معلوما كه در كجاي عنصر قرار مي گيرد

در دو مقدار اخري مي توان موقعيت تصوير را به صورت دستي وارد كرد.

صفت backgraound-repeat

اين صفت چگونه تكرار شدن تصوير را مشخص مي كند كه مقدار هاي زيزرا مي گيرد:

repeat به صورت لفقي و عمودي تكرار مي كند

repeat-x به صورت افقي تكرار مي كند

repeat-y به صورت عمودي تكرار مي كند

none- repeat بدون تكرار است

***********يك مثال تند نويس************

body

}

backgraound: #00ff00 url(stars.gif) no-repeat fixed top

{

فهميدن اين كد هم مي زارم پا خودتون

با تشكر

Share this post

Link to post
Share on other sites

ارسال شده در (ویرایش شده)

سلام به همه خوبان

ببخشيد كه خيلي دير دارم ادامه ميدم

همانطور كه مي دونيد به خاطر مريضي آجيم و امتحانام نتوستم ادامه بدهم

با اين همه منا ببخشيد

خب ميريم سراغ اموزش

*********************************************************

خصوصيت متن كه با نام text استفاده مي شه داري ده صفت هست

color

direction

letter-spacing

text-align

text-decoration

text-indent

text-shodow

text-transform

white-space

word-spacing

صفت color

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

1- تابع rgb كه به ترتيب قرمز سبز ابي

2- مبناي 16 (hex)

3- نام رنگ كه با محدوديت همراه است

مثال:

صفت direction

جهت نوشته را تعيين مي كند و داراي دوحالت زير است

ltr

rtl

صفت text-align

تراز نوشته را معين مي كند در يك عنصر و داراي حالت هاي زير است.

left

right

center

صفت text-decoration

چگونگي تزئين متن را مشخص مي كند و حالت هاي زير را دارد

none

underline

overline

line-through

صفت text-indent

ميزان تورفتگي خط اول را تعيين مي كند و در حالت هاي زير است

lenght

%

صفت text-shadow

سايه گزاري متن را تايين مي كند و در حالت هاي زير است

none

color

صفت text-transform

تغيير شكل متن را تايين مي كند و در حالت هاي زير است

none

capitalize

uppercase

lowercase

نكته 1: در حالت دومي حرف ابتدايي كلمات را به بزرگ تبديل مي كند

نكته 2: تمام حروف و كلمات را به بزرگ تبديل مي كند

نكته 3: تمام حروف و كلمات را به كوچك تبديل مي كند

صفت white-space

فضاي خالي كنار يك عنصر را تعيين مي كند و در حالت هاي زير است

normal

pre

nowrap

صفت word-spacing

آفزايش يا كاهش فاصله بين كلمات را تعيين مي كند و در حالت هاي زير است:

normal

length

با تشكر

ویرایش شده در توسط mojtaba031

Share this post

Link to post
Share on other sites

ارسال شده در (ویرایش شده)

این مطالب برای یادگیری html5 و css3 خیلی مفید هستش ، پیشنهاد میکنم 4 تاش رو دانلود کنید حجمش هم کمه:

http://www.sapoco.com/uploads/pdf/HTML5_And_CSS3_Training_In_Project.zip

http://www.sapoco.com/uploads/pdf/Learning_Html_Css_JavaScript.zip

http://www.sapoco.com/uploads/pdf/HTML5%20Cheat%20Sheet.zip

http://www.sapoco.com/uploads/pdf/CSS3%20Cheat%20Sheet.zip

توضیحاتش هم که این ها چه مقالاتی هستند:

ویرایش شده در توسط saber

Share this post

Link to post
Share on other sites

ارسال شده در

این مطالب برای یادگیری html5 و css3 خیلی مفید هستش ، پیشنهاد میکنم 4 تاش رو دانلود کنید حجمش هم کمه:

http://www.sapoco.com/uploads/pdf/HTML5_And_CSS3_Training_In_Project.zip

http://www.sapoco.com/uploads/pdf/Learning_Html_Css_JavaScript.zip

http://www.sapoco.com/uploads/pdf/HTML5%20Cheat%20Sheet.zip

http://www.sapoco.com/uploads/pdf/CSS3%20Cheat%20Sheet.zip

توضیحاتش هم که این ها چه مقالاتی هستند:

دوست عزیز ضمن خوش آمد گویی به جوملا فروم

از دادن لینک به سایتتون خودداری کنید و اگر قصد قرار دادن آموزشی دارید از آپلود سنتر انجمن استفاده بفرمایید

Share this post

Link to post
Share on other sites

ارسال شده در

مرجع انتخابگرها در CSS

.class

.intro

{

background-color:yellow;

}

این مثال تمامی عناصری که class="intro" هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.

#id

#name

{

background-color:yellow;

}

این مثال تمامی عناصری که "id="name هستند را انتخاب و style مورد نظر را به آنها اعمال میکند.

*

*

{

background-color:yellow;

}

این مثال تمامی عناصر را انتخاب و style مورد نظر را به آنها اعمال میکند.

element

p

{

background-color:yellow;

}

این مثال تمامی تگ های <p> را انتخاب و style مورد نظر را به آنها اعمال میکند.

element,element

h1,p

{

background-color:yellow;

}

این مثال تمامی تگ های <p> و h1 را انتخاب و style مورد نظر را به آنها اعمال میکند.

element element

div p

{

background-color:yellow;

}

تمام تگ های <p> که در داخل تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند. در آموزش css این نوع انتخاب بسیار مهم است.

element>element

div>p

{

background-color:yellow;

}

تمام تگ های <p> که والد (parent) آنها تگ <div> میباشد را انتخاب و style مورد نظر را به آنها اعمال میکند.

element+element

div+p

{

background-color:yellow;

}

تمام تگ های <p> که بلافاصله بعد از تگ <div> قرار دارند را انتخاب و style مورد نظر را به آنها اعمال میکند.

Share this post

Link to post
Share on other sites

ارسال شده در (ویرایش شده)

کاش کد ها رو مرتب تر مینوشتید یا از سمت چپ مینوشتید.:auau: من زیاد سر در نیاوردم ازش:33:

اجازه میدین من هم مطلب بذارم؟این اجازه رو دارم؟

ویرایش شده در توسط sokoti

Share this post

Link to post
Share on other sites

ارسال شده در

درمورد کدهای مربوط به بخش AURAL که شامل azimuth, cue کسی اطلاع نداره!!!

در مورد کارایی z-index درمورد کارایی display که اغلب روی block هم اگه چیزی می دونید بگید...

و اما سوال بسیار مهم چجوری میشه برای یه ماژول یه کلاس تعریف کرد و مقادیری برای سی اس اس آن ایجاد نمود؟

Share this post

Link to post
Share on other sites

ارسال شده در

درمورد کدهای مربوط به بخش AURAL که شامل azimuth, cue کسی اطلاع نداره!!!

در مورد کارایی z-index درمورد کارایی display که اغلب روی block هم اگه چیزی می دونید بگید...

و اما سوال بسیار مهم چجوری میشه برای یه ماژول یه کلاس تعریف کرد و مقادیری برای سی اس اس آن ایجاد نمود؟

CSS Aural Reference

لینک بالا توضیحات کوتاهی داده راجع بهش

تعریف شما از ماژول چیه ؟

Share this post

Link to post
Share on other sites

ارسال شده در

آیا میشه همزمان چندتا صفت رو باهم استفاده کرد؟مثلا هم تصویر داشته باشیم و هم رنگ زمینه؟

Share this post

Link to post
Share on other sites

ارسال شده در

میتونید هم تصویر و هم رنگ استفاده کنید باید از background-color و background-image استفاده کنید

Share this post

Link to post
Share on other sites

ارسال شده در

CSS Aural Reference

لینک بالا توضیحات کوتاهی داده راجع بهش

تعریف شما از ماژول چیه ؟

بعضی از سایت های حرفه ای در قسمت ماژول جوملا ، ماژول هایی از کلاس خاصی استفاده می کنن (استفاده از پسوند کلاس خاص)

که مثلا بک گراند ماژول رو یا رنگ فونت اون ماژول رو و ... مقادیری رو بهش نسبت میده میخوام بدونم این کلاس هارو کجا بهش میشه نصبت داد

Share this post

Link to post
Share on other sites

ارسال شده در

برای ماژول در css کلاسها رو تعریف میکنن بعدش میان همون کلاس رو در قسمت پسوند کلاس استفاده میکنن در موردشون قبلا انجمن هم بحث شده میتونید جستجو کنید

Share this post

Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری
بازگشت به لیست عناوین تاپیک برنامه نویسی