نوشته های برچسب خورده: آموزش css

در قسمت پنجم آموزش css با نحوه تغییر دادن متن ها در سی اس اس آشنا شدیم. در این قسمت از آموزش روش کار کردن با فونت ها در css را خواهیم گفت.

تغییر فونت ها در css

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

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

<p class=”text”>متن مورد نظر</p>

.text {

font-size: 14px; }

تغییر نوع فونت

برای تغییر نوع فونت نیز بعد از انتخاب المان مورد نظر از خاصیت font-family استفاده می کنیم.

<p>متن موردنظر</p>

p {

font-family: tahoma; }

نکته: در مقابل font-family می توان چند فونت را نوشت و با کاما از هم جدا کرد که اگر فونتی در سیستم نبود بعدی اعمال شود.

حالت فونت

برای تغییر در استایل فونت می توانیم از خاصیت font-style استفاده کرد. استایل فونت شامل حالت های italic , oblique و normal می باشد. مثال:

<p class= "normal">متن معمولی</p>

<p class= "italic">متن ایتالیک</p>

p.normal {

font-style: normal; }

p.italic {

font-style: italic; }

 پایان قسمت ششم

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

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

رنگ متن color

شما می توانید با انتخاب هر المان رنگ آن را تغییر بدهید. به مثال زیر توجه کنید:

html: ———————————

<h2>عنوان با رنگ نارنجی</h2>

<p>متن با رنگ آبی</p>

css: ————————————

h2{

color: orange;

}

p{

color: blue;

}

موقعیت متن text-align

با کمک این ویژگی می توان راستچین، چپ چین یا وسط چین بودن متن را مشخص کرد. مثال:

html: ——————————————–

<h2 class = “center”>وسط چین</h2>

<p class = “right”>راست چین</p>

<p class = “left”>چپ چین</p>

css: ———————————————–

center{

text-align: center;

}

p.right{

text-align: right;

}

p.left{

text-align: left;

}

نوع نوشته text-decoration

گاهی المان های html استایل مخصوص دارند. مثلا لینک ها با رنگ آبی و زیر خط دار نمایش داده می شوند. حال اگر بخواهیم آن ها را به صورت ساده در آوریم از دستور زیر استفاده می کنیم:

a{

text-decoration: none;

}

برای تغییر یک المان سه روش برای انتخاب وجود دارد. مانند قبل المان مورد نظر را انتخاب می‌کنیم. مثلا اگر ما قصد تغییر فونت تمامی پاراگراف‌ها را داشته باشیم، باید المان p را انتخاب کنیم. اما اگر بخواهیم یک یا چند المان خاص را تغییر دهیم بهتر است از کلاس استفاده کنیم. یعنی ابتدا در صفحه‌ی اچ تی ام ال به المان مورد نظر اتریبیوت “class = “classname اضافه کنیم و سپس درسی اس اس نام این کلاس را بنویسیم و در جلوی آن تغییرات مورد نظر را اعمال کنیم.

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

پس زمینه در CSS

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

اضافه کردن رنگ

برای رنگ آمیزی در css از 3 روش استفاده می کنیم:

روش اول 

در این روش از کد HEX به شکل زیر استفاده می کنیم و کد رنگ را همراه با علامت # به کار می بریم. کد هگزادسیمال رنگ یک مقدار کاراکتری ترکیبی از اعداد 0 تا 9 و حروف a تا f می باشد.

مثال: “#c91021”

روش دوم 

در این روش از کد RGB رنگ به صورت زیر استفاده می کنیم. ابتدا کلمه rgb را می نویسیم سپس یک پرانتز باز می کنیم و رنگ را به صورت کد آر جی بی در آن می نویسیم.

مثال: “rgb (255,0,0)”

روش سوم

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

رنگ پس زمینه

این ویژگی background-color نام دارد و رنگ مورد نظر به هر سه شکل فوق در جلوی آن قابل استفاده است. روش استفاده از آن به صورت زیر است:

backgroud-color: blue;

backgroud-color: #c91021;

background-color: rgb (255,0,0);

عکس پس زمینه

این ویژگی background-image نام دارد و تصویر پس زمینه المان های اچ تی ام ال را تغییر می دهد. آدرس عکس به صورت زیر در مقابل آن قرار می گیرد:

