#تصبحون_ع_خير🎼🌿ِِ||

📱هناك اكثر من طريق لربطcss ب html💡🌸

أين نضع كود CSS .🤔.؟؟
1-😜1⃣في ترويسة ملف html ضع ما يشبه السطر التالي
<link rel="stylesheet" type="text/css" href="myfile.css" />
حيث myfile.css هو اسم الملف.
2-😋2⃣
داخل وسم style هكذا
<style type="text/css">
/* CSS code goes here هنا تكتب اكواد السي اس اس */
body{

background:url('femo.gif');

}
/* ... */
</style>
3-3⃣😝 يمكن وضع الخصائص ع العنصر مباشرتا
مثلا اريد ان يكون خلفية الديف ازرق هكذا
<div style="background:blue;">
this is blue
</div>
هذه طرق كتابته css 💡💓
design website|💗| @progfemo96 🌿

💡🙃بعد راح اشرحلكم الخصائص الي استخدمتهة بالشرح مال فديوات 🌸

تحديد الأرضية ||خصائص ال 💡background
خصائص خلفية صفحة الويب⚙🔋
body
{
background: #777 url('file١.png') no-repeat fixed center top;

} •┈┈┈●•••••••••••••●┈┈┈•
اما نكتب باككراوند ونحط بيهة كل الخصائص او نكتبهن خاصي ورة اللخ مثل هيج
•┈┈┈●•••••••••••••●┈┈┈•

body
{
background-color:#777;
background-image:url(femo.png);/*هنا نخلص الصورة الي نريدهة*/
background-repeat:no-repeat;
background-position:center top;
background-attachment:fixed;


}
وكل خاصية معناهة :: •┈┈┈●•••••••••••••●┈┈┈•

لون الأرضية 🎨background-color ويمكن أن تكون شفافة transparent أو بلون والدها inherit
صورة الأرضية 📷background-image ويمكن أن تكون none
التكرار ♻️background-repeat ويمكن أن يكون:
دون تكرار no-repeat
تكرار أفقي repeat-x
تكرار عمودي repeat-y
تكرار من الجهتين repeat
ربط الأرضية background-attachment📌 وهي إما أن تكون ثابتة في مكانها fixed أو تمرر scroll مع المحتويات عند التحرك بأشرطة التمرير.

الموقع background-position📡 وهو الإحداثي السيني والصادي لبداية صورة الأرضية ويمكن استخدام كلمات مثل top right bottom left center وعندها لا يكون الترتيب مهم كذلك يمكن استخدام نسب مئوية مثلا ٥٠% ٥٠% والتي تكافئ center center أي في الوسط عموديا وأفقيا

هاي شرح مفصل لخصائص الخلفية |❤️|ان شاء الله سهل وواضح
design website|💗| @progfemo96 🌿

🙃🌿حاليا دااشرح الخصائص الي استخدمتهة بشرح الفديو حته تفهمون كل خاصية شنو شغلهة 💗

هناك عدة طرق لاستدعاء الخصائص📚 🗝
📦 اذا جانت الصفحة بيهة بس دف واحد فنكدر نكتب اسمة ونكتبله خصائص مثل :📄
div{
height:15%;
width:25%;
background-color:#de4;
} •┈┈┈●•••••••••••••●┈┈┈•

💗 اما اذا اكثر من دف عدنة فنحط لكل دف كلاس ونستدعيه

مثل🌿
.one{
height:15%;
width:25%;
background-color:#de4;
}
<div class="one" ></div>
•┈┈┈●•••••••••••••●┈┈┈•

😜💓 او نخلي لكل دف خصائص تستدعه مرة وحده فقط يعني حتلو جان عدنة اكثر من دف فراح تستعدي هاي الخصائص مرة وحده وذلك عن طريق ال id
هيج :
#two
{
height:15%;
width:25%;
background-color:#de4;

}

<div id="two"></div> •┈┈┈●•••••••••••••●┈┈┈•

