بایگانی ماهانه: تیر 1395

در قسمت سوم آموزش 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 توصیه می‌شود.

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