آموزش کامل CSS قسمت پنجم

در این جلسه در مورد استفاده از رنگ ها و ویژگی background-color صحبت خواهیم کرد و همچنین ویژگی text-decoration و پیاده سازی حالت فونت italic (اریب) را با ویژگی font-style یاد خواهیم گرفت. اگر جلسات قبلی را دنبال کرده باشید، بصورت خلاصه تر به این موضوع پرداخته بودیم اما در این جلسه موضوع را بسط می‌دهیم و کاملتر بررسی خواهیم کرد.

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

ویژگی text-decoration

از طریق ویژگی text-decoration در CSS میتوانیم در زیر نوشته ها، بالای نوشته ها و یا در وسط آنها یک خط بکشیم که می تواند برای جدا کردن یک متن از دیگر نوشته ها، باطل کردن یک نوشته و یا مهم کردن یک نوشته در یک صفحه وب به ما کمک کند. برای دیدن کارایی text-decoration اول فایل استایل خارجی را باز کنید و ویژگی border-bottom را از عناصر h1 و h2 حذف کنید و ویژگی text-decoration را همراه با مقدار underline جایگزین آن کنید.

body {
  color: green;
  font-family: 'Arial Black';
  font-weight: normal;
}
h1, h2 {
  text-decoration: underline;
}
.blue {
  color: blue;
  font-size: 25px;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

بعد از ذخیره فایل استایل خارجی و بارگذاری یا تازه سازی صفحه وب در مرورگر، همانطور که در نتیجه مشاهده می‌کنید زیر دو عنصر h1 و h2 هماهنگ با رنگ متن خود یک خط کشیده شد.

مقدار بعدی برای ویژگی text-decoration، مقدار line-through است که میتوان با استفاده از آن بر روی نوشته ها خط بکشیم.

body {
  color: green;
  font-family: 'Arial Black';
  font-weight: normal;
}
h1, h2 {
  text-decoration: line-through;
}
.blue {
  color: blue;
  font-size: 25px;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

مقدار بعدی overline است که با آن در بالای نوشته خط کشیده می‌شود.

body {
  color: green;
  font-family: 'Arial Black';
  font-weight: normal;
}
h1, h2 {
  text-decoration: overline;
}
.blue {
  color: blue;
  font-size: 25px;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در نتیجه بالا مشاهده می‌کنید بالای هر دو تیتر ما در صفحه خط کشیده شد.

شما می‌توانید چندین مقدار متفاوت را نیز باهم ترکیب کنید به عنوان مثال underline را با overline ترکیب می‌کنیم.

body {
  color: green;
  font-family: 'Arial Black';
  font-weight: normal;
}
h1, h2 {
  text-decoration: underline overline;
}
.blue {
  color: blue;
  font-size: 25px;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

و آخرین مقدار این بخش نیز none است. همانطور که از اسمش پیداست هیچکاری با ظاهر نوشته ها ندارد و می تواند 3 مقدار قبلی را غیرفعال کند یعنی خطی کشیده نخواهد شد. در ادامه مقدار overline را پاک می‌کنیم چون به آن احتیاجی نداریم و با underline ادامه می‌دهیم.

حالت فونت italic یا اریب با ویژگی font-style

حالت فونت اریب را احتمالا قبلا در نرم افزارهای Office مشاهده کرده اید، با کمک CSS و ویژگی font-style می توانیم نوشته های خود را در صفحه وب به حالت اریب تبدیل کنیم.

برای شروع این قسمت ابتدا فایل index.html را باز کنید و تگ block quote که در جلسات قبل استفاده کرده بودیم را به تگ p تغییر دهید و همچنین کلاس آن را نیز به para2 تغییر دهید و برای عنصر p اول در صفحه، کلاس blue را حذف و نام para1 را جایگرین آن کنید.

در مرحله دوم صفحه استایل خارجی را باز کنید و نام های جدید کلاس های p را مانند مثال زیر جایگزین کنید و همچنین ویژگی font-style: italic را به p دوم اضافه کنید.

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

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

body {
  color: green;
  font-family: 'Arial black';
  font-weight: normal;
}
h1, h2 {
  text-decoration: underline;
}
p.para1 {
  color: blue;
  font-size: 25px;
}
p.para2 {
  color: blue;
  font-size: 25px;
  font-style: italic;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در نتیجه بالا مشاهده می کنید متن عنصر p دوم که ویژگی font-style: italic را در کلاس آن استفاده کردیم بصورت اریب ظاهر شد.

در مثال بالا، ما کل یک نوشته را به حالت اریب تغییر دادیم ولی اگر بخواهیم فقط یک کلمه را در نوشته به حالت italic یا اریب تبدیل کنیم راه حل چیست؟

در جواب این سوال ما نیاز داریم تا از HTML و تگ <i></i> در نوشته خود کمک بگیریم و کلمه مورد نظر را بین دو تگ باز و بسته قرار دهیم. به عنوان مثال کلمه توسعه نرم افزار در پاراگراف اول فایل index را در نظر بگیرید.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت <i>توسعه نرم افزار</i>و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که می بینید در عنصر p اول فقط کلمه (توسعه نرم افزار) بصورت اریب درآمد.

رنگ ها در CSS و ویژگی background-color

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

اولین راه اضافه کردن رنگ به وب سایت استفاده از 16 رنگ اولیه است، دومین راه استفاده از مقادیر RGB و سومین راه استفاده از کد HEX رنگها است. در روش اول که قبلا هم از آن استفاده کرده ایم فقط کافیست نام رنگ مورد نظرتان را به عنوان مقدار به ویژگی های color یا background-color بدهید.

برای تست رنگ ها ما از ویژگی رنگ پس زمینه یا همان background-color در این قسمت استفاده خواهیم کرد. پس ویژگی background-color را در عنصر body در استایل خارجی خود اضافه کنید و به عنوان مثال مقدار رنگ lime را به آن اختصاص دهید تا نتیجه را با هم ببینیم.

body {
  color: green;
  font-family: 'Arial black';
  font-weight: normal;
  background-color: lime;
}
h1, h2 {
  text-decoration: underline;
}
p.para1 {
  color: blue;
  font-size: 25px;
}
p.para2 {
  color: blue;
  font-size: 25px;
  font-style: italic;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

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

حال روش دوم یعنی مقادیر RGB را تست می کنیم. مقادیر RGB همانطور که از نامش هم پیداست ترکیبی از سه رنگ اصلی قرمز، سبز و آبی است (Red,Green,Blue=RGB)

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

بعد از باز کردن نرم افزار گزینه edit colors را بزنید و رنگ موردنظرتان انتخاب کنید و بعد مقادیر G , R و B آن رنگ را به ترتیب مانند مثال زیر در صفحه استایل و کد های CSS خود قرار دهید.

body {
  color: green;
  font-family: 'Arial black';
  font-weight: normal;
  background-color: rgb(253, 154, 0);
}
h1, h2 {
  text-decoration: underline;
}
p.para1 {
  color: blue;
  font-size: 25px;
}
p.para2 {
  color: blue;
  font-size: 25px;
  font-style: italic;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که در نتیجه بالا مشاهده می‌کنید رنگ پس زمینه عوض شد و به رنگ انتخابی شما تغییر کرد. (در این مثال ما نارنجی را انتخاب کرده ایم)

آخرین روش افزودن رنگ به صفحه وب، استفاده از کد HEX رنگ ها است؛ کد HEX در یک توضیح کوتاه همان مقادیر رنگ ها در مبنای 16 است و می توان گفت پرکاربردترین حالت بین طراحان وب می باشد. شما می‌توانید توسط مبدل هایی که در گوگل هستند مقادیر RGB را به کد HEX تبدیل کنید و یا از نرم افزارهای طراحی مانند فتوشاپ کمک بگیرید.

تنها کاری که باید انجام شود این است که در ابتدای کد هگز رنگ یک هشتگ # بگذارید و در CSS خود استفاده کنید. به عنوان مثال ما از رنگ e9faff استفاده خواهیم کرد.

body {
  color: green;
  font-family: 'Arial black';
  font-weight: normal;
  background-color: #e9faff;
}
h1, h2 {
  text-decoration: underline;
}
p.para1 {
  color: blue;
  font-size: 25px;
}
p.para2 {
  color: blue;
  font-size: 25px;
  font-style: italic;
}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که دیدید استفاده از کد HEX شاید به مراتب ساده تر از مقادیر RGB باشد.

شما می‌توانید کد رنگ های مورد نظر خود را در جایی ذخیره نگه دارید و در مواقع مورد نیاز از آنها استفاده کنید.

آموزش کامل CSS قسمت پنجم

ویژگی text-decoration

حالت فونت italic یا اریب با ویژگی font-style

رنگ ها در CSS و ویژگی background-color

دیدگاهتان را بنویسید لغو پاسخ