Profile

Cover photo
Click Balaghi
Lived in tehran
4,324 views
AboutPostsPhotosVideos

Stream

Click Balaghi

Shared publicly  - 
 
هنگام استفاده از فونت ها در CSS ، نکات متعددی را می توان مورد بررسی قرار داد.نکاتی که لازم است برای استفاده از فونت ها در CSS بدانیم چیست؟
فونت ها و CSS
اولین دستور مربوط به فونت ها در CSS دستور font-family است. این دستور نوع فونت را در CSS تعیین می کند.به عنوان مثال اگر بخواهیم فونت را Tahoma انتخاب کنیم باید مقدار این دستور را برابر با Tahoma قرار دهیم.#آموزش_CSS پایه را با این مقاله دنبال می کنیم.
span { font-family: "Times New Roman", Times, serif; }
در مثال بالا سه نوع فونت تعیین شده است،این حالت در CSS به مرورگر اشاره می کند که اگر فونت اول را نشناخت و موفق به نمایش ان نشد،فونت دوم را استفاده کند و اگر فونت دوم در CSS را نشناخت ، فونت سوم را نمایش دهید.اصطلاحا به آن fallback می گویند.فونت های مختلف را در CSS در این دستور باید با علامت کاما جدا کرد.دستور دیگری که برای کار با فونت ها در CSS وجود دارد،دستور font-style می باشد.دستور Font-style را با چندین مثال می بینیم:
span.normal { font-style: normal; } span.italic { font-style: italic; } span.oblique { font-style: oblique; }
آموزش CSS را طی چندین مقاله است که دنبال می کنیم، مقدار normal موجب نمایش حالت عادی متن می شود،حالت دوم یعنی italic موجب می گردد متن در CSS ،به صورت شیب دار و کج (مورب) ظاهر گردد. مقدار سوم یعنی oblique موجب مب شود که فونت مشابه حالت دوم مورب گردد.پس می توان با CSS به نوشتار و متون صفحات وب ، استایل ها و ظاهر و خصوصیات خاصی را بخشید.دستور بعد در CSS دستور font-size است که اندازه نوته را تعیین می کند بر حسب پیکسل .البته علاوه بر px می توان از واحد pt هم برای تنظیم اندازه فونت در CSS استفاده نمود.همچنین واحد دیگری به نام em برای تعیین اندازه فونت در CSS وجود دارد.پس بنابراین از تمامی واحدهای فونت که معرفی شد می توان استفاده کرد.نکته دیگر اینست که در CSS می توان مقدار font-size را براساس درصد نیز تعیین کرد! به عنوان مثال 100 درصد باشد.کاربرد font-weight در CSS آنست که میتوان فونت را bold یا برجسته تر نمود.مثال:
p.zakhim { font-weight: bold; }
جهت آموزش برنامه نویسی آندروید کلیک کنید.
http://clicksite.ir/layout.php?c=CSS&t=%D9%81%D9%88%D9%86%D8%AA_%D9%87%D8%A7_%D8%AF%D8%B1_CSS_%D8%8C%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D9%81%D9%88%D9%86%D8%AA_%D8%AF%D8%B1_CSS&act=article&id=23
 ·  Translate
