متن در CSS
24 Dec

متن در CSS

در این بخش آموزش css  به بررسی ارتفاع و عرض درcss و outline  در  css ، خصوصیات متن در css  و  فاصله بین خطوط در css و راست چین در css و وسط چین در css و Text Alignment و Text Decoration  و Text Transformation و Text Indentation و Letter Spacing و Text Direction و Word Spacing و Text Shadow و Line Height و Text Color   و … در css  می پردازیم.

ارتفاع و عرض درcss

زمانی که بخواهیم پهنا و ارتفاع  یک المنت از صفحه را تغییر دهیم باید از دستور width و height استفاده کنیم که می توان به صورت پیکسل و درصد و سانتی متر و …. مقداردهی کرد.
یک مثال برای این دستور ها

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

می توانیم برای عنصر حداقل عرض و حداقل ارتفاع و حداکثر عرض و حداکثر ارتفاع تعریف کنیم.

min-height , min-width , max-height , max-width
مثال:

div.ex2 {
max-width: 500px;
}

 

CSS در Outline

خطی که بیرون المنت و دور بردر را می پوشاند.فرقی این خاصیت با بردر در این است که Outline
به عنوان بخشی از المنت نیست و بر ارتفاع و عرض آن تاثیر نمی گذارد.
Outline مانند border استایل های مختلفی دارد مثال:

.dotted {outline-style: dotted;}
.dashed {outline-style: dashed;}
.solid {outline-style: solid;}
.double {outline-style: double;}
.groove {outline-style: groove;}
.ridge {outline-style: ridge;}
.inset {outline-style: inset;}
.outset {outline-style: outset;}

برای تعیین رنگ outline از این خصوصیت استفاده می شود.

outline-color

برای تعیین رنگ outline از این خصوصیت استفاده می شود.

outline-width

برای تعیین عرض outline از این خصوصیت استفاده می شود.

به مثال زیر توجه کنید:

p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}

در این مثال استایل از نوع دوخطی است به رنگ سبز و پهنای 3px است .

متن در css

می توان برای  متن در css ، رنگ  ، سایز ، فاصله بین خطوط  ،  فاصله حروف ، فاصله کلمات ، سایه برای متن و… مشخص کرد.
برخی استایل های کاربردی را در این قسمت توضیح خواهیم داد:

Text Color در css

با این خصوصیت می توان به متن در css رنگ دلخواه داد که رنگ می تواند نام خود رنگ باشد با کد هگزا یا کد RGB باشد.

h1 {
color: green;
}

 

Text Alignment  در css

برای راست چین و چپ چین و وسط چین و تراز کردن متن در صفحه سایت استفاده می شود.
left ,  right , center, justify.

h3 {
text-align: right;
}

 

Text Decoration در css

برای نحوه نمایش متن به صورتی که زیر متن خط کشیده شده باشد یا روی آن خط کشیده شده باشد ،‌یا بالای متن باشد و یا اصلا خط نداشته باشد
مثال های زیرا را در سند اچ تی ام ال خود تست کنید تا به خوبی متوجه شوید.
در این مثال لینک بدون خط است

a {
text-decoration: none;
}

در این مثال خط بالای متن است.

h1 {
text-decoration: overline;
}

 
در این مثال خط روی متن است.

h2 {
text-decoration: line-through;
}

 
در این مثال خط زیر متن است.

h3 {
text-decoration: underline;
}

 

Text Transformation در  css

برای نحوه نمایش حروف است مثلا اگر بخواهیم متن مورد نظر با حروف بزرگ نمایش داده شود یا با حروف کوچک یا حرف اول بزرگ باشد.به مثال های زیر توجه کنید.
در این مثال همه حروف به صورت بزرگ نمایش داده می شود.

p.uppercase {
text-transform: uppercase;
}

 
در این مثال همه حروف به صورت کوچک نمایش داده می شود.

p.lowercase {
text-transform: lowercase;
}

 
در این مثال حرف اول به صورت بزرگ نمایش داده می شود.

p.capitalize {
text-transform: capitalize;
}

 

Text Indentation در css

مانند نامه که اولین خط چند پیکسل تورفتگی دارد می توانیم اولین خط از متن را چند پیکسل شیفت دهیم.

p {
text-indent: 50px;
}

 
می توان مقدار منفی هم گذاشت که در این حالت متن نمایش داده نمی شود ولی فضایی که متن گرفته هست ولی خالی می باشد.

Letter Spacing در  css

برای تغییر فاصله بین حروف متن استفاده می شود.

h1 {
letter-spacing: 3px;
}

 

Line Height در  css

فاصله ی خطوط را مشخص می کند.

p.big {
line-height: 1.8;
}

 

Text Direction  در css

برای تعیین جهت نوشته استفاده می شود.
برای متن های فارسی از راست به چپ است و برای متن های انگلیسی از چپ به راست
rtl , ltr
به مثال زیر توجه کنید.

div {
direction: rtl;
}

 

Word Spacing  در css

این خاصیت فاصله کلمات  را مشخص می کند.

h1 {
word-spacing: 10px;
}

 

Text Shadow در css

برای سایه دار کردن متن در صفحات وب سایت استفاده می شود.
برای درک بهتر این خاصیت یک مثال را کامل توضیح می دهیم.
text-shadow: 3px 2px 5px red;
مقدار اول:
میزان فاصله سایه از لبه سمت چپ متن
مقدار دوم:
میزان فاصله از لبه بالای متن
مقدار سوم :
برای مشخص کردن مقدار محو بودن سایه است.
مقدار چهارم:
برای رنگ سایه است.

در این بخش از آموزش  css  به بررسی متن در css  پرداختیم.

درباره نویسنده

پاسخ