آرشیو دسته بندی : آموزش CSS

آموزش css

لیست در css
18 Jan

لیست در css

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

لیست های نامرتب <ul> :

این لیست ها با یک دایره توپر نمایش داده می شوند.

لیست های مرتب <ol> :

این لیست ها با اعداد یا حروف نمایش داده می شوند.برای تغییر ظاهر لیست ها می توان نشانگر آیتم های لیست را تغییر داد یا از عکس و رنگ برای بک گراندشان استفاده کرد.

لیست مرتب و نامرتب

لیست مرتب و نامرتب

خاصیت  list-style-type:

این خاصیت برای انواع لیست ها bullet تعریف می کند یعنی مشخص می کند کنار آیتم های لیست علامتی نمایش دهد .

مقدار هایی که برای این خصوصیت مشخص شده اند عبارتند از:

disc , none , square , lower-greek , decimal , decimal-leading-zero , armenian , upper-roman , lower-latin , upper-latin , georgian , circle , lower-roman ,

 

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

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

مقدار پیشفرض برای لیست های نامرتب disc وبرای لیست های مرتب decimal می باشد.
نشانگر آیتم های لییست یا بالت ها برای برای لیستهای نامرتب square ،  circle و disc و none می باشد و بقیه برای لیست های مرتب می باشند.

خاصیت list-style-image :

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

خروجی:
list2

خاصیت list-style-position:

این خاصیت موقعیت بالت ها را در لیست ها مشخص می کند که دو مقدار تعریف شده دارد.
Inside : با این مقدار بالت در آیتم های لیست نمایش داده می شود.
Outside : با این مقدار بالت در خارج آیتم های لیست نمایش داده می شود.
به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
<head>
<style>
.inside {
list-style: square inside url("sqpurple.gif");
}
.Outside {
list-style: square Outside url("sqpurple.gif");
}
</style>
</head>
<body>

<ul class="inside">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="Outside">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

خروجی:

خاصیت list-style-position

خاصیت list-style-position

لینک در css
09 Jan

لینک در css

می توان به لینک در css استایل های متفاوتی داد ، با  color, font-family, background و … ظاهر لینک از متن عادی متمایز می شود. در مثال زیر با دستور color  رنگ لینک را تغییر دادیم.

<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

 

علاوه بر این می توان استایل لینک را در وضعیت های مختلف تغییر داد .
a:link  استایل لینک در وضعیت عادی
a:visited  استایل لینک وقتی که توسط کاربر مشاهده شده است
a:hover  استایل لینک زمانی که موس روی لینک قرار می گیرد.
a:active  استایل لینک در لحظه ای که روی آن کلیک  و انتخاب می شود.

دستور  Text Decoration برای لینک :

از خصوصیت Text Decoration معمولا زمانی استفاده می شود که می خواهیم خط زیر لینک در css حذف شود .به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">لینک </a>
</body>
</html>

 

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

دستور Background Color برای لینک :

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>

a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

 

با توجه نیاز قالب می توان استایل لینک را را تغییر دهیم مثلا لینک را به صورت باکس یا دکمه درست کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">لینک به صورت دکمه</a>

</body>
</html>

 

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

خاصیت های  margin  و padding  در css
21 Dec

خاصیت های margin و padding در css

در این قسمت از آموزش html  به بررسی خاصیت های  margin  و padding  در css  می پردازیم.

خاصیت  margin  در   css :

خاصیت  margin  در  css برای ایجاد فاصله بیرون از حاشیه یک المنت استفاده می شود. با margin  در هر جهت از المنت می توان فاصله ایجادکرد بالا ، راست ، پایین ، چپ که هرکدام را جداگانه نیز می توان مقدار داد.

margin-top , margin-right , margin-bottom , margin-left

به چند طریق می توان به margin  مقدار داد.

مقداردهی با پیکسل : واحد  px رایج ترین واحد اندازه گیری در وب می باشد.(10px)

مقداردهی با point : واحد pt  بیشتر برای کارهای چاپی است.(10pt)

مقدار دهی با Ems :  واحد em در طراحی وب سایت برای گوشی ها و اینگونه وسایل می باشد. (10em)

مقداردهی با سانتی متر :  این واحد اندازه گیری در طراحی صفحات وب سایت رایج نیست.(10cm)

