زبان CSS قادر است متون صفحات شما در HTML را با قدرت بسیار عالی ویرایش کند و به آن ها استایل خاصی بدهد. به طور مثال می توانید رنگ، جهت نوشتاری، اشکال نوشتاری، تغییر ساختار و تبدیل متن به اشکال و … را پیاده سازی کنید. در ادامه برخی از مهم ترین این موارد را بررسی خواهیم کرد.
رنگ متون
خصوصیت color
وظیفه ی تغییر رنگ متون را بر عهده دارد.
مانند اکثر خصوصیات CSS که با رنگ عناصر سر و کار دارند، می توانید از قالب های زیر استفاده کنید:
- با استفاده از نام های از پیش تعریف شده در CSS مانند orange یا blue یا red و …
- در قالب Hex
- در قالب RGB
اگر بخواهید یک عنصر خاص را تغییر رنگ بدهید، باید در قسمت CSS فقط آن را هدف قرار دهید اما اگر می خواهید عموم متن های صفحه ی شما رنگ خاصی داشته باشند معمولا body را هدف می گیرند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
body {
color:blue;
}
h1 {
color:green;
}
</style>
</head>
<body>
<h1>Thisisheading1</h1>
<p>Thisisan ordinary paragraph.Notice that thistext isblue.The defaulttext color forapage isdefined inthe body selector.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: اگر می خواهید کدهایتان با استانداردهای W3C هماهنگ باشد، پس از تعریف خصوصیت color
باید خصوصیت background-color
را نیز تعریف کنید.
تراز راست یا چپ در متون
برای تعیین ترازبندی افقی در متون خود می توانید از خصوصیت text-align
استفاده کنید. این خصوصیت به شما اجازه می دهد که به متون بگویید در سمت چپ یا راست صفحه قرار بگیرند.
مقادیر مجاز برای این خصوصیت از این قرار اند:
- right به معنی «راست»
- left به معنی «چپ»
- centered به معنی «وسط»
- justified به معنی «تعدیل شده» (خط ها کاملا تا انتهای صفحه کشیده شوند تا متن مرتب تر نمایش داده شود)
نکته: چپ چین (LTR) یا راست چین (RTL) بودن زبان، مقدار پیش فرض را برای این خصوصیت تعیین می کند. زبان هایی مانند فارسی راست چین هستند، یعنی از راست به چپ نوشته می شوند اما زبان های مانند انگلیسی چپ چین هستند و از سمت چپ به راست نوشته می شوند. اگر زبانی LTR باشد مقدار اولیه یا پیش فرض خصوصیت text-align
برابر با left خواهد بود و همچنین بالعکس.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-align:center;
}
h2 {
text-align:left;
}
h3 {
text-align:right;
}
</style>
</head>
<body>
<h1>Heading1(center)</h1>
<h2>Heading2(left)</h2>
<h3>Heading3(right)</h3>
<p>The three headings above are aligned center,left andright.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اما اگر مقدار خصوصیت text-align
را روی justify تنظیم کنیم، خط های نوشته ی ما کشیده می شوند تا تمام خطوط، عرض یکسانی داشته باشند و دقیقا در یک جا شروع شده و یک جا پایان پیدا بیابند.
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
border:1pxsolidblack;
padding:10px;
width:200px;
height:200px;
text-align:justify;
}
div.notJustify {
border:1pxsolidblack;
padding:10px;
width:200px;
height:200px;
text-align:left;
}
</style>
</head>
<body>
<h1>Example text-align:justify;</h1>
<p>The text-align:justify;</p>
<div>
Inmy younger andmore vulnerable years my father gave me some advice thatI've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people inthisworld haven't had the advantages that you've had.'
</div>
<br>
<br>
<br>
<p>The text-align: left;</p>
<div class="notJustify">
In my younger and more vulnerable years my father gave me some advice that I've been turning over inmy mind ever since.'Whenever you feel like criticizing anyone,'he told me,'just remember that all the people in this world haven'thad the advantages that you've had.'
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا دو مربع به همراه متن برایتان آورده ایم؛ به یکی از آن ها Justify اختصاص و برای دیگری left داده ایم. شما می توانید تفاوت آن ها را به سادگی مشاهده کنید.
خاصیت text-decoration (دکور متن)
خاصیت text-decoration
برای اضافه یا حذف کردن تزئینات مختلف استفاده می شود.
به طور مثال از دستور ;text-decoration: none
معمولا برای حذف خطی که زیر لینک های HTML می آید استفاده می شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a {
text-decoration:none;
}
#underline {
text-decoration:underline;
}
</style>
</head>
<body>
<p>Alink with no underline:<ahref="https://www.Roxo.ir">Roxo.ir</a></p>
<p>Alink with underline:<aid='underline'href="https://www.Roxo.ir">Roxo.ir</a></p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال هر دو نوع لینک را برایتان آورده ایم؛ در زبان HTML لینک ها به صورت پیش فرض دارای خطی هستند که زیرشان قرار می گیرند. ما با دستور بالا آن را از یکی از لینک ها حذف کرده ایم. البته text-decoration
مقادیر دیگری نیز می گیرد تا شکل ظاهری متون را تغییر دهد. به طور مثال به کد زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-decoration:overline;
}
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:underline;
}
</style>
</head>
<body>
<h1>تیتراولماکهبالایخودخطیدارد</h1>
<h2>تیتردومماکهرویخودخطیدارد</h2>
<h3>تیترسومماکهزیرخودخطیدارد</h3>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: پیشنهاد می شود متونی که لینک نیستند را underline نکنید چرا که باعث گیج شدن خواننده می شود.
بزرگی و کوچکی حروف
ما می توانیم با استفاده از خصوصیت text-transform
تعیین کنیم که آیا حروف متون ما بزرگ باشد یا کوچک. البته این ویژگی تنها در زبان انگلیسی معنی می دهد چرا که ما در زبان فارسی حروف بزرگ و کوچک نداریم. بنابراین استفاده از این کد نیز تاثیری نخواهد داشت:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p.uppercase {
text-transform:uppercase;
}
p.lowercase {
text-transform:lowercase;
}
p.capitalize {
text-transform:capitalize;
}
</style>
</head>
<body>
<pclass="uppercase">Thisissome text.</p>
<pclass="lowercase">Thisissome text.</p>
<pclass="capitalize">Thisissome text.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
توضیح موارد استفاده شده در کد زیر:
- مقدار
uppercase
: این مقدار تمام حروف متن ما را به حروف بزرگ تبدیل می کند
- مقدار
lowercase
: این مقدار تمام حروف متن ما را به حروف کوچک تبدیل می کند
- مقدار
capitalize
: این مقدار تنها حرف اول هر کلمه از متن ما را بزرگ می کند
خروجی تک تک این دستورات را می توانید در کد بالا مشاهده کنید.
فرورفتگی متن
مبحث فرورفتگی متن یا Indentation در قواعد نوشتاری زبان فارسی جایگاهی ندارد و برای ما ایرانیان مفهومی کاملا بیگانه است اما در زبان انگلیسی از آن استفاده می شود و کاربرد اصلی آن زیبایی دادن به پاراگراف ها و خواناتر کردن آنان است. زمانی که برای یک پاراگراف text-indent
تعیین کنید به آن می گویید که خط اول از پاراگراف را از کمی جلوتر شروع کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p {
text-indent:50px;
}
</style>
</head>
<body>
<p>Inmy younger andmore vulnerable years my father gave me some advice thatI've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people inthisworld haven't had the advantages that you've had.'</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به خروجی کد بالا بروید می بینید که خط اول پارارگراف کمی تو رفتگی دارد که ما به آن indentation می گوییم.
فاصله گذاری بین حروف
خصوصیت letter-spacing
کار تعیین فاصله بین حروف یک متن را بر عهده دارد.
برای درک بهتر آن باید به مثال زیر توجه کنید؛ در این مثال دو عبارت متفاوت آورده ایم که در یکی از آن ها مقدار spacing را کم و در دیگری زیاد کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
letter-spacing:3px;
}
h2 {
letter-spacing:-3px;
}
</style>
</head>
<body>
<h1>Thisisheading1</h1>
<h2>Thisisheading2</h2>
</body>
</html>
|
مشاهده ی خروجی در JSBin
heading اول از هم جدا و وارفته است در حالی که حروف heading دوم کاملا در هم فرو رفته است.
فاصله گذاری بین خطوط
همانطور که می توانید بین حروف یک متن فاصله بگذارید، می توانید برای خطوط یک متن نیز فاصله تعیین کنید. به طور مثال به کد زیر دقت کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p.small {
line-height:0.7;
}
p.big {
line-height:1.8;
}
</style>
</head>
<body>
<p>
Thisisaparagraph withastandard line-height.<br>
The defaultline height inmost browsers isabout110%to120%.<br>
</p>
<pclass="small">
Thisisaparagraph withasmaller line-height.<br>
Thisisaparagraph withasmaller line-height.<br>
</p>
<pclass="big">
Thisisaparagraph withabigger line-height.<br>
Thisisaparagraph withabigger line-height.<br>
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال 3 جفت دو خطی را می بینید که هر کدام دارای line-height
متفاوتی است؛ هر چقدر line-height
بیشتر باشد فاصله ی خطوط در یک متن نیز بیشتر خواهد بود.
راست چین یا چپ چین؟
شما باید بدانید صفحات وب شما به چه زبانی هستند و گرنه نمیتوانید برایشان طرحی بزنید. به طور مثال صفحاتی که به زبان فارسی نوشته می شوند راست چین هستند و از سمت راست شروع می شوند بنابراین باید این مسئله را به مرورگر اعلام کنید. این کار را با دستور direction
انجام می دهیم. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPEhtml>
<html>
<head>
<style>
p.ex1 {
direction:rtl;
}
</style>
</head>
<body>
<p>Thisisthe defaulttext direction.</p>
<pclass="ex1"><bdo dir="rtl">Thisisright-to-left text direction.</bdo></p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
زمانی که به خروجی نگاه می کنید متوجه می شوید متن ما انگلیسی است. در حالتی که آن را به اشتباه راست چین (RTL) تعریف کرده ایم متن کاملا برعکس شده و حتی نقطه ی پایانی جمله به ابتدای آن منتقل شده است.
تفاوت اصلی direction
و text-align
نیز در همین است. direction
ماهیت نوشتاری زبان تشکیل دهنده ی صفحه ی وب شما را تعیین می کند در حالی که text-align
می گوید آن متن در سمت راست یا چپ صفحه قرار بگیرد.
اگر در کد بالا مقدار text-align
را اشتباها راست چین بگذاریم، متن کامل برعکس نشده و نقطه ی پایانی آن به ابتدایش منتقل نمی شود.
فاصله گذاری بین کلمات
خصوصیتی به نام word-spacing
وجود دارد که کار آن تعیین مقدار فاصله بین کلمات در یک متن است.
برای درک بهتر به مثال زیر نگاه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
word-spacing:10px;
}
h2 {
word-spacing:-5px;
}
</style>
</head>
<body>
<h1>Thisisheading1</h1>
<h2>Thisisheading2</h2>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: فاصله ی بین کلمات را با فاصله ی بین حروف یکی در نظر نگیرید! به مراجعه به مثال های هر کدام، متوجه تغییر آن ها خواهید شد.
سایه ی حروف
خصوصیت text-shadow
به پشت متن های ما سایه اضافه می کند تا در مواقعی که ممکن است خواندن متن سخت شود، کار برای کاربر راحت تر شود.
در کد زیر مقدار سایه ی افقی 3 پیکسل و سایه ی عمودی 2 پیکسل تعیین شده است و در آخر رنگ سایه را نیز قرمز گذاشته ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1 {
text-shadow:3px2pxred;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>Note:</b>Internet Explorer9andearlier donotsupport the text-shadow property.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت لذت برده باشید و بتوانید با رعایت نکات آن متون زیباتری را تولید کنید.
منبع: روکسو