جستجو برای:
سبد خرید 0
  • خانه
  • آموزش وردپرس
  • قالب وردپرس
    • افزونه وردپرس
    • آموزش html
    • آموزش php
  • درباره ما
  • حساب کاربری
  • تماس با ما

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت
  • 02433763920 (ساعت 10 الی 14)
  • info@parniantarh.ir
perm_identity
سبد خرید 0
  • آخرین محصولات
  • آخرین مطالب آموزشی
0
پرنیان طرح
  • خانه
  • وردپرس
    • آموزش وردپرس
    • قالب وردپرس
    • افزونه وردپرس
  • آموزش برنامه نویسی
    • آموزش bootstrap
    • آموزش android
    • آموزش php
    • آموزش html
    • آموزش css
    • آموزش JavaScript
    • مقالات آموزشی
  • آموزش فتوشاپ
  • تماس با ما
  • درباره ما
ورود و ثبت نام

وبلاگ

آموزش کار با طرح کلی outline در css

access_time۱۳۹۸-۰۴-۲۵
perm_identity ارسال شده توسط رویا نجفی
folder_open آموزش css
visibility 688 بازدید
آموزش outline

طرح کلی outline یکی دیگر از امکانات css است. و در طراحی و زیبا سازی ظاهری سایت کاربرد دارد.

برخلاف مرز(border)،طرح کلی،بیرون از عنصری که در حال کار روی آن هستید قرار می گیرد. و امکان دارد با سایر عناصر موجود در صفحه همپوشانی داشته باشد.

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

با سلام خدمت شما همراهان گرامی سایت پرنیان طرح

در آموزش امروز،خصوصیت outline و نحوه کار با طرح کلی را آموزش خواهیم داد. طرح کلی ، فراتر از مرزها border است. تصویر زیر شما را در درک بهتر طرح کلی (outline) کمک می کند:

outline

ویژگی های طرح کلی outline

css به شما این امکان را می دهد که مقادیر زیر را برای outline تنظیم کنید:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

outline-style

این ویژگی به شما این قدرت را می دهد که از بین انواع مختلف طرح های کلی، مورد دلخواه خود را تنظیم نمایید. این موارد عینا مانند تنظیمات سبک برای مرزها border هستند. شما میتوانید آموزش کار با مرزها border را از این لینک مشاهده کنید.

  • dotted : یک طرح نقطه نقطه ای را تعریف می کند.
  • dashed: یک طرح با خط های کوتاه تعریف میک ند.
  • solid: یک طرح شامل یک خط ممتد را تعریف می کند.
  • double: یک طرح با خط دوگانه را تعریف می کند.
  • groove ; ridge ; inset ; outset : طرح های سه بعدی را تعریف می کنند. تفاوت این طرح ها در شدت تاثیررنگ و جهت قرارگیری آن در طرح خواهد بود.
  • none: هیچ طرحی قرار نمی گیرد.
  • hidden: یک طرح پنهان تعریف می کند.

نمونه ای از طرح های بالا

نمونه های outline

 

مثالی از کدنویسی و ایحاد طرح کلی در اطراف یک متن:

ایجاد طرح کلی با سبک نقطه ای در اطراف یک متن

PHP
1
p.dotted {outline-style: dotted;}

dotted

 

برای ایجاد سایر طرح ها، فقط کافیست در بخش کدهای گفته شده، طرح دلخواه خود را به جای کلمه dotted قرار دهید.

 

نمونه های outline

 

outline-color:

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

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

مقداردهی برای رنگ ها را می توان به سه روش انجام داد.

  • نام رنگ: کافیست نام رنگ دلخواه را  در بخش کدهای css قرار دهید.مثال:

PHP
1
2
3
4
5
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}

کد بالا، یک مرز با مقدار۱px ، و طرح کلی ساده تک خطی به رنگ قرمز، دور یک متن رسم خواهد کرد.

نمونه کدنویسی

 

یک ویژگی دیگر برای outline

outline-color: invert

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

PHP
1
2
3
4
5
p.ex1 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
}

کد بالا، طرح زیر را ایحاد خواهد کرد:

نمونه معکوس

 

outline-width

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

معمولا عرض را به یکی از سه روش زیر تعیین می کنند:

  • نازک : (thin) معمولا ۱px
  • متوسط : (medium) معمولا ۳px
  • ضخیم : (thick) معمولا ۵px

و یا با مقادیری مانند : px، pt، cm، em، و غیره

 

مثالی از کدنویسی برای تعیین عرض

ابتدا در بخش کدهای css، کد زیر را وارد کنید:

PHP
1
2
3
4
5
6
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}

کد بالا، یک طرح با مرز۱px ،به رنگ مشکی، و طرح ساده تک خطی به رنگ قرمز و عرض نازک تعریف میکند.

