متن در 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  پرداختیم.

css چیست ؟
16 Dec

css چیست ؟

در این بخش آموزش css متوجه می شویم که css چیست و کاربرد آن چگونه است.

css چیست ؟

css مخفف Cascading Style Sheets ، زبانی برای توصیف و زیبا سازی سند  اچ تی ام ال می باشد.css  نحوه نمایش المنت های html  مشخص می کند. یادگیری درست css  می تواند مشخص کننده یک طراح حرفه ای سایت و مبتدی باشد.همچنین می توان سایت را بدون css  و به وسیله  table  طراحی کرد که این روش منسوخ شده است.

css  باعث صرفه جویی در وقت برای طراحی سایت می باشد ، با css تغییرات مجدد روی html  راحت تر است .

به سه روش می توان از  css  در سند html  استفاده کرد.

1) inline

2) داخلی

3) خارجی

روش inline

دارای بالاترین اولویت در اجرای استایل ها می باشد.برای بهینه سازی سایت توصیه می شود که از این روش استفاده نشود مگر در مواقع ضروری . مثال:

<p style=”color:red;”>…… </p>

روش آدرس دهی داخلی

باعث می شود که استایل ها فقط در همان صفحه اجرا شوند ، این روش باعث بالا رفتن لود سایت می شود که برای استفاده از این روش باید تگ  <style>  را در  <head>  سایت قرار دهیم و کد های  css  در آن بنویسیم.مثال:

<head>
<style>

body{

color:#000;

}
</style>
</head>

روش آدرس دهی خارجی

رایج ترین نوع استفاده css  در سند به صورت خارج از سند است به این ترتیب که فایل  css  به صورت مجرا از فایل html  است و برای ارتباط بین html , css  باید فایل css  را ضمیمه سند کنیم .مثال:

<head>
<link rel=”stylesheet” type=”text/css” href=” stylesheet.css”>
</head>

با این روش می توان یک فایل  css  را در چند سند اضافه نمود.

با توضیحات بالا متوجه شده که سی اس اس چیست و چه کار بردی داردی در بخش های بعدی آموزش css با  نحوه کار با css آشنا می شویم