Your browser does not support JavaScript! آموزش رایگان برنامه نویسی در سینیور sinior - قسمت سیزدهم آموزش css - کار با border ها

برنامه نویسی حرفه ای را با سینیور آغاز کنید



ورود کاربران



لینک دوستان

نويسنده :admin



قسمت سیزدهم آموزش css - کار با border ها

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

Border Style : 

Border Style مشخص کننده استایل border شما می باشد. Border Style دارای مقادیر مختلفی است که در زیر به شرح آنها می پردازیم:

dotted : این استایل به معنی نخته چین می باشد و در صورتی که این استایل را به border بدهیم خروجی border ما نقطه چین خواهد بود.

dashed : استایل dashed همانند استایل قبلی است با این تفاوت که به جای نقطه از دش استفاده می کند.

solid : solid  به معنای یک خط تو پر است.

double : به معنای دو خط نازک است که با فاصله border ایجاد کرده اند.

groove : به معنای تار کردن border می باشد و borderی که با groove  استایل داده شده باشد تار می باشد.

ridge  : اگر شما از ridge  جهت استایل دادن به border خود استفاده کنید یک border با خطوط سفید و برجسته خواهید داشت.

inset  : در صورتی که از inset  استفاده نمایید یک border فرو رفته خواهید داشت.

outset : پس از استفاده از outset  شما یک border برامده خواهید داشت.این border و border قبلی استایل 3 بعدی به شما می دهند.

none : اگر استایل border خود را none دهید border نخواهید داشت.

hidden : اگر استایل border را hidden دهید border  شما مخفی خواهد بود.

mix : به حالتی mix  گفته می شود که در آن به هر border  یک استایل خاص بدهید.

در زیر کد کلیه استایل های فوق نوشته شده است :

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

و در زیر نیز خروجی استایل های فوق به ترتیب نمایش داده شده است :

 اموزش css

Border Width : شما به کمک Border Width می توانید پهنای هر خط border را مقدار دهی نمایید. این مقدار می تواند بر حسب پیکسل باشد.

در کد زیر به چهار ضلع border مقدار پهنا داده شده است:

    border-width: 0px 5px 10px 20px;

مقدار 0px ستون بالایی , 5px ستون سمت چپ و 10px ستون پایین و همچنین 20px ستون بالا می باشد.

border-color : به کمک border-color می توانید رنگ border خود را مشخص نمایید :

border-color: red; 

 در کد زیر هر چهار خط border مقدار داده شده اند :

 border-color: red green blue yellow;

با انتخواب border سمت مورد نظر خود به آن مقدار دهید. با left right top bottom. این خاصیت در کلیه تگ های border قابل استفاده می باشد. همانند زیر :

border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid; 

 

 css آموزش Style استایل Border Width border-color border آموزش Style استایل Border Width border-color border css Style استایل Border Width border-color border آموزش css استایل Border Width border-color border Style آموزش css Border Width border-color border استایل Style آموزش css border-color border Border Width استایل Style آموزش css border border-color Border Width استایل Style آموزش css

مطالب مرتبط :

آموزش Navigation Bars یا ناوبری در css | آموزش ساخت منو در CSS


قسمت ناوبری و یا Navigation Bars یکی از قسمت های مهم هر وبسایتی است که باید در خود داشته باشد و استفاده از آن برای کاربران ساده باشد. در این قسمت از آموزش css به بررسی نحوه طراحی قسمت ناوبری و یا Navigation Bars می پردازیم.

آموزش Pseudo-classes در css


در این قسمت از آموزش css به بحث پیرامون Pseudo-classes می پردازیم. امیدواریم که این بحث برای شما کاربردی باشد. با ما همراه باشید.  

ترکیبگر در css - اموزش CSS Combinators


Combinators یا ترکیبگر ها در css چیزی هستند که رابطه بین دو انتخابگر را توضیح می دهند. در این قسمت از آموزش css سعی می کنیم  تا Combinators را برای شما بشکافیم پس با ما همراه باشید.

قسمت بیست و سوم آموزش css - انواع متود های موقعیت دهی یا aligning


در این قسمت از آموزش css به aligning یا موقعیت دهی با متود هایی پیشرفته تر می پردازیم. با ما همراه باشید.