و سپس کدهای زیر را در بخش کدهای html وارد کنید.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
در نهایت تصویر زیر ایجاد خواهد شد:
<h3><a href="https://www.w3schools.com/css/css_outline.asp"><img class="wp-image-2286 aligncenter" src="https://parniantarh.ir/wp-content/uploads/2019/07/v-fv-vb-300x22.png" alt="نمونه مقداردهی شده" width="845" height="62" /></a></h3>
<h3></h3>
<h3><span style="color: #339966">outline-offset</span></h3>
این ویژگی، یک فضای خالی بین طرح کلی و مرز عنصر ایجاد می کند.مثال زیر نشان می دهد که فضای بین یک عنصر و طرح آن شفاف است.
 
کد زیر را در بخش css وارد کنید:
[php]
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}

این کد طرح زیر را در اطراف یک متن که شما به دلخواه خودتان نوشته اید، ایجاد می کند:

نمونه آخر

 

میخواهم بیشتر بدانم.

Rate this post
برچسب ها: cssoutlinestyleآموزش outlineآموزش کار با طرح کلیاستایل دهیطرح کلی


ارسال این مطلب برای دوستان خود :
مطالب زیر را حتما بخوانید
  • نقشه svg ایران
    نقشه svg ایران – با html و css

    494 بازدید

  • قالب های 404
    قالب های ۴۰۴ حرفه ای و جذاب فارسی – دانلود رایگان

    523 بازدید

  • آشنای با ویژگی های css
    آشنایی با ویژگی های css یا Css Specificity

    524 بازدید

  • آموزش واحدها در css
    آموزش واحدها Units در Css

    524 بازدید

  • آموزش چیدمان وب سایت
    آموزش چیدمان وب سایت Website Layout در css

    545 بازدید

جدید تر آموزش بخش کاربران در وردپرس
قدیمی تر آموزش متن text در css و تنظیمات مربوط به آن

پاسخی بگذارید لغو پاسخ

جستجو برای:
  • جدید
  • محبوب
  • دیدگاه ها
قبلی بعدی
فروش ویژه
  • افزونه Livicons برای وردپرس افزونه Livicons برای وردپرس - نسخه 2.7.3 69,000 تومان 35,000 تومان
  • فرم لاگین (ورود) متحرک و جذاب ورژن 1 - Login form 15,000 تومان 1,000 تومان
  • سئوی وردپرس Yoast پرمیوم | Yoast SEO Premium 49,000 تومان 34,000 تومان
  • سورس سیستم تیکت (ارسال پیام) به زبانphp با فونت زبای ایران سنس 35,000 تومان 20,000 تومان
  • دانلود افزونه WP Rocket -افزایش سرعت سایت وردپرس 57,000 تومان 26,000 تومان
  • ipts نرم افزار افزایش بازدید سایت و کاهش رتبه ipts نسخه نهایی
    امتیاز 2.00 از 5
    19,900 تومان 7,900 تومان
  • دانلود افزونه ی UserPro - افزونه ی پروفایل حرفه ای 49,000 تومان 22,000 تومان
  • دانلود افزونه ARForms نسخه نهایی - فرم ساز پیشرفته 25,000 تومان 19,000 تومان
دسته‌ها
  • #ویدئوها
  • آموزش
  • آموزش bootstrap
  • آموزش css
  • آموزش html
  • آموزش JavaScript
  • آموزش اندروید
  • آموزش قالب
  • آموزش های دامنه
  • اخبار وردپرس
  • برنامه نویسی php
  • دسته‌بندی نشده
  • فتوشاپ
  • قالب های html – css
  • کسب و کار آنلاین
  • مقاله ها
  • هاست سی پنل Cpanel
  • وردپرس
جدیدترین نوشته ها
  • آموزش نحوه حذف یک شخص از تصویر در فتوشاپ ۱۳۹۸-۰۹-۱۵
  • آموزش دسته بندی عکس ها در Photoshop Elements ۱۳۹۸-۰۹-۱۴
  • آموزش چرخش تصویر Flip در فتوشاپ ۱۳۹۸-۰۹-۱۲
  • نحوه تغییر سایز تصویر در فتوشاپ ۱۳۹۸-۰۹-۱۱
  • تماس با متد در جاوا اسکریپت ۱۳۹۸-۰۹-۱۱
  • ایجاد تصاویر پانوراما Panorama در فتوشاپ ۱۳۹۸-۰۹-۱۰
  • حذف کردن پس زمینه یک تصویر با استفاده از فتوشاپ CS6 ۱۳۹۸-۰۹-۰۹
  • نحوه افزودن تصویری در متن در فتوشاپ ۱۳۹۸-۰۹-۰۸

درباره پرنیان طرح

ما در پرنیان طرح به دنبال جلب رضایت مشتری و تبدیل کاربران موقت به کاربران دائمی هستیم و با تیمی 4 نفره همه روزه در تلاشیم تا بهترین کیفیت و خدمات را برای شما محیا سازیم.




  • location_on
    زنجان ، میدان شورا ، مرکز رشد جهاد ، واحد 15
  • phone_android
    024-33763920
  • perm_phone_msg
    09190605638
  • email
    info@parniantarh.ir
تمامی حقوق متعلق به وبسایت پرنیان طرح میباشد.
طراحی شده با ❤️ در پرنیان طرح
keyboard_arrow_up