خواندن ۷ دقیقه·۵ سال پیش

10 - Backgrounds & Borders

به نام ایزد دانا

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

این که چطور عوضشون کنیم و کمی هم با اندازه ها و لبه ها شون بازی میکنیم.

از اونجایی که این موارد، همه تغییرات ظاهری هستند و نه بنیادی، پس مربود به CSS هستند. بنابراین قطعا مقداری وارد مباحث CSS میشیم ولی در اونها عمیق نمیشیم. در واقع این جلسه رو نمیشه به عنوان شروع CSS شناخت. فقط با چند دستور ساده و فعلا شاید حفظ کردنی آشنا میشیم.

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

اگر سوال یا هر حرفی دارید میتونید به ایمیل من به آدرس ARiyou.public@gmail.com و یا در شبکه های اجتماعی با شناسه (ID | User name) زیر منو پیدا کنید

Telegram, Twitter, Facebook & ... By : @ARiyou2000<br/>

با تشکر از همه شما دوستان، آریو جهان

دیگه بریم سر اصل مطلب

می خواهیم اول یکم با حاشیه دور Content یا محتوای اصلی یا همون Border بازی کنیم.

قبل از شروع بهتره بدونید که خود حاشیه مربوط به HTML میشه ولی تغییر در ظاهر اون مربوط به CSS.

این حاشیه از قبل موجوده ولی نامرئی. ما به وسیله چند خط دستور ساده CSS اون رو آشکار میکنیم.

بیایید اول یاد بگیریم چطور دستورات CSS رو به صورت اصولی و External وارد کنیم. به این که External چیه بعدا میرسیم؛ شما فعلا با این اصطلاح آشنا باشید تا بعد که توش ریز بشیم.

خب ساختن این فایل بستگی به روشی که شما برای کد زدن انتخاب کردید داره. البته که اگه از IDE ها از جمله Jetbrains استفاده می کنید،کار شما خیلی راحت تر خواهد بود. اما این رو بدونید که اصول کار یکسانه.

ایجاد فایل CSS

خب اول کار دقیقا همونطور که یه فایل HTML ایجاد کردید یه فایل متنی با پسوند (css.) ایجاد میکنیم.

اگر تو IDE کد میزنید کافیه توی قسمت Project کلیک راست کنید و از قسمت New گزینه Style Sheet یا css رو انتخاب کنید.

ترجیها این فایل رو تو همون قسمتی که فایل HTML رو ساختیم ایجاد می کنیم تا در مرحله دوم برای آدرس دهی به مشکل نخوریم.

حالا باید این فایل HTML رو به CSS متصل کنیم. برای این کار باید به فایل HTML مون آدرس فایل CSS مونن رو بدیم.

برای این کار تو تگ head فایل HTML مون دستور زیر رو وارد میکنیم و به جای کلمه Address، آدرس فایل CSS رو به همراه پسوند css. وارد میکنیم.

<link href="address" type="text/css" rel="stylesheet" />

برای درک بهتر:

<!doctype html>
<html>
        <head>
                <title>ARiyou Jahan</title>
                <link href=&quotstyle.css&quot type=&quottext/css&quot rel=&quotstylesheet&quot />
                
        </head>
      
        <body>
    
        </body>   
</html>

توجه داشته باشید که در متن بالا از اونجایی که ما فایل css. رو در همون مکان html قرار دادیم، آدرس دهی رو به این صورت و باتوجه به پروژه (و نه آدرس کامل فایل از ریشه سیستم به صورت c:\ ..... \style.css) انجام دادم.

خب الان فایل css. و html. ما به هم متصل هستند و الان اگر کاری در فایل css. انجام بدیم، با توجه به اون شئ یا اشیائی که اسمشون رو در فایل css. گفتیم، مرورگر به دنبال همون اشیاء در فایل html. می گرده و ظاهرشون رو با توجه به اون دستوراتی که در فایل css. گفتیم تغییر میده.

خب بیاید نحوه انجام دادن این کارو با هم برسی کنیم.

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

a{
         مثل تمام متن ها a دستورات برای تمامی اشیاء از جنس 
   }

b{    
         مثل تمام دکمه ها b دستورات برای تمامی اشیاء از جنس 
   }
   
p{    
         دستورات برای تمامی  پاراگراف ها - مثل تغییر سایز آنها یا رنگ 
   }

خب حالا با نحوه وارد کردن دستورات CSS در فایل css. هم آشنا شدیم.

الان وقت تغییر دادن حاشیه به وسیله CSS

ایجاد تغییرات در Border

خاصیت Border درCSS

خاصیت های Border به شما این مکان را می دهند که style ، اندازه و رنگ حاشیه ی یک المان را تغییر دهید.

نکته:توجه داشته باشید که هیچ یک از خاصیت های Border تا زمانی که خاصیت Border-style مقداردهی نشدهباشند، تاثیری نخواهند داشت.

مقادیر Border-style

