30 درصد تخفیف در جشنواره پاییزه توسینسو
30 درصد تخفیف پاییزه
کد تخفیف: autumn1402
ارسطو عباسی

آموزش رایگان CSS به صورت گام به گام

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

دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
برای مشاهده تخفیف های ویژه امروز کلیک کنید
سرفصل های این مطلب
  1. معرفی و آشنایی با نوشتن دستورات
  2. شیوه های استفاده از CSS
  3. رنگ ها و پشت زمینه ها
  4. حاشیه ها یا Margins
  5. Margin , Padding , height , Width
  6. آموزش کار با متن
  7. فونت‌ و قالب‌های متنی
  8. لینک ها و لیست ها
  9. آموزش کار با جدول ها
  10. Display و Max-width
  11. موقعیت ها , Overflow
  12. جهت ها, تراز ها و غلظت
  13. شفافیت یا Opracity
  14. واکنشگرایی یا Responsive
  15. Viewport چیست؟

معرفی و آشنایی با نوشتن دستورات

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

توسط این قابلیت می توانید که تعیین کنید یک جز در HTML به چه شکلی به نمایش گذاشته شود.CSS مخفف کلمات Cascading Style Sheets به معنی شیوه نامه آبشاری است. CSS از تکرار کارهای بسیاری جلوگیری می کند. مثلا توسط CSS شما فقط یکبار تعیین می کنید مقدار عناوین چه رنگی و یا با چه اندازه ای باشد.

اجزای استاندارد یک دستور CSS:

CSS_Syntax
  • Selector: در ابتدای یک دستور CSS وجود دارد. Selector در واقع جزئی از HTML است که می خواهیم به آن استایل و ظاهر بدهیم. برای مثال h1 یک Selector است.
  • Delecration: هر دستور CSS در واقع بیان کننده یک استایل خاص است. برای مثال Color:Red; یک بیان کننده برای جزئی از HTML است.
  • Property , Value: هر بیان کننده ای از دو قسمت خصوصیت و مقدار بهره مند است. در بیان کننده بالا خاصیت Color با Red مقداردهی شده است.

یک مثال کلی:

H1 
{
color:red
font-size=12px;
}

H1 در نقش Selector | Color:red; در نقش Delecration – Color | 12px در نقش Value

Selector های CSS به دو صورت Element Selector , ID – Class Selector هستند:

  • Element Selector: اجزای HTML که از قبل آماده شده و آماده استایل دهی هستند مثل p یا H1.
  • ID – Class Selector: در آموزش گام به گام HTML به کلاس و آی دی های مربوط به یک Div اشاره شد. در یک Div می توان چندین تگ HTML را جای داد و به صورت کلی استایل دهی کرد. برای اشاره به یک ID در CSS از # و به یک Class در CSS از . استفاده می شود.
  • کامنت های CSS: بعضی اوقات در برنامه نویسی می خواهیم بعضی از دستورات صرفا به صورت پیغام نمایش داده شوند و هیچ تاثیری در اجرای برنامه نداشته باشند، برای اینکار از کامنت های استفاده می شود. هر دستوری را که نخواهیم در سی اس اس به اجرا در آوریم باید آن را بین
 /* --------- */

قرار دهیم.

شیوه های استفاده از CSS

برای آنکه کدهای CSS را به یک فایل HTML ارتباط دهیم سه راه متفاوت وجود دارد:

  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet: اولین و استانداردترین راه استفاده از CSS استفاده از فایل CSS خارجی است. معمولا وقتی پروژه طراحی سایت بزرگ باشد از این راه استفاده می کنند. فایل CSS معمولا style.css نام گذاری می شود و در همان پوشه ای قرار می گیرد که فایلهای HTML قرار دارند. شیوه اتصال فایل CSS خارجی به یک فایل HTML استفاده از تگ link درون تگ Head می باشد. این تگ به صورت زیر استفاده می شود:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Style Sheet: یکی دیگر از راههای استفاده از دستورات CSS در فایل HTML به صورت تگ داخلی است. بدین صورت که هر دستوری که در CSS می خواهید اعمال شود را بین تگ style قرار دهید. این تگ به صورت زیر استفاده می شود:

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

Inline Style: اگر بخواهیم صرفا به یک تگ خاص در بین تگ های مشابه استایل دهیم از این حالت استفاده می کنیم. تمام المنت ها در HTML دارای خاصیت style است که مقدار آن برابر دستورهای CSS است. این تگ به صورت زیر استفاده می شود:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

این سه راه تنها راههای موجود برای ارتباط فایل CSS با HTML است.

رنگ ها و پشت زمینه ها

رنگ ها : در CSS سه راه متفاوت برای تعیین رنگ یک المنت وجود دارد:

  • استفاده از نام رنگ
  • استفاده از کد RGB
  • استفاده از کد HEX

نام رنگ: آسانترین راه برای تعیین رنگ یک المنت استفاده از نام رنگ است، البته طراحان حرفه ای هیچوقت دست به همچنین کاری نمی زنند زیرا که تعداد رنگ ها محدود بوده و تنها 140 رنگ استاندارد برای اینکار وجود دارد. در دستور زیر هر متنی که مطعلق به تگ p باشد به رنگ قرمز درآمده است.

p
{
	color:red;
}

کد RGB: این کد تلفیقی از رنگ های قرمز، سبز و آبی را به ما نشان می دهد. مقدار هر رنگ می تواند بین 0 تا 255 باشد. برای مثال اگر مقدار اولی برابر 255 ، دومی برابر 0 و سومی برابر 0 باشد رنگ خروجی قرمز است.

p
{
	color:rgb(255,0,0);
}

کد HEX: این کدها نیز تلفیقی از رنگ های قرمز، سبز و آبی است با این تفاوت که عددگذاری مربوط به این کد از نوع هگزادسیمال است. از 0 شروع و به f خاتمه می یابد. اگر مقدار اولی برابر f و مقدار دومی و سومی برابر 0 باشد رنگ خروجی قرمز است.

p
{
	color:#ff0000;
}

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

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background-color: یکی از مهمترین خاصیت ها در CSS استفاده از رنگ در پشت زمینه است. همانطور که گفتم برای استفاده از رنگ در CSS سه راه متفاوت وجود دارد، هر کدام از این مقادیر را می توانید به background-color تخصیص بدید.

body
{
	background-color:red;
}
h1
{
	background-color:rgb(255,0,0);
}
p
{
	background-color:#ff0000;
}

background-image: جدای از رنگ می توانید تصویری را به عنوان پشت زمینه نسبت داد. برای اینکار معمولا از تصاویر موسوم به Pattern استفاده می کنند.

body
{
	background-image: url(1.jpg);
}

url یکی از خاصیت های background-image است که مشخص می کند تصویر در چه آدرسی قرار دارد.

  • background-repeat: به صورت پیش فرض زمانی که تصویری به عنوان پیش زمینه انتخاب می شود، برای آنکه تصویر تمام صفحه را در بر بگیرد تصویر تکرار می شود. اما اگر بخواهیم کنترل این تکرار را در دست بگیریم از دستور background-repeat استفاده می کنیم. این دستور می تواند چهار مقدار repeat ، repeat-x ، repeat-y و no-repeat (تکرار از همه جهات تکرار افقی، عمودی و یا بدون تکرار) بگیرد.
  • background-position: از این دستور برای تعیین مکان یا موقعیت یک تصویر استفاده می شود. برای مثال می توان مقدار آن را برابر right قرار داد تا تصویر پیش زمینه به طرف راست صفحه برود. البته مقدار این دستور می تواند دو جهت مختلف مثل right top باشد که همان شمال شرقی خودمان است، اما مقدار right left صحیح نیست.