قسمت بیست و یکم آموزش css - کار با لایه ها - اشنایی با float و clear


در این قسمت از آموزش css به بررسی ویژگی های float و clear می پردازیم. float مشخص می کند که چه چیزی یا چه المنتی باید شناور باشد. ویژگی clear نیز جهت کنترل رفتار های المنت های شناور یا float استفاده می شود. با ما همراه باشید.

قسمت بیستم آموزش css - اشنایی با position


در این قسمت از آموزش css به بررسی position  می پردازیم. position در css به شما این امکان را می دهد تا المنت های html خود را با static, relative, fixed و  absolute مقدار دهی کنید. با ما همراه باشید.

قسمت نوزدهم آموزش CSS - تفاوت بین width  و max-width


در این قسمت از آموزش CSS به بررسی width  , max-width  و margin: auto;می پردازیم. امیدواریم تا این مبحث برای شما کاربردی باشد. با ما همراه باشید.

قسمت هجدهم آموزش css - لایه ها در css - دستور display


در این قسمت از آموزش css با دستور display اشنا می شویم. دستور display یک دستور بسیار مهم جهت کنترل کردن اشیا می باشد.

قسمت هفتدهم آموزش css - کار با ابعاد در css


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

اموزش css قسمت شانزدهم - دستور padding


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

اموزش css قسمت پانزدهم - آشنایی با margin


در این قسمت از آموزش css شما با دستور margin آشنا می شوید.کار دستور مارجین margin مشخص کردن فاصله border تا اطراف است. ( فاصله یک دایو div از گوشه ها را می توانید با margin مارجین مشخص کنید. )

مقایسه less و sass


در این بخش می خواهیم به بررسی less و sass بپردازیم، با ما همراه باشید

قسمت چهاردهم آموزش css - کار با outline


outline خطی است که به دور المنت مورد نظر شما کشیده می شود.outline یک ویژگی است که از border جدا می باشد.

قسمت سیزدهم آموزش css - کار با border ها


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

اموزش css قسمت دوازدهم - باکس ها


کلیه اشیاء در html می توانند یک باکس در نظر گرفته شوند. در CSS ما زمانی که راجع به باکس صحبت می کنیم منظورمان لایه ها و طراحی هاست.

اموزش css قسمت یازدهم - کار با جداول


یکی دیگر از قسمت های HTML که به کمک css می توانید آن را تغییر دهید table یا همان جدول می باشد.

قسمت دهم آموزش CSS - کار با لیست ها


در این قسمت از آموزش CSS  قصد داریم تا نحوه کار با لیست ها را فرا بگیریم. پس از اتمام این مبحث شما با قدرت لیست ها در html اشنا می شوید و متوجه می شود که CSS  تا چه حدی می تواند به شما ابزار برای تغییرات ارائه نماید.

قسمت نهم آموزش css - کار با لینک ها


لینک ها در html از ابزار هایی هستند که شما را به صفحات دیگر متصل می کنند و در این قسمت از آموزش css ما قصد داریم تا نحوه زیبا سازی لینک ها را در css به شما نمایش دهیم. پس در صورتی که به این موضوع علاقه دارید به شما پیشنهاد می کنیم تا با ما همراه باشید.

قسمت هشتم آموزش css - کار با فونت


فونت یکی از تاثیر گذارترین قسمت های یک وبسایت می باشد.اگر قصد دارید تا کاربران وبسایتتان جذب مطالب شوند یکی از راه های آن استفاده از فونت زیباست. پس اگر این قسمت برای شما کاربرد دارد با ما همراه باشید.

قسمت هفتم آموزش css - کار با متن


در این قسمت از مجموعه آموزش های css قصد داریم تا به نحوه کار با متن از قبیل رنگ , موقعیت در صفحه , چیدمان متن , زیر خط , بزرگ و کوچک بودن حروف , شروع پاراگراف فاصله بین حروف , فاصله بین خطوط و فاصله بین کلمات بحث نمایید. پس از شما دعوت می کنیم تا اگر به این مبحث علاقه دارید با ما همراه باشید.

نظری بدهید
نام و نام خانوادگي :
ايميل شما :
وبسايت شما :
نظر شما :
سوال امنيتي:
2+7=