آموزش های مربوط به فونت در CSS : چگونه از فونت ها در CSS به بهترین نحو استفاده کنیم؟
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در این مقاله با دو مفهوم width و همچنین height آشنا می شویم.تعیین طول  و عرض عناصر در CSS ، یکی از پله های مهم برای فراگیری و #آموزش_CSS محسوب می شود.هرچند مفوم width و Height در CSS ،پایه ای ومقدماتی است اما بسیار مهم و ضروری.
تعیین طول و عرض با Width و Height در CSS
دستور width برای مشخص نموردن طول در CSS مورد استفاده قرار می گیرد.واحد طول در CSS ،پیکسل می باشد. به عنوان مثال عرض یک عنصر را می توان 20px قرار داد.در CSS می توان width و height را به حالت auto قرار داد.در حالت پیش فرض نیز در CSS طول و عرض auto می باشد.در حالت تنظیم اتوماتیک در CSS ، بسته به محتوای درون عنصر HTML ، خودکار ظول و عرض تعیین می شود و نیازی نیست به عنصر طول و عرض بدهیم.توجه کنید که در CSS ،دو دستور width و height ،شامل کادرها و حاشیه داخلی نمی شود.بدین معنا که در CSS اگر height را برابر با 100 پیکسل بگذاریم، padding هرچقدر هم که باشد تاثیری روی ارتفاع عنصر ندارد.پس در CSS ، طول و عرضی که تعیین می کنیم،خالص است یعنی بدون حاشیه داخلی و یا کادرهای اطراف تگ در CSS.برای تعیین بیشینه عرض و ارتفاع یک تگ در CSS می توان از دو دستور max-width و همچنین max-height استفاده نمود.با استفاده از این دو دستور میتوانیم ماکزیمم طول و عرض عناصر را در CSS تعیین نماییم.به صورت مشابه،برای تعیین مینیمم مقدار طول و عرض در CSS می توانیم،از دو دستور min-width و همچنین min-height استفاده کنیم تا اجازه ندهیم در CSS ،طول و عرض عنصر از مقادیر تعیین شده کمتر شود.در اینحالت در CSS ، باز هم برحسب واحد پیکسل باید مقادیر را تعیین نماییم.جهت آموزش تصویری CSS کلیک کنید.
تعیین طول و عرض به صورت درصد در CSS
در CSS می توانیم به جز پیکسل،از درصد هم استفاده کنیم،به عنوان مثال:
div { max-width: 500px; height: 40%; border: 3px solid #73AD21; }
در مثال بالا تگ div ،ارتفاعی برابر با 50 درصد عنصر والد خود خواهد داشت.یعنی ارتفاع عنصر در CSS ، بر اساس ارتفاع والد آن قابل مشخص شدن است.در ادامه به مقالات دیگر درباره آموزش CSS می پردازیم.
جهت آموزش جوملا کلیک کنید.
 
http://clicksite.ir/layout.php?c=CSS&t=%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D8%B7%D9%88%D9%84_%D9%88_%D8%B9%D8%B1%D8%B6_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_%D8%AF%D8%B1_CSS&act=article&id=21
 ·  Translate
چگونگی تعیین سول و عرض برای تگ ها:در CSS می توانیم برای عنصار ، طول و عرض بسازیم.برای اینکار از width و Height استفاده می شود: در CSS عناصر HTML طول و عرض می پذیرند.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در دو جلسه قبل با مواردی در CSS و طراحی وب آشنایی پیدا کردیم.در این مقاله قصد داریم به بررسی نحوه ایجاد پس زمینه با CSS بپردازیم.گفته شد که در CSS ، ما می توانیم ظاهر صفحه وب را تغییر دهیم.خواص و ویزگی های ظاهری از جمله پس زمینه را می توان با CSS تعیین کرد.
ایجاد پس زمینه در CSS و background در CSS
آموزش CSS مقدماتی را ادامه می دهیم.در CSS برای ایجاد و یا تغییر background  از دستور background  استفاده می کنیم.توجه فرمایید که برای تعیین background  می توان روش های متعددی از جمله رنگ آمیزی پس زمینه ، تصویر در پس زمینه و ... استفاده نمود.در مثال زیر را با نحوه تعیین رنگ برای پس زمینه آشنا می شویم:
body { background-color: #000; }
و اما سوال این است در CSS رنگ ها چگونه تعیین می شوند؟ آشنایی با رنگ ها لازمه #آموزش_CSS است. می دانیم در CSS ، رنگ ها در سیستم هگز (HEX) تعیین می شوند.در CSS هر رنگمعادل است با یک رشته 6 حرفی، به عنوان مثال در CSS ، عبارت #000000 به معنای رنگ مشکی است یا اینکه می توان رنگ سفید را با #ffffff در CSS تعیین نمود.بنابراین با استفاده از دستور background-color می توان رنگ پس زمینه را در CSS تعیین نمود.همچنین CSS رنگ های لاتین را نیز می شناسد،بدین معنا که می تاونیم از عبارت green برای رنگ سبز در CSS استفاده کنیم.یا از عبارت red برای تعیین رنگ بندی قرمز در CSS استفاده کرد.اما برای درج تصویر در پس زمینه در CSS ، از دستور background-image می توان استفاده نمود.
body { background-image: url("back.gif"); }
در مثال بالا، تصویری به نام back.gif را پس زمینه کل بدنه صفحه وب قرار دادیم.این یکی  دیگر از دستورات CSS است که برای درج تصویر در پس زمینه می توان از آن استفاده کرد.اگر تصویر پس زمینه در یکی از پوشه های سایت باشد،لازم است در CSS ،مسیر آن تصویر را به صورت کامل بنویسیم.مثلا اگر در پوشه ای به نام images باشد،باید قبل از نام تصویر،عبارت images را نیز بگذاریم.برای اینکه تصویر در راستای محور افقی یا عمودی تکرار شود یا نشود،می توان از دستور background-repeat در CSS استفاده نمود.مثال:
background-repeat: no-repeat;
در کد بالا این دستور نشان داده شده است.اگر قصد دارید پس زمینه تکرار نشود ،از مقدار no-repeat استفاده نمایید و اگر قصد دارید در راستای محور افقی در CSS پس زمینه تکرار شود یا خیر از دستور background-repeat-x و در راستای محور عمودی در CSS از دستور background-repeat-y استفاده نمایید. در سیستم های مدیریت محتوا چون سیستم جوملا (آموزش جوملا ) و ... نیز از همین سیستم استفاده می شود.
http://clicksite.ir/layout.php?c=CSS&t=%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D9%88_Background_%D8%AF%D8%B1_CSS&act=article&id=19
 ·  Translate
نحوه تغییر پس زمینه در CSS : آموزش افزودن بک گراند (پس زمینه) به عناصر با استفاده از CSS و افزودن پس زمینه به تگ ها با CSS.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در سری مقالات بلاگ CSS ، ابتدا می خواهیم کاربرد CSS را متوجه شویم.واقعا #آموزش_CSS برای طراحی وب لازم است؟چرا باید CSS را یاد گرفت؟ آیا بدون CSS می توان سایت طراحی کرد؟پاسخ این سوالات را در این بخش خواهیم دید.
آشنایی با CSS و کاربرد CSS
CSS مخفف  Cascading Style Sheets  می باشد. در واقع زبان CSS وظیف ایجاد استایل ها و تعیین ظواهر وب سایت را بر عهده دارد. اگر بخواهیم بهتر با مفهوم CSS آشنا شویم، این مثال را برای CSS در نظر بگیرید: برای ساخت یک ساختمان لازم است ابتدا بدنه ساختمان پیاده شود، اما آیا پس از پایان اسکلت ساختمان ، قابل بهره برداری است؟خیر.CSS چه نقشی دارد؟در طراحی وب دقیقا CSS همانند تعیین دکوراسیون و رنگ آمیزی ساختمان اسکلت ، می ماند.بدیم معنا که CSS ، صفحات وب را جانی تازه می بخشد و از حالت خشک و بی روح خود خارج می کند.CSS کار طراحان وب را بسیار ساده تر کرده و ابزارها و اختیارات فراوانی در اختیارشان قرار داده است.چرا که CSS ، به سادگی با دستورات قدرتمند خود، امکان دیزاین و طراحی صفحات HTML را به ما میدهد.در این مقاله و چند مقاله بعد به آموزش مقدماتی CSS می پردازیم.
در عین حال که CSS یک ابزار بسیار قدرتمند محسوب می شود، آموزش  CSS کاری دشوار نیست. چرا که ساختار آن بر پایه شیوایی و سادگی بنا شده است.
در تصویر بالا ساختار و سینتکس کلی دستورات CSS را می بینیم.در قسمت selector باید عنصور مورد نظر جهت استایل دهی را تعیین کرد.در قسمت property باید نام ویژگی مورد نظر در CSS و سپس در قسمت value باید مقدار مورد نظر را در CSS مشخص نمود.به عنوان مثال، در دستور CSS  بالا ، رنگ نوشته و همچنین سایز فونت را مشخص کرده ایم.برای جدا کردن چند property مختلف در CSS ، از علامت ; استفاده می شود.پس ساختار کلی دستورات CSS را در این مقاله شناختیم.در این سری مقالات به آموزش های مختلفی برای CSS خواهیم پرداخت.آشنایی با CSS به همه دوستانی که قصد فراگیری طراحی وب را دارند پیشنهاد می گردد.همانطور که می دانید CSS یکی از ربان ها سمت کاربر است ، برای یادگیری زبان های سمت سرور می توانید از آموزش Asp.net استفاده نمایید.
انواع Selector ها در CSS
در CSS انواع مختلفی از سلکتورها را داریم.اولین نوع ان استفاده از نام عنصر HTML است،روش دوم استفاده از id در CSS و روش سوم استفاده از Class در CSS.در طراحی با CSS هر یک از این روش ها به درخور شرایط مورد استفاده قرار می گیرد.در مقالات بعدی با سایر مفاهیم CSS آشنا خواهیم شد.
http://clicksite.ir/layout.php?c=CSS&t=CSS_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF_CSS_%D8%AF%D8%B1_%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%A8&act=article&id=17
 ·  Translate
کاربرد CSS در طراحی وب : چرا CSS و چه لزومی در طراحی وب سایت دارد؟ آیا CSS برای طراحی وب لازم است؟
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در زبان HTML و صفحات وب چند نوع تگ داریم.از حیث انواع display ها می توان تگ ها را به چندین دسته تقسیم کرد.این موضوع مطلبی اساسی و مهم در زمینه آموزش HTMLمی باشد و توصیه می گردد این پست را به دقت مطالعه نمایید.
انواع display ها در عناصر HTML
در سری مقالات #آموزش_ابتدایی_HTML دسته اول عناصری هستند که در HTML ، به Block-Level مشهور هستند.این عناصر در حالت پیش فرض فdisplay از نوع block دارند.یعنی عنصر،تمام سطر را در بر میگیرد.مثال : تگ div در HTML  و همچنین تگ p در HTML ،به عنوان مثال: تگ های h1 تا h6 هم از همین نوع هستند.دسته دوم عناصر معروف به Inline هستند که در صفحات HTML ، سطر جدید به خود اختصاص نمی دهند.بلکه ، در یک ردیف و یک سطر در صفحه HTML قرار می گیرند.به عنوان مثال تگ های span و تگ a در HTML از این دسته هستند.برای قالب بندی صفحات HTML ، عمدتا از تگ های نوع اول استفاده می شود.می دانید که تگ span بای نمایش متن ساده درون یک پاراگراف استفاده می شود.عموما تگ های نوع اول در HTML ، دربرگیرنده تگ های دیگر صفحه هستند،به عنوان مثال:
<div> <h2>تیتر</h2> <p>این متن درون تگ بالایی قرار گرفته است</p> </div>
در مثال بالا،  تگ div که از نوع block-element می باشد، دربرگیرنده تگ های h2 و p می باشد.چگونه در HTML می توان display را تغییر داد؟ در HTML می توان شیوه نمایش عناصر یعنی همان display ، را تغییر داد.به عنوان مثال می توان تگ div که از نوع block-element است را به حالت inline تبدیل نمود.یا اینکه می توان تگ span که از نوع inline است را به حالت block تبدیل نمود.در هر صفحه HTML ، با توجه به نیازی که وجود دارد ،می توان عناصر HTML را از حالت پیش فرض خود خارج کرد و به ان ها display جدیدی در HTML بخشید.عناصر inline درون عناصر block : درون هر عنصر block عموما می توان از عناصر inline با این هدف استفاده نمود که چندین بخش مختلف را درون یک سطر و در کنار هم قرار داد.
<h1>This <span style="color:red">Span</span> in heading tag</h1>
در مثال بالا،درون تگ h ، یک تگ span قرار گرفته است.در این تکه کد HTML می بینیم، که برای برجسته کردن بخشی از یک تگ h ،از یک تگ span در HTML کمکگرفته شده است.چرا که ما میخواهیم در همان سطر باقی بماند یعنی display از نوع Inline باشد.پایان/ توجه نمایید که جهت آموزش ASP.NET از مقالات مربوطه می توانید استفاده نمایید.
http://clicksite.ir/layout.php?c=HTML&t=%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_Inline_%D9%88_block_%D8%AF%D8%B1_HTML&act=article&id=15
 ·  Translate
مفهوم inline و block : تفاوت display های inline با block در زبان HTML و طراحی قالب HTML چیست؟در این مقاله این موضوع را بررسی می کنیم.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
چگونه می توان دستورات جاوااسکریپت را در یک صفحه HTML ایجاد کرد؟چگونه جاوااسکریپت را با HTML ترکیب کنیم؟سوالی که در ذهن خیلی از دوستان تداعی شده است.برای درج کدهای جاوااسکریپت در یک سند HTML ، از تگ script استفاده می شود.تگ script وظیف الحاق کدهای جاوااسکریپت به صفحه HTML را داراست.در جلسات قبل  از #آموزش_HTML  با مفاهیم متعددی در HTML آشنا شدیم.اما سوال اینست که چگونه می توان به عنوان مثال در صفحات HTML ، حرکات انیمیشنی ایجاد کرد؟چگونه می توان کدهایی نوشت که متن ساده HTML را به حالت چشمک زن تبدیل کند؟ همه این موارد با استفاده از javascript در صفحات HTML ممکن می گردد.
کاربرد تگ script و افزودن جاوااسکریپت به کدهای HTML
تگ script در HTML دارای یک تگ ابتدا و یک تگ انتها می باشد.مابین تگ ابتدا و انتها ، دستورات جاوااسکریپت نوشته می شود.جاوااسکریپت در HTML چه کاربردی دارد؟ در صفحات HTML از جاواسکریپت می توان برای ایجاد حرکات انیمیشنی استفاده کرد.همچنین می توان عناصر HTML را مخفی کرد ، ظاهر کرد و ... بنابراین در HTML ، جاوااسکریپت کاربردهای فراوانی دارد.حتی تغییر رنگ عناصر HTML نیز می تواند با جاوااسکرپیت انجام گردد.تقریبا در اکثر صفحات HTML از کدهای جاوااسکریپت استفاده شده است.فراخوانی عناصر HTML در کدهای جاوااسکریپت چگونه است؟ تگ ها و عناصر HTML را می توان با سه خصوصیت فراخوانی کرد.اول نام تگ ها ،به عنوان مثال تگ div ,span و .. روش دوم فراخوانی عناصر HTML ، استفاده از خصویت id است و روش سوم خصوصیت کلاس (class) می باشد.
<script> document.getElementById("tag_id").innerHTML = "Hello"; </script>
در مثال بالا ،یک تگ با استفاده از خصوصیت id فراخوانی شده است.کاربرد تگ  noscript : تگ noscript در حقیقت برای آن دسته از افرادی که جاوااسکریپت مرورگر و یا وسیله خود را غیرفعال کرده اند ظاهر می شود.بدین صورت که اگر به هر دلیلی دستورات جاواسکریپت قابلیت نمایش نداشته باشند، دستورات داخل این تگ و محتوای آن ،در سند HTML نمایانگر خواهد شد.
<script> document.getElementById("tag_id").innerHTML = "Hello!"; </script> <noscript>We are Sorry but your browser does not support JavaScript!</noscript>
در مثال بالا اگر در صفحه HTML ، کد جاواسکریپت مربوطه اجرا نشود ، به جای آن پیام درون script نمایانگر می شود مبنی بر اینکه مرورگر شما، از جاوااسکریپت پشتیبانی نمیکند.دوستانی که به آموزش وردپرس علاقه دارند کلیک کنند.
 
http://clicksite.ir/layout.php?c=HTML&t=%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA_%D8%AF%D8%B1_HTML&act=article&id=13
 ·  Translate
جاوااسکریپت در HTML : چگونه از جاوااسکریپت در کدهای HTML استفاده کنیم؟و نحوه درج کد جاوااسکریپت در صفحات و اسناد HTML .
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
این مقاله به نحوه استایل دهی به متن ها در صفحات وب ، با استفاده از CSS می پردازد.در این مقاله می بینیم که CSS چه ایزارهایی برای استایل دهی به متن ها در صفحات وب داراست.آموزش CSS را دنبال می کنیم.
تنظیم اندازه و رنگ متن با CSS
اولین مطلب برای تنظیم ویژگی های متن، در ارتباط با اندازه نوشتار و همچنین رنگ نوشتار است.در CSS برای تنظیم سایز فونت از دستور font-size استفاده می شود و همچنین برای تنظیم رنگ نوشتار ، از دستور color استفاده می شود.در #فیلم_آموزش_CSS هم به این موضوع پرداختیم.
تنظیم چینش نوشتار در CSS
زبان هایی چون فارسی ،راست به چپ هستند و زبان هایی چون لاتین برخلاف آن.در CSS چگونه جهت نوشتار متن را تغییر دهیم؟برا ی اینکار در CSS دستوری به نام text-align وجود دارد که بوسیله آن می توان متن درون یک تگ را با CSS راست چین یا چپ چین کرد.این ویژگی در حالت پیش فرض مقدار left را در css دارد.اما هنگام استفاده از زبان فارسی،ما آن را برابر با Right قرار می دهیم.جهت وسط چین کردن نوشتار، از Center استفاده می شود.توجه فرمایید در CSS ،تنظیم چینش فقط مختص به متن نیست بلکه برای تصاویر هم میتوان چینش را در CSS مشخص کرد.در CSS همانند نرم افزار مایکروسافت ورد ، برای چینش متن گزینه ای به نام justify  وجود دارد که باعث میشود کلمات و فاصل آنها به گونه ای تنظیمگردد که اندازه و طول سطرها در CSS یکسان گردد.همین ویزگی هاست که قالب را راستچین و یا چپ چین می نماید.مطلب بعد آشنایی با text-decoration می باشد.برای اینکه یک متن را زیر خط دهیم (همانند لینک ها) می توان با CSS و دستور text-decoration این کار را انجام داد.برای تنظیم فاصله کاراکترها در CSS می توان ، از دستور letter-spacingاستفاده نمود و مقدار آن را بر حسب پیکسل تعیین نمود.
h1 { letter-spacing: 4px; }
در مثال بالا،فاصله کاراکترها با دستور letter-spacing برابر با 4 پیکسل تنظیم گردیده است.برای تنظیم فاصله خطوط در CSS ،از دستور line-height استفاده میشود.با استفاده از دستور line-height می توانیم فاصل بین خطوط را در CSS کم و یا زیاد کنیم.برای تعیین فاصله کلمات با استفاده از CSS ، از دستور word-spacing استفاده می شود.با دستور word-spacing می توان فاصله کلمات را در CSS کم یا زیادتر کرد.یکی دیگر از دستورات CSS ، دستور direction است که جهت نوشتار را مشخص می کند که از راست به چپ است یا به عکس.تفاوت این دستور با دستور text-align را قبلا در فیلم آموزش CSS توضیح داده ایم.
جهت آموزش asp.net کلیک کنید.
http://clicksite.ir/layout.php?c=CSS&t=%D8%A7%D8%B3%D8%AA%D8%A7%DB%8C%D9%84_%D9%87%D8%A7%DB%8C_%D9%85%D8%AA%D9%86_%D8%AF%D8%B1_CSS&act=article&id=22
 ·  Translate
استایل دهی به متن در CSS : نحوه تنظیم استایل متن با CSS و ظاهر نوشته ها در CSS.چگونه به متن استایل دهیم؟
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در CSS چگونه حاشیه ها را تنظیم کنیم؟در مقالات گذشته با چند دستور مختلف در CSS آشنا شدیم.اما در این بخش میخواهیم به نحوه تنظیم حاشیه در CSS بپردازیم.
حاشیه داخلی و خارجی در CSS
در CSS به دو صورت میتوان حاشیه را تنظیم کرد،این مبحث نیز جهت آموزش CSS حرفه ای لازم می باشد.پیشنهاد می شود از #فیلم_آموزش_CSS نیز استفاده نمایید.
نخست دستور padding در CSS و دوم دستور margin در CSS. هر یک از این دستورات در جای خود در CSS کاربرد دارند.تفاوت این دو دستور چیست؟دستور margin در CSS در حقیقت حاشیه خارجی را تعیین می کند.یعنی فاصله یک عنصر HTML از عناصر اطراف آن.اما دستور padding در CSS چه می کند؟ این دستور برای تنظیم حاشیه داخلی در CSS کاربرد دارد.بدین صورت که فاصله محتوای یک عنصر را از دیواره عنصر والد تعیین می کند.معمولا از این دو دستور برای تنظیم حاشیه استفاده می شود.دستور padding را در CSS ژمانی به کار می برند که بخواهند محتوای یک عنصر از اطرلاف عنصر پدر فاصله بگیرد.دستور margin در CSS به چهار جهت تقسیم می شود:
margin-top
margin-right
margin-bottom
margin-left
این چهار دستور برای تنظیم حاشیه از چهار طرف در CSS استفاده می شود.مشابه با دستور margin ، برای دستور padding هم همین حالت وجود دارد.حاشیه داخلی از بالا،راست،پایین و چپ در CSS.توجه نمایید که در CSS می توان margin و padding با مقدار منفی نیز به یک عنصر تخصیص داد.در حقیقت مقدار منفی،جهت حاشیه را معکوس می کند.این دو دستور در آموزش CSS ، بسیار پرکاربرد هستند و در موارد بسیار زیادی از آنها استفاده می گردد.از اینرو لازم است با دستور margin و همچنین padding آشنایی کافی داشته باشیم.علاوه بر شبوه ذکر شده،می توانیم برای ایجاد حاشیه در CSS ، از شیوه خلاصه شده و مخفف نیز استفاده کنیم.در ان حالت فرمت دستور CSS برای margin بدین صورت است:
p { margin: 10px 150px 10px 80px; }
اعداد مشخص شده به ترتیب،حاشیه CSS از بالا،راست،پایین و سمت چپ هستند.به همین صورت برای دستور padding هم همین شیوه مخفف را می توان به کار برد.
در تصویر بالا حاشیه CSS با رنگ زرد مشخص شده است.عنصر A از عنصر B حاشیه سمت رساتی یعنی margin-right دارد،بنابراین بین این دو عنصر CSS حاشیه یا margin وجود دارد.در مقالات بعد به آموزش ASP.NET می پردازیم.
http://clicksite.ir/layout.php?c=CSS&t=%D8%AD%D8%A7%D8%B4%DB%8C%D9%87_%D8%A8%D9%86%D8%AF%DB%8C_%D8%AF%D8%B1_CSS_%D9%88_margin&act=article&id=20
 ·  Translate
نحوه تنظیم حاشیه در CSS :آموزش تنظیم حشایه ها در CSS و تنظیم حاشیه صفحات وب با CSS .
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در جلسه قبل با مفهوم و کاربرد CSS آشنا شدیم، در این مقاله از سری مقالات #آموزش_CSS قصد داریم به این مبحث بپردازیم که چگونه و با استفاده از چه روش هایی می توان کدهای CSS را به صفحات وب متصل کرد؟
شیوه های وارد کردن کد CSS در صفحات وب
برای الحاق دستورات  CSS سه روش وجود دارد:
فراخوانی خارجی
روش Inline syle sheet در CSS
روش Inline-style
روش اول : در این روش تمام دستورات CSS را درون یک فایل خارج از صفحه اصلی می گذاریم.در یک فایل با پسوند .css و سپس آن فایل را به صفحه الحاق می کنیم.این روش مزیتی دارد که برای تغییرات دستورات CSS ، مستقیما به سراغ فایل CSS مورد نظر رفته و دستورات CSS را عوض می کنیم.این روش مزیت دیگری دارد که از شلوغ شدن صفحات وب جلوگیری می کند و کدهای CSS را در یک فایل کاملا مجزا قرار می دهد.از اینرو یکی از روش های رایج در فراخوانی دستورات CSS ،استفاده از فایل های خارجی (external) می باشد.(در صورت نیاز به آموزش تصویری CSS رجوع نمایید)
روش دوم:
در روش دوم همه دستورات CSS را درون یک تگ style قرار می دهند.در این روش دستورات مستقیما داخل خود صفحه وارد می شود نه در یک فایل خارجی.بر خلاف روش اول،این روش در CSS کاربرد کمتری دارد و رایج نیست.هرچند مزایایی در CSS دارد.در نمونه زیر این مسئله را می بینید:
<style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style>
در مثال بالا می بینیم که دستورات CSS در داخل یک تگ style نهفته شده است،از اینرو به این روش در CSS ،روش Inline style sheet یا فراخوانی داخلی گفته می شود.حسن این روش در CSS یکجا بودن دستورات و دسترسی سریعتر و همچنین عدم تعدد فایل های طراحی می باشد.
روش سوم:
در روش سوم کدهای CSS را در درون تگ ابتدایی در HTML می نویسیم، اگر بخواهیم در CSS این موضوع ا بهتر متوجه شویم این مثال را دقت کنید:
<h1 style="color:Red;margin-left:3px;">heading.</h1>
در این مثال می بینید که با استفاده از خصوصیت (attribute) به نام style ،یک سری دستورات CSS را به این تگ اضافه کرده ایم.اولویت در دستورات CSS  : در CSS اولویت با روش سوم است.یعنی هرچه دستورات CSS ، به تگ نزدیکتر شوند ، اولویت اجرای انها توسط مرورگر بالاتر خواهد بود.به همین دلیل می توان از روش سوم برای افزودن خصوصیات CSS به صورت اختصاصی استفاده نمود.
با توجه به درخواست های مکرر دوستان ، به آموزش برنامه نویسی آندروید نیز خواهیم پرداخت.
http://clicksite.ir/layout.php?c=CSS&t=%D9%86%D8%AD%D9%88%D9%87_%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D8%AA_CSS_%D8%AF%D8%B1_%D8%B5%D9%81%D8%AD%D8%A7%D8%AA_%D9%88%D8%A8&act=article&id=18
 ·  Translate
روش های استفاده از CSS در صفحات وب: چگونه CSS را به صفحات وب متصل کنیم؟ متودهای فراخوانی فایل های CSS و دستورات CSS.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در این بخش به معرفی و بحث انواع Input ها در HTML می پردازیم.تگ های Input در HTML ، چه کاربردی دارد؟ هدف از استفاده تگ های Input در HTML چیست؟در این پست ، به صورت خلاصه به انواع تگ های input اشاره می کنیم.قبلا در آموزش مقدماتی HTML به این موضوع پرداختیم.
انواع تگ Input در طراحی با HTML
تگ های input همانگونه که از نام آنها مشخص است، برای دریافت ورودی از کاربر مورد استفاده قرار می گیرد.تگ های input دارای خصوصیات متعدد و مختلفی هستند و هر یک از انها در HTML ، برای یک کاربرد خاصی استفاده می شود.رایج ترین نوع Input در HTML ، نوع text می باشد. این نوع input برای دریافت یک متن و رشته متنی در HTML استفاده می شود.تگ های input ، عموما درون تگ form قرار می گیرند و پس از دریافت اطلاعات انها را به مقصد ارسال می کنند.تگ input با type برابر با checkbox ، در صفحه HTML یک گزینه چک باکس قابل تیک خوردن می سازد که به کمک ان می توان اطلاعاتی را از کاربر دریافت نمود.همچنین برای دریافت پسورد از کاربر ، از input با نوع password استفاده می شود.همچنین ، از input یا نوع submit برای ارسال اطلاعات فرم استفاده می شود.بنابراین ، تعدد input ها در HTML این امکان را به ما می دهد که درخور نوع داده ورودی ، از آنها در صفحات و فرم های HTML استفاده کنیم.
<form action="page.php"> First name:<br> <input type="text" name="name" value="reza"><br> Last name:<br> <input type="text" name="family" value="razavi"><br><br> <input type="submit" value="Submit"> </form>
در این مثال ، می بینید که از دو نوع تگ input جهت دریافت اطلاعات استفاده شده است.علاوه بر این ،نوع radio نیز وجود دارد.در مثال زیر می توانیم این تگ را در HTML ببینیم:
<form> <input type="radio" name="آقا" value="1" checked> <input type="radio" name="خانم" value="1" checked> </form>
همانطور که مشخص است، از تگ input با type برابر با radio ،می توان دکمه های radio در صفحات HTML ایجاد کرد.در صفحات HTML ، عموما در فرم های ثبت نام از انواع input ها استفاده می شود.علاوه بر موارد بالا ،در HTML نوع دیگری input نیز وجود دارد به نام button : این نوع input وظیف ایجاد یک دکمه در صفحه HTML را بر عهده دارد.از دکمه ها می توان برای ارسال اطلاعات یک فرم استفاده نمود.انواع دیگری از input ، در نسخه 5 زبان HTML اضافه شده است، از جمله نوع color و نوع date و یا نوع time که در مقالات دیگر به آن ها خواهیم پرداخت.به هر حال ،آشنایی و شناخت کافی نسبت به input ها گامی مهم در زمینه #آموزش_HTML محسوب می گردد.در صورت علاقه مندی به آموزش برنامه نویسی آندروید کلیک کنید.
http://clicksite.ir/layout.php?c=HTML&t=%D8%A7%D9%86%D9%88%D8%A7%D8%B9_Input_%D9%87%D8%A7_%D8%AF%D8%B1_HTML&act=article&id=16
 ·  Translate
انواع Input در HTML : چه نوع Input هایی در HTML وجود دارد و آموزش Input ها در HTML.مقاله آموزش Input و کاربرد آن در HTML.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در این مقاله به رابطه HTML و مفهوم استاتیک می پردازیم.اما واقعا تفاوت سایت های استاتیک با سایت های داینامیک چیست؟آیا HTML سایت استاتیک می سازد؟سایت های استاتیک همانطور که از اسم آنها مشخص است،سایت های ایستا هستند،یعنی بدون تغییر و غیر پویا.دقیقا HTML وظیفه ساخت سایت استاتیک را دارد. البته نه به این معنا که سایت های داینامیک،از HTML استفاده نمی کنند و نیازی به HTML ندارند.
مفهوم استاتیک در طراحی HTML
برای ساخت یک سایت استاتیک و چه غیر استاتیک ، HTML لازمه طراحی است. بدون استفاده از HTML نه سایت استاتیک و نه غیر استاتیک ،هیچ یک را نمی توان ساخت.اما آنچه مهم است و باید بدانیم، این است که جتی سایت های داینامیک هم نوعی سایت استاتیک هستند! از اینرو از اهمیت HTML کاسته نمی شود.سایت های استاتیک سایت هایی هستند که از کدهای سمت سرور در انها استفاده نمی شود،یعنی محتوای انها برای همیشه ثابت است و برای تغیر محتوا حتما باید کدهای HTML سایت را عوض کرد.به بیان دیگر، سایت استاتیک فقط کدهای HTML و زبان های client-server دارد و پنل مدیریت برای آن طراحی نشده است.آیا سایت های فعلی استاتیک هستند؟ اکثر سایت های موجود در وب،(شاید 100 درصد!) استاتیک نیستند، یعنی ابتدا با HTML طراحی سده اند اما پس از آن به حالت داینامیک تبدیل شده اند.برای اینکار از زبان هایی چون PHP استفاده می گردد. (آموزش PHP)
پس #آموزش_HTML اولین گام برای طراحی هر نوع سایت - خواه استاتیک خواه داینامیک- محسوب می شود.در سایت های داینامیک علاوه بر HTML و قالب سایت، یک CMS وجود دارد که امکان مدیریت محتوا را نیز داریم.با استفاده از یک CMS می توان فرم های تماس با ما را پویا ساخت ، یا اینکه در یک فروشگاه محصولات را مدیریت کرد.پس می توان گفت به تنهایی HTML ،برای طراحی یک سایت کامل کافی نیست.
بنابراین  سایت های استاتیک سایت هایی هستند که  نیاز به بروز رسانی ندارند و صرفا جهت معرفی یک موضوع طراحی می شوند را با  HTML به همراه  Css نوشته و بارگذاری می نمایند ، این نوع سایت ها را تنها طراح و کسی که دانش کد نویسی داشته باشد می تواند ویرایش نماید ، و جهت بروز رسانی سایت باید فایل ها ویرایش شوند و سپس مجددا  روی سرور بارگذاری شوند .اما امروزه کمتر کسی از این نوع سایت استفاده می نماید .
مشاهده آموزش جوملا (کلیک کنید)
http://clicksite.ir/layout.php?c=HTML&t=HTML_%D8%A7%D8%B3%D8%AA%D8%A7%D8%AA%DB%8C%DA%A9_%DB%8C%D8%A7_%D8%AF%D8%A7%DB%8C%D9%86%D8%A7%D9%85%DB%8C%DA%A9%D8%9F&act=article&id=14
 ·  Translate
آیا HTML سایت استاتیک می سازد یا داینامیک:آموزش مفهوم استاتیک در HTML و بررسی تفاوت با سایت داینامیک.
1
Add a comment...

Click Balaghi

Shared publicly  - 
 
در این مقاله به معرفی لینک ها در HTML می پردازیم.یک لینک در صفحه چگونه ساخته می شود؟لینک ها در HTML چه کاربرد هایی دارند؟ چگونه می توان یک لینک به صفحات HTML زد؟
کاربرد تگ anchor و ایجاد لینک در HTML
همانطور که می دانید، برای ایجاد لینک در صفحات HTML ، از تگ anchor استفاده می شود.در این مرحله از آموزش HTML هدف آشنایی با لینک هاست.تقریبا در تمام صفحات HTML ، لینک ها به وفور یافت می شوند.آنچه در مورد لینک های باید بدانیم، نحوه ایجاد اصولی لینک در HTML است.هر لینک شامل مشخصاتی می باشد: از جمله مقصد لینک، عنوان (title) لینک ، نحوه باز شدن لینک (در پنجره جدید ، در تب جدید و ...) و ... همه این موارد در ایجاد یک لینک ، موثر و مهم هستند.لینک های داخلی و خارجی:لینک های HTML را به دو دسته می توان تقسیم کرد، لینک های داخلی و لینک های خارجی. لینک های داخلی ،لینک هایی هستند که بین صفحات داخلی HTML یک سایت ایجاد می شوند، لینک های خارجی لینک هایی هستند که از یک سایت به سایر صفحات در سایر سایت ها متصل می گردد.خصوصیت href در ایجاد لینک:ویژگی (attribute) به نام href در HTML وجود دارد که بوسیله آن می توان ادرس مقصد یک لینک را تعیین نمود.در #آموزش_تصویری_HTML نیز به این موضوع پرداخته ایم.
<a href="maghsad">link</a>
در مثال بالا می بینیم که آدرس مقصد لینک را در جلوی href نوشته ایم،پس برای ایجاد لینک ها در HTML از این تگ یعنی تگ anchor استفاده می کنیم.لینک های nofollow چیست؟ممکن است تا کنون عبارت نوفالو را شنیده باشید ، در حقیقت لینک ها در HTML به دو صورت هستند ، یا فالو و یا نوفالو ، لینک های فالو در HTML بدین معناست که به روبات های جست و جوگر مانند گوگل ،می گوید این لینک را هم دنبال کن! اما نوفالو بدین معناست که لینک HTML ، به روبات دستور می دهد لینک را دنبال نکن!(البته روبات ها جدیدا زیاد هم از این دستور پیروی نمی کنند!) هدف ما بحث بهینه سازی نیست ،هدف آشنایی با انواع لینک ها در صفحات HTML است ، از اینرو تا همین حد به بحث لینک ها بسنده می کنیم.چگونه تصویر را در HTML لینک دار کنیم؟بدون تردید ،تا کنون دیده اید که تصاویر موجود در صفحات HTML ، به صفحاتی لینک شده اند، این کار نیز با استفاده از یک تگ img در درون یک تگ anchor صورت می پذیرد.بدین صورت ف می توان یک تصویر را از یک page ، به یک link در HTML متصل نمود.
جهت آموزش ASP.NET کلیک کنید.
http://clicksite.ir/layout.php?c=HTML&t=%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%84%DB%8C%D9%86%DA%A9_%D8%AF%D8%B1_HTML&act=article&id=12
 ·  Translate
نحوه ایجاد لینک در HTML : چگونه لینک بسازیم؟در این مقاله به معرفی و آشنایی نحوه ایجاد لینک می پردازیم.
1
Add a comment...
Story
Tagline
آموزش html و آموزش css
Introduction
سایت کلیک سایت،فعالیت خود را در ضمینه طراحی سایت،آموزش طراحی سایت،آموزش html ،آموزش css و ... آغاز کرد.
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Previously
tehran
Work
Occupation
work
Skills
webdesine
Links
Other profiles