استایل متن در CSS – استایل دهی نوشته ها
خوش اومدین به هفتمین جلسه از دوره آموزش CSS . امروز قصد داریم در مورد استایل دهی متن در CSS و همچنین ویژگی های که برای متن در css قرار داره صحبت کنیم. همونطور که میدونید متن بخش وسیعی از اطلاعات وب رو دربر میگیره و خیلی از اطلاعات موجود در دنیای وب متون هستند. پس استاین متن در CSS موضوع بسیار مهم و پرکاربردی هست. برای یادگیری این مباحث در این جلسه همراه من باشید.
ما برای تنظیم متن در CSS از 6 دسته از ویژگی ها استفاده میکنیم. این 6 دسته عبارتند از:
- Text Color رنگ متن
- Text Alignment ترازبندی متن
- Text Decoration تزیین متن
- Text Transformation تبدیل متن
- Text Spacing فاصله متن
- Text Shadow سایه متن
در این جلسه در مورد هر 6 گروه صحبت میکنیم و با ویژگی هایی که برای هر گروه وجود داره، آشنا میشیم.
Text Color رنگ متن در CSS
ما در جلسه سوم با موضوع رنگ در CSS آشنا شدیم. اگر خاطرتون باشه اونجا در مورد دو ویژگی background-color و color هم صحبت کردیم. دو ویژگی که به ما این امکان رو میدادن رنگ پس زمینه و رنگ متن خودمون رو تعیین کنیم.
قطعه کد زیر نمونه ای از شیوه استفاده این دو ویژگی در CSS هست:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}ما میتونیم از کدهای رنگ RGB و HEX و HSL نیز برای مقداردهی این ویژگی ها استفاده کنیم.
Text Alignment ترازبندی متن در CSS
در این بخش ما با ویژگی های زیر آشنا میشیم و یاد میگیریم که چطور از اونها استفاده کنیم:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
اولین ویژگی text-align است که با استفاده از اون میتونیم نحوه چینش متن رو تعیین کنیم. با استفاده از ویژگی میتونیم متن خودمون رو راست چین، چپ چین، وسط چین کنیم و یا به حالت کشیده متن رو نمایش بدیم.
تصویر زیر رو ببینید:
در تصویر بالا من با مقداردهی ویژگی text-align موفق شدم کلمه center رو در وسط صفحه نمایش بدم، کلمه Left رو در سمت چپ و کلمه Right رو در سمت راست صفحه نمایش بدم. همچنین دو پاراگراف در صفحه دارم که پاراگراف اول رو با استفاده از مقدار justify برای text-align بصورت کشیده تنظیم کردم که انتهای خطوط پاراگراف تراز باشند. در حالت عادی این پاراگراف همانند پاراگراف دوم باید نمایش داده میشد. اگر دقت کنید در پاراگراف دوم انتهای خطوط تراز نیست.
کد صفحه بالا رو ببینید:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>جلسه هشتم </title>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
</style>
</head>
<body>
<h1>Center</h1>
<h2>Left</h2>
<h3>Right</h3>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </p>
</body>
</html>همچنین ما یک ویژگی دیگه داریم که بهمون این امکان رو میده چینش و تراز خط آخر رو متفاوت از بقیه خطوط تنظیم کنیم. ما با استفاده از ویژگی text-align-last میتونیم نحوه چینش آخرین خط رو مشخص کنیم و به این ترتیب چینشی متفاوت از چینش دیگر خطوط رو بهش نسبت بدیم.
همینطور که در تصویر بالا میبینید پاراگراف اول با مقدار justify در ویژگی text-align تنظیم شده و انتهای خطوط کاملا تراز هستند ولی در آخرین خط بصورت وسط چین تنظیم شده. این تغییر رو با استفاده از ویژگی text-align-last انجام دادم.
همینطور برای پاراگراف دوم مقدار left در ویژگی text-align تنظیم شده ولی آخرین خط با مقدار right در ویژگی text-align-last راست چین شده است.
Text Decoration تزیین متن
ویژگی text-decoration این امکان رو به ما میده که خط یا خط هایی رو زیر، بالا و یا روی متن خودمون قرار بدیم. این ویژگی در حقیقت مقادیر چهار ویژگی زیر رو در خودش جای میده:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
در واقع ما مقادیری که در چهار ویژگی بالا تنظیم میکنیم رو میتونیم بصورت یکجا و در یک خط در text-decoration بنویسیم.
پس اول ببینیم هر کدام از این چهار ویژگی چه مقادیری میگیرند و چه تأثیری روی متن ما دارن، بعد میریم به سراغ text-decoration.
ویژگی text-decoration-line
ما با استفاده از این ویژگی میتونیم خط یا خط هایی رو به متن اضافه کنیم. 3 مقدار زیر بصورت اختصاصی برای این ویژگی وجود داره:
- overline بالای خط
- line-through روی خط
- underline زیرخط
قطعه کد زیر رو ببینید:
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}همونطور که در بالا میبینید این امکان وجود داره که بیشتر از یک مقدار رو به این ویژگی نسبت بدیم. نتیجه کد بالا رو در تصویر زیر ببینید:
ویژگی text-decoration-color
خب همینطور که از اسم این ویژگی مشخص هست وظیفه تعیین رنگ خطی رو که با ویژگی text-decoration-line رسم کردیم رو به عهده داره. مثال زیر رو ببینید:
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}ما با استفاده از روشهای تعریف رنگ که در درس رنگ ها در CSS در موردشون صحبت کردیم میتونیم رنگ خودمون رو به ویژگی text-deocration-color اختصاص بدیم.
ویژگی text-decoration-style
این ویژگی به ما این امکان رو میده که نوع خطی روی متن کشیده میشه رو مشخص کنیم. با انواع این خط ها توی درس borderها در CSS آشنا شدیم. ما از همون نوع خط ها میتونیم اینجا هم استفاده کنیم. قطعه کد زیر رو ببینید:
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}ویژگی text-decoration-thickness
با ویژگی text-decoration-thickness ما قادر هستیم ضخامت خطی که روی متن رسم کردیم رو تعیین کنیم. قطعه کد پایین رو ببینید:
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}مقدار پیشفرض برای ویژگی text-decoration-thickness مقدار auto هست.
ویژگی text-decoration
همونطور که گفتم ما با استفاده از این ویژگی میتونیم چهارویژگی بالا رو بصورت یکجا تعریف کنیم. کد زیر رو ببینید:
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}نکته مهم: وارد کرد محل قرارگیری متن که با text-decoration-line مشخص میکردیم در داخل text-decoration اجباری هست.
Text Transformation تبدیل متن
این ویژگی برای زبانهایی که نوشتار اونها با حروف لاتین هست کاربرد داره و توی زبانهایی مثل فارسی و عربی کاربرد خاصی نداره. ما با استفاده از این ویژگی میتونیم تمامی حروف یک متن رو بصورت بزرگ یا کوچک بنویسم و یا حرف اول کلمات رو با حروف بزرگ بنویسیم. این ویژگی 3 مقدار زیر رو میگیره:
- uppercase : تمامی حروف به شکل بزرگ نمایش داده میشه.
- lowercase : تمامی حروف با شکل کوچک نمایش داده میشه.
- capitalize : حرف اول کلمات به شکل بزرگ نمایش داده میشه.
قطعه کد زیر رو ببینید:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}Text Spacing فاصله متن
در این بخش ما با 4 ویژگی آشنا میشیم که مأموریت اونها تنظیم فاصله هاست. فاصله بین کاراکترها، فاصله بین خطوط، فاصله بین کلمات و …. این 4 ویژگی عبارتند از:
- text-indent تورفتگی متن
- letter-spacing فاصله بین کاراکترها
- line-height فاصله بین خطوط
- word-spacing فاصله بین کلمات
ویژگی text-indent
ما با استفاده از ویژگی text-indent میتونیم به خط اول پاراگراف خودمون تورفتگی بدیم. مثلا اگر بخواهیم خط اول پاراگراف ما 50px تورفتگی داشته باشه میتونیم از کد زیر استفاده کنیم:
p {
text-indent: 50px;
}ویژگی letter-spacing
با استفاده از ویژگی letter-spacing میتونیم فاصله بین کاراکترهای یک کلمه رو تغییر بدیم. ما این امکان رو داریم که با وارد کردن مقدار منفی فاصله بین کاراکترها رو کمتر و با وارد کردن مقدار مثبت فاصله بین کاراکترها رو بیشتر کنیم. نمونه کد زیر رو ببینید:
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}همونطور که در قطعه کد بالا میبینید فاصله بین کاراکترهای تگ h1 من 5px تعریف شده. بنابراین فاصله بین اونها از حالت عادی بیشتر میشه و فاصله بین کاراکترهای تگ h2 من منفی تعریف شده و طبیعتا فاصله بین کاراکترها کمتر میشه و حروف بیشتر بهم میچسبند.
ویژگی line-height
این ویژگی امکان تعیین فاصله بین خطوط یک متن رو در اختیار ما قرار میده. مثلا من میتونم با استفاده از ویژگی line-height فاصله بین خطوط پاراگراف خودم رو تغییر بدم. مثال زیر رو ببینید:
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}مقدار پیشفرض line-height عدد 1 هست. ما با افزایش و کاهش این عدد میتونیم فاصله بین خطوط رو کمتر یا بیشتر کنیم.
ویژگی word-space
ما این امکان رو داریم که با استفاده از ویژگی word-space فاصله بین کلمات رو مدیریت بکنیم. ما میتونیم با استفاده از اعداد مثبت فاصله رو بیشتر و با استفاده از اعداد منفی فاصله بین کلمات رو کمتر کنیم. مثال زیر رو ببینید:
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}فاصله کلمات در پاراگراف با کلاس one رو 10px تعریف کردم بنابراین فاصله بین کلمات بیشتر میشه و در پاراگراف با کلاس two فاصله بین کلمات رو منفی تعریف کردم بنابراین کلمات این پاراگراف بهم بیشتر میچسبند و نزدیکتر به هم میشوند.
سایه دار کردن متن در CSS با استفاده از Text Shadow
ما با استفاده از ویژگی text-shadow میتونیم برای متن خودمون سایه ایجاد کنیم. این ویژگی چندین مقدار رو میگیره. دو مقدار اول فاصله سایه با متن اصلی هست که روی محور x و y مشخص میشه. مثلا ما میتونیم فاصله 2px با متن اصلی رو در x و 2px رو در محور y برای سایه خودمون مشخص کنیم. مثال زیر رو ببینید:
h1 {
text-shadow: 2px 2px;
}همینطور میتونیم برای سایه خودمون رنگ تعیین کنیم. برای انجام این کار کافی است که در زمان مقدار دهی با استفاده از یکی از روش های مقدار دهی رنگ که در جلسه سوم(رنگ ها در CSS) با اونها آشنا شدیم، مقدار رنگی رو برای سایه خودمون تعیین کنیم. مثال زیر رو ببینید:
h1 {
text-shadow: 2px 2px red;
}همچنین ما میتونیم سایه خودمون رو بلر و محو کنیم. برای انجام این کار میتونیم میزان بلر شدن رو بعد از اعداد موقعیت سایه اضافه کنیم. مثال زیر رو ببینید:
h1 {
text-shadow: 2px 2px 5px red;
}متن تگ h1 من دارای سایه ای قرمز رنگ هست که با خود متن 2px در محور x و 2px در محور y فاصله داره و به رنگ قرمز هست. این سایه به اندازه 5px بلر شده.
همچنین ما این امکان رو داریم که برای یک متن چندین سایه قرار بدیم. مثال زیر رو ببینید:
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}در مثال بالا من 3 سایه برای تگ h1 خودم تعریف کردم. تصویر زیر رو ملاحظه کنید:
