آموزش html,آموزش css: آوریل 2016

۱۳۹۵ اردیبهشت ۱۱, شنبه

لینک دهی ها

یکی از پرکاربردترین موارد در صفحات وب ، لینک ها هستند.از اینرو در این مقاله به رابطه لینک ها و CSS و همچنین نحوه تنظیم استایل های CSS لینک ها می پردازیم.چگونه می توان به لینک ها در صفحات وب ، استایل خاصی بخشید؟

استایل دهی به لینک ها با CSS

از آنجا که لینک ها هم نوعی متن هستند،از خصوصیات معرفی شده برای متون در CSS ، می توان برای لینک ها هم استفاده کرد.همچنین چون آشنایی با لینک ها در آموزش CSSاهمیت ویژه ای دارند سعی کنید به خوبی آشنا شوید با این مبحث ، به عنوان مثال:

font-size
color
font-family

با دستورات فوق می توان در CSS ، لینک ها را رنگ خاصی بخشید یا اینکه اندازه متن آنها را تغییر داد و یا اینکه فونت خاصی را به لینک ها اختصاص داد.برای هر لینک در CSS چندین وضعیت (state) وجود دارد از جمله:

a:link
a:visited
a:hover
a:active

توضیح اینکه: حالت اول مربوط به تمام لینک های صفحه می شود.یعنی تمام آن تگ های a که لینک دار هستند.می توان با این سلکتور دستورات CSS را اضافه نمود.حالت دوم مربوط به لینک هایی است که کاربر روی آنها کلیک کرده و در CSS با عنوان visited مشخص می وشند.حالت سوم مربوط به لینک هایی است که کاربر ماوس را روی آنها نگه داشته است.ان حالت را در CSS ،با عنوان hover می شناسند.مورد چهارم در CSS ،مربوطه به لینک هایی است که کاربر دکمه ماوس را روی انها فشار داده و نگه داشته است.در CSS به این حالت active گویند.

a:link {
    color: green;
}

/* visited link */
a:visited {
    color: red;
}

در مثال بالا به لینک هایی که بازدید نشده اند با دستور color در CSS ، رنگ سبز داده شده و لینک های بازدید شده رنگ قرمز دارند.توجه نمایید که در CSS ،حتما باید دستور active بعد از دستور hover باشد.برای اینکه زیرخط برای لینک ها ایجاد کنیم یا آن را حذف کنیم از دستور text-decoration استفاده می کنیم.

a:hover {
    text-decoration: underline;
}

در این مثال،زمانی که ماوس روی یک لینک قرار گیرد،یک زیر خط برای آن ظاهر می شود.اینها همه نکات مهم در CSS هستند که هرچند ریز،اما پرکاربرد و بسیار ضروری هستند.برای هر لینک می توانیم حتی رنگ پس زمینه هم انتخاب کنیم.این کار را می توان با دستور background-color انجام داد.می توان با استفاده از استایل های CSS ، یک لینک را به صورت یک دکمه تبدیل کرد.این آموزش در آموزش تصویری CSS در کلیک سایت مطرح شده است. جهت دریافت اطلاعات و آموزشهای دقیقتر و مثال های بیشتر می توانید از آموزش تصویری CSS در سایت استفاده نمایید.جهت دریافت آموزش وردپرس کلیک کنید.

سایت بزرگ کلیک سایت،بهترین مرجع در ضمینه آموزش طراحی سایت و آموزش html و آموزش css میباشد.تمامی فیلم های آموزشی این سایت توسط استادان کاردان و بسیار با تجربه تهیه شده که تضمینی بر کیفیت بالای تمامی آن ها است.قیمت محصولات نیز کاملا رقابتی بوده و با مقایسه آن با سایر سایت ها میتوان به خوبی متوجه این موضوع شد.

لیست ترفند های css

در HTML دیدیم که با ul و ol می توان لیست های ترتیبی و غیر ترتیبی را ساخت.اما چگونه با CSS می توانیم به این لیست ها استایل ظاهری بدهیم؟چگونه می توانی لیست هایی را به صورت شخصی بسازیم؟همه اینها با CSS امکان پذیر است.آموزش CSS برای این امر ضروریست.