هاي طريق استعداء الخصائص يعني ربط كل ديف بخصائصه design website|💗| @progfemo96 🌿

http://365psd.com •┈┈┈●•••••••••••••●┈┈┈•

موقع يفيد المصممين متوفر بيه كلشي مجاني من تمبلتات او ثيمات ايقونات فيكتور اي شي 🙂تكدرون تستفادون منة 💗

ابعاد الDIV 🌸💓


في الصورة أعلاه قمت بتعيين القيم التالية 🔋
#div{
background:#ccf;
position: absolute;
left:100px; top:100px;
width:100px; height:100px;
border:20px solid #fcc;
margin:20px;
padding:10px;
}
•┈┈┈●•••••••••••••●┈┈┈•

نلاحظ أن حول الصندوق ٣ مناطق💡 هي
• 1⃣ منطقة margin أي الهامش الخارجي الشفاف (المنطقة M في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
• 2⃣ منطقة الإطار border وله لونه الخاص به (وهو المنطقة B في الصورة أعلاه) وقيمتها ٢٠ بكسل حول الجسم الجهات الأربعة في المثال
•3⃣ الوسائد padding وهو الهامش الداخلي وهو بلون الخلفية (وهو المنطقة P في الصورة أعلاه) وقيمتها ١٠ بكسل حول الجسم الجهات الأربعة في المثال
ويمكن تحديد قيمة مختلفة لكل جهة مثلا لدينا •┈┈┈●•••••••••••••●┈┈┈•

• margin
o margin-top
o margin-right
o margin-bottom
o margin-left
• padding
o padding-top
o padding-right
o padding-bottom
o padding-left 🌿
💡فإن حددنا قيمة واحدة عبر padding أو margin فإنها تكون لكل الجهات. فإن حددنا قيمتين فإن الأولى تكون لأعلى ولأسفل والثانية تكون للجانبين. فإن حددنا ٣ قيم تكون الأولى للأعلى والثانية للجانبين والثالثة لأسفل. وإن كانت أربع قيم تكون أعلى ثم يمين ثم أسفل ثم يسار على الترتيب.
Design website|💗| @progfemo96

☺️🌿اروح حبايب هسه انام وانتو اقرو ذني النزلتهن اليوم واي شي تحتاجون راسلوني 🌸 وان شاء الله مااقصر وياكم 😘سلام

😋كعدت 🌿اكمل شروحات

|💟|Border ||الأطر🖼
•┈┈┈●•••••••••••••●┈┈┈•

الإطار border فالسماكة التي نحددها تكون عبر border-width ويمكن تحديد اللون عبر border-color ويمكن تحديدهما لكل جهة من الجهات الأربعة بشكل منفصل:

💠border-width
💠border-top-width
💠border-right-width
💠border-bottom-width
💠border-left-width
💠border-color
💠border-top-color
💠border-right-color
💠border-bottom-color
💠border-left-color •┈┈┈●•••••••••••••●┈┈┈•

والإطار ليس بالضرورة أن يكون مصمتا solid بل يمكن تحديد شكله عبر border-style سواء للجهة الواحدة أو للجهات الأربعة

☯border-style
☯border-top-style
☯border-right-style
☯border-bottom-style
☯border-left-style
والقيم المسموحة هي: none hidden dotted dashed solid double groove ridge inset outset كما تظهر في الصورة 👆🏻في الاعلى Design website|💗| @progfemo96

👆🏻هاي الخصائص لازم ع اقل بس تعرفون كل خاصية شتسوي مو شرط تحفضوهن مجرد افهموهن 🌿

📽اي سؤال 🙃 اني بالخدمة 🌿

💠🌿شرح الفديو هذا ملفه

http://www.downloadcrew.com/article/31601-adobe_brackets وقفت شركة ادوبي دعم برنامج كودج وبمكانة برنامج براكتس نفس شكل كودج ونفس شغلة ميختلف شي بس الاسم حملوو

👆🏻😅يعني هذا المحرر الي اشتغل عليه بالفديو