background-image: url(“image address”);

توجه داشته باشید که در ذکر آدرس عکس فرمت آن را مانند زیر حتما بنویسید:

background-image: url(“http://pardiswp.com/image.jpg”);

تکرار تصویر پس زمینه

شما می توانید تصویر پس زمینه را به صورت افقی یا عمودی تکرار کنید مثلا زمانی که اندازه تصویر کوچک است.

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

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-x;

• تکرار عمودی: در این حالت عکس به صورت عمودی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-y;

برای جلوگیری از تکرار تصویر دستور زیر را وارد می کنیم:

background-repeat: no repeat;

پایان قسمت چهارم

در قسمت دوم آموزش css با قوانین نوشتن آشنا شدیم. در این قسمت انجام تغییراتی در المان ها آشنا خواهیم شد و نحوه انتخاب و نام گذاری آن ها را بررسی می کنیم.

انتخابگر CSS

نحوه انتخاب یک المان html یکی از مهمترین قوانین css است. برای این که یک المان اچ تی ام ال را در سی اس اس تغییر بدهیم باید آن را فراخوانی کنیم. به این کار (صدا زدن المان) انتخاب کردن css می گوییم که توسط انتخابگر انجام می شود.

برای فراخوانی یک المان لازم است که اسم آن را صدا بزنیم. المان های html هر کدام دارای یک نام عمومی و اختصاصی هستند. مثلا متون با تگ p و لینک ها با تگ a شناخته می شوند. در واقع این ها همان نام های عمومی المان ها هستند. اگر ما در css تگ p را صدا بزنیم با تمام متون روبرو هستیم. در مثال زیر رنگ تمام پارگراف های موجود در متن تغییر می کند.

p{

color: red;

}

حال اگر ما قصد تغییر تمام پاراگراف ها را نداشته باشیم و فقط بخواهیم یکی از المان ها مثلا پاراگراف دوم را تغییر بدهیم باید چه کار کنیم؟ در این جا از class و id استفاده می کنیم که در واقع بهترین راه انتخاب المان ها است.

برای درک بهترکلاس و آی‌دی مثالی می‌زنیم. فرض کنید در یک خیابان شلوغ که ده‌ها نفر با نام یکسانی مثل “محمد” حضور دارند، نام محمد را صدا بزنید. در این صورت تمامی محمد ها مخاطب شما خواهند شد و به حرف  شما گوش خواهند داد. در سی‌اس‌اس هم همین طور است و اگر شما مثلا بگویید p انگار تمامی پاراگراف‌های اچ‌تی‌ام‌ال را مخاطب قرار داده‌اید و تمامی پاراگراف‌ها مطابق دستورات شما عمل می‌کنند.

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

در واقع شما با تخصیص یک id به هر المان اچ تی ام ال صفحه آن را منحصر به فرد می‌کنید. توجه داشته باشید که به هر المان اچ تی ام ال آی‌دی منحصر به فرد بدهید و از دادن آی‌دی یکسان به چند المان خود داری کنید.

افزودن id به المان های html

برای اضاف کردن آی دی به هر المان کلمه id را به عنوان صفت در تگ اول المان مورد نظر قرار می دهیم و نام آی دی را به آن انتساب می دهیم.

id = “نام مورد نظر”

حال باید با css آن را انتخاب کنیم. برای این کار باید علامت # و نام آی دی که دادیم را کنار آن بنویسیم.

#نام مورد نظر

مثال:

<p id= "hi">پاراگراف مورد نظر با آی دی</p>

#hi{

text-align: center;

color: red;

}

انتخاب از طریق کلاس

کلاس مانند فامیلی در مثال فوق است و ممکن است که چند نفر نام فامیلی یکسان داشته باشند. با اضاف کردن اتربیوت کلاس به المان ها می توانیم به صورت همزمان به آن ها استایل بدهیم.

روش کار بدین صورت است که در ابتدا به المان هایی که میخواهیم تغییر بدهیم یک کلاس اضافه می کنیم. مثلا می خواهیم تمام هدر های متن به رنگ قرمز در بیایند. به صورت زیر عمل می کنیم:

<h2 class="ghermez">عنوان</h2>

.ghermez{

color: red;

}