کاربرد CSS در لیست های HTML

با استفاده از CSS می تون کارهای مختلفی بر روی لیست ها انجام داد،از جمله تغییر نشانه یا mark لیست،به عنوان مثال می توان به جای دایره های توپر کنار لیست ، با استفاده از CSS رنگ دایره ها را عوض کرد یا اینکه حتی می توان به جای دایره اشکال دیگری را با CSS قرار داد. علاوه بر این در CSS آنچه مهم است این است که سعی کنیم تنوع و خلاقیت به خرج دهیم.به عنوان مثال به جای علامت های پیش فرض لیست،می توانیم از یک تصویر بک گراند هم استفاده کنیم.

تعیین شکل mark لیست با CSS

دستوری تحت عنوان list-style-type در CSS وجود دارد که با آن می توانیم شکل ظاهری لیست را عوض کنیم،به عنوان مثال دقت کنید:

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

مثال فوق، علامت ظاهری یک لیست را می توانید از حالت دایره (circle) به حالت مربعی (square ) تبدیل کند.چگونه می توانیم به جای این اشکال پیش فرض،از تصویر استفاده کنیم؟برای اینکه بتوانیم با CSS ، به لیست های HTML ، شکل ظاهری خاصی بدهیم از دستور list-style-image می توان استفاده کرد.این دستور در CSS وظیف این را دارد که به لیست ها ، شکل ظاهری خاصی را ببخشد.شکلی که در لیست خود CSS موجود نیست.سوال دیگر اینکه چگونه محل mark ها را در لیست جا به جا کنیم؟در CSS ّرای اینکار هم دستوری پیش بینی شده به نام list-style-position که وظیفه آن دقیقا همین مطلب است.به عنوان مثال :

ul {
    list-style-position: inside;
}

دستور بالا،mark های لیست را به درون آیتم ها می آورد.در حالت پیش فرض،در CSS این مقدار برابر است با outside.اما می توان با دستور فوق محل یا position این mark ها یا نشانه های لیست را عوض کرد.آموزش کامل CSS را ببینید.همچنین می توانید از آموزش جوملا نیز استفاده نمایید.

کتاب های جامع در مورد css

در این مقاله به یکی از مهمترین مقالات در زمینه CSS می پردازیم.بحث display ها هرچند در CSS کمتر به آن پرداخته شده اما یکی از مهم ترین و پایه ای ترین مطالب در زمینه آموزش CSS محسوب می شود.چرا که قالب بندی ها و طرح بندی ها در CSS بر پایه همین display انجام می شود.پس در این پست انواع display ها را د رcss مورد بررسی قرار می دهیم و سعی میکنیم با انواع مثال ها مطلب را روشن تر کنیم.

مقایسه display ها در CSS

تگ های مختلف،display های پیش فرش متفاتی دارند.به عنوان مثال تگ div در حالت پیش فرض display از نوع block دارد.یا تگ span به صورت پیش فرض display از نوع inline دارد.اما با استفاده از CSS م یتوانی dispaly های پیش فرض را تغییر دهیم.در لیست زیر،عناصری که display آنها در CSS از نوع block است را می بینیم:

در CSS ، اگر display برابر با block ّاشد بدین معناست که تمام سطر را در بر میگیرد.در گذشته در مقالات آموزش جامع CSS نیز به این موضوع پرداخته شد. از عناصر فوق تحت block-level elements یاد می شود و در طرح بندی و قالب بندی کاربرد زیادی دارند.اما نوع دیگری از عناصر در CSS دارای display از نوع inline هستند.عبارتند از:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

در صورتی که بخواهید یکی از عناصر را با استفاده از CSS مخفی نمایید،کافیست display آن را به حالت none تبدیل نمایید.عناصر دارای display معادل none در صفحه هستند اما دیده نمی شوند.در CSS دو روش برای مخفی کردن عناصر وجود دارد،یکی استفاده از displayو یکی استفاده از visibilty،تفاوت اینها چیست؟در CSS اگر display یک عنصر برابر با none باشد عملا مشابه اینست که هیچ وجود خارجی در سایت ندارد و هیچ تاثیری حتی روی عناصر مجاور و قالب هم نمی گذارد اما اگر عنصری دارای visibilty معادل با hidden باشد در این حالت ، وجود خارجی عنصر حفظ می وشد و فقط از چشم کاربر مخفی می ماند اما تاثیر خود را در قالب و بر روی سایر اجزای صفحه حفظ می کند.