None هیچ حاشیه ای تعریف نمی شود.
Dotted حاشیه ی نقطه چین تعریف می کند.
Dashed حاشیه ی خط چین تعریف می کند.
Solid یک حاشیه با خط ممتد رسم می کند.
Double دو خط حاشیه تعریف می کند.
Groove یک خط حاشیه ی سه بعدی نمایش می دهد که در آن خطوط بالایی و سمت چپ پررنگ تر ازخطوط دیگر هستند.
Ridge در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شوند.
Inset این مقدار یک حاشیه ی داخلی سه بعدی تعریف می کند که در آن معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگر هستند.
Outset حاشیه ی سه بعدی خارجی تعریف می کند که در آن خطوط پایینی و سمت راست دارای سایه و تیره تر از خطوط دیگر هستند.

ضخامت حاشیه (Border width)

با استفاده از خاصیت Border-width می توان ضخامت خط حاشیه را تنظیم کرد.
عرض (width) یا بر حسب پیکسل تنظیم می شود و یا با بهره گیری از سه مقدار از پیش تعریف شده ی thin ، medium و thick .

نکته : خاصیت ” Border-width “زمانی که به تنهایی بکار برده می شود، کار خاصی انجام نمی دهد. ابتدا باید بهوسیله ی خاصیت ” Border-style “خطوط حاشیه را مقدار دهی (تنظیم) کنید.

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;
 }

رنگ خط حاشیه (Border color)

خاصیت border-color به منظور تنظیم و مقداردهی رنگ خط حاشیه مورد استفاده قرار می گیرد.رنگ خط حاشیه را می توان با مقادیر زیر تنظیم کرد.

Name -اسم رنگ دلخواه را مشخص می کند، مانند ” red”

RGB -یک مقدار red blue green) RGB ) تعریف می کند.

Hex- یک مقدار شانزده شانزدهی(hex) مانند “#ff0000” مشخص می کند

نکته : چنانچه رنگ خط حاشیه مقداردهی نشده باشد، border رنگ خود را از خاصیت color مربوطه به ارث می برد.

خاصیت ” border-color “اگر به تنهایی بکار گرفته شود، هیچ اثری نخواهد داشت. بدین معنا که شما باید درمرحله ی اول با استفاده از خاصیت ” border-style “، خطوط حاشیه را مقداردهی کنید.

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: #98bf21;

}

تعریف حاشیه به صورت مجزا برای هر طرف در CSS

این امکان وجود دارد که برای حاشیه ی هر طرف ظاهری متفاوت تعریف کرد (برای هر طرف یک حاشیه یمتفاوت داشت)

p {

border-top-style: dotted;

border-right-style : solid;

border-bottom-style: dotted;

border-left-style: solid;

}

مثال بالا را همچنین می توان با تنها یک خاصیت تنظیم یا مقدار دهی کرد.

p {

border-style: dotted solid;

}

خاصیت border-style می تواند از یک تا چهار مقدار را داشته باشد.

border-style dotted solid double dashed;

حاشیه ی بالایی نقطه چین می شود.
حاشیه ی سمت راست عنصر با خطی معمولی کشیده می شود.
حاشیه ی پایین با دو خط نمایش داده می شود.
حاشیه ی سمت چپ خط چین می شود.

border-style dotted solid double;

حاشیه سمت بالا نقطه چین می شود.
حاشیه های سمت راست و چپ با خط معمولی ترسیم می شوند.
حاشیه ی سمت پایین دو خطه می شود.

border-style dotted solid;

حاشیه های سمت بالا و پایین نقطه چین می گردند.
حاشیه های سمت راست و چپ با خطی معمولی کشیده می شوند.

border-style dotted;

هر چهار حاشیه با خطی معمولی تعریف می شوند.

خاصیت border-style در مثال بالا بکار گرفته شده، اگرچه قابلیت استفاده از آن با border-width وborder-color وجود نیز وجود دارد.

خاصیت Border-Shorthand

همان طور که در مثال های فوق مشاهده می کنید، خاصیت های مختلفی وجود دارند که در برخورد و کار باخطوط حاشیه باید به آن ها توجه داشت.

به منظور کاهش اندازه ی کد (مختصر نویسی یا بهینه نوشتن کد)، همچنین می توان تمامی خاصیت های جداگانه را در یک خاصیت واحد تعریف کرد. این خاصیت را مختصر نویسی کد یا همان short-hand propertyمی نامند.

خاصیت ذکر شده در واقع فشرده یا خلاصه ی خاصیت های مجزای زیر است.

border-width
border-style (الزامی )
border-color

p {

border: 5px solid red;

}

حالا میرسیم به مبحث پس زمینه که اونو به اختیار خودتون میزارم

در ضمن یادتون باشه من از پست هایی که میزارم 10 خطش رو مجبورم و بقیش رو واسه دل خودم مینویسم. پس واقعا امیدوارم سرتون درد نیومده باشه و لذت برده باشید.

نظراتتون بینهایت دلگرم کنندست. انتقاداتتون هم در درجه اول باعث بهبود شخصیت اجتماعیم و بعدش کارم و نوشته هام میشه، پس بازم بینهایت ممنونم.

مثل همیشه نظراتونو می‌خونم و جواب می‌دم و اگه از نوشته‌هام خوشتون اومد او قلب تو خالیه‌ رو قرمز کنین برام و دنبالم کنید تا انگیزه داشته باشم بنویسم❤️

شب و روزگار بر شما خوش.

بدرود.

ARiyou Jahan ‏12/01‏/2019‏ 10:34 ب.ظ

ARiyou Jahan

شاید از این پست‌ها خوشتان بیاید