CSSتنظیمات متن در
برای متن تنظیمات بسیار زیادی وجود دارد از جمله: رنگ متن، فونت، محل قرارگیری، رنگ پس زمینه و …
CSSرنگ متن در
برای رنگ متون می توان از فرمت های مختلف استفاده کرد از جمله به کارگیری نام رنگ، کد RGB، کد RGBA، کد HEX
مثال:
<html> <head> <style> body {color: blue;}
h1 {color: #657398;} </style> </head> <body>
<h1>This is heading</h1> <p>This is a paragraph</p>
</body> </html>
CSSرنگ پس زمینه متن در
با استفاده از background-color می توان برای متون رنگ پس زمینه مشخص کرد.
مثال:
<html>
<head>
<style>
body {background-color: lightgrey;}
h1 {background-color: RGB(255,0,0);}
div {background-color: #15678942;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This a paragraph.</p>
<div>This is a div.</div>
</body>
</html>
CSSمحل قرارگیری متن در
- با استفاده از دستور text-align می توان محل قرارگیری متن (چپ چین، راست چین یا وسط چین) را مشخص کرد همچنین justify این امکان را ایجاد می کند که فاصله متون از حاشیه ها یکسان باشد.
- همچنین برای تعیین جهت عمودی محل متن از vertical-align استفاده می شود که پنج حالت می توان برای آن درنظر گرفت baseline که متن را در جهت مسطح قرار می دهد، text-top که متن را بالاتر از سطح قرار می دهد، text-bottom متن را پایین تر از سطح قرار می دهد، sub متن را در حالت پایه متن قرار می دهد و super حالت توان را برای متن درنظر می گیرد.
- به منظور مشخص کردن محل قرارگیری آخرین خط از یک متن از دستور text-align-last استفاده می شود. که می تواند چهار مقدار right، left، center و justify داشته باشد.
- مثال:
<html> <head> <style> h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
p {text-align-last: justify;} </style> </head> <body>
<h1>Heading 1 (center)</h1> <h2>Heading 2 (left)</h2> <h3>Heading 3 (right)</h3>
<p>this a paragraph</p>
</body> </html>
CSSجهت نمایش متن در
برای تعیین جهت متن (چپ به راست یا راست به چپ) باید از direction استفاده کرد که مقدار rtl به معنای راست به چپ و ltr به معنای چپ به راست است.
مثال:
<html> <head> <style> p.id1 {direction: ltr;} </style> </head> <body>
<p class=“id1”>This is right-to-left text direction.</p>
</body> </html>
CSS متون در Decoration
- منظور از decoration رسم خط برروی نوشته ها (line-through)، زیرنوشته ها(underline)، بالای نوشته ها (overline) و دو طرف نوشته ها (overline underline) است.
- برای تعیین رنگ خطوط مذکور از دستور text-decoration-color استفاده می شود. که مقدار آن نام رنگ ها و یا استفاده از کدهای RGB، RGBA، HEX و HSLA است.
- با استفاده از دستور text-decoration-style نیز می توان شکل ظاهری خطوط اعم از نقطه ای، یکنواخت، موج دار و… را مشخص کرد.
- جهت مشخص کردن میزان ضخامت خطوط نیز از دستور text-decoration-thickness استفاده می شود.
<html> <head> <style> h1 { text-decoration-line: overline; text-decoration-thickness: auto; text-decoration-color: rgba(255,0,255,50%); text-decoration-style: solid; }
h2 { text-decoration-line: line-through; text-decoration-thickness: 5px; text-decoration-color: #12587496; text-decoration-style: dotted; } h3 { text-decoration-line: underline; text-decoration-thickness: 25%; text-decoration-style: wavy; text-decoration-style: dashed; } p { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: double; text-decoration-thickness: 5px; } </style> </head> <body><h1>Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p>Overline and underline text decoration.</p>
</body> </html>
CSSتعیین اندازه فاصله های متن در
- برای تعیین میزان فرورفتگی متن از دستور text-indent استفاده می شود در این حالت خط اولیه هر پاراگراف به اندازه مشخص شده از لبه صفحه فاصله می گیرد.
- از دستور letter-spacing به منظور تعیین فاصله بین کاراکترها و کلمات از یکدیگر استفاده می شود.
- دستور line-height نیز برای تعیین فاصله بین خطوط مورد استفاده قرار می گیرد.
- برای تعیین فاصله بین حروف نیز از دستور word-spacing استفاده می شود.
- white-space به منظور مدیریت فضای خالی کنار المان ها مورد استفاده قرار می گیرد و دو مقدار nowrap جهت حذف فضای خالی و wrap جهت حفظ فضاهای خالی مورد استفاده قرار می گیرد. در مثال زیر از مقدار nowrap استفاده شده است که باعث می شود کل پاراگراف در یک خط نمایش داده شود اما اگر از wrap استفاده شود یک پاراگراف در چند خط نمایش داده می شود.
مثال:
<html> <head> <style> p { text-indent: 50px; letter-spacing: 5px; line-height: 0.7; word-spacing: 10px; white-space: nowrap; } </style> </head> <body>
<h1>Using text-indent</h1>
<p>CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. Start learning CSS now</p>
</body> </html>
CSSمتن سایه دار در
- text-shadow جهت ایجاد متون سایه دار مورد استفاده قرار می گیرد.
- در text-shadow: 2px 2px دو مقدار 2 پیکسل وارد شده موقعیت طولی و عرضی قرار گرفتن سایه متن است.
- در text-shadow: 2px 2px 5px مقدار سوم که 5 پیکسل در نظر گرفته شده میزان پخش شدگی سایه متن است.
- برای تعیین رنگ سایه متن از نام رنگ یا کد RGB، RGBA، HEX، HSLA به صورت text-shadow: 2px 2px 5px red استفاده می شود.
- جهت ایجاد سایه نئونی کافیست سایه روی متن با موقعیت 0 و 0 قرار بگیرد مثلا :
text-shadow: 0 0 3px #FF0000
- سایه می تواند دو رنگ، سه رنگ و… باشد:
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF
مثال:
<html> <head> <style> h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px red, 0 0 7px rgb(0,255,0); } </style> </head> <body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body> </html>
CSSتعیین فونت در
- به منظور تعیین فونت در css باید از دستور font-family استفاده کرد. توجه کنید اگر نام فونت موردنظر یک کلمه ای باشد نیاز به دابل کوتیشن نیست ولی اگر بیش از یک کلمه باشد باید داخل دابل کوتیشن قرار بگیرد.
همچنین می توان چندین فونت را معرفی کرد تا درصورت عدم توانایی browser برای استفاده از فونت معرفی شده از فونت های جایگزین استفاده کند.
- با استفاده از font-style می توان ایتالیک بودن فونت را مشخص کرد برای ایتالیک بودن مقدار italic و یا oblique باید برای دستور مذکور در نظر گرفته شود.
- به منظور بولد بودن متون نیز باید از دستور font-weight و مقدار bold برای آن استفاده کرد.
- font-size نیز برای تعیین سایز فونت بکار می رود.
مثال:
<html> <head> <style> .p1 { font-family: “Times New Roman”, Times, serif; color: red; font-size: 60px; font-style: italic; font-weight: bold;} </style> </head> <body> <p class=“p1”>This is a paragraph, shown in the Times New Roman font.</p> </body> </html>
- لازم به ذکر است که اگر میخواهید از فونت های خاص استفاده کنید می توانید از فونت های تهیه شده توسط گوگل به روش زیر بهره ببرید.
<html> <head> <link rel=“stylesheet” href=“https://fonts.googleapis.com/css?family=Sofia”> <style> body { font-family: “Sofia”, sans-serif; } </style> </head> <body>
<h1>Sofia Font</h1> <p>123456790</p>
</body> </html>