اصول نوشتن کدهای  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 توضیح داده شد ، از این  قسمت آموزش سی اس اس به بعد به بررسی خاصیت های دیگر می پردازیم.

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

پاسخ