body
{
	background-position:right top;
}

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

background-attachment:fixed;

یک ویژگی بسیار جالب : دستورات مبتنی بر background را می توانید به صورت کوتاه بنویسید. به مثال زیر توجه کنید:

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

بجای نوشتن دستور background-color , image , repeat , position می توانید از این شیوه دستور نویسی استفاده کنید.

حاشیه ها یا Margins

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

همچنین برای جلوگیری از شلوغ شدن یک صفحه وب باید از حاشیه ها استفاده کنیم، توضیحات کافی است بریم سروقت دستورات:به صورت کلی حاشیه ها می توانند از چهار جهت وجود داشته باشند، همچنین می توان فقط از یک طرف باشند. کنترل چگونگی نمایش حاشیه ها نیز در دستان شماست.

  • Border-style: برای تعیین حاشیه یک المنت باید از این دستور در استایل مربوط به آن المنت استفاده کنید. مقادیر این دستور عبارت است از:
  • dotted – تعریف یک حاشیه به صورت ........
  • dashed - تعریف حاشیه به صورت - - - -
  • solid - تعریف حاشیه به صورت خط مستقیم
  • double - تعریف حاشیه به صورت دو خط مستقیم
  • groove - تعریف حاشیه به صورت سه بعدی
  • ridge - تعریف حاشیه به صورت سه بعدی
  • inset - تعریف حاشیه به صورت سه بعدی
  • outset - تعریف حاشیه به صورت سه بعدی
  • none - بدون حاشیه
  • hidden - تعریف یک حاشیه مخفی
  • mix– حالت مخلوط

روش استفاده از این مقادیر بسیار آسان است، کافی است مقدار border-style مربوط به یک المنت را برابر مقادیر بالا در نظر بگیرید. به این دستور توجه کنید:

p
{
border-style:outset;
}

آخرین حالت و در عین حال جالبترین حالت حاشیه ها از نوع mix است، این حالت باعث می شود کنترل کاملی روی تمام جهت های حاشیه داشته باشید.

p
{
border-style: double dashed solid dotted;
}

مقادیر به ترتیب، بالا، راست، پایین و چپ می باشد.

  • border-width: برای تعیین اندازه عرض حاشیه ها از این دستور استفاده می شود. اگر می خواهید که هر چهار طرف حاشیه دارای یک اندازه عرض باشد به این دستور فقط یک مقدار با واحد px بدهید اما اگر می خواهید چهار طرف با همدیگر متفاوت اندازه گیری شود باید چهار مقدار متفاوت به حاشیه بدهید. به مثال های زیر توجه کنید.
p
{
	width:auto;
	height:100px;
	border-style:solid;
	border-width: 2px;
}

p
{
	width:auto;
	height:100px;
	border-style:solid;
	border-width: 2px 2px 2px 10px;
}
  • border-color: رنگ حاشیه ها نیز از مهمترین قسمت های یک حاشیه است، نکته ای که در مقدار دهی تمام اجزای دستور border وجود دارد اینست که اگر تک مقداری باشد به کلیه قسمت های حاشیه اعمال می شود اما اگر چند مقدار باشد به جهات مختلف مقدار دهی می شود. برای مثال اگر مقدار این دستور blue باشد تمام حاشیه ها به رنگ آبی تبدیل می شوند اما اگر blue red green black باشد حاشیه بالا آبی، راست قرمز، پایین سبز و چپ سایه تبدیل می شود. امیدوارم از این مسئله متوجه شده باشید.
p
{
border-style:solid;
border-color: blue red green black;
}

کوتاه کردن اجزای دستور border: اگر بخواهیم حاشیه ای از نوع نقطه ای، با رنگ سبز و اندازه 5 پیکسل سه دستور جداگانه برای هر کدام از آنها بنویسید اما یکی راه دیگر همیشه وجود دارد، به تفاوت دو دستور زیر توجه کنید:

p
{
border-style: dotted;
border-color: #00ff00;
border-width: 5px;
}

p
{
border: dotted #00ff00 5px;
}

اگر توجه داشته باشید در درس قبل هم این قضیه برای دستور background وجود داشت. اعمال محدودیت در حاشیه ها: وقتی برای المنتی حاشیه می سازید، این حاشیه در چهار طرف اعمال می شود. اما اگر بخواهیم صرفا یک طرف المنت حاشیه داشته باشد چه؟ کافی است بجای استفاده از border-style از border - left right top bottom استفاده کنید. به مثال زیر توجه کنید.

p
{
border-left:solid 5px #ff00ff;
}

یک اشتباه بزرگ: بعضی از دوستان بجای استفاده از حالت mix در broder-style به هر کدام از جهت های حاشیه به جدای استایل می دهند، مثال زیر اشتباه است:

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

مثال زیر درست است:

p{
border-style: dotted dashed solid double;
}
  • border-radius: گوشه های حاشیه در حالت عادی تیز هستند، برای آنکه گوشه های حاشیه گرد شود از این دستور استفاده می شود. به مثال زیر توجه کنید.
p {
    border: 2px solid red;
    border-radius: 5px;
}

Margin , Padding , height , Width

در قسمت قبل به صورت کامل راجب به حاشیه ها صحبت کردیم؛ در این آموزش می خواهیم کنترل فواصل المنت ها در یک صفحه وب را با margin , padding فرا بگیریم.

  • Margin: برای ساخت یک فاصله بیرونی از المنت های خارجی از این دستور استفاده می شود. المنت خارجی: وقتی متنی درون کادری قرار می گیرد نسبت متن به کادر المنت داخلی و نسبت کادر به متن المنت خارجی است. اگر بخواهیم برای مثال فاصله کادر از سمت چپ صفحه را زیاد کنیم باید از این دستور بهره ببریم. اگر از توضیحات متوجه نشدید تصویر زیر می تواند راهنمایی کند، فلش هایی که در تصویر وجود دارد فاصله های است که توسط دستور margin ساخته شده.
margin_css

برای استفاده از این دستور باید به المنت مورد نظر استایل زیر را داد:

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

همچنین مانند بقیه دستورها می توانید مقادیر را فشرده تر بنویسید، به مثال زیر توجه کنید:

p {
    margin: 100px 150px 100px 80px;
}
  • مقدار auto : یکی از مقادیری که دستور margin می توان با آن مقدار دهی شود auto است، وقتی این مقدار داده می شود المنت مورد نظر دقیقا در وسط صفحه وب قرار می گیرد، همچنین با کوچک یا بزرگ شدن صفحه این قانون نقض نمی شود. در هر شرایطی المنت در وسط صفحه قرار می گیرد.
  • مقدار  inherit : معنی خود واژه inherit وراثت است، اما کاربرد آن چیست؟ وقتی در HTML یک بلاک ساخته می شود می توانید به صورت اختصاصی به آن بلاک استایل دهید. اگر از تگی مثل p در بلاک استفاده کنید می توانید margin ی را که به بلاک اختصاص داده اید دقیقا به همان مقدار به p نیز بدهید. به مثال زیر توجه کنید.
