آموزش css – یک برنامه نویس
Wed, 23 Dec 2015 07:51:15 +0000
fa-IR
hourly
1
آموزش CSS
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css-2/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css-2/#respond
Wed, 23 Dec 2015 07:51:15 +0000
/?p=592
آموزش سی اس اس در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند. آموزش Css (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است. تقریباً همه کسانی که صاحب تجارتخانه های کوچک و بزرگ می باشندبایستی دارای طراحی وب سایت باشند.دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود وب سایت خود را با آخرین تکنولوژیهای طراحی ...
نوشته آموزش CSS اولین بار در یک برنامه نویس پدیدار شد.
]]>
آموزش سی اس اس در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند.
آموزش Css (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است.
آموزش CSS
تقریباً همه کسانی که صاحب تجارتخانه های کوچک و بزرگ می باشندبایستی دارای طراحی وب سایت باشند.دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود وب سایت خود را با آخرین تکنولوژیهای طراحی وب سایت بسازید.
Css (سی اس اس) به عبارت ساده برای زیبایی صفحات وب در طراحی سایت می باشد.
آموزش درست سی اس اس و یادگیری حرفه ای آن، می تواند فرق اصلی بین طراح سایت مبتدی و حرفه ای قالب های سایت باشد. مقالات Css ما بصورت کاملا حرفه ای به مقوله پرداخته اند. آموزش سی اس اس بسیار ساده می باشد و دستورات آن محدود می باشند ولی نوع استفاده از آن و هماهنگی آن با اچ تی ام ال و نیز رعایت نکات آن است که Css را پیچیده کرده است.
نکته ی مهم اینکه بدون استفاده از سی اس اس نیز میتوان صفحات وب را قالب دهی نمود (توسط جدول ها)، ولی سی اس اس مزایایی دارد که این روش را منسوخ کرده است.
از مهمترین مزایای Css میتوان به انعطاف پذیری بالای css ، کاهش استفاده از پهنای باند شبکه، کم حجم کردن فایل html ، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف و … می باشد.
تمرین زیاد و آموزش کامل سی اس اس، شما را می تواند در استفاده از دستورات Css حرفه ای کند. کدهای سی اس اس بصورت متنی می باشند و تنها نرم افزار مورد نیاز برای آن NotePad ویندوز می باشد. css مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.
با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ،تعیین مکان و عرض و طول ، فرمت دهی font و … همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیم.
منبع:www.pars-soft.ir
نوشته آموزش CSS اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-css-2/feed/
0
اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d9%84%db%8c%d9%86%da%a9%d9%87%d8%a7-%d8%af%d8%b1-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d9%84%db%8c%d9%86%da%a9%d9%87%d8%a7-%d8%af%d8%b1-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa/#respond
Thu, 01 Jan 2015 08:08:19 +0000
/?p=418
اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل با استفاده از CSS می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیم کنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیر خط ...
نوشته اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل اولین بار در یک برنامه نویس پدیدار شد.
]]>
اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل
با استفاده از CSS می توانیم نحوه نمایش دادن لینکها را در صفحه تنظیم کنیم. به صورتی که استفاده از جاوا اسکرپت در صفحه تا حد زیادی کم می شود. از طریق استفاده از استایل می توانیم رنگ لینکها، اندازه فونت آنها، زیر خط لینکها، رنگ زمینه هر لینک و بسیاری دیگر از خواص لینکها را تغییر دهیم.
برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.
برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:
a:link و a
این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
a:hover
این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
a:active
این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
a:visited
این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.
برای کار کردن با لینکها ما در قسمت HEAD متن از مشخصه های بالا استفاده می کنیم. یعنی کد زیر را در بخش HEAD متن وارد می کنیم اگر می خواهید از استایل خارجی استفاده کنید می توانید نحوه فرا خوانی استایل خارجی به صفحه را مطالعه کنید.
<style type=”text/css”>
<!–
a:link { مشخصات مورد نظر }
a:hover { مشخصات مورد نظر }
a:active { مشخصات مورد نظر }
a:visited { مشخصات مورد نظر }
–>
</style>
برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و …
در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت 12pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:
<style type=”text/css”>
<!–
a:link { color:green; font-size:12pt; text-decoration:none }
a:hover { color:red; background-color:#6699CC; border:#006699 2px solid }
a:active { color: white }
a:visited { text-decoration: underline }
–>
</style>
همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:
#pre a:link,#pre a { color:green; font-size:10pt; text-decoration:none }
#pre a:hover { color:red; background-color:#6699CC; border:#006699 2px solid; text-decoration:none }
#pre a:active { color: White }
#pre a:visited { text-decoration: underline; color:#003399 }
کد مربوط به DIV را نیز به صورت زیر نوشتیم:
<div align=”center” id=”pre”>
کدهای مربوط به لینکها
</div>
منبع:neopersia.org
نوشته اعمال تغییر بر روی لینکها در صفحه با استفاده از استایل اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%a7%d8%b9%d9%85%d8%a7%d9%84-%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%a8%d8%b1-%d8%b1%d9%88%db%8c-%d9%84%db%8c%d9%86%da%a9%d9%87%d8%a7-%d8%af%d8%b1-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa/feed/
0
تغییر شکل نشانگر ماوس با استفاده از استایل
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/412/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/412/#respond
Thu, 01 Jan 2015 07:54:04 +0000
/?p=412
تغییر شکل نشانگر ماوس با استفاده از استایل با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم: cursor: نوع نشانگری که مورد نظر ...
نوشته تغییر شکل نشانگر ماوس با استفاده از استایل اولین بار در یک برنامه نویس پدیدار شد.
]]>
تغییر شکل نشانگر ماوس با استفاده از استایل
با استفاده از استایل این امکان وجود دارد که شکل نشانگر ماوس را وقتی روی قسمت مشخصی از صفحه قرار می گیرد تغییر دهیم. به این منظور می توانیم از ویژگی زیر در استایل مربوط به تگ مورد نظر استفاده کنیم:
cursor: نوع نشانگری که مورد نظر ماست
برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):
<span style=”cursor: wait; color: red”>ماوس خود را روی این متن قرار دهید.</span>
اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.
در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض می کنند آورده شده است. می توانید ماوس خود را بر روی توضیحات این گزینه ها نگه دارید تا ببینید به چه شکلی در می آید.
مقدار قابل استفاده
توضیحات
auto
این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.
crosshair
نشانگر ماوس به صورت به علاوه در می آید.
default
نشانگر ماوس به صورت همان فلش همیشگی در می آید.
move
نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.
pointer
نشانگر به شکل دست در می آید.
help
یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.
text
به شکلی در می آید که بر روی متنها به خود می گیرد.
wait
به شکل ساعت شنی در می آید.
n-resize
یک فلش به سمت شمال
s-resize
یک فلش به سمت جنوب
e-resize
یک فلش به سمت مشرق
w-resize
یک فلش به سمت مغرب
ne-resize
یک فلش به سمت شمال شرقی
nw-resize
یک فلش به سمت شمال غربی
se-resize
یک فلش به سمت جنوب شرقی
sw-resize
یک فلش به سمت جنوب غربی
منبع:www.neopersia.org
نوشته تغییر شکل نشانگر ماوس با استفاده از استایل اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/412/feed/
0
تنظیمات موقعیت عکس زمینه
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85%d8%a7%d8%aa-%d9%85%d9%88%d9%82%d8%b9%db%8c%d8%aa-%d8%b9%da%a9%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85%d8%a7%d8%aa-%d9%85%d9%88%d9%82%d8%b9%db%8c%d8%aa-%d8%b9%da%a9%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87/#respond
Thu, 01 Jan 2015 07:45:35 +0000
/?p=407
تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS background-position این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو ...
نوشته تنظیمات موقعیت عکس زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
تنظیمات موقعیت عکس زمینه عناصر صفحه با CSS
background-position
این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.
دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:
top, center, or bottom
left, center, or right
برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:
background-position:top right
این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
background-position:center right
این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
background-position:bottom center
این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.
می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:
در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:
<style type=”text/css”>
<!–
body {
background-image:url();
background-attachment:fixed;
background-position:40px 20px }
–>
</style>
با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.
منبع:www.neopersia.org
نوشته تنظیمات موقعیت عکس زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85%d8%a7%d8%aa-%d9%85%d9%88%d9%82%d8%b9%db%8c%d8%aa-%d8%b9%da%a9%d8%b3-%d8%b2%d9%85%db%8c%d9%86%d9%87/feed/
0
تنظیم تکرار تصویر زمینه
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%aa%da%a9%d8%b1%d8%a7%d8%b1-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%aa%da%a9%d8%b1%d8%a7%d8%b1-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/#respond
Tue, 30 Dec 2014 08:54:56 +0000
/?p=405
کار با تصویر زمینه در طراحی صفحات با استایل ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از ...
نوشته تنظیم تکرار تصویر زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
کار با تصویر زمینه در طراحی صفحات با استایل
ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در جدول زیر ملاحظه کنید:
توضیحات
مقادیر قابل استفاده
ویژگی
مشخص کننده محل قرار گرفتن تصویر در اینترنت است
آدرس محل قرار گرفتن تصویر
background-image: url(url)
نوع تکرار تصویر را مشخص می کند
repeat, no-repeat, repeat-x, repeat-y
background-repeat: مقدار ویژگی
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند
scroll, fixed
background-attachment: مقدار ویژگی
موقعیت تصویر زمینه در صفحه را مشخص می کند
مقدار اول:
top, center, bottom,
عددی در مقیاس پیکسل، عددی در مقیاس درصد
مقدار دوم:
left, center, right,
عددی در مقیاس پیکسل، عددی در مقیاس درصد
background-position: مقدار دوم مقدار اول
برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:
<style type=”text/css”>
<!–
body {
background-image:url();
background-repeat:repeat-y }
–>
</style>
در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.
background-repeat
همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.
این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:
repeat
این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
no-repeat
این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
repeat-x
این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
repeat-y
این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.
background-attachment
از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:
scroll
اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
fixed
با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد. در این مثال لوگوی سایت ما به عنوان زمینه ثابت در نظر گرفته شده است. برای مشاهده یک نمونه از این تصویر زمینه اینجا را کلیک کنید.
<style type=”text/css”>
<!–
body {
background-image:url();
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
–>
</style>
این مثال را به یاد داشته باشید. دوباره از آن استفاده خواهیم کرد. در درس بعدی به سایر ویژگیهای مرتبط با تصویر زمینه می پردازیم.
منبع:www.neopersia.org
نوشته تنظیم تکرار تصویر زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%aa%da%a9%d8%b1%d8%a7%d8%b1-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/feed/
0
تغییر رنگ و تصویر زمینه
/%d8%af%d8%b3%d8%aa%d9%87%e2%80%8c%d8%a8%d9%86%d8%af%db%8c-%d9%86%d8%b4%d8%af%d9%87/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%b1%d9%86%da%af-%d9%88-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/
/%d8%af%d8%b3%d8%aa%d9%87%e2%80%8c%d8%a8%d9%86%d8%af%db%8c-%d9%86%d8%b4%d8%af%d9%87/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%b1%d9%86%da%af-%d9%88-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/#respond
Tue, 30 Dec 2014 08:46:00 +0000
/?p=403
تغییر رنگ و تصویر زمینه عناصر HTML با CSS background-color این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن ...
نوشته تغییر رنگ و تصویر زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
تغییر رنگ و تصویر زمینه عناصر HTML با CSS
background-color
این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.
در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:
<p>متن بدون زمینه. <span style=”background-color: yellow”>این قسمت زمینه زرد دارد.</span></p>
این هم متن نهایی:
متن بدون زمینه. این قسمت زمینه زرد دارد.
همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:
<table border=”1″ style=”background-color: #FFC0CB”>
<td>سلول اول</td>
<td>سلول دوم</td>
</table>
این هم جدول به دست آمده:
سلول اول
سلول دوم
شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.
یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:
<form action=”some_script>
نام : <input type=”text” size=”30″ style=”background-color: #009900″>
</form>
این هم فرم آزمایشی ما:
نام :
توجه داشته باشید که در این ویژگی هم می توانیم از نام رنگ ها و هم از معادل هگزادسیمال آنها استفاده کنیم.
شما می توانید با استفاده از این ویژگی در تگ body رنگ زمینه صفحه را هم تغییر دهید. در مورد تصویر زمینه هم که در قسمت بعد به آن می پردازیم می توان به همین صورت عمل کرد.
background-image
این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.
background-image:url(آدرس تصویر مورد نظر)
بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( ” ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:
<span style=”background-image: url()”>برای این span از تصویر زمینه استفاده شده است.</span>
می توانید نتیجه کد بالا را مشاهده کنید:
برای این span از تصویر زمینه استفاده شده است.
از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم:
<table border=”1″ style=”background-image: url()”>
<td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>
جدول به دست آمده مانند زیر است:
محتویات سلول اول
محتویات سلول دوم
همانطور که برای text box از رنگ زمینه استفاده کردیم برای آن از تصویر زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea استفاده می کنیم:
<form>
<textarea rows=”8″ cols=”60″ style=”background-image:url()”>
</textarea>
</form>
منبع:www.neopersia.org
نوشته تغییر رنگ و تصویر زمینه اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%af%d8%b3%d8%aa%d9%87%e2%80%8c%d8%a8%d9%86%d8%af%db%8c-%d9%86%d8%b4%d8%af%d9%87/%d8%aa%d8%ba%db%8c%db%8c%d8%b1-%d8%b1%d9%86%da%af-%d9%88-%d8%aa%d8%b5%d9%88%db%8c%d8%b1-%d8%b2%d9%85%db%8c%d9%86%d9%87/feed/
0
تنظیم رنگ متن
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%b1%d9%86%da%af-%d9%85%d8%aa%d9%86/
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%b1%d9%86%da%af-%d9%85%d8%aa%d9%86/#respond
Tue, 30 Dec 2014 08:34:12 +0000
/?p=400
نحو تغییر رنگ متن با استفاده از CSS color از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. ...
نوشته تنظیم رنگ متن اولین بار در یک برنامه نویس پدیدار شد.
]]>
نحو تغییر رنگ متن با استفاده از CSS
color
از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.
البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.
مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:
color: نام رنگ مورد نظر
color:#معادل هگزادسیمال رنگ
اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.
در صورتی که می خواهید از رنگهای بیشتری استفاده کنید و بهتر بتوانید رنگ مو رد نظر خود را انتخاب کنید می توانید از معادل هگزادسیمال رنگها استفاده کنید. در این صورت می توانید از 216 رنگ مورد استفاده در وب رنگ مورد نظر خود را انتخاب کنید.
اگر جدول مربوط به معادل هگزادسیمال رنگها را می خواهید اینجا را کلیک کنید. (لینک در پنجره جدید باز می شود)
در اینجا به ذکر چند مثال برای استفاده از ویژگی color می پردازیم. ما در اینجا از شناسه style برای تعریف کردن این ویژگی استفاده می کنیم اما به خاطر داشته باشید که می توانیم این ویژگی را برای یک تگ مشخص یا به صورت class و id در بخش HEAD متن یا استایل خارجی نیز به کار ببریم.
برای مثال در استفاده از color برای تغییر رنگ متن یک جدول می توانیم کد جدول را به صورت زیر بنویسیم:
<table border=”1″ style=”color: red”>
<tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه کد بالا با کدی که در پایین آمده است یکسان است:
<table border=”1″ style=”color: #FF0000″>
<tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه هر دو کد بالا به صورت زیر است:
این متن به رنگ قرمز نمایش داده می شود.
به یاد داشته باشید که می توانید از ویژگی color برای هر کدام از سطرها یا سلولهای یک جدول به صورت جداگانه استفاده کنید. فقط کافیست تا “style=”color: XXX را در هر قسمت قرار دهید و رنگ مورد نظر خود را به جای XXX قرار دهید.
منبع:www.neopersia.org
نوشته تنظیم رنگ متن اولین بار در یک برنامه نویس پدیدار شد.
]]>
/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b5%d9%81%d8%ad%d8%a7%d8%aa-%d9%88%d8%a8/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%b1%d9%86%da%af-%d9%85%d8%aa%d9%86/feed/
0
تنظیم فونت در CSS