<span>
<a>
<img>

جهت مشاهده آموزش وردپرس کلیک کنید.

حالت های گوناگون css

پس از اینکه طی چندین مقاله با برخی دستورات CSS آشنا دشمی اکنون نوبت به معرفی مفهوم position ها در CSS میرسد.می خواهیم انواع position ها در CSS را بررسی کرده و تفاوت انها را مورد بررسی قرار دهیم.این مقاله ششمین مقاله از سری آموزش CSS می باشد که به صورت کامل آموزش CSS حرفه ای را فرا می گیرید.

position ها و تفاوت آنها در CSS

در CSS یکی از مهمترین و کاربردی ترین مباحث ، مبحث position هاست.در CSS موقعیت ها یا پوزیشن های اصلی عبارت است از:

static
relative
fixed
absolute

نوع اول یعنی استاتیک (static) ، بدین معناست که عنصر مورد نظر به صورت ایستا و به صورت پیش فرض موقعیت خود را تعیین می کند.مفهوم static را در مقایسه با سایر موارد بهتر خواهیم فهمید.ابتدا fixed را بررسی می کنیم.در CSS اگربخواهیم عنصری را در محلی ثابت نگه داریمکه حتی با تغییر اسکرول بار ،موقعیت ان جا به جا نشود از موقعبت مکانی fixed استفاده می کنیم.این موقعیت در CSS ،برای مواردی نظیر سیستم های چت استفاده می شود.یا در هر جایی که بخواهیم یک عنصر را در موقعیت خود ثابت نگه داریم.بنابراین توجه نمایید که هر عنصری که موقعیت ان fixed ّاشد موقعیت مکانی خود را نسبت به کل پنجره تنظیم می کند و حتی با تغییر اسکرول بازهم سرجای خود باقی می ماند.پس از ان نوبت به موقعیت مکانی absolute در CSS میرسد.این موقعیت در مواردی استفاده میشود که بخواهیم موقعیت یک عنصر را با CSS بدون وابستگی به عناصر کناری تعیین کنیم.یعنی هر عنصری که position آن از نوع absolute باشد هیچ تاثیری روی سایر عناصر و موقعیت انها ندارد و به عکس،هیچ تاثیری از عناصر همجوار نمی پذیرد.این نوع position در CSS کاربرد فراوانی دارد.نکته قابل توجه که در فیلم آموزش CSS به آن اشاره کردیم این سات که موقعیت absolute ،موقعیت مکانی خود را نسبت به اولین عنصر والدی که موقعیتی غیر از استاتیک داشته باشد تنظیم میکند.همچنین موقعیت های absolute,fixed,relative را می توان با استفاده از خصوصیات top , bottom ,left , right موقعیت انها را تنظیم کرد.و اما پوزیشن releative معروف به position نسبی می باشد.با این پوزیشن در آموزش تصویری CSS قبلا آشنا شده ایم.جهت تسلط بیشتر بر این موارد،به آموزش CSS مراجعه کنید.در صورت علاقه مندی به آموزش ASP.NET کلیک کنید.

تفاوت های مختلف css

در ادامه مقالات آموزش CSS : شاید تا کنون دو مفهوم inline-block و float را در CSS دیده باشید.این دو دستور از جمله کاربردی ترین دستورات در CSS هستند.اما تا کنون مقاله ای را به شخصه ندیدم که دقیقا تفاوت انها در CSS را تشریح کند.

تفاوت بین float و inline-block در CSS