div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}

توجه کنید یکی از بلاک های داخل div توسط دستور margin-left 100 پیکسل مقداردهی شده منظورم بلاک container است، حال اگر یکی دیگر از بخش های div توسط دستور margin-left با inherit مقداردهی شود مقدار عددی آن 100 پیکسل خواهد بود.

  • Padding : برای فاصله های داخلی از این دستور استفاده می کنند، مثلا فاصله متنی درون یک کادر با کناره های کادر توسط این دستور تعریف می شود. در تصویر زیر به صورت کلی می توانید متوجه این توضیحات بشوید.
padding_css

مقدار دهی این دستور هم کاملا شبیه دستور margin است، هم می شود به صورت جدا به هر یک از جهات فاصله داد هم می توانید توسط دستور padding چهار مقدار بالا، راست، پایین و چپ را بدهید. به مثال های زیر توجه کنید:

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

و

p {
    padding: 50px 30px 50px 80px;
}
  • width: برای تعیین عرض یک المنت از این دستور استفاده می شود. مقدار دهی این دستور هم به صورت px و هم به صورت % امکان پذیر است. اگر می خواهید مقدار آن ثابت و مشخص باشد باید از px استفاده کنید، اما اگر می خواهید مقدار آن متغیر و براساس اندازه مرورگر تغییر مقدار دهد از % استفاده کنید. مثلا اگر مقدار 50% بگیرد همیشه المنت اندازه نیمه مرورگر مقدار دهی می شود. به مثالهای زیر توجه کنید:
p
{
	width:400px;
	height:100px;
	background:#ffff00;
}

و

p
{
	width:50%;
	height:100px;
	background:#ffff00;
}

مقدار auto برابر همان 100% است، در صورتی کهwidth با این دو مقدار، مقداردهی شود، عرض المنت تمام صفحه مرورگر را در بر می گیرد.

  • Height: برای تعیین ارتفاع یک المنت به کار برده می شود، مقدار دهی آن نیز کاملا شبیه width است. البته با این تفاوت که height نمی تواند مقدار به صورت % و auto بگیرد. (در حالت عادی)!
  • Max-width: یکی از جالبترین مقداردهی به دستور width استفاده از درصد است، بخاطر آنکه اندازه به صورت کاملا پویا و متغیر تعیین می شود، اما گاهی اوقات می خواهید یک محدودیت را نیز اعمال کنید، مثلا اگر اندازه المنت بستگی به اندازه مرورگر دارد مقدار از بین 0 تا 500 پیکسل باشد و اگر اندازه مرورگر از 500 پیکسل بیشتر شد عرض المنت هیچ تغییری نکند.
div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}

آموزش کار با متن

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

  • Text Color: از اولین استایل هایی که به یک متن داده می شود رنگ آن است، می توان توسط دستور color و مقادیری که در بخش رنگ ها و پشت زمینه ها در css با آن آشنا شدیم مقدار دهی کرد. به مثال زیر توجه کنید:
p
{
color: #ffaaee
}
  • Text Alignment: موقعیت یک متن در صفحه نیز مهم است، برای مثال برخی از متون باید در وسط صفحه قرار گیرند و برخی چپ و... توسط دستور text-align اینکار به سادگی انجام پذیر است. این دستور دارای سه مقدار, justify right , left , center است. به مثال زیر توجه کنید:
h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
h4 {
    text-align: justify;
}

نکته: حالت justify باعث می شود که متون دقیقا هم تراز باشند.

  • Text-decoration: بهترین واژه برای این دستور دکور متن است، توسط این دستور می توانید شکل متن را تغییر دهید. یکی از پر استفاده ترین مقدار این دستور none در متون مربوط به لینک است، وقتی یک متنی را بین تگ a قرار می دهید به صورت پیش فرض متن به صورت زیرخط دار نمایش داده می شود اما اگر این دستور را با مقدار none به آن بدهید به حالت عادی باز می گردد. مقادیر مختلف دیگری نیز دارد که عبارت است از:
h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

حالت اول خطی در بالای متن نمایش داده می شود، حالت دوم خط روی متن قرار می گیرد و حالت آخر، خط زیر متن.

  • text-transform: بزرگ یا کوچک بودن متن ها در زبان انگلیسی شاید یکی از مهمترین دغدغه های نگارشی باشد. البته در css این یک دغدغه نیست همه کنترل ها دست شماست. این دستور دارای سه مقدار است که عبارت است از:
p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
  • اولین مقدار تمام حروف مربوطه را بزرگ نشان می دهد. مثل ITPRO
  • دومین مقدار تمام حروف مربوطه را کوچک نشان می هد. مثل itpro
  • سومین حالت اولین حرف هر کلمه را بزرگ نشان می دهد. مثل Hello Itpro

Text Indentation: برای تعیین فاصله اولین خط با گوشه صفحه استفاده می شود. فاصله آن معمولا 50 پیکسل است اما شما می توانید هر مقدار دوست دارید به آن بدهید، برای آنکه پاراگراف هایتان بهتر دیده شود حتما از این امکان استفاده کنید.

p {
    text-indent: 50px;
}
  • letter-spacing: برای تعیین فاصله میان حروف کلمات از این دستور استفاده کنید هم می توانید مقدار را بالاتر از صفر قرار دهید و هم پایین تر از آن.
h1{
    letter-spacing: 3px;
}

h2{
    letter-spacing: -3px;
}
  • word-spacing: برای تعیین فاصله میان کلمات یک جمله بکار برده می شود.
h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
  • Text Direction: جهت گیری متن از مهمترین قضایا در یک صفحه وب است، علل خصوص برای یک متن فارسی. توسط این دستور می شود تعیین کرد که قالب متن راست به چپ است یا بلعکس.
div {
    direction: rtl;
}

فونت‌ و قالب‌های متنی

در جلسه قبل در رابطه با استایل های متون در CSS صحبت کردیم دانستیم که چگونه می‌توان به راحتی یک متن را آنچنان که دوست داریم نمایش دهیم. ولی یکی از مهمترین استایل های متن فونت مربوط به متن است. فونت از اجزای کلیدی یک صفحه وب محسوب می شود. در HTML ورژن ۵ به پایین اینکار توسط خود HTML امکان‌پذیر بود اما با ظهور HTML5 این امکان حذف شد.حال برای آنکه بهتر با این خاصیت ها در CSS آشنا شویدبا ما همراه باشید:

  • font-family: از مهمترین خاصیت های دستور font به حساب می آید توسط این خاصیت می توان تعیین کرد که متن توسط چه فونتی نمایش یابد.
p {
    font-family: "Times New Roman", Times, serif;
}

نکته مهم: در صورتی که نام فونت بیشتر از یک کلمه باشد باید آن فونت را در میان کوتیشن "” قرار دهید. مثل Times New Roman .

اگر تعداد فونت ها از یک عدد بیشتر بود با , کاما از همدیگر باید جدا شوند.

  • Font Style: شیوه نمایش فونت ها در بسیاری مواقع مهم هستند برای مثال زمانی که می خواهید متنی را مهم جلوه دهید باید آن قسمت از متن با بقیه متن تغییری از نظر ظاهری داشته باشد. این خاصیت می تواند به سادگی استایل متن را تغییر دهد:
p{
    font-style: normal;
}

p{
    font-style: italic;
}

p{
    font-style: oblique;
}
  • Font Size: متاسفانه برخی از دوستان بجای آنکه اندازه فونت را تغییر دهند همیشه از تگ های h1 تا h6 استفاده می کنند که این کار کاملا اشتباه است. خاصیت Font Size برای تعیین اندازه یک فونت بسیار دقیقتر و ظریف تر این کار را انجام می دهد.

واحد مقدار دهی این خاصیت px , em است. اما چه مواقعی بهتر است از کدام واحد استفاده کنیم!؟

  • px: واحد پیکسل واحدی آشنا برای مقدار دهی است و دست کم اغلب کاربران با این واحد اندازه گیری راحت تر هستند. به همین خاطر این واحد در مواقعی که ظرافت کاری خیلی خیلی مهم نیست استفاده می شود. استفاده از این واحد اندازه گیری را استاندارد W3C تایید نمی کند.
h1 {
    font-size: 16px;
}
  • em: مهمترین واحد اندازه گیری برای متون em می باشد. مطابق اصول هر یک em برابر 16px می باشد. این واحد زمانی استفاده می شود که اندازه دقیق متون بسیار مهم و کاربردی باشد. بیشتر طراحان رابط کاربری از این اندازه واحد اندازه گیری استفاده می کنند.
h1 {
    font-size: 2.5em; /* 40px/16=2.5em */
}
  • Font Weight: سنگینی متن در واقع می بایست قسمتی از خاصیت font-style باشد اما جدای آن نیز به کنترل بیشتر یک متن کمک کرده است. برای قوی کردن یک متن مقدار این خاصیت را برابر bold قرار می دهیم همچنین اگر می خواهید مقدار آن کمی بیشتر یا کمتر باشد از اعداد استفاده کنید.
h1
{
font-weight: bold;
}
h2
{
font-weight: 800;
}

لینک ها و لیست ها

لینک ها : در جلسه گذشته به طور کامل درباره خاصیت font در CSS ورژن ۲ آموختیم. امروز می خواهیم در رابطه به لینک ها , حالت های لینک و استایل های لینک مطالبی بیاموزیم. خب به صورت کلی تمام خاصیت هایی که در CSS برای متون قابل استفاده است (مثل رنگ, سایز و..)در اینجا نیز کاربرد دارد. اما مهمترین نکته این تگ حالت های آنست. برای مثال می توانید کنترل کنید که اگر ماوس روی لینک کلیک کرد چه اتفاقی بیفتد یا اگر ماوس hover شد. به طور کلی چهار رویداد وجود دارد که می توانید در زیر هر کدام از آنها را مشاهده کنید:

  • a:link – حالت نرمال و دست نخورده لینک
  • a:visited – حالتی که کاربر قبلا از آن لینک دیدن کرده است.
  • a:hover – حالتی که ماوس روی آن
  • a:active – لحظه که ماوس روی آن لینک کلیک می کند.
/* unvisited link */
a:link {
    color: red;
}

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

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
  • Text Decoration: یک خاصیت مهم دیگر در CSS حالت نمایش لینک است به صورت پیشفرض متنی که به عنوان لینک ظاهر می شود زیرخط دار است ( همان حالت underline ).

برای آنکه متن از حالت زیرخط دار خارج شود باید مقدار خاصیت را برابر none قرار دهید.

  • بازی با CSS : ساخت یک دکمه زیبا با کمی قابلیت تعاملی با دانسته های این دوره کار خیلی سختی به نظر نمی رسد. یک نمونه کد برای شما آماده کرده ام که در زیر می توانید مشاهده کنید:
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}
  •  display: inline-block : در صورت استفاده از این خاصیت می توانید می توانید المنت های صفحه را با چینش درست تری در مرورگر نمایش بدهید. برنامه را بدون این خاصیت نیز اجرا کنید تا تفاوت خروجی ها را ببینید.

لیست ها: لیست ها از جمله مهمترین اجزای یک صفحه وب به منظور لیست بندی چندین آیتم به کار می رود. برای مثال فهرست مربوط به یک وبسایت را لیست ها می سازند.

یاددآوری: به صورت کلی دو نوع لیست وجود دارد:

  • لیست های مرتب: لیست هایی که با علامت های دایره یا مربع و… علامت گذاری می شوند. تگ مورد نظر برای این لیست <ol> است.
  • لیست های نامرتب: لیست هایی که با اعداد (عادی , رومی و…) علامتگذاری می شوند. تگ مورد نظر برای این لیست <ul> است.

List-Style-type: یکی از استایلهایی که یک لیست می تواند بگیرد نوع نمایش لیست هاست. این مقادیر در لیست های مرتب و نامرتب متفاوت است. مثال زیر مربوط به مقادیر این خاصیت برای لیست مرتب است:

ol
{
	list-style-type:lower-roman;
	list-style-type:upper-roman;
	list-style-type:upper-alpha;
	list-style-type:lower-alpha;
	list-style-type:upper-armenian;
}

مثال زیر مربوط به مقادیر این خاصیت برای لیست نامرتب است:

ul
{
	list-style-type: square;
	list-style-type: circle;
	list-style-type:none;
}
  • List-style-image: می توانید بجای علامتگذاری های پیشفرض در CSS برای لیست ها از تصاویر شخصی خودتان استفاده کنید. برای این کار کافی است که از این خاصیت بهره ببرید:
ul
{
	list-style-image: url(Music_Flat1.png);
}
  • List-style-position: موقعیت داخلی یا خارجی بودن یک لیست را می توانید توسط این خاصیت معلوم کنید. برای مثال وقتی خاصیت یک لیست را برابر inside قرار دهید لیست زیر منوی قبل از خود قرار می گیرد. البته یکی دیگر از راههای آن استفاده از لیستهای تودرتو است که در آموزش HTML درباره آنها صحبت کردیم. به مثالهای زیر توجه کنید:
	ul.h
	{
		list-style-type: circle;
		list-style-position: outside;
	}
	ul.hi
	{
		list-style-type: square;
		list-style-position:inside;
	}

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

    list-style: square inside url("sqpurple.gif");

آموزش کار با جدول ها

در قسمت قبلی از این سری آموزش به استایل های موجود برای لینک ها و لیست ها پرداختیم. در این جلسه می خواهیم به چگونگی استایل دادن به جداول بپردازیم. همانطور که در سری آموزش HTML مشاهده کردید، جداول از مهمترین عنصرهای یک صفحه وب است. می توانید توسط این عنصر داده های مورد نظرتان را به صورت مرتب جدول بندی کنید. تگ های اصلی این عنصر table , tr, th, td است.

  • Table Borders: در حالت کلی یک جدول باید دارای حاشیه باشد، اما با ساخت جدول در HTML خام هیچگونه حاشیه ای وجود ندارد. توسط این استایل که قبلا با آن آشنا شده اید می توانید خیلی راحت حاشیه جدولتان را تولید کنید.
