css چیست و چه کاربردی دارد و سی اس اس مخفف چیست ؟ آموزش طراحی سایت با سی اس اس به زبان ساده

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

css چیست ؟ مخفف چیست ؟

css مخفف cascading style sheet است. به معنای صفحات استایل دهی موازی . یعنی شما با استفاده از css میتوانید در فایلی جداگانه استایل و نکات ظاهری خود را توصیف کنید. این که این توصیف ها در صفحه ای مجزا انجام میشود این خوبی را دارد که تمام نکات ظاهری ما در فایلی جداگانه ذخیره میشود و برای تغییرات جزئی کافی است آن را بررسی کنیم. البته این قابلیت را داریم که استایل دهی به صفحات را درون خود فایل html انجام دهیم که تمام این موارد را در این مقاله بررسی میکنیم.

css چه کاربردی دارد ؟ چگونه کار میکند؟

با css نکات ظاهری سایت شما توصیف میشود. برای مثال در متن زیر

<موضوع> معرفی وبسایت ایرابرود <موضوع>

<بالای صفحه> زمان تاسیس 1398

مدیر وبنیانگذار علیرضا صدیقی فرد <بالای صفحه>

<پاراگراف> این وبسایت یک مجله ی بین المللی اینترنتی است که موضوعات مختلفی مانند هنر ، آموزش ، آشپزی وغیره را در اختیار کاربران قرار میدهد <پاراگراف>

اگر بخواهید پاراگراف خود را قرمز رنگ کنید و موضوع خود را در وسط خط قرار دهید در فایلی جداگانه این ویژگی ها را توصیف میکنیم. مانند خطوط زیر

موضوع{

متن:وسط;

}

پاراگراف{

رنگ:قرمز;

}

 

در این صورت اگر در فایل html آدرس محل css خود را بنویسید نکات ذکر شده برای اچ تی ام ال شما اعمال میشود.

css چیست و چه کاربردی دارد و سی اس اس مخفف چیست ؟ آموزش طراحی سایت با سی اس اس به زبان ساده

چگونه در html از css استفاده کنیم ؟

سه راه دارید

راه اول:

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

<link rel="stylesheet" type="text/css" href="آدرس css">

راه دوم:

در فایل html تمام خطوط css را بین دو تگ style بنویسید.

<style>

خطوط حاوی css

</style>

راه سوم:

درون خطوط هر بخش html خصوصیات مخصوص آن را بنویسید.

<h1 style="text-align:center;">

معرفی وبسایت ایرابرود

</h1>

<p style="color:red">

این وبسایت یک مجله ی بین المللی اینترنتی است که موضوعات مختلفی مانند هنر ، آموزش ، آشپزی وغیره را در اختیار کاربران قرار میدهد

</p>

آموزش css به زبان ساده – آموزش ساده و سریع css

چگونه برای المنت های html مشخصه تعیین کنیم ، چگونه مشخص کنیم که کدام المنت ها را می خواهیم توصیف کنیم.

یکی از راه ها این است که به فرض تمام h1 ها را قرمز رنگ کنیم . برای این کار کافی است نام خود تگ های html را در css استفاده کنیم ، مانند زیر :

h1{

color:red;

}

اما اگر بخواهیم بعضی از آنها قرمز و بعضی آبی باشد چه باید کنیم ؟ میتوانیم انها را کلاسه بندی کنیم ، برای مثال کلاس red تعیین میکند که کدامین h1 ها قرمز باشد ,و کلاس blue تعیین میکند کدام آنها آبی باشد. در فایل css قبل از نام کلاس یک نقطه میگذاریم.

در فایل html

<h1 class="blue or red">

در فایل css

.red{

color:red;

}

.blue{

color:blue;

}

راه حل بعدی برای انتخاب المنت های مختلف تعیین id است. در css قبل از نام id از # استفاده میکنیم.

در فایل html

<p id="color">

در فایل css

#color{

color:red;

}

css چیست و چه کاربردی دارد و سی اس اس مخفف چیست ؟ آموزش طراحی سایت با سی اس اس به زبان ساده

متون

به صورت پایه ، متون را با فونت آنها و رنگ و اندازه و چپ چین ، راست چین و وسط چین بودن آنها توصیف میکنیم. برای توصیف متون به متن زیر توجه کنید.

.txt{

font-family:نام فونت هایی که استفاده میکنید.

text-align:left یا right یا center; برای چپ چین راست چین یا وسط چین کردن

color: rgb()یا #color code یا color name تعیین رنگ

 font-size:اندازه ی فونت

}

دقت کنید که rgb از ترکیب رنگ سبز و آبی و قرمز رنگ مورد نظر شما را میسازد برای مثال ( مقدار ابی رنگ , مقدار سبزی رنگ , مقدار قرمزی رنگ) مقداری که تعیین میکنید باید از 255 باشد. راه حل دیگر انتخاب کد رنگ است که پس از # قرار میگیرد. یا میتوانید صرفا نام رنگ را بیاورید.

مرز و گوشه ها

المنت ها میتوانند مرز داشته باشند. مرز میتواند کلفت یا نازک باشد ، استایل داشته باشد ، رنگ داشته باشد . و حتی گوشه های المنت مورب یا تیز باشند.

#border{

border: 4px dotted blue;

به ترتیب از چپ ضخامت و استایل و رنگ مرز تعیین شده است.

border-radius:5px;

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

}

میتوانید با border-right تنها مرز راستی و به ترتیب با border-left  border-top  border-bottom تنها مرز پایین ، بالا و چپ تعیین کنید.

مکان ها و فاصله ها

یک المنت میتواند مرز درونی (فاصله ی محتوا تا مرز)  که این فاصله با padding مشخص میشود و فاصله ی بیرونی یعنی margin که فاصله ی مرز المنت تا دیگر المنت ها را مشخص میکند داشته باشد.

#dist{

margin:30px;

padding:10px;

}

مانند border این ویژگی ها را نیز میتوان تنها برای سمت چپ ، راست یا بالا و… تعیین کرد.

نوع تعین مکان یک المنت میتواند با position مشخص شود. برای مثال relative تعیین میکند که فاصله به کمک دیگر المنت ها مشخص میشود. یا sticky با حرکت کردن در صفحه المنت شما در جای خود ثابت میماند. یا static که تعیین میکند المنت ها به ترتیب پس از یکدیگر قرار میگیرند.

#position{

position:relative, absolute, sticky;

}

 

آموزش css رسپانسیو

چرا باید وبسایت ها را به صورت رسپانسیو توسعه دهیم

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

css چیست و چه کاربردی دارد و سی اس اس مخفف چیست ؟ آموزش طراحی سایت با سی اس اس به زبان ساده

چگونه css را به صورت رسپانسیو بنویسیم ؟

استفاده از درصد

برای المان هایی مانند عرض یا طول از درصد استفاده کنید. مثلا فلان عکس ، 40 درصد از عرض صفحه را بگیرد. یا 30 در صد از گوشه ی چپ فاصله داشته باشد. در این صورت این درصد بر اساس اندازه ی صفحه ها عمل خواهد کرد و پویایی را به سایت شما میدهد.

.img{

margin : 50% 50%;

width:20%;

height:100%;

}

استفاده از توابع عرضی

راهکار دیگر این است که برای هر عرض صفحه ای اندازه های خاص تعیین کنیم

برای مثال اگر قالب معمولی و پیش فرض وبسایت ما برای متن A و تصویر B به صورت زیر باشد.

.A{

font-size:10pd;

color:white;

}

.B{

width:1000px;

{

میتوانیم با استفاده از توابع زیر تعیین کنیم که برای هر اندازه ی عرض صفحه چه اندازه های خاصی داریم. مثلا در زیر برای اندازه صفحه های 300 px و 800px تغیراتی در قالب پیش فرض داده ایم.

دقت کنید که در اندازه ی 800px ما اندازه ی فونت را تغییر نداده ایم ، پس اندازه ی پیش فرض 10pd اعمال میشود. همچنین رنگ فونت ها را اصلا تغییر نداده ایم پس رنگ پیش فرض تعیین میشود.

@media (max-width: 300px){

.B{

width:250px;

}

.A{

font-size:8pd;

}
}

@media (max-width: 800px){

.B{

width:500px;

}

}


0 Comments

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

خدمات ایرابرود

تعرفه تبلیغات اینترنتی ثبت آگهی ارزان رپورتاژ ارتباط با ما

RABROD

Copyright © · All Rights Reserved designed & developed by · irabrod.ir