روش های فوق روش های کلی انتخاب المان های html در css هستند اما اگر بخواهید می توانید به صورت ترکیبی از آن ها استفاده کنید. مثلا انتخاب تمام تگ های پاراگراف که دارای کلاس abi هستند به رنگ سبز تغییر کنند:

p.abi{

color: green;

}

بدین ترتیب تگ‌هایی h1 یا دیگر تگ‌هایی که دارای همین کلاس abi هستند مخاطب شما نخواهند بود و تنها المان‌های پاراگراف مورد تغییر قرار خواهند گرفت.

شما می‌توانید با انتخاب هر المان، رنگ متن درون آن را تغییر دهید. در واقع این کار یکی از سریع‌ترین روش‌ها برای تغییرات کلی در صفحه است.

نکته: با انتخاب المان body تمامی تغییرات گفته شده در کل المان‌ها اعمال می‌شود. چون المان body مادر تمامی المان‌های درون صفحه است. پس اگرقصد تغییری در کل المان‌ها دارید استفاده از تگ body یا html توصیه می‌شود.

پایان قسمت سوم

در قسمت اول آموزش css با روش استفاده از سی اس اس آشنا شدیم و یادگرفتیم که چگونه آن را به پروژه های خود اضافه کنیم. در این قسمت با قوانین و دستور زبان css آشنا خواهیم شد.

قوانین کلی نوشتن CSS

نوشتن در سی اس اس 3 مرحله دارد:

1. نام گذاری المان های html
2. صدا زدن المان های نام گذاری شده در فایل css
3. حال کافیست تغییراتی که می خواهید در جلوی نام المان ها بنویسید

سه مرحله فوق را در قالب یک مثال اجرا می کنیم. فرض کنید قصد داریم تمامی پاراگراف‌های موجود در صفحه‌ را به رنگ قرمز در بیاوریم.

قدم اول: المان های اچ تی ام الی که قصد تغییر آن ها را داریم انتخاب می کنیم. ما در این جا قصد تغییر متن ها را داریم و می دانیم که تگ ها در html با تگ p نوشته می شوند، پس p را به عنوان نام این المان می نویسیم.

قدم دوم: در جلوی المان انتخاب شده یک کروشه باز می کنیم.

قدم سوم: بعد از کروشه آن چیزی که قصد داریم در این المان تغییر کند را می نویسیم. مثلا برای تغییر رنگ المان کلمه color به معنای رنگ را نوشته جلوی آن : قرار می دهیم.

قدم چهارم: در جلوی دو نقطه تغییری که قصد داریم اعمال شود را می نویسیم، مثلا نام یا کد رنگی که در نظر داریم را می نویسیم و سیمی کولن می گذاریم. در نهایت کروشه را می بندیم.

p {

color: red;

}

حال تمامی تگ های پاراگراف صفحه به رنگ قرمز در می آیند.

توجه داشته باشید که در انتهای هر دستور css در کروشه باید سیمی کولن قرار دهیم و هر دستور را در یک سطر می نویسیم تا خوانایی کدها بیشتر می شود.

فرض کنید می خواهیم بعد از قرمز کردن رنگ متن فونت آن را نیز به تاهما تغییر دهیم، دستور زیر را اضافه می کنیم.

p {

color: red;

font-family: tahoma;

}

در قسمت بعد با نحوه‌ی انتخاب و نام‌گذاری المان‌های اچ‌تی‌ام‌ال بیشتر آشنا خواهیم شد.

مقدمه

در ابتدا باید بگوییم کسانی که با html هیچ آشنایی ندارند باید ابتدا آشنایی مقدماتی با این زبان داشته باشید، برای این منظور به بخش آموزش کامل html مراجعه کنید.

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

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

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

روش های استفاده از css در صفحات html

روش اول به صورت خطی

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

مثال:‌  <p style="color: red;"> متن با رنگ قرمز </p>

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

روش دوم به صورت داخلی

در این روش از تگ <style> در تگ <head> استفاده می کنیم، این نوع سی اس اس را internal یا داخلی می گویند. در این روش استایل های ما تنها در همان صفحه خوانده می شوند و در صفحات دیگر قابل دسترسی نیست.

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

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

 قسمت رنگی یک کد سی اس اس است.

روش سوم به صورت یک فایل خارج صفحه

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

<head>

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

</head>

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