مقداردهی درصدی ، این نوع واحد اندازه گیری برای صفحات وب رایج است ولی بیشتر برای طراحی صفحه سایت برای گوشی های موبایل و این گونه وسایل استفاده می شود. (10%)

مقدار دهی autoauto مقداردهی به صورت انوماتیک و خودکار می باشد.

مقدار دهی inherit : inherit مقدار دهی به صورت وراثتی است و از بلاک والد به ارث می برد .

برای مختصر نوشتن خاصیت margin می توان آن را به صورت یک خطی نوشت margin: 150px 140px 130px 120px;

خاصیت  padding  در  css :

خاصیت  padding  در  css  برای ایجاد فاصله بین محتوای المنت و اطراف المنت است . برخلاف  margin که بیرون از المنت فاصله ایجاد می کند padding داخل المنت است و مقداردهی آن مانند margin است که در بالا کامل توضیح داده شده است. padding در هر چهار سمت المنت مقدار می گیرد.

padding-top , padding-right , padding-bottom , padding-left

برای مختصر نوشتن دستور padding می توان آن را به صورت یک خطی مقدار دهی کرد. padding: 50px 30px 50px 80px;

به بررسی چند مثال از padding می پردازیم.

padding:25px;

یعنی فاصله از هر چهار جهت المنت 25px  است.

padding: 25px 50px;

یعنی در سمت بالا و پایین مقدار padding  برابر 25px  می باشد و در راست و چپ مقدار padding برابر  50px است.

padding: 25px 50px 25px 50px;

مقدار padding در بالا و پایین 25px  و در راست و چپ 50px است.

به پایان خاصیت های  margin  و padding  در css رسیدیم در بخش بعدی آموزش اچ تی ام ال  به بررسی سایر خاصیت ها می پردازیم.

 

اصول نوشتن کدهای  css
18 Dec

اصول نوشتن کدهای css

از این قسمت آموزش css  به بعد به بررسی اصول  نوشتن کدهای  css ، خواص و کدهای کاربردی در سی اس اس می پردازیم.

قوانین یا اصول نوشتن کدهای CSS:

-نام فایل سی اس اس را با حروف کوچک بنویسید و حتما باید با یک حرف شروع شود.
-نام فایل کوتاه باشد و پسوند آن فراموش نشود
– از گذاشتن فاصله مقدار و واحد اندازه گیری آن ها خوداری کنید.
– در سلکتور از گذاشتن فضای خالی بین کاراکتر ها استفاده نکنید.

خاصیت  Color در CSS :

رنگ متن با این خاصیت مشخص می شود که به سه طریق می توان به آن مقدار داد
– با نام رنگ مانند Red , Green , …
– کد RGB مانند rgb(255, 0, 0)
-کد HEX  مانند #ffffff

خاصیت Background-Color در CSS :

این خاصیت برای تغییر رنگ بک گراند المنت های  html  است که مانند  color  به سه طریق مقدار می گیرد.

p {
background-color: yellow;
}

 

خاصیت Background Image در CSS:

برای قرار دادن بک گراند عکس برای المنت ها است.

body {
background-image: url("paper.gif");
}

 

برای تکرار عکس بک گراند به صورت افقی background-repeat: repeat-x; و برای تکرار عکس به صورت عمودی background-repeat: repeat-y; و برای اینکه عکس تکرار نشود background-repeat: no-repeat; از این خاصیت استفاده می کنیم.

خاصیت background-position در CSS:

برای مشخص کردن محل قرار گیری عکس بک گراند از background-position استفاده می کنیم.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

 

می توانیم به جای استفاده تک تک از کدها ،‌ آن ها را به صورن یک دستور بنویسیم.

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

 

خاصیت  Border  در CSS:

با این خاصیت می توانید برای المنت ها حاشیه بگذارید.

خاصیت Border Style   در CSS :

این خاصیت چندین مقدار می گیرد.

dotted: حاشیه نقطه چین

dashed: حاشیه خط چین

solid: حاشیه خط ساده

double: حاشیه دو خطی

و …

خاصیت Border Width   در CSS :

با این خاصیت اندازه حاشیه مشخص می شود. مثلا border-width: 5px;

خاصیت border-color در CSS:

با Border-color رنگ حاشیه تغیر داده می شود.

خاصیت border-radius در CSS :

با خاصیت border-radius می توان گوشه های المنت را منحنی کرد.

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

p {
border: 2px solid red;
border-radius: 5px;
}

 

در این بخش آموزش 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 آشنا می شویم