همانطور که در آموزش CSS دیده ایم ، دستور float برای شناور کردن یک تگ در CSS استفاده می شود.این دستور م یتواند یک عنصر را به سمت راست یا به سمت چپ شناور کند ، نکته مهم اینست که اگر عنصری دستور float بگیرد چه تاثیری بروی استایل و CSS سایر عناصر دارد؟ پاسخ اینست که اگر عنصری float ابرابر با Right بگیرد،عناصر همجوار را به سمت چپ منتقل می نماید.و برعکس هم صادق است.و اما دستور inline-block که یکی از انواع display ها در CSS است ،چه کاری انجام می دهد و چه نقشی در CSS دارد؟اگر به چندین عنصر که در کنار هم هستند، با استفاده از دستورات CSS ، مقدار display برابر با inline-block ّدهیم،اتافقی که می افتد اینست که عناصر دقیقا مثل حالتی که Float دهیم کنار هم قرار می گیرند اما با این تفاوت که ،اگر عنصری در CSS از نوع inline-block باشد،عناصر کناری و مجاور خود را به سمت مقابل منتقل نمی کند.این نکته اساسی هرچند در CSS مغفول مانده ولی از اهمیت بسیار زیادی برخوردار است.پس تفاوت float و نمایش inline-block دقیقا در این است که تاثیر آنها بر روی عناصر مجاور متفاوت است.(آموزش برنامه نویسی آندروید)

اینکه در چه مواردی باید از کدام دستور استفاده کرد،بستگی به موقعیت و شرایط دارد،اما هردو روش در CSS کاربردهای خاص خود را دارد.هم دستور Float و هم دستور Inline-block برای طراحی قالب با استفاده از CSS مورد استفاده قرار می گیرد و مکررا از آن می توان بهره برد.اما شناخت دقیق انها نیاز به آموزش تصویری CSS دارد.می توانید از آموزش های مربوط به CSS استفاده نمایید تا تسلط بیشتری نسبت به این موضوع پیدا کنید.

ساختار اصلی css

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

نحوه ساخت Tooltip در CSS

برای ساخت یک Tooltip لازم است مقاله مربوط به آشنایی با position ها در CSS را بخوانید.این مقاله مثالی کاربردی برای تمرین بیشتر در آموزش CSS خواهد بود که به شما کمک می کند دستورات آموزش داده شده را بهتر مسلط شوید و عمیق تر درک نمایید.

<style>
/* Tooltip container */
.tooltip {
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    position: relative;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Tooltip text */
.tooltip .tooltiptext {
width: 120px;
    visibility: hidden;
    background-color: brown;
    color: #fff;
    padding: 7px 0;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    z-index: 2;
}



</style>

<div class="tooltip">mouse hover here
  <span class="tooltiptext">Tooltip text is here.</span>
</div>

کدهای بالا نحوه ساخت یک tooltip را در CSS آموزش می دهد.در مثال بالا با استفاده از یک تگ div و کلاس اختصاص داده شده به ان،این tooltip ساخته شده است.در مورد استفاده از کلاس ها در CSS در مقالات گذشته توضیح داده شد.خاصیت border-radius در CSS وظیفه انحنا بخشیدن به اطراف عنصر را دارد.از اینرو جهت زیبایی ظاهری خروجی کار، به اندازه کمی border-radius اختصاص داده شده است.عرض یا width این tooltip را برابر با 120 پیکسل قرار داده ایم.در مورد اینکه چرا برای ساخت این tooltip از پوزیشن absolute استفاده شده ،به مقاله مربوطه آموزش انواع پوزیشن ها در CSS مراجعه نمایید.همانطور که مطرح شده بود ،پوزیشن absolute یکی از پرکاربردترین نوع پوزیشن ها در CSS محسوب می شود.لذا لازم است با کاربرد آن بیشتر آشنا شویم.دستور border-bottom جهت ایجاد کادر در پایین اضافه شده است.در این دستور CSS ،توجه نمایید که به صورت مخفف ، ضخامت و رنگ بندی و نوع کادر (dotted) مشخص شده است که کادر را به صورت نقطه نقطه در پایین این عنصر قرار می دهد.می توانید از این کد برای ایجاد tooltip استفاده نمایید.توجه کنید که برای ایجاد یک tootip واقعی بهتر است از جاوااسکریپت هم استفاده نمایید.هرچند با استفاده از CSS می توان این tooltip را ایجاد کرد اما با استفاده از جاوااسکریپت ابزارها و امکانات نسبتا بیشتری برای ساخت tootip در css در اختیار ما قرار خواهد گرفت.طی چندین مقاله قصد داریم آموزش مقدماتی و پیشرفته CSS را دنبال کنیم.در صورتی که به آموزش جوملاعلاقه مند هستید کلیک کنید.

دستورات مختلف css

در جلسه قبل با مفهوم و کاربرد 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 به صورت اختصاصی استفاده نمود. نحوه افزودن کدهای CSS به صفحات وب

با توجه به درخواست های مکرر دوستان ، به آموزش برنامه نویسی آندروید نیز خواهیم پرداخت.

بک گروند در css

در دو جلسه قبل با مواردی در 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 استفاده نمایید. در سیستم های مدیریت محتوا چون سیستم جوملا (آموزش جوملا ) و ... نیز از همین سیستم استفاده می شود.

نکات مهم css

در 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 می پردازیم.

تنظیمات مختلف css

در این مقاله با دو مفهوم 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 می پردازیم.

تعیین طول و عرض در CSS , آموزش width در CSS

جهت آموزش جوملا کلیک کنید.

آموزش های ویژه css

این مقاله به نحوه استایل دهی به متن ها در صفحات وب ، با استفاده از 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 کلیک کنید.

استفاده های مختلف css

هنگام استفاده از فونت ها در 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;
}

جهت آموزش برنامه نویسی آندروید کلیک کنید.

کاربرد های css

در سری مقالات بلاگ 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 آشنا خواهیم شد.

آموزش طراحی Html

در این مقاله به بررسی مفهوم ریسپانسیو (واکنشگرا) در HTML می پردازیم.شاید تا کنون به گوش شما هم خورده باشد که قالب ریسپانسیو در HTML اهمیت خاصی دارد. امروزه با گسترش گوشی ها و تبلت های هوشمند، HTML نیز با مفهومی به نام واکنشگرا ، آشناتر شده است.سوال اصلی اینست که قالب HTML را برای کدام نمایشگر باید طراحی کرد؟آیا باید ابعاد نمایشگرهای بزرگ در HTML را مد نظر قرار داد ، یا اینکه نمایشگرهای کوچک ؟ اینجاست که مفهوم واکنشگرا در HTML مطرح می شود.در واقع، واکنش گرا بودن یک قالب HTML ،بدین معناست که قالب طراحی شده، بتواند با انواع نمایشگرها خود را مطابقت دهد و به صورت هوشمند ، صفحه HTML را تغییراتی بخشد که با آن سایز نمایشگر مطابقت یابد.

اهمیت قالب های واکنشگرا در HTML

مطمئنا با گسترش مانیتورهای متعدد و ابزارهای مختلف ،بر اهمیت قالب های ریسپانسیو HTML نیز می افزاید.چرا که اگر کاربران سایت شما، با قالب HTML نامناسبی رو به رو شوند، این برای بازدید های مجدد سایت شما ،گزینه مناسبی نخواهد بود.پس ریسپانسیو بودن قالب HTML ،موجب سادگی و ایجاد رابط کاربری دلچب تری خواهد بود و همین امر ، به جذب مخاطب به سایت کمک می کند.از سوی دیگر حتی موتورهای جست و جو گر نیز اهمیت خاصی برای صفحات HTML واکنشگرا قائل هستند.

چگونه در HTML ، قالب واکنشگرا بسازیم؟

این موضوعی است که در آموزش HTML بارها به آن پرداخته ایم و آموزش بوت استرپ را نیز در این رابطه تهیه کرده ایم. برای ریسپانسیو سازی یک قالب HTML ، روش هایی وجود دارد.یکی از روش های ریسپانسیو سازی یک قالب HTML ،استفاده از فریم ورک هایی همچون بوت استرپ می باشد.این فریم ورک ها علاوه بر اینکه قابلیت ریسپانسیو کردن سایت را دارند، امکانات جانبی دیگری نیز فراهم می نمایند که در آموزش طراحی سایت با HTML کمک شایانی به ما خواهند داشت.در حال حاضر فریم ورک های زیادی برای طراحی واکنشگرا در HTML ارائه شده است ، اما از بین آنها وبت استرپ حرف اول را می زند.به جزات می توان گفت در زمینه طراحی قالب ریسپانسیو با HTML ، بهترین پیشنهاد فراگیری بوت استرپ است که البته پیش از آن لازم است آموزش HTML و همچنین آموزش CSS را پشت سر گذاشته باشیم.پیش نیاز فراگیری این فریم ورک ها ،آشنایی با HTML می باشد.توجه کنید که بدون دانش HTML و CSS بسیار اشتباه است که مستقیما به سراغ این فریم ورک ها بروید، چرا که در شخصی سازی این فریم ورک ها قطعا لازم است تسلط نسبی بر مباحث HTML و CSS داشته باشید.آموزش ASP.NET را در اینجا ببینید.

کاربرد های مختلف html

یکی از مهم ترین و اصلی ترین موارد لازم برای آموزش HTML ، آشنایی با فرم ها و نحوه کار انها در HTML است.واقعا چرا فرم ها در HTML اهمیت دارند؟

نقش فرم ها در HTML و ارسال اطلاعات در HTML

با استفاده از فرم ها می توان در بین صفحات HTML ، داده ها را منتقل نمود.در بسیاری از سایت ها بسیار پیش می آید که ما قصد داریم اطلاعاتی را از کاربر گرفته و به یک سند HTML یا فحه دیگر ارسال کنیم.در این مقاله، قصد داریم نحوه ارسال و تبادل داده ها را در HTML بررسی کنیم.فرضا تمام فرم های عضویت،فرم ثبت سفارش در صفحات HTML ، همگی جهت دریافت اطلاعات و ذخیره آنها در پایگاه های داده می باشد.قبلا در آموزش کامل HTML هم به این مطلب پرداختیم.

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

در هر فرم HTML دو طریق برای ارسال داده ها وجود دارد، روش GET و روش POST ،اما کدام یک در form ها بهتر است؟و چه تفاوت هایی دارند؟متود GET برای زمانی است که داده ارسالی امنیتی نباشد،قبلا هم در آموزش HTML دیدیم که اگر به عنوان مثال، پسورد را در فرم HTML میخواهیم منتقل کنیم،در این حالت،از متود POST استفاده شد،چرا که متود GET در فرم ها ، پس از ارسال ، مقادیر ارسالی در نوار آدرس صفحه HTML قابل مشاهده است.از اینرو، در مواردی امنیتی،تاکید می شود از متود POST در فرم های HTML استفاده شود.

<form>
  name:<br>
  <input type="text" name="name"><br>
  family:<br>
  <input type="text" name="family">
</form>

در متود GET ،اطلاعات در HTML تا حد معینی قابلیت جابه جایی دارند،یعنی میزان داده های ارسالی توسط form ، محدود است. اما در متود POST حجم این داده ها می تواند خیلی بیشتر باشد.از اینرو ، متود POST و GET هر دو در فرم های HTML کاربردهای خاص خود را دارند و در صفحات HTML خاص خود مورد استفاده قرار می گیرند.در یک فرم چه نوع داده ای قابل دریافت است؟ در هر فرم HTML ، می توان انواع تگ های input را قرار داد،به عنوان مثال می توان یک چکباکس در فرم HTML قرار داد، یا اینکه یک لیست در فرم HTML قرار داد، پس لازم به ذکر است در هر فرم HTML ، انواع داده ها (عددی، رشته ای، true,flase) را می توان دریافت نمود.

در تصویر بالا می بینید که در یک فرم، انواع input ها را در صفحه HTML می توان قرار داد. آموزش وردپرس را اینجا ببینید.

لینکسازی ها

در این مقاله به معرفی لینک ها در 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 کلیک کنید.

مشخصات جاوا اسکریپت ها

چگونه می توان دستورات جاوااسکریپت را در یک صفحه 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 نمایانگر می شود مبنی بر اینکه مرورگر شما، از جاوااسکریپت پشتیبانی نمیکند.دوستانی که به آموزش وردپرس علاقه دارند کلیک کنند.