table , th, td
{
	border:solid 1px ;
}

به موقعیت خطوط حاشیه توجه کنید. اگر توجه کنید در این حالت چندین حاشیه داخل هم قرار گرفته است که کمی محیط داخل جدول را شلوغ کرده است. برای جلوگیری از این حالت باید استایل border-collapse: collapse; را به table نسبت دهید. به مثال زیر توجه کنید.

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}
  • Table Color: خیلی آسان می شود رنگ های یک جدول چه پشت زمینه چه رنگ قلم را کنترل کنید. اگر می خواهید کل جدول دارای یک پشت زمینه و رنگ قلم باشد می توانید این خاصیت ها را به المنت table نسبت دهید. به مثال زیر توجه کنید:
table
{
	background: #ff00ff;
	color:#ffff00;
}
  • Striped Tables: معنی تحت الفظی این آیتم جداول نواری است. اما برای آنکه بهتر متوجه شوید منظور چیست باید خدمتتون بگم که بعضی اوقات مثلا در برنامه های درسی برای درست خواندن نوشته سطرها رنگ سطر اول و دوم با هم متفاوت است. تصویر زیر می تواند بهتر منظورم را برساند:
در قسمت قبلی از این سری آموزش به استایل های موجود برای لینک ها و لیست ها پرداختیم. در این جلسه می خواهیم به چگونگی استایل دادن به جداول بپردازیم. همانطور که در سری آموزش HTML مشاهده کردید، جداول از مهمترین عنصرهای یک صفحه وب است. می توانید توسط این عنصر داده های مورد نظرتان را به صورت مرتب جدول بندی کنید. تگ های اصلی این عنصر table , tr, th, td است. Table Borders: در حالت کلی یک جدول باید دارای حاشیه باشد، اما با ساخت جدول در HTML خام هیچگونه حاشیه ای وجود ندارد. توسط این استایل که قبلا با آن آشنا شده اید می توانید خیلی راحت حاشیه جدولتان را تولید کنید. <css> table , th, td { border:solid 1px ; } <css> به موقعیت خطوط حاشیه توجه کنید. اگر توجه کنید در این حالت چندین حاشیه داخل هم قرار گرفته است که کمی محیط داخل جدول را شلوغ کرده است. برای جلوگیری از این حالت باید استایل border-collapse: collapse; را به table نسبت دهید. به مثال زیر توجه کنید. <c#> table { border-collapse: collapse; } table, th, td { border: 1px solid black; } <c#> Table Color: خیلی آسان می شود رنگ های یک جدول چه پشت زمینه چه رنگ قلم را کنترل کنید. اگر می خواهید کل جدول دارای یک پشت زمینه و رنگ قلم باشد می توانید این خاصیت ها را به المنت table نسبت دهید. به مثال زیر توجه کنید: <css> table { background: #ff00ff; color:#ffff00; } <css> Striped Tables: معنی تحت الفظی این آیتم جداول نواری است. اما برای آنکه بهتر متوجه شوید منظور چیست باید خدمتتون بگم که بعضی اوقات مثلا در برنامه های درسی برای درست خواندن نوشته سطرها رنگ سطر اول و دوم با هم متفاوت است. تصویر زیر می تواند بهتر منظورم را برساند: ||http://tosinso.com/files/get/f44ce6a9-aab5-4e9e-b625-8859ff2dbe15|| برای اینکار کافی است از آرگومن nth-child() برای المنت tr استفاده کنید. به مثال زیر توجه کنید: <css> tr:nth-child(even) { background-color: #f2f2f2 } <css> خاصیت hover: یکی از جالبترین امکانات CSS مدیریت رویدادهای ماوس است، که در قسمت لینک ها با آن نیز آشنا شدید. می توانید در جداول از این خاصیت زمانی بهره ببرید که با حرکت ماوس روی هر سطر یکی از آنان تغییر رنگ پیدا کند. <c#> tr:hover { background-color: #f5f5f5 } <c#> overflow-x:auto;: در جلسه های مربوط به درس HTML گفتیم که اگر بخواهیم چندین المنت را به صورت همزمان استایل دهی یا کنترل کنیم باید آنها را داخل یک بلاک یا اصطلاحا div قرار دهیم. گاهی اوقات نیز زمانی استفاده می شود که استایل مورد نظر برای یک المنت وجود ندارد اما برای بلاک ها می توان استفاده شود. برای مثال استایل overflow-x:auto; برای table موجود نیست اما می شود table را داخل بلاکی قرار داد و آن خاصیت را به بلاک نسبت دهید. اگر زمانی مقادیر جدول از طرف عرض صفحه خارج شد چگونه می توان به آن دسترسی داشت؟ کافی است استایل overflow-x:auto; را به بلاک نسبت دهید. به مثال زیر توجه کنید: <c#> <div style=overflow-x:auto;> <table> ... table content ... </table> </div> <c#> نکته مهم: از آنجا که تعداد استایل ها برای هر المنت بسیار زیاد است به همین خاطر متاسفانه نمی توانیم تمام آن ها را برای المنت ها بررسی کنیم. در این مثال خودتان سعی کنید که از خاصیت های padding , margin بهره ببرید. نویسنده : |ارسطو عباسی::http://arastoodev.ir| منبع : انجمن تخصصی فناوری اطلاعات ایران هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

برای اینکار کافی است از آرگومن nth-child() برای المنت tr استفاده کنید. به مثال زیر توجه کنید:

tr:nth-child(even)
{
background-color: #f2f2f2
}
  • خاصیت hover: یکی از جالبترین امکانات CSS مدیریت رویدادهای ماوس است، که در قسمت لینک ها با آن نیز آشنا شدید. می توانید در جداول از این خاصیت زمانی بهره ببرید که با حرکت ماوس روی هر سطر یکی از آنان تغییر رنگ پیدا کند.
tr:hover 
{
background-color: #f5f5f5
}
  • overflow-x:auto;: در جلسه های مربوط به درس HTML گفتیم که اگر بخواهیم چندین المنت را به صورت همزمان استایل دهی یا کنترل کنیم باید آنها را داخل یک بلاک یا اصطلاحا div قرار دهیم. گاهی اوقات نیز زمانی استفاده می شود که استایل مورد نظر برای یک المنت وجود ندارد اما برای بلاک ها می توان استفاده شود. برای مثال استایل overflow-x:auto; برای table موجود نیست اما می شود table را داخل بلاکی قرار داد و آن خاصیت را به بلاک نسبت دهید.

اگر زمانی مقادیر جدول از طرف عرض صفحه خارج شد چگونه می توان به آن دسترسی داشت؟ کافی است استایل overflow-x:auto; را به بلاک نسبت دهید. به مثال زیر توجه کنید:

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

نکته مهم: از آنجا که تعداد استایل ها برای هر المنت بسیار زیاد است به همین خاطر متاسفانه نمی توانیم تمام آن ها را برای المنت ها بررسی کنیم. در این مثال خودتان سعی کنید که از خاصیت های padding , margin بهره ببرید.

Display و Max-width

در جلسه گذشته درباره استایل های جداول نکاتی آموختیم امروز می خواهیم با دو خاصیت پرکاربرد دیگر آشنا شویم پس با من همراه باشید! حالت های نمایش یا Display: قالب نمایشی عناصر وب عمدتا یکسان هستند, اما گاهی اوقات باید تغییر کنند. پیش از اینکه وارد دستورات مورد نظر شوم می خواهم چند تعریف از شیوه های نمایش عنصر در صفحه وب را به شما بیاموزم.

• حالت اول block: خیلی اوقات یک عنصر وب بدون باقی گذاشتن فضا یک خط را کاملا اشغال می کنند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.

در جلسه گذشته درباره استایل های جداول نکاتی آموختیم امروز می خواهیم با دو خاصیت پرکاربرد دیگر آشنا شویم پس با من همراه باشید! حالت های نمایش یا Display: قالب نمایشی عناصر وب عمدتا یکسان هستند, اما گاهی اوقات باید تغییر کنند. پیش از اینکه وارد دستورات مورد نظر شوم می خواهم چند تعریف از شیوه های نمایش عنصر در صفحه وب را به شما بیاموزم. • حالت اول block: خیلی اوقات یک عنصر وب بدون باقی گذاشتن فضا یک خط را کاملا اشغال می کنند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد. ||http://tosinso.com/files/get/8697cda2-1a63-47ba-b0b0-b548302316da|| بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل: 1. div 2. h1 – h6 3. p 4. form 5. section • حالت دوم inline: در این حالت عنصر مورد نظر فقط به بخشی از خط مورد نظر دسترسی پیدا می کند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد. ||http://tosinso.com/files/get/b9e37793-0856-4753-8b22-2b66e27fd3a4|| بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل: 1. <span> 2. <a> 3. <img> نکته: تگ هایی که معرفی کردم صرفا به صورت پیش فرض اینگونه هستند اما این بدان معنا نیست که نتوان مقدارهایشان را تغییر داد. خیلی راحت می توان توسط خاصیت display مقدار block یا inline آنها را تغییر دهید. <css> a { display: block; } <css> مخفی کردن عناصر وب: برای آنکه عنصری در صفحه وب مخفی شود می توانید از این عنصر استفاده کنید. یک مثال از این کاربرد, زیر منوها هیچوقت در حالت عادی نباید نمایش یابند, تا زمانی که روی منوی اصلی hover کرد. برای اینکار باید ابتدا زیر منوها را مخفی کنید. برای مخفی کردن می توانید از خاصیت display و یا visibility استفاده کنید. به دو مثال زیر توجه کنید. <css> p { visibility:hidden; } <css> یا <c#> p { display:none; } <c#> اگر مقدار خاصیت visibility را برابر visible قرار دهید عنصر مورد نظر به حالت پیشفرض باز می گردد. <css> p { visibility:visible; } <css> تعیین بیشترین عرض با Max-width: در درس های قبلی اشاره کردم که زمانی بخواهید یک عنصر به صورت دقیق در هر صورتی وسط صفحه قرار بگیرد باید از خاصیت margin:auto استفاده کند. در شرایطی هم که اندازه صفحه مرورگر تغییر کند عنصر مورد نظر باز هم در وسط صفحه جایی می گیرد. اما این خاصیت زمانی کار ساز خواهد بود که عنصر مورد نظر دارای عرض مشخصی باشد. اما باز هم به مشکل برخواهیم خورد, در صورتی که عرض مشخص باشد دیگر حالت واکنشگرا مفهومی ندارد. اینجاست که باید بجای خاصیت width باید از max-width استفاده کنید. در واقع این خاصیت به اندازه مرورگر تا اندازه مشخصی اجازه تغییر می دهد. مثال زیر را اجرا کنید و سپس اندازه مرورگر را تغییر دهید: <css> <!doctype html> <html> <head> <title>Example ITPRO</title> <style> .Box { border:solid 1px #22dd33; max-width: 400px; margin:auto; } </style> </head> <body> <div class=Box> <p>Hello, People. I am Arastoo. A user from earth! :) </div> </body> </html> <css> نویسنده : |ارسطو عباسی::http://arastoodev.ir| منبع : انجمن تخصصی فناوری اطلاعات ایران هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:

  1. div
  2. h1 – h6
  3. p
  4. form
  5. section

• حالت دوم inline: در این حالت عنصر مورد نظر فقط به بخشی از خط مورد نظر دسترسی پیدا می کند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.

در جلسه گذشته درباره استایل های جداول نکاتی آموختیم امروز می خواهیم با دو خاصیت پرکاربرد دیگر آشنا شویم پس با من همراه باشید! حالت های نمایش یا Display: قالب نمایشی عناصر وب عمدتا یکسان هستند, اما گاهی اوقات باید تغییر کنند. پیش از اینکه وارد دستورات مورد نظر شوم می خواهم چند تعریف از شیوه های نمایش عنصر در صفحه وب را به شما بیاموزم. • حالت اول block: خیلی اوقات یک عنصر وب بدون باقی گذاشتن فضا یک خط را کاملا اشغال می کنند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد. ||http://tosinso.com/files/get/8697cda2-1a63-47ba-b0b0-b548302316da|| بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل: 1. div 2. h1 – h6 3. p 4. form 5. section • حالت دوم inline: در این حالت عنصر مورد نظر فقط به بخشی از خط مورد نظر دسترسی پیدا می کند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد. ||http://tosinso.com/files/get/b9e37793-0856-4753-8b22-2b66e27fd3a4|| بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل: 1. <span> 2. <a> 3. <img> نکته: تگ هایی که معرفی کردم صرفا به صورت پیش فرض اینگونه هستند اما این بدان معنا نیست که نتوان مقدارهایشان را تغییر داد. خیلی راحت می توان توسط خاصیت display مقدار block یا inline آنها را تغییر دهید. <css> a { display: block; } <css> مخفی کردن عناصر وب: برای آنکه عنصری در صفحه وب مخفی شود می توانید از این عنصر استفاده کنید. یک مثال از این کاربرد, زیر منوها هیچوقت در حالت عادی نباید نمایش یابند, تا زمانی که روی منوی اصلی hover کرد. برای اینکار باید ابتدا زیر منوها را مخفی کنید. برای مخفی کردن می توانید از خاصیت display و یا visibility استفاده کنید. به دو مثال زیر توجه کنید. <css> p { visibility:hidden; } <css> یا <c#> p { display:none; } <c#> اگر مقدار خاصیت visibility را برابر visible قرار دهید عنصر مورد نظر به حالت پیشفرض باز می گردد. <css> p { visibility:visible; } <css> تعیین بیشترین عرض با Max-width: در درس های قبلی اشاره کردم که زمانی بخواهید یک عنصر به صورت دقیق در هر صورتی وسط صفحه قرار بگیرد باید از خاصیت margin:auto استفاده کند. در شرایطی هم که اندازه صفحه مرورگر تغییر کند عنصر مورد نظر باز هم در وسط صفحه جایی می گیرد. اما این خاصیت زمانی کار ساز خواهد بود که عنصر مورد نظر دارای عرض مشخصی باشد. اما باز هم به مشکل برخواهیم خورد, در صورتی که عرض مشخص باشد دیگر حالت واکنشگرا مفهومی ندارد. اینجاست که باید بجای خاصیت width باید از max-width استفاده کنید. در واقع این خاصیت به اندازه مرورگر تا اندازه مشخصی اجازه تغییر می دهد. مثال زیر را اجرا کنید و سپس اندازه مرورگر را تغییر دهید: <css> <!doctype html> <html> <head> <title>Example ITPRO</title> <style> .Box { border:solid 1px #22dd33; max-width: 400px; margin:auto; } </style> </head> <body> <div class=Box> <p>Hello, People. I am Arastoo. A user from earth! :) </div> </body> </html> <css> نویسنده : |ارسطو عباسی::http://arastoodev.ir| منبع : انجمن تخصصی فناوری اطلاعات ایران هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:

  1. <span>
  2. <a>
  3. <img>

نکته: تگ هایی که معرفی کردم صرفا به صورت پیش فرض اینگونه هستند اما این بدان معنا نیست که نتوان مقدارهایشان را تغییر داد. خیلی راحت می توان توسط خاصیت display مقدار block یا inline آنها را تغییر دهید.

a {
    display: block;
}

مخفی کردن عناصر وب: برای آنکه عنصری در صفحه وب مخفی شود می توانید از این عنصر استفاده کنید. یک مثال از این کاربرد, زیر منوها هیچوقت در حالت عادی نباید نمایش یابند, تا زمانی که روی منوی اصلی hover کرد. برای اینکار باید ابتدا زیر منوها را مخفی کنید. برای مخفی کردن می توانید از خاصیت display و یا visibility استفاده کنید. به دو مثال زیر توجه کنید.

p
{
	visibility:hidden;
}

یا

p
{
	display:none;
}

اگر مقدار خاصیت visibility را برابر visible قرار دهید عنصر مورد نظر به حالت پیشفرض باز می گردد.

p
{
	visibility:visible;
}

تعیین بیشترین عرض با Max-width: در درس های قبلی اشاره کردم که زمانی بخواهید یک عنصر به صورت دقیق در هر صورتی وسط صفحه قرار بگیرد باید از خاصیت margin:auto استفاده کند. در شرایطی هم که اندازه صفحه مرورگر تغییر کند عنصر مورد نظر باز هم در وسط صفحه جایی می گیرد.

اما این خاصیت زمانی کار ساز خواهد بود که عنصر مورد نظر دارای عرض مشخصی باشد. اما باز هم به مشکل برخواهیم خورد, در صورتی که عرض مشخص باشد دیگر حالت واکنشگرا مفهومی ندارد. اینجاست که باید بجای خاصیت width باید از max-width استفاده کنید. در واقع این خاصیت به اندازه مرورگر تا اندازه مشخصی اجازه تغییر می دهد. مثال زیر را اجرا کنید و سپس اندازه مرورگر را تغییر دهید:

<!doctype html>
<html>
<head>
<title>Example ITPRO</title>
<style>
.Box
{
	border:solid 1px #22dd33;
	max-width: 400px;
	margin:auto;
}
</style>
</head>
<body>
<div class="Box">
<p>Hello, People. I am Arastoo. A user from earth! :)
</div>
</body>
</html>

موقعیت ها , Overflow

گاهی اوقات می‌توان موقعیت یک المنت را تعیین کرد برای مثال موقعیت یک المنت را به صورت ثابت در یک مکان قرار داد, طوری که حتی با اسکرول کردن هم موقعیت خود را از دست ندهد. خب این یکی از موقعیت هاست. به صورت کلی ۴ گونه موقعیت وجود دارد:

  • static
  • relative
  • fixed
  • absolute

بعضی از موقعیت ها دارای مقادیر top , right , bottom , left است. این مقادیر برای کنترل موقعیت المنت ها استفاده می شود. برای تعیین موقعیت از خاصیت position استفاده می شود.

  • موقعیت static: به صورت پیش فرض تمام المنت های صفحات وب دارای موقعیت استاتیک هستند. این موقعیت فاقد مقادیر top , right , bottom , left است. در هر صورت می توانید توسط خاصیت position و مقدار static موقعیت المنت را به صورت استاتیک دربیاورید.
p
{
	position:static;
}
  • موقعیت relative: این موقعیت به صورت پیشفرض هیچگونه کاربردی ندارد و هیچ تاثیری روی صفحه وب قرار نمی دهد. اما برخلاف موقعیت استاتیک این موقعیت دارای مقادیر top , right , bottom , left می باشد. برای مثال می توانید المنتی را با موقعیت relative و مقدار left=30px قرار دهید. البته همین کار را می توانید با خاصیت های margin انجام دهید.
p
{
	border:solid 1px #22dd33;
	width: 500px;
	position: relative;
	left:30px;
	top:20px;
}
  • موقعیت fixed: این موقعیت زمانی استفاده می شود که بخواهیم المنتی حتی با اسکرول کردن هم موقعیت خود را حفظ نماید. برای مثال بعضی از وبسایت ها از تبلیغات در گوشه های وبسایت استفاده می کنند که حتی با اسکرول به پایین صفحه تبلیغات درجای خودشان باقی می مانند, این موقعیت دارای مقادیر top , right , bottom , left می باشد.
  • موقعیت absolute: این موقعیت زمانی استفاده می شود که بخواهیم موقعیت یک المنت را داخل یک المنت دیگر تعیین کنیم. برای مثال وقتی جعبه ای درون جعبه دیگری قرار می گیرد موقعیت داخلی ترین جعبه باید با absolute تعیین شود.
  • خاصیت z-index: وقتی موقعیت مکانی یک المنت برابر absolute قرار می گیرد می توان همچنین جلو و یا عقب بودن نسبت به بقیه المنت ها را کنترل کرد. به عنوان مثال می توان تعیین کرد یک تصویر در عقب متن مورد نظر قرار گیرد. برای این کار موقعیت تصویر را absolute قرار داده و مقدار z-index را برابر -۱ قرار دهید. به مثال زیر توجه کنید.
img
{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
}
  • خاصیت overflow: خیلی اوقات احتیاج داریم که توسط اندازه مشخصی که طراح وب مقداردهی می کند متن یا شی مورد نیاز مخفی شود. البته تنها مخفی شدن نه, می توان متنی بزرگی که مد نظر داریم به صورت اسکرول بار در یک کادر قرار دهیم.

برای اینکه بهتر از این قضایا متوجه بشید, می توانید که پروژه های زیر را تک به تک اجرا کنید و نتیجه را مشاهده نمایید.

قالب اصلی پروژه:

<!DOCTYPE html>
<html>
<head>
<title>ITPRO</title>
</head>
<body>
<div class="over">
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
Hello This is a sample test!
</div>
</body>
</html>

قالب 1 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: visible;
 }
</style>

قالب 2 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: hidden;
 }
</style>

قالب 3 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: scroll;
 }
</style>

قالب4 CSS:

<style type="text/css">
.over
{
	width:100px;
	height: 100px;
	background: #aaaaaa;
	overflow: auto;
 }
</style>

نکته: تفاوت مقدار scroll و auto در این است که در حالت اول یعنی scroll اسکرول بار در هر دو سمت افقی و عمودی فراهم می شود اما در حالت دوم یعنی auto تنها به صورت عمودی اسکرول بار ظاهر می شود.

جهت ها, تراز ها و غلظت

در یک صفحه وب همه المنت ها نباید در جهت یا تراز پیش‌فرض مرورگر باشد, شما می‌توانید متن ها, تصاویر و… را به هر سمتی که دوست دارید ببرید. البته برای المنت های مختلف باید راههای متفاوتی را امتحان کرد. تراز بندی متون: برای آنکه جهت گیری متون را تغییر دهید به صورت منحصر به فرد می‌توانید از خاصیت text-align استفاده کنید. به مثال زیر توجه کنید:

p
{
	text-align: center;
}

البته توجه کنید برای اینکه متن را به صورت راست به چپ یا چپ به راست قرار دهید نباید از این خاصیت استفاده کنید بلکه باید به خاصیت‌های تگ body برگردید. یکی از مهمترین خاصیت‌های تگbody خاصیت dir بود که مقادیر ltr , rtl را دریافت می کرد. مثال زیر برای یک متن راست به چپ اشتباه است:

<p style="text-align:right;">
		این یک متن راست به چپ است.
</p>

راه درست برای نمایش یک متن راست به چپ به دو صورت است :

۱- از خاصیت dir در تگ body استفاده کنید. در این صورت تمامی متون از طرف راست به چپ قرار می گیرند. به مثال زیر توجه کنید:

<body dir="rtl">
</body>

۲- از خاصیت direction در CSS بهره ببرید. برای مثال زمانی که می‌خواهید فقط یک متن مشخص به صورت راست به چپ باشد باید از این حالت استفاده کنید.

p
{
direction: ltr;
}

جهت تصویر و کادر ها: علاوه بر متون دیگر اجزای یک صفحه وب هم می توانند که در مکان های مختلف قرار بگیرند.

جهت وسط: اگر می خواهید یک تصویر و یا هر چیز دیگر بغیر از متن در وسط صفحه قرار بگیرد می توانید به دو روش اینکار را انجام دهید.

۱- روش استاندارد: اگر یک المنت در صفحه وب دارای مقدار عرض باشد می توان با مقدار دهی margin:auto در هر شرایطی المنت را در وسط صفحه قرار دهید. حتی اگر مرورگرتان را کوچک یا بزرگ کنید. مثال زیر را اجرا کنید:

.box
{
	width: 500px;
	height: 100px;
	background: #000000;
	margin: auto;
}

۲- روش غیر اصولی: می توانید مقدار صفحه وب را اندازه گیری کرده و سپس مقدار margin-left یا margin-right را برابر یک دوم اندازه صفحه قرار دهید. البته این روش کاملا اشتباه است.

جهت راست و چپ: برای اینکه جهت یک تصویر را به سمت راست یا چپ ببرید می توانید از روش دوم که در بالا ذکر کردم استفاده کنید اما باز هم این روش کاملا غیر اصولی می باشد. روش استاندارد این است که از مقادیر position:absolute استفاده کنید.همانطور که می دانید در این روش می توانید از مقادیر right,left,top , bottom استفاده کنید.برای مثال اگر مقدار right:0; باشد تصویر مورد نظر به سمت راست تغییر مکان می دهد. به این مثال توجه کنید:

.box
{
	width: 500px;
	height: 100px;
	background: #000000;
	position: absolute;
	right: 0px;
}

جهت گیری عمودی: اگر یک کادر را در نظر بگیرید می توانید متن خود را در هر کجای این کادر قرار دهید البته نه با position و یا margin بلکه با padding اگر یادتان باشد گفتیم اگر بخواهیم المنت داخلی را تراز بندی کنیم باید از padding استفاده کنیم. به مثال زیر توجه کنید:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

شفافیت یا Opracity

اگر تا به حال با فوتوشاپ کار کرده باشید، مطمئنا با حالت opacity لایه ها آشنایی دارید، این حالت برای کم رنگ کردن یک لایه استفاده می شود. در CSS نیز ما با چنین حالتی روبرو هستیم. برای مثال می توانید تصویری را کم رنگ کرده و تا زمانی که ماوس روی تصویر hover می شود در همان حالت باقی بماند. برای اینکار باید از خاصیت opacity با مقادیر 0.1 تا 1 استفاده کنید. به مثال زیر توجه داشته باشید:

img
{
	Opacity:0.5;
}

در این حالت تمامی تصاویر با شفافیت 0.5 قرار می گیرند. حالت دیگر مقدار دهی این خاصیت استفاده از rgba است. اگر یادتان باشد یکی از روشهای مقداردهی رنگ rgb بود. حال در این حالت می توانید نه تنها رنگ مورد نظر را انتخاب کنید بلکه شفافیت المنت را هم مقداردهی کنید.

p
{	
	color: rgba(100, 200, 50, 0.5);
}

واکنشگرایی یا Responsive

Responsive ITPRO

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

اصول واکنشگرایی چیست؟

المنت های صفحات وب با توجه به اندازه صفحه اندازه خودشان را به صورت درصدی افزایش یا کاهش می دهند. برای مثال اندازه عرض یک تگ اگر ١٠٪ باشد در نمایشگرهای مختلف نمی تواند یک عدد ثابت باشد. برای مثال اگر همین تگ را در یک نمایشگر با عرض 100px مشاهده کنیم اندازه 10px از صفحه نمایش را اشغال کند اما در یک نمایشگر با عرض 1000px اندازه به 100px تغییر می کند. در این چند قسمت می خواهیم با مفاهیمی چون:

  1. View Port
  2. Grid View
  3. Media Query
  4. Images Responsive
  5. Video Responsive
  6. Frame Works

آشنا می شویم. با من همراه باشید.

Viewport چیست؟

Viewport

ViewPort به قسمت قابل مشاهده کاربر می گویند. مقادیر ViewPort متغیر است برای مثال در موبایل های هوشمند کوچکتر از کامپیوتر ها می باشد. همانطور که قبلا توضیح دادم، در ابتدای ساخت صفحات وب، صفحات مطابق با دستگاه تغییر سایز یا در واقع تغییر اندازه (ViewPort) نمی دادند. با آمدن تکنولوژی HTML5 توانایی در اختیار گرفتن ViewPort برای ما بسیار ساده تر شده است. برای اینکار از تگ meta استفاده می شود.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

در مثال بالا از تگ meta با نام viewport استفاده شده است، این دستور باعث می شود که صفحه وب ما کنترل دستورالعمل های مرورگر را در اختیار بگیرد. در قسمت دیگر از ویژگی content استفاده شده که برابر width=device-width قرار گرفته است، این ویژگی باعث می شود که عرض صفحه وب ما مطابق با عرض دستگاهی که در اختیار داریم واکنش نشان دهد.قسمت آخر که جزو همان content است اولین سطح زوم کردن صفحه وب را در زمان لود صفحه قرار می دهد.

  • نکته : برای آنکه المنت هایتان در صفحات وب مطابق با اندازه تغییر کند بجای استفاده از مقادیر ثابت عددی از علامت % استفاده کنید. به مثال زیر توجه نمایید.
<!doctype html>
<html>
<head>
    <title> js </title>
<style>
    img
    {
        width: 80%;
    }
    p
    {
        width: 80%;
    }
    </style>
</head>
<body>  
 <img src="logo.png"/>
    <p>
    hello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITPro
    </p>
</body>
</html>


0 4

نظرات