sevida arabic

دروس دورة CSS : شرح الخاصية border-bottom

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjorjmSn2hdt8Bk5vFPHJgeL9_JpgtcoZRkhwbEaAoIloCUtdVBq0jcJOmPLBFxLj5oJU2eb9YwsaC7jUYlxh7j4SDzFxgpPtmni_dWBIIIXCEQ2jdg63Mz_q1ndzV2Ls3SiwtmBsnjSuC/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjorjmSn2hdt8Bk5vFPHJgeL9_JpgtcoZRkhwbEaAoIloCUtdVBq0jcJOmPLBFxLj5oJU2eb9YwsaC7jUYlxh7j4SDzFxgpPtmni_dWBIIIXCEQ2jdg63Mz_q1ndzV2Ls3SiwtmBsnjSuC/s1600/MiniSoft.png" title="دروس دورة CSS : شرح الخاصية border-bottom" /></a></div><br /><br />السلام عليكم ورحمة الله وبركاته<br />لعل الكثير من الإخوه و الأخوات رأيتك في بعض المواقع إطار او حدود خارجية لأي شئ و إذا بإطار منهم مختلف , حسناً إخواني هذه الخاصية ايضاً ضمن الخاصية border و يمكن أن تختار اي جانب من جوانب المربع المُحدد فوق او تحت او يسار او يمين ومن ضمن هذه الخواص هي خاصية اليوم وهي ..<br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: #990000;">border</span>-<span style="color: red;">bottom</span></code></pre>والآن دعونا نقوم بالتطبيق العملي , افتح صفحة تكست فارغة واعطها الامتداد html و انسخ فيها هذا الكود ..<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #6aa84f;">div</span>{<br /><span style="color: blue;">border-style: solid;</span><br /><span style="color: red;">border-bottom: 5px dotted #FF3399;</span><br />padding:20px;<br />width:260px;<br />background-color:#E2FFFF;<br />}<br /></style><br /></head><br /><body><br /><span style="color: #6aa84f;"><div></span><br />MiniSoft By Ahmad Saleh. CSS & HTML<br />MiniSoft By Ahmad Saleh. CSS & HTML<br />MiniSoft By Ahmad Saleh. CSS & HTML<br />MiniSoft By Ahmad Saleh. CSS & HTML<br /><span style="color: #6aa84f;"></div></span><br /></body><br /></html></code></pre> ثم قم بحفظ الصفحة وجرب فتحها على المتصفح لتجد التالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXNQxMH-M5ulxszn8fw2Y6Xiit_TuCEjl-V-d4mDxsBZ7qAgu4GPPhXs8G09rJ_dCbtaQku-jKNwjydh_1rLkL5IJ2mD-Q7tZtdeUOKoFpDgfTfu0Jx-64MfwbrD4NKC4n7R0dGhIyq3O/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXNQxMH-M5ulxszn8fw2Y6Xiit_TuCEjl-V-d4mDxsBZ7qAgu4GPPhXs8G09rJ_dCbtaQku-jKNwjydh_1rLkL5IJ2mD-Q7tZtdeUOKoFpDgfTfu0Jx-64MfwbrD4NKC4n7R0dGhIyq3O/s1600/1.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-bottom:5px dotted #FF3399</td></tr></tbody></table>و الان دعونا نقوم بتفسير الكود , تلك الحدود السوداء السبب فيها هو الكود<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: blue;">border-style:solid;</span></code></pre>وهذا يشمل جميع جوانب الصندوق ولكن بإضافة الكود التالي تم تغيير الحدود السفلية والسبب هو الكود ..<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: #990000;">border</span>-<span style="color: red;">bottom</span>: <span style="color: blue;">5px </span><span style="color: #b45f06;">dotted </span><span style="color: magenta;">#FF3399</span>;</code></pre>وتفسير هذا الكود ايضاً كما يلي ..<br />5px سمك الحدود<br />dotted ستايل الحدود<br />وبالطبع الرقم الاخير هو لون الحدود<br /><br />هذا ليس آخر ما يتعلق بشرح هذا الكود فهناك الكثير والكثير حوله سوف نأخذه على دروس متفرقة وهذا فقط لترتيب الدورة<br /><br /><div style="text-align: center;">ارجو أن تكون وصلت المعلومة بشكل ميسر</div><div style="text-align: center;">تحياتي لكم ,, نراكم قريباً وشرحٌ جديد .. أخوكم</div></div>

دروس دورة CSS : شرح الخاصية border-bottom

السلام عليكم ورحمة الله وبركاته لعل الكثير من الإخوه و الأخوات رأيتك في بعض المواقع إطار او حدود خارجية لأي شئ و إذا بإطار منهم مختلف , حسنا...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية border

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtqwXs8k9bWPwTmk6FXUQE33Xcr-70x-Vm-N_oYS11fNQV3iBczR3nzX_aMUw0t_OoWew3RlVX2h_Jf1jX_VNilythhcO6mD5GNj5bGQV-TG0CRlrBtuk5Qtvoe5j8YO9MBqhrmALIcncu/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtqwXs8k9bWPwTmk6FXUQE33Xcr-70x-Vm-N_oYS11fNQV3iBczR3nzX_aMUw0t_OoWew3RlVX2h_Jf1jX_VNilythhcO6mD5GNj5bGQV-TG0CRlrBtuk5Qtvoe5j8YO9MBqhrmALIcncu/s1600/MiniSoft.png" /></a></div><div><br /></div><div><br /></div>اسعد الله اوقاتكم بكل خير<br /><div>الليله بإذن الله نشرح لكم خاصية border في تقنية CSS , هذه الخاصية التي لابد وان تجدها في اي موقع .</div><div>معنى border باللغة العربية يعني الحدود وفي شرحنا هذا سوف نتطرق لأساسيات هذه الخاصية ويليها دروس أخرى اعمق واعمق إن شاء الله, كما ذكرنا خاصية اليوم هي </div><blockquote class="tr_bq" dir="ltr" style="text-align: left;">border</blockquote>ويتفرع منها الكثير والكثير من الأكواد سوف تطرح على دروس منفصلة إن شاء الله<br />دعونا نأخذ مثال حتى تتضح لنا الصورة أكثر , افتح صفحة تكست فارغة ثم اعطها الامتداد html وضع فيها الكود التالي..<br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #6aa84f;">div</span>{<br /><span style="color: red;">border</span>: <span style="color: blue;">5px</span><span style="color: magenta;"> solid </span><span style="color: #990000;">#0cf;</span><br />width: 330px;<br />padding: 15px;<br />}<br /></style><br /></head><br /><body><br /><span style="color: #6aa84f;"><div></span><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><b>MiniSoft</b> by Ahmad Saleh <b>MiniSoft</b> by Ahmad Saleh<BR/><br /><span style="color: #6aa84f;"></div></span><br /></body><br /></html></code></pre><div>وبعد حفظ الكود هذا في صفحة html افتحها على المتصفح لتجد التالي ..</div><div><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsF-VKXNXk03O76vYNL8Zux74MvQD9jc32Z08coW__EWwGgWe4Zd3OwX7JqMm5YT2pbkQCJNB1Q12pbx-bqNjGwSZdCYGCP8q2hyphenhyphenk_cTTFDVTSQDKO6DIEQ3L8sbJXGniyWlDf7sYDP6ri/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS برعاية ميني سوفت" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsF-VKXNXk03O76vYNL8Zux74MvQD9jc32Z08coW__EWwGgWe4Zd3OwX7JqMm5YT2pbkQCJNB1Q12pbx-bqNjGwSZdCYGCP8q2hyphenhyphenk_cTTFDVTSQDKO6DIEQ3L8sbJXGniyWlDf7sYDP6ri/s320/1.png" title="border-style: solid" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر الحدود ذات اللون البحري </td></tr></tbody></table><div>كيف تم هذا ؟ تعالوا بنا ننظر بقرب للسطر الملون في الكود السابق وهو </div><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: red; text-align: left;">border</span><span style="text-align: left;">: </span><span style="color: blue; text-align: left;">5px</span><span style="color: magenta; text-align: left;"> solid </span><span style="color: #990000; text-align: left;">#0cf;</span></code></pre> تفسير الكود كالتالي :<br />الأحمر : هو الخاصية التي نشرحها .<br />الأزرق : سُمك الحدود والتي جعلناها 5px.<br />الفوشيا : هو ستايل الحدود فهناك العديد من الاستايلات سوف نشرحها الآن.<br />البني : هو لون الحدود والتي جعناها بحري.<br />وهذا يفسر لنا انه يمكن كتابة نفس الكود بشكل مختلف وهو كالتالي :<br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: blue;">border-width: 5px;</span><br /><span style="color: magenta;">border-style: solid;</span><br /><span style="color: #990000;">border-color: #0cf;</span></code></pre> الأمر مُمتع حقاً !!<br />دعونا الآن نطرح لكم اسماء الاستايلات وهي كالتالي :<br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml">border-style: <span style="color: red;">dotted</span>;<br />border-style: <span style="color: red;">dashed</span>;<br />border-style: <span style="color: red;">solid</span>;<br />border-style: <span style="color: red;">double</span>;<br />border-style: <span style="color: red;">groove</span>;<br />border-style: <span style="color: red;">ridge</span>;<br />border-style: <span style="color: red;">inset</span>;<br />border-style: <span style="color: red;">outset</span>;</code></pre> ما هي شكل هذه الاستايلات ؟ هذا ما سوف نعرفه الآن , ولتجربة هذه الاستايلات فقط قُم بتغيير كلمة solid في الكود الذي وضعته في صفحة html , والآن انظر الصور التالية :<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSgyG9eAQNQH_Fpjt9v9Px3g578IM4djlILbIuWr5V-tq4seMniOEwpYf118ZI8fYwlTcbusMWayt01-MaI92s1ZVbNXem45T6PVR1cCK4tmGn3lOF0KX40t84qlpl6knLg6xx-RjvF0e/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS برعاية ميني سوفت" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSgyG9eAQNQH_Fpjt9v9Px3g578IM4djlILbIuWr5V-tq4seMniOEwpYf118ZI8fYwlTcbusMWayt01-MaI92s1ZVbNXem45T6PVR1cCK4tmGn3lOF0KX40t84qlpl6knLg6xx-RjvF0e/s320/1.png" title="border-style: dotted" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: dotted</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYP-Qt4p6nJEDdfTmWRlPLgMa4yh1DQhqiS9pUWk_FFawY6H7AbkOILRjBMBIsoW69uHNITIY6EkznNjvro4ZqJ904qcIAF1jOnOeCZ-4ks-Df-WUdK7tkDs7Us17pRvI8wE2bzi7ehbDQ/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYP-Qt4p6nJEDdfTmWRlPLgMa4yh1DQhqiS9pUWk_FFawY6H7AbkOILRjBMBIsoW69uHNITIY6EkznNjvro4ZqJ904qcIAF1jOnOeCZ-4ks-Df-WUdK7tkDs7Us17pRvI8wE2bzi7ehbDQ/s320/2.png" title="border-style: dashed" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: dashed</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqFV0DrgKl93MoUx-PsytU2ApYkC8HEnz_V6eFYQLw42Lhk7ZI9QTyf5ka9os1dKj_bCmm8Gggyev6SJ_tnhVv7KZN_QXeDtjF5m9arJOO5Ns9z4FAd72K255THZmpMbSjPUf8t21WYhL/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqFV0DrgKl93MoUx-PsytU2ApYkC8HEnz_V6eFYQLw42Lhk7ZI9QTyf5ka9os1dKj_bCmm8Gggyev6SJ_tnhVv7KZN_QXeDtjF5m9arJOO5Ns9z4FAd72K255THZmpMbSjPUf8t21WYhL/s320/3.png" title="border-style: solid" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: solid</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgscDpLJg_ai-IKYaef3Q5S_A1EpV1XW-X-Z4lWnqLEqp3Fs3coS0CNnBl48-qpyPR2cAC4ctwoSgcXgyk77IEujnLG6SebIYRdiKIDjuBhyphenhyphenottn04YOruoFI0oENvm3e_uijmVZEhcHtL/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgscDpLJg_ai-IKYaef3Q5S_A1EpV1XW-X-Z4lWnqLEqp3Fs3coS0CNnBl48-qpyPR2cAC4ctwoSgcXgyk77IEujnLG6SebIYRdiKIDjuBhyphenhyphenottn04YOruoFI0oENvm3e_uijmVZEhcHtL/s320/4.png" title="border-style: double" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: double</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlniqa9z-ajmCMdpfJc9okKuZr0okLRCxqjsqzwlpkCGG4nhCIoyKPLYlG0WoN8EINS2hjj5aYgdCH8lT0F8hNkiNWLaFzc6wdmAf0KgflkM8k4ku5ZI4ENSxWQQdw76J7raBqR-fbDbk/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlniqa9z-ajmCMdpfJc9okKuZr0okLRCxqjsqzwlpkCGG4nhCIoyKPLYlG0WoN8EINS2hjj5aYgdCH8lT0F8hNkiNWLaFzc6wdmAf0KgflkM8k4ku5ZI4ENSxWQQdw76J7raBqR-fbDbk/s320/5.png" title="border-style: groove" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: groove</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqYCTBf0VcyWSlPHT3P0O6WTrkWVPAkr1_jVfcR-7pnYD-1DZTeawPa_3u_s2e_z3Lr9lOygipZ46icuMD2f3KfKXSIkBnu0k35XedPGQ7slClOT7IICyr9T6XBD6ulHycp5AqeHZ_qa4/s1600/6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqYCTBf0VcyWSlPHT3P0O6WTrkWVPAkr1_jVfcR-7pnYD-1DZTeawPa_3u_s2e_z3Lr9lOygipZ46icuMD2f3KfKXSIkBnu0k35XedPGQ7slClOT7IICyr9T6XBD6ulHycp5AqeHZ_qa4/s320/6.png" title="border-style: ridge" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: ridge</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXrQebxSvyRh9N2GlHThv0CpE8HnN6YqH80PWoFwh_oKCQZSZez-0Hx_ACOre2vPqBEvRFcOaR0-PV97ejutTiyEa9WDZL3AUF5GDdugg5i832mSyFftsj6e6nbLwQ8S7ZcwRrXUzKDEs/s1600/7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXrQebxSvyRh9N2GlHThv0CpE8HnN6YqH80PWoFwh_oKCQZSZez-0Hx_ACOre2vPqBEvRFcOaR0-PV97ejutTiyEa9WDZL3AUF5GDdugg5i832mSyFftsj6e6nbLwQ8S7ZcwRrXUzKDEs/s320/7.png" title="border-style: inset" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: inset</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf0Ey3XFnAyO1Bi3kHBKoqO0_UvtS_UxiMdQt3LRrFfc1s8fjVqnIsCGviPZfHZ5Ma-UuZhTwNCGWvumkwVmVmh14QxneJHmTBndDnIqfhhKW9GtIx9m0WEfBPGteTp9vLsT1yoAArKq-/s1600/8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf0Ey3XFnAyO1Bi3kHBKoqO0_UvtS_UxiMdQt3LRrFfc1s8fjVqnIsCGviPZfHZ5Ma-UuZhTwNCGWvumkwVmVmh14QxneJHmTBndDnIqfhhKW9GtIx9m0WEfBPGteTp9vLsT1yoAArKq-/s320/8.png" title="border-style: outset" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">border-style: outset</td></tr></tbody></table>رائع جداً !!<br />هل تعلم أن هناك أمر لإخفاء الحدود وهو border-style: hidden .<br /><div style="text-align: center;">وبهذا قُمنا بشرح مُبسط عن الحدود border و سوف نتطرق لشروحات اقوى في الدروس القادمة إن شاء الله </div><div style="text-align: center;">السلام عليكم</div><div style="text-align: center;"><br /></div></div>

دروس دورة CSS : شرح الخاصية border

اسعد الله اوقاتكم بكل خير الليله بإذن الله نشرح لكم خاصية border في تقنية CSS , هذه الخاصية التي لابد وان تجدها في اي موقع . معنى border بال...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-position

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABB8K4GK2wg370FOfFzzmBhSKTZF5zZnkbrzBkTgJtlPV2GmWbC_fQ2V_Vu4aGFnZ-f1muWCwKRdi9thX6cer-JIoCIW2CFjBWuZ9VPhfI_0h6TRmxeYzHxIFI2ho4Pvd4-a54m9HZO78/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgABB8K4GK2wg370FOfFzzmBhSKTZF5zZnkbrzBkTgJtlPV2GmWbC_fQ2V_Vu4aGFnZ-f1muWCwKRdi9thX6cer-JIoCIW2CFjBWuZ9VPhfI_0h6TRmxeYzHxIFI2ho4Pvd4-a54m9HZO78/s1600/MiniSoft.png" /></a></div><br />بسم الله, الحمد لله<br /><br />الإخوة و الأخوات اليوم معنا خاصية من أجمل خواص الـ Background وهي التي تحمل العنوان <span style="color: red;">background-position</span>.<br />هذه الخاصية تمكننا من وضع الصورة التي نضعها في الخلفية في اي مكاناً نريد سواء اعلى او اسفل او يمين او شمال او حتى ما بين ذلك وهذا ما سوف نتعرف عليه الآن من خلال درسنا ..<br />كما ذكرنا قبلاً خاصية اليوم هي ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-position</blockquote>ويتفرع من هذه الخاصية العديد من الأكواد التي تسمح لنا بالتلاعب بمكان الصورة وهما كالتالي..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #990000;">background-position: </span><span style="color: blue;">left top</span><span style="color: #990000;">;<br />background-position: </span><span style="color: red;">left center</span><span style="color: #990000;">;<br />background-position: </span><span style="color: blue;">left bottom</span><span style="color: #990000;">;<br />background-position: </span><span style="color: red;">right top</span><span style="color: #990000;">;<br />background-position:</span><span style="color: blue;"> right center</span><span style="color: #990000;">;<br />background-position: </span><span style="color: red;">right bottom</span><span style="color: #990000;">;<br />background-position: </span><span style="color: blue;">center top</span><span style="color: #990000;">;<br />background-position: </span><span style="color: red;">center center</span><span style="color: #990000;">;<br />background-position: </span><span style="color: blue;">center bottom</span><span style="color: #990000;">;<br />background-position: </span><span style="color: red;">50% 50%</span><span style="color: #990000;">;<br />background-position: </span><span style="color: blue;">50px 50px</span><span style="color: #990000;">;</span></blockquote> كثيرين ؟ نعم ولكنهم  لا يحتاجون اي احترافية و سوف نكتشف ذلك من خلال تطبيق الكود على المتصفح.<br />افتح صفحة تكست فارغة واعطها الامتداد html وضع فيها هذا الكود ...<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br />div{<br />border:5px dotted #0cf;padding:20px;height:200px;width:300px;<br /><span style="color: blue;">background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-Jeo15030faMY1I13DwXOVCLqYMfly_DigAvYsZzF00FAy3RDCHLeKHfXd14DDBdJ1-KuF5ri9cvf65grNdJ3zmslgsWnzvPxv1RaN7GEN1PlPspvksOH82rQMemiqKAol_FxTteCUxZ/w43-h42-no/Smile.png)</span>;<br /><span style="color: #990000;">background-repeat:no-repeat</span>;<br /><span style="color: red;">background-position:center center</span>;<br />background-color:#e5f9ff;<br />}<br /></style><br /></head><br /><body><br /><div><br /><b>Mini Soft</b> <i>by</i> <u>Ahmad Saleh</u><BR /><br /><u>Mini Soft</u> <i>by</i> <b>Ahmad Saleh</b><br /></div><br /></body><br /></html></blockquote>هذا السطر الآزرق هو الصورة.<br />السطر البني لعدم تكرار الصورة .<br />السطر الأحمر هو الكود الخاص بنا الذي يجعل الصورة بالمنتصف .<br />والان بعد حفظ الكود في صفحة html افتحها على المتصفح لتشاهد التالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VEn6s2Omw4G4LVjmDijJgbtAMESv9PW5jFXOjj1pAQlIq5XRp0JuesmlnSJZhmixifmCKT0kkuyghzqEmBNem5FpK9Qt6ybBfWQM3ae1l3_r0A3kgqiUn4aeuMj7G59ycbKvTeWjxpbR/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VEn6s2Omw4G4LVjmDijJgbtAMESv9PW5jFXOjj1pAQlIq5XRp0JuesmlnSJZhmixifmCKT0kkuyghzqEmBNem5FpK9Qt6ybBfWQM3ae1l3_r0A3kgqiUn4aeuMj7G59ycbKvTeWjxpbR/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر الوجة المبتسم ( الصورة ) في المنتصف تماماً هذا لأن الكود كان center center</td></tr></tbody></table>وهنا نستنج ان الأكواد الأخرى تتحكم في مكان الصورة كالتالي ..<br /><div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: red;">background-position: left top; </span><span style="color: #b45f06;">يجعل الصورة بالاعلى على اليسار</span><br /><span style="color: blue;">background-position: left center; </span><span style="color: #b45f06;">يجعل الصورة بالمنتصف على اليسار</span><br /><span style="color: red;">background-position: left bottom; </span><span style="color: #b45f06;">يجعل الصورة بالاسفل على اليسار</span><br /><span style="color: blue;">background-position: right top; </span><span style="color: #b45f06;">يجعل الصورة بالاعلى على اليمين</span><br /><span style="color: red;">background-position: right center; </span><span style="color: #b45f06;">يجعل الصورة بالمنتصف على اليمين</span><br /><span style="color: blue;">background-position: right bottom; </span><span style="color: #b45f06;">يجعل الصورة بالاسفل على اليمين</span><br /><span style="color: red;">background-position: center top; </span><span style="color: #b45f06;">يجعل الصورة بالمنتصف بالاعلى</span><br /><span style="color: blue;">background-position: center center;</span><span style="color: #b45f06;"> يجعل الصورة بالمنتصف تماماً</span><br /><span style="color: red;">background-position: center bottom;</span><span style="color: #b45f06;"> يجعل الصورة اسفل بالمنتصف</span><br /><span style="color: blue;">background-position: 50% 50%;</span><span style="color: #b45f06;"> يجعل الصورة بالمنتصف تماماً</span><br /><span style="color: red;">background-position: 50px 50px; </span><span style="color: #b45f06;">هذا الكود يتكون من رقمين , الرقم الأول يترك المساحة من العرض , الرقم الثاني يترك المساحة من الارتفاع ثم يتم وضع الصورة </span></blockquote> و الآن دعونا نقوم باستبدال السطر الأحمر في الكود الذي قُمنا بوضعه في صفحة html بهذه الأكواد كود وراء الآخر و نرى ماذا يفعل ,, انظر الصور التالية و سوف نقوم بكتابة اسم الكود المستخدم اسفل كل صورة<br />..<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD2i86NEBp-xcZCnCCKqFuw9DSgkciujwhqyakEt4xplkBv_aPbvW22HTFqiVqx4xLTg_R3bTbglRgQeJ4wzm3yrYDGYW-N7eIPsmpgGFxiOM0HeYpz_vS_O4-B3PiIs7zcoPrR907yQ9x/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD2i86NEBp-xcZCnCCKqFuw9DSgkciujwhqyakEt4xplkBv_aPbvW22HTFqiVqx4xLTg_R3bTbglRgQeJ4wzm3yrYDGYW-N7eIPsmpgGFxiOM0HeYpz_vS_O4-B3PiIs7zcoPrR907yQ9x/s320/1.png" title="الصورة بالأعلى على اليسار" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: left top</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIkJts1A8noLhCk5sdg3rKI0WzCoVYZ7CeIHBhJ4QdKyf1eNL1CdWgSwXuGSLEPiTMr8f8fv8Vyf2JUvOgMaW_DdrkOV4L9XfnWw_PIPIlnTiFu6_hTWprXu7LJXANbiyeHLtJexGMR_O/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIkJts1A8noLhCk5sdg3rKI0WzCoVYZ7CeIHBhJ4QdKyf1eNL1CdWgSwXuGSLEPiTMr8f8fv8Vyf2JUvOgMaW_DdrkOV4L9XfnWw_PIPIlnTiFu6_hTWprXu7LJXANbiyeHLtJexGMR_O/s320/2.png" title="الصورة بالمنتصف على اليسار" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: left center</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_56dD__77zyhEx_iLDtWdCnB6limFsG64bIft1Ia7mm9J24q606eu8TOJIQrKflGckPBTlO9HNDmyYElW00-WtIM5SOTheMSzv6s751RNScRlWoq9-wiwe8bCo8rofWuXfpP3WRsi1li/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_56dD__77zyhEx_iLDtWdCnB6limFsG64bIft1Ia7mm9J24q606eu8TOJIQrKflGckPBTlO9HNDmyYElW00-WtIM5SOTheMSzv6s751RNScRlWoq9-wiwe8bCo8rofWuXfpP3WRsi1li/s320/3.png" title="الصورة بالاسفل على اليسار" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: left bottom</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4aFUkCVeckvK6eTzK9fNctbD5aN5keWaUPIOIfJwkFmt4sRnwJKEeLlZHLvQpEu3Xc_DICciShC_jat7lT9kjzaO9MGr9hemB7x0d2-g1Gp_PujnMFHEX6C0ncSYQPTKlIuwEjYpOrzy/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4aFUkCVeckvK6eTzK9fNctbD5aN5keWaUPIOIfJwkFmt4sRnwJKEeLlZHLvQpEu3Xc_DICciShC_jat7lT9kjzaO9MGr9hemB7x0d2-g1Gp_PujnMFHEX6C0ncSYQPTKlIuwEjYpOrzy/s320/4.png" title="الصورة بالاعلى على اليمين" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: right top</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxCctGQXRHPIEnUKWOG3D3vdAmAZ8I6ZjJJe6fXCfLAKTESv5Z3JAb2jHxxFkV2nMfj28Xl6HZTUAcr1fuicrWXr5DQpE-M6ua4CXICd-qXV6LvFTBOeK6ooimncqcDFmb78tO5MQ42sj/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxCctGQXRHPIEnUKWOG3D3vdAmAZ8I6ZjJJe6fXCfLAKTESv5Z3JAb2jHxxFkV2nMfj28Xl6HZTUAcr1fuicrWXr5DQpE-M6ua4CXICd-qXV6LvFTBOeK6ooimncqcDFmb78tO5MQ42sj/s320/5.png" title="الصورة بالمنتصف على اليمين" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: right center</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdatjfQMc76vSmvF_14pjYyT78FnAWPFpcvnmWKXNp40VMTJGCoqzOGxxAplSdVWWKkfs9SMnCtL_ZDhcAAqIE01BVnhqCDTrb0oAteXm2la9gkPvrX8FwHw5zneD0NSu8elc6HZK66twZ/s1600/6.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdatjfQMc76vSmvF_14pjYyT78FnAWPFpcvnmWKXNp40VMTJGCoqzOGxxAplSdVWWKkfs9SMnCtL_ZDhcAAqIE01BVnhqCDTrb0oAteXm2la9gkPvrX8FwHw5zneD0NSu8elc6HZK66twZ/s320/6.png" title="الصورة بالاسفل على اليمين" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: right bottom</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoC25Y7QFPV3OOoG9aByaak_taW4hJ4ciOEJqlsKthWomoNL36GbNjQbOCeTGVZGtHDOLcTFpGkNBhOQ6BoPfmcbENYMaiYTjTnji34Xj0dTC8gvVj8qmoy7epBhH0qPYXXlN3fYonAnXo/s1600/7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoC25Y7QFPV3OOoG9aByaak_taW4hJ4ciOEJqlsKthWomoNL36GbNjQbOCeTGVZGtHDOLcTFpGkNBhOQ6BoPfmcbENYMaiYTjTnji34Xj0dTC8gvVj8qmoy7epBhH0qPYXXlN3fYonAnXo/s320/7.png" title="الصورة بالمنتصف بالأعلى" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: center top</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9w_ZiaP1w6egqLzP0JhIROtMyimgcUpTNvb5_dwnJQdMImh3OO87y2V3RP7fDzHyWjUhiIAK3lWy_lqvi2KIaMVu7WWhXOXIVxMwcOf40li728sWz9Dq4WdUT8oB0tn7W-w2oEXkSqMB/s1600/8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9w_ZiaP1w6egqLzP0JhIROtMyimgcUpTNvb5_dwnJQdMImh3OO87y2V3RP7fDzHyWjUhiIAK3lWy_lqvi2KIaMVu7WWhXOXIVxMwcOf40li728sWz9Dq4WdUT8oB0tn7W-w2oEXkSqMB/s320/8.png" title="الصورة بالمنتصف تماماَ" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: center center</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxNOW4utKi5Hv3oj-i71UdE3sgs4N1i6JYcNMvj0TtoI-jP9nrW8KnWUitkKdKp_cqxZi-kUwUFLMYXpUp4WGC4vg9LYox7kezr4x4YQMkFiaLwMYZEQBI412OuaSv4b102z2eFdy1UPLA/s1600/9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxNOW4utKi5Hv3oj-i71UdE3sgs4N1i6JYcNMvj0TtoI-jP9nrW8KnWUitkKdKp_cqxZi-kUwUFLMYXpUp4WGC4vg9LYox7kezr4x4YQMkFiaLwMYZEQBI412OuaSv4b102z2eFdy1UPLA/s320/9.png" title="الصورة بالمنتصف بالاسفل" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: center bottom</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0mBF6ACW6tu_2cewExmqxftmz0s8ROBAOhGFAoOAN23-0LudJ2np1xhs8P1h3cO_cKiQEhKhf8OevJeoWbI_hCy98Oh6Fz5PPNvDybfq05CfRotsu3odPu1TYijkOzvSaFQDRwtOxGAh/s1600/10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt0mBF6ACW6tu_2cewExmqxftmz0s8ROBAOhGFAoOAN23-0LudJ2np1xhs8P1h3cO_cKiQEhKhf8OevJeoWbI_hCy98Oh6Fz5PPNvDybfq05CfRotsu3odPu1TYijkOzvSaFQDRwtOxGAh/s320/10.png" title="الصورة بالمنتصف تماماً" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: 50% 50%</td></tr></tbody></table><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaYr3w4A26WAQhxm51TQ2vp9Sg7yfoLOYx4BpZp0z5fZ9SgiaugAhNEElR6tM6Iee3uSJl6O3GRrilxcYZPXk0qOOWj5G__5s6fjyD3npVxDqBjY2ayIyFU9D12rMCd9VXoL_9K7mS_5X/s1600/11.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="دورة CSS على ميني سوفت" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaYr3w4A26WAQhxm51TQ2vp9Sg7yfoLOYx4BpZp0z5fZ9SgiaugAhNEElR6tM6Iee3uSJl6O3GRrilxcYZPXk0qOOWj5G__5s6fjyD3npVxDqBjY2ayIyFU9D12rMCd9VXoL_9K7mS_5X/s320/11.png" title="50 بكسل اعلى و50 بكسل عرض " width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">background-position: 50px 50px</td></tr></tbody></table>وبهذا قد عرفنا ماهية الأكواد التي وضعناها وبهذا ايضاً تم شرح الخاصية على أكمل وجه<br /><br /><div style="text-align: center;">ارجو ان يكون الشرح سهل واي استفسار موجود ان شاء الله</div><div style="text-align: center;">تم بحمد الله</div><br /></div></div>

دروس دورة CSS : شرح الخاصية background-position

بسم الله, الحمد لله الإخوة و الأخوات اليوم معنا خاصية من أجمل خواص الـ Background وهي التي تحمل العنوان background-position . هذه الخاصية تم...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-color

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator tr_bq" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_5ZzwbhbJ-6dtCfl6fjZKsoYanTrRNNAzsf5g2a2KSM3mLAftqcaqwCHbaPe6ksXkEXT8tGHUzBaFjvjxdJejnGzLMrS-FDRBKmG966FVtsWCu76WhDgUzTSZlm6HEwfdHB9G4v2-73r/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_5ZzwbhbJ-6dtCfl6fjZKsoYanTrRNNAzsf5g2a2KSM3mLAftqcaqwCHbaPe6ksXkEXT8tGHUzBaFjvjxdJejnGzLMrS-FDRBKmG966FVtsWCu76WhDgUzTSZlm6HEwfdHB9G4v2-73r/s1600/MiniSoft.png" /></a></div><div dir="ltr" style="text-align: left;"><br /></div><div style="text-align: right;">بسم الله , الحمد لله </div><div style="text-align: right;">معنا اليوم خاصية من اسهل خواص تقنية CSS وهي background-color او لون الخلفية وهي تستخدم الألوان بأكثر من طريقة من خلال اسم اللون بالانجليزية مثل wihte يعني ابيض او FFFFFF# يعني ابيض او (rgb(255.255 يعني ابيض ايضاً.</div><div style="text-align: right;">وهذا مثال فقط ليس اكثر على امكانية كتابة الألوان بأكثر من طريقة. </div><div style="text-align: right;">- كتابة اسم اللون لا يعمل إلا إذا كُتب بالانجليزية مثال : wihte مع العلم أن هناك درجات من الألوان ليس لها اسماء فقط تكون ارقام واحرف او rgb.</div><div style="text-align: right;">- كتابة اللون على شكل احرف و ارقام يسمى hex او هكس و تكون هكذا :C0C0C0 #</div><div style="text-align: right;">- كتابة اللون من خلال الألوان الثلاثة RGB وهذه الثلاثة احرف هما اختصار للون الأحمر red و اللون الأخضر green و اللون الأزرق blue ودائماً يكتب هكذا : (rgb(0.0.0  داخل القوسين ثلاثة ارقام تفصلهم نقطة وكل نقطة يمكن تغييرها لتعطيك اللون المطلوب .</div><div style="text-align: right;">وتعتبر طريقة hex من افضل الطرق في الحصول على الألوان .</div><div style="text-align: right;">وهنا سوف نقوم باستخدام موقع رائع جداً وهو ( <a href="http://www.color-hex.com/" rel="nofollow" target="_blank">Color Hex</a> )  من خلاله تستطيع الحصول على اي لون واللون الواحد ستجد له معلومات كثيرة .. </div><div dir="ltr" style="text-align: left;"><br /></div><div style="text-align: right;">الآن بقى لنا أن نأخذ مثالاً حول استخدام هذه الخاصية .. افتح صفحة تكست فارغة اعطها الإمتداد html ثم الصق فيها هذا الكود</div><div dir="ltr" style="text-align: left;"><br /></div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: #38761d;">background-color: rgb(0,128,0);</span><br />height:200px;<br />width:300px;<br />}<br /><span style="color: blue;">h1{</span><span style="color: blue;">background-color: #0000ff;</span>}<br /><span style="color: red;">p</span>{<span style="color: red;">background-color: red;</span>}<br /></style><br /></head><br /><body><br /><span style="color: #38761d;"><div></span><br /><span style="color: blue;"><h1>Mnin Software</h1></span><br /><span style="color: red;"><p>Programs & Web develober.</p></span><br /></div><br /></body><br /></html></blockquote><div style="text-align: right;">دعونا نقوم بتطبيق هذا الكود على المتصفح و سوف نفهم لماذا قُمت بتلوين هذه الأسطر</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" dir="ltr" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9VoFzvNC3Rq5eyKIT9QxxwJcmeWxwpPbzxwZldMEof0x0oZ08qDLgY_RA9v7RVgZRh74XoCOv6p4fdEAOOAnlpKI2ng9dQFZRrH5sBTJcfstv_bZqdEKMko8kLiLNmOGtLPdcIK0vdfQ/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ9VoFzvNC3Rq5eyKIT9QxxwJcmeWxwpPbzxwZldMEof0x0oZ08qDLgY_RA9v7RVgZRh74XoCOv6p4fdEAOOAnlpKI2ng9dQFZRrH5sBTJcfstv_bZqdEKMko8kLiLNmOGtLPdcIK0vdfQ/s1600/1.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">هذا هو الكود بعد تطبيقه على المتصفح </td></tr></tbody></table><div style="text-align: right;">انظر للصورة بها نفس الألوان التي قُمت بتلوينها في الكود السابق وهذا يعني أن الكود هو ..</div><blockquote dir="ltr" style="text-align: left;"><span style="color: #38761d;">background-color: rgb(0,128,0);   لون خلفية الصندوق كاملاً</span><br /><span style="color: blue;">background-color: #0000ff;             لون خلفية العنوان</span><br /><span style="color: red;">background-color: red;                   لون خلفية الوصف</span></blockquote> انظر كيف تمت كتابة الألوان , وبهذا قد تعرفت على المزيد حول خاصية background-color<br /><br /><div style="text-align: center;">انتهى موضوعنا لهذا اليوم والى لقاءاً آخر إن شاء الله</div><div style="text-align: center;"><br /></div></div>

دروس دورة CSS : شرح الخاصية background-color

بسم الله , الحمد لله معنا اليوم خاصية من اسهل خواص تقنية CSS وهي background-color او لون الخلفية وهي تستخدم الألوان بأكثر من طريقة من خلال ...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-repeat

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoylz1aNUdzziUH7b0QKO8pbUaAHAyzFFpwvBG3nzYMotXVIlws1xxGziCYmoc0KwS2JfMvbkqyV0aPDzrf5KBITM-wpGWAWvXxLiPO_sv_MduRrvNrJHCFbdiv_m1dTELPynkebMwvnP/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixoylz1aNUdzziUH7b0QKO8pbUaAHAyzFFpwvBG3nzYMotXVIlws1xxGziCYmoc0KwS2JfMvbkqyV0aPDzrf5KBITM-wpGWAWvXxLiPO_sv_MduRrvNrJHCFbdiv_m1dTELPynkebMwvnP/s1600/MiniSoft.png" /></a></div><br /><br />اسعد الله اوقاتكم بكل خير<br />في دروسنا السابقة شرحنا الكثير حول خاصية background و اليوم معنا خاصية جديدة من هذه الخواص وهي بعنوان<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #bf9000;">background</span>-<span style="color: red;">repeat</span> </blockquote>تلك الخاصية التي تجعلنا نتحكم في تكرار الصورة التي نضعها في الخلفية سواء رأسياً او افقياً او حتى ملئ الصفحة كلها , بالاضافة<br />وهذا ما سوف نتناوله اليوم في درسنا هذا فكونوا معنا واعطونا انتباهكم ..<br />كود background-repeat ينقسم منه اربعة خواص وهما كالتالي..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat:<span style="color: red;"> repeat;      تكرار الصورة</span><br />background-repeat: <span style="color: orange;">no-repeat;   عدم تكرار الصورة</span><br />background-repeat: <span style="color: blue;">repeat-x;    تكرار الصورة افقياً</span><br />background-repeat:<span style="color: magenta;"> repeat-y;    تكرار الصورة رأسياً</span></blockquote><br />افتح صفحة text اعطيها الإمتداد html ثم ضع فيها هذا الكود :<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: blue;">background-image:url(http://im31.gulfup.com/KCsoG.png);</span><br /><span style="color: red;">background-repeat:repeat;</span><br />border:2px solid #ccc;<br />width:260px;<br />padding:20px;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><br /><BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote>السطر الآزرق رابط الصورة , السطر الأحمر الخاصية التي نشرحها.<br />الآن قُم بحفظ الصفحة وافتحها على اي متصفح وسوف تجد التالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LAAtQ-OEtajzBnOGz_pOUx7kvi1utn-9RAe-jVguVu1XXxGbfFrfEjp7xzqH_Kv4KAu9qLxGsyla7oei7mACwZ3bj9OsciYou4pxoOqvxNZwsIaluEhy5JPQRyL0s70JjLdNuNRSorCP/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0LAAtQ-OEtajzBnOGz_pOUx7kvi1utn-9RAe-jVguVu1XXxGbfFrfEjp7xzqH_Kv4KAu9qLxGsyla7oei7mACwZ3bj9OsciYou4pxoOqvxNZwsIaluEhy5JPQRyL0s70JjLdNuNRSorCP/s1600/1.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة repeat</td></tr></tbody></table> هكذا تم تكرار الصورة بواسطة الكود background-repeat: repeat<br />وإذا أردنا أن نجعلها صورة واحدة فقط فاستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat: <span style="color: red;">no-repeat</span>;</blockquote>لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI6yiEbXyyxxIbyDwFCr50FbrOW30k1vepUNg3yxxlPVHxXcSfhzRC_X187iL6vdhLCdepoTFw3jJlN64bzeOVXBX7nVs3cfqnEUygiOnCIx-zAZMZu-wyxJtsBvPJW4fSpk640_8lSMx/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI6yiEbXyyxxIbyDwFCr50FbrOW30k1vepUNg3yxxlPVHxXcSfhzRC_X187iL6vdhLCdepoTFw3jJlN64bzeOVXBX7nVs3cfqnEUygiOnCIx-zAZMZu-wyxJtsBvPJW4fSpk640_8lSMx/s1600/2.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">عدم تكرار الصورة no-repeat</td></tr></tbody></table>اما إذا أحببنا أن نجعل الصورة متكررة افقياً فقط فسوف نستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat:<span style="color: red;"> repeat-x</span>;</blockquote>لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2f-T9-CZxiNmd8fNenVP3HWyBAwXrrV3Iv2rivY-e4Bx66f8ZKubA3DJqxWpGlLzljAxbJzI8IAS__-YBbHxv01ZKM_amCDHqP8Y_IlELmA2_x2xnSgXSwU-RUjwvoGY4HRUu02H9o259/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2f-T9-CZxiNmd8fNenVP3HWyBAwXrrV3Iv2rivY-e4Bx66f8ZKubA3DJqxWpGlLzljAxbJzI8IAS__-YBbHxv01ZKM_amCDHqP8Y_IlELmA2_x2xnSgXSwU-RUjwvoGY4HRUu02H9o259/s1600/3.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة افقياً repeat-x</td></tr></tbody></table> و إذا أحببنا ان يتم التكرار رأسياً فسوف نستبدل السطر الأحمر من الكود السابق بهذا الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-repeat: <span style="color: red;">repeat-y</span>;</blockquote> لتبقى في المتصفح هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTvA_TXr8y0XTTi1InhRAEnnQgj-IpAUQyYtwNcBlsMEfeJs4IpZ_eHYjwnf3fp94QbOD2Ss6TYv1DNY-fb9zjkjEstuMnUzPs0h3kmz6aVeLDIzDaRz1wmNw5GDzUwtyE6vOEb1jUDPI/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbTvA_TXr8y0XTTi1InhRAEnnQgj-IpAUQyYtwNcBlsMEfeJs4IpZ_eHYjwnf3fp94QbOD2Ss6TYv1DNY-fb9zjkjEstuMnUzPs0h3kmz6aVeLDIzDaRz1wmNw5GDzUwtyE6vOEb1jUDPI/s1600/4.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تكرار الصورة رأسياً repeat-y</td></tr></tbody></table>وبهذا تتضح لنا امكانيات هذه الخاصية الجميلة ولكن مع كل هذا يمكنك التخصيص اكثر , فيمكنك جعل الصورة متكررة رأسياً في المنتصف تماماً او جعلها واحدة فقط في المنتصف تماماً او على اليمين او الشمال بواسطة الكود<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-position: <span style="color: red;">center</span>;</blockquote> هذا الكود مشروح من ضمن دروس الدورة , فيمكنك استبدال <span style="color: red;">centet </span>بـ <span style="color: red;">left </span>او <span style="color: red;">right </span>كما الصورة التالية مثلاً<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3zLGF8sJf-NFkeC-Skn4wxOGd85SZOQLQQx0wMRomtBEoW6xhTt4L-UA7273BMsPcFloadta3_mZQtnkHsHbJBVBi5EhPb303dO5iTKebeIMeYabb2j9xz40uxVDR5pEmEnmtjsYfpat/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3zLGF8sJf-NFkeC-Skn4wxOGd85SZOQLQQx0wMRomtBEoW6xhTt4L-UA7273BMsPcFloadta3_mZQtnkHsHbJBVBi5EhPb303dO5iTKebeIMeYabb2j9xz40uxVDR5pEmEnmtjsYfpat/s1600/5.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">center & no-repeat</td></tr></tbody></table><br />وعليك أن تدرك ايضاً ان في لغة CSS الأكواد تكمل بعضها البعض وهذا ما سوف تدركه جيداً عندما تتعمق أكثر في هذه التقنية الأكثر من جميلة..<br /><br /><div style="text-align: center;">بهذا تم موضوعنا لهذا اليوم ,, في حفظ الله</div></div>

دروس دورة CSS : شرح الخاصية background-repeat

اسعد الله اوقاتكم بكل خير في دروسنا السابقة شرحنا الكثير حول خاصية background و اليوم معنا خاصية جديدة من هذه الخواص وهي بعنوان background -...

اقرأ المزيد

دروس دورة CSS : شرح خاصية background-size في CSS3

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOd9c-AGZFESFqaxMKVS10a7MZhXPYM59Cy-_XedjV_Urx6z66O897xpASDJT-px9H-Miy3Hvoc2Yt9fXSAglxHASDdkyotHXZv2TEE9kz3mQ8KymxiB8iPaxDkV1A3hmcZd81oI2NC7y/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixOd9c-AGZFESFqaxMKVS10a7MZhXPYM59Cy-_XedjV_Urx6z66O897xpASDJT-px9H-Miy3Hvoc2Yt9fXSAglxHASDdkyotHXZv2TEE9kz3mQ8KymxiB8iPaxDkV1A3hmcZd81oI2NC7y/s1600/MiniSoft.png" title="دروس دورة CSS : شرح خاصية background-size في CSS3" /></a></div><br />السلام عليكم ..<br />اليوم إن شاء الله سوف نقوم بشرح خاصية جميلة جداً من خواص تقنية CSS3 وهي backgroungd-size او مقاس الخلفية .<br />في اولى دروسنا شرحنا كيفية عمل صفحة html تجريبية لنقوم بتطبيق ما نفعله على المتصفح ولمن لم يقوم بإنشاءها فليشاهد هذا الموضوع من ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا </a>)<br /><br />كما ذكرنا شرحنا حول الخاصية ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #b45f06;">background</span>-<span style="color: red;">size</span></blockquote> وهي خاصبة من خلالها تستطيع التحكم في ابعاد اي صورة في الخلفية او في خلفية صفحة معينة ودعونا نقوم بمثال على ذلك.<br />افتح صفحة html و ضع فيها هذا الكود:<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br /><span style="color: blue;">background:url("http://im40.gulfup.com/gRLLH.png");</span><br /><span style="color: red;">background-size:200px 120px;</span><br /><span style="color: magenta;">background-repeat:no-repeat;</span><br /><span style="color: #bf9000;">background-position:center;</span><br />background-color:#D1FFFF;<br />border:5px dotted #0000FF;<br />width:267px;<br />padding:20px;<br />color:#111;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote><span style="color: blue;">الصورة</span> , <span style="color: red;">الخاصية التي نشرحها </span>, <span style="color: magenta;">عدم تكرار الصورة </span>, <span style="color: #bf9000;">جعل الصورة في المنتصف تماماً</span><br /><span style="background-color: black; color: white;">ملاحظة هامة جداً </span>:<span style="color: #bf9000;"> </span><span style="color: red;">حتى يعمل كود قياس الصورة background-size لابد أن يكون وراء الصورة مباشرتاً كما بالكود السابق</span><br /> ثم احفظ الصفحة وافتحها على المتصفح لتجد التالي :<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzaSYE6Va1iHSODZEtyByWgXPLxFBZVVpukFo1evmTMkmnAcie6XIZvOxRbfJHvOcnSe0iiXP9cRdjDmxW5HXqBwFXp5taG_8hraxh5-I4gdM6F1j76EYzjkcEgKoZpAIJUzUCxdjkBU0/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzaSYE6Va1iHSODZEtyByWgXPLxFBZVVpukFo1evmTMkmnAcie6XIZvOxRbfJHvOcnSe0iiXP9cRdjDmxW5HXqBwFXp5taG_8hraxh5-I4gdM6F1j76EYzjkcEgKoZpAIJUzUCxdjkBU0/s1600/1.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر الصورة !!<br />هذا هو حجمها الطبيعي والذي قُمت بتحديده من خلال الخاصية background-size</td></tr></tbody></table>جيد جداً , دعونا نقوم بتصغير الصورة قليلاً , ضع هذا الكود في الصفحة html و احفظها ثم افتحها على المتصفح ..<br /><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: #38761d;">div</span>{<br />background:url("http://im40.gulfup.com/gRLLH.png");<br /><span style="color: red;">background-size:100px 60px;</span><br />background-repeat:no-repeat;<br />background-position:center;<br />background-color:#D1FFFF;<br />border:5px dotted #0000FF;<br />width:267px;<br />padding:20px;<br />color:#111;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: #38761d;">div</span>><br />MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR /><br /></div><br /></body><br /></html></blockquote> والان انظر للصورة ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetTvY0KfoUhvtvOwK_H_cyVLtcEKUnr8cUO2s8n-DynJrXUCXokrOvasFEJCN4o-XAkwT9Ge7hsbYsOjbCyUd0wh9JSevl2DjnSkVM6BFbm5aUYD56yoXI8AF3Izdcbji8tRojJS-JW3/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ميني سوفت" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPetTvY0KfoUhvtvOwK_H_cyVLtcEKUnr8cUO2s8n-DynJrXUCXokrOvasFEJCN4o-XAkwT9Ge7hsbYsOjbCyUd0wh9JSevl2DjnSkVM6BFbm5aUYD56yoXI8AF3Izdcbji8tRojJS-JW3/s1600/2.png" title="دورة CSS" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تم تصغير الصورة التي في المنتتصف ,,</td></tr></tbody></table>كيف تم هذا ؟ كالتالي ..<br />الصورة اصلاة مقاسها 200 عرض × 120 ارتفاع , في الكود الأخير جعلناها 100 عرض × 60 ارتفاع ومن هنا نستنتج أن الكود هذا ,,<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-size:<span style="color: magenta;">100px</span> <span style="color: blue;">60px</span>;</blockquote>طالما يحتوي على رقمين وهما <span style="color: magenta;">100px</span> و<span style="color: magenta;"> </span><span style="color: blue;">60px</span> إذاً <span style="color: magenta;">فالرقم الأول هو العرض</span> , <span style="color: blue;">والرقم الآخير هو الإرتفاع</span> .<br />يمكنك ايضاً ان تجعل العرض مثل الإرتفاع وهذا بكتابة رقم واحد مثال الكود التالي ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-size:<span style="color: magenta;">100px; </span></blockquote>هكذا اصبحت الصورة عرضها كارتفاعها .<br /><br /><div style="text-align: center;">هذا ما لدينا اليوم من شرح لهذه الخاصية الجميلة , وبهذا قد انتهى موضوعنا</div><div style="text-align: center;">نراكم على خير في شرح جديد والسلام عليكم </div></div>

دروس دورة CSS : شرح خاصية background-size في CSS3

السلام عليكم .. اليوم إن شاء الله سوف نقوم بشرح خاصية جميلة جداً من خواص تقنية CSS3 وهي backgroungd-size او مقاس الخلفية . في اولى دروسنا شر...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background-origin في CSS3

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJda2qHJlDi6IYSDo55vgU2G4DojHxIi_CyCqJDcrdmKsA_u78-CCbIKdxJhKw-tZ9kxKaaVNjBe_32c5RtnLJtr5ogwHaEm-3YmLdc1mYwmzEduyKMFfJ9tAaEa28_9mH381p6FL8fMuh/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJda2qHJlDi6IYSDo55vgU2G4DojHxIi_CyCqJDcrdmKsA_u78-CCbIKdxJhKw-tZ9kxKaaVNjBe_32c5RtnLJtr5ogwHaEm-3YmLdc1mYwmzEduyKMFfJ9tAaEa28_9mH381p6FL8fMuh/s1600/MiniSoft.png" /></a></div><br /><div style="text-align: center;">بسم الله , الحمد لله</div><div style="text-align: right;">في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملونة , اما درسنا اليوم هو لخاصية جميلة قريبة جداً من الخاصية السابقة ولكم هذه المرة لن يكون التحكم في اللون بل في الصورة التي هي في الخلفية..</div><div style="text-align: right;">درسنا اليوم حول الخاصية background-origin والتي هي اشبه كثيراً بالخاصية background-clip وهذا ما سوف نتعرف عليه من خلال شرحنا لهذا اليوم ,, </div><div style="text-align: right;">قُم بتجهيز صفحة html ولمن لم يرى كيف نقوم بتجهيزها فإليك الرابط ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا </a>)</div><div style="text-align: right;">والآن نبدأ شرحنا على بركة الله:</div><div style="text-align: right;">كما ذكرنا شرحنا حول خاصية </div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #cc0000;">background</span>-<span style="color: red;">origin</span></blockquote><div style="text-align: right;">وهو كود يتحكم في موضع الصورة التي في الخلفية , يتفرع من هذه الخاصية ثلاثة أكود وهما :</div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: red;">background-origin</span>: <span style="color: blue;">padding-box</span>;<br /><span style="color: red;">background-origin</span>: <span style="color: magenta;">border-box</span>;<br /><span style="color: red;">background-origin</span>: <span style="color: #b45f06;">content-box</span>;</blockquote>ونبدأها بشرح الخاصية <span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="text-align: left;"> </span><span style="color: magenta; text-align: left;">border-box</span><br /><span style="text-align: left;">افتح محرر النصوص على صفحة html المتفق عليها ثم انسخ بها هذا الكود :</span><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>:<span style="color: magenta;"> border-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote><span style="text-align: left;"></span><br /><br />وعند تطبيق هذا الكود على المتصفح سنجد الصورة كالتالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOwIZJ0upIzs_8zNkcwQRMOdCBydoqLPC6gE3jjlEZQiYAWksIo86UHN8dimDzwmXaaTFzJIi8VB4qCf7sRmDRb7SCkFnhw6ksfrxFXc6kJsCk22S8UueajKS6Mdxatq-EZiu02buoWCO/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOwIZJ0upIzs_8zNkcwQRMOdCBydoqLPC6gE3jjlEZQiYAWksIo86UHN8dimDzwmXaaTFzJIi8VB4qCf7sRmDRb7SCkFnhw6ksfrxFXc6kJsCk22S8UueajKS6Mdxatq-EZiu02buoWCO/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">الكود المستخدم في هذه الصورة هو background-origin:border-box<br />انظر الآن الى الصورة ( صورة الوجة المبتسم ) تجدها على الحدود وهذا ما تم تطبيقه من خلال الكود border-box</td></tr></tbody></table>والآن نشرح الخاصية <span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="color: blue; text-align: left;">padding-box</span><span style="text-align: left;">;</span><br /><div><span style="text-align: left;">افتح محرر النصوص على صفحة html المستخدمة و الصق فيها هذا الكود :</span></div><div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>: <span style="color: blue;">padding-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote></div><div><span style="text-align: left;">وعند تطبيق الكود وعرضه على المتصفح يكون هكذا</span></div><div><span style="text-align: left;"><br /></span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxo8u7aomJthsKckRHhh_23Xkc56VypxbGplNs1V4yaYytX5TpCi0ktcUc6PNGdq_FHPBkSVgHYv3yuO8zXt9bhF8I0SVkj6qD4NKrlTF9EFxnmaMey786zWiarltrq9bonbSFR0kHmYRb/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxo8u7aomJthsKckRHhh_23Xkc56VypxbGplNs1V4yaYytX5TpCi0ktcUc6PNGdq_FHPBkSVgHYv3yuO8zXt9bhF8I0SVkj6qD4NKrlTF9EFxnmaMey786zWiarltrq9bonbSFR0kHmYRb/s320/2.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">انظر ( الوجة المبتسم ) تجده وقد اصبح في الجزء الفارغ والذي يُسمى padding<br />وهذا ما تم تطبيقه بواسطة الكود background-origin:padding-box</td></tr></tbody></table><div><span style="text-align: left;">و الان نشرح الخاصية الأخيرة وهي </span><span style="color: red; text-align: left;">background-origin</span><span style="text-align: left;">: </span><span style="color: #b45f06; text-align: left;">content-box </span><span style="text-align: left;">وهي تعني ان تكون الصورة داخل المحتوى , اي الكتابة </span></div><div><span style="text-align: left;">وهذا ما سوف نقوم بعمله الآن , افتح محرر النصوص على صفحة html والصق هذا الكود :</span></div><div><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: red;">background-origin</span>: <span style="color: #b45f06;">content-box</span>;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br />Mini Software Mini Software Mini Software<BR /><br /></div><br /></body><br /></html></blockquote>وبعد تطبيق هذا الكود على المتصفح سوف نجد الصورة قد اصبحت هكذا ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY7ZmHO_kOGWILyfGVkuWszBWoHvcJzCOMBK2EFfiLVYWck1E-G9MWH8GIxonT914elduinG8fEoL8-5eAnVQUN4VzmIFyp5wfjhU_l3LT218sSqLCJ8_TjkUMCi32wuRF8Or3a45azPx/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY7ZmHO_kOGWILyfGVkuWszBWoHvcJzCOMBK2EFfiLVYWck1E-G9MWH8GIxonT914elduinG8fEoL8-5eAnVQUN4VzmIFyp5wfjhU_l3LT218sSqLCJ8_TjkUMCi32wuRF8Or3a45azPx/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">تم دمج الصورة ( الوجة المبتسم ) داخل المحتوى content<br />وهذا ما تم بعمله بالكود background-origin:content-box</td></tr></tbody></table> هل هذا كل شئ ؟ لا , بل يمكنك أن تتحكم في الصورة بواسطة الكود هذا ..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: blue;">background-position</span>: <span style="color: red;">left</span>;</blockquote>وذلك بإضافته للأكواد السابقة , مثال على ذلك :<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">div{<br />width: 270px;<br />border: 6px dotted #000;<br />padding: 35px;<br />background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');<br />background-repeat: no-repeat;<br /><span style="color: #b45f06;">background-origin</span>: <span style="color: red;">padding-box</span>;<br /><span style="color: #b45f06;">background-position</span>: <span style="color: red;">left</span>;<br />}</blockquote> ويكون هكذا في المتصفح<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJURgEK4hyphenhyphenKFhRXUkL-QvaJdaQYLWxFPXBFyudQGI0kVMV_Y1sznCGcFlTgbSGXXrj2Y_dSydkzT3JX617OPbQ00qYvVvl9hWsMNtnM6sTjw4Jmof7giOme-_L5CoGVYKkEp31qOfGPk9j/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJURgEK4hyphenhyphenKFhRXUkL-QvaJdaQYLWxFPXBFyudQGI0kVMV_Y1sznCGcFlTgbSGXXrj2Y_dSydkzT3JX617OPbQ00qYvVvl9hWsMNtnM6sTjw4Jmof7giOme-_L5CoGVYKkEp31qOfGPk9j/s320/4.png" width="320" /></a></div><br />بالطبع هذا ليس كل شئ فيمكنك تغيير الإتجاه left الى right او center وكلما طبقت خطوات كلما اكتشفت المزيد والمزيد<br /><div style="text-align: center;"><span style="font-size: x-small;"><br /></span></div><div style="text-align: center;"><span style="font-size: x-small;">والى هنا ينتهي شرحي لهذه الخاصية الجميلة ,, اترككم في امان الله والى لقاء آخر قريب إن شاء الله</span></div></div></div>

دروس دورة CSS : شرح الخاصية background-origin في CSS3

بسم الله , الحمد لله في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملون...

اقرأ المزيد

دروس دورة CSS : شرح خاصية background-clip

<div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemaqim1aZ86Ax_-_0cM4eYAD6lVFnXLygORPEoO5Icm0cv7Vmsw58Dh-pdjevlg0CWGa2mQbjit3v0F80SxZF8p4pZ6ri9fhwpDkyDKxR2KYVCjGQjhD2f33bCCnSXjvMx5e8VJdjAVwD/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemaqim1aZ86Ax_-_0cM4eYAD6lVFnXLygORPEoO5Icm0cv7Vmsw58Dh-pdjevlg0CWGa2mQbjit3v0F80SxZF8p4pZ6ri9fhwpDkyDKxR2KYVCjGQjhD2f33bCCnSXjvMx5e8VJdjAVwD/s1600/MiniSoft.png" /></a></div><br /><div style="text-align: center;">بسم الله , الحمد لله</div>في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( <a href="http://minisoftwre.blogspot.com/2013/11/css-background.html" target="_blank">هنا</a> )<br />اما الليلة إن شاء الله نقوم بشرح خواص أخرى من هذه الخاصية وهي تنتمي الى CSS3<br />تعلمنا ايضاً في الدرس السابق كيف نقوم بإنشاء صفحة جديدة ونعطيها امتداد html من خلال برنامج المفكرة المتطورة ولمن لم يرى هذا الشرح فعليه بالدخول للرابط في اول سطر , والآن فلنبدأ درسنا على بركة الله.<br /><br />خاصية شرحنا اليوم كالتالي<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><span style="color: #cc0000;">background-</span><span style="color: red;">clip</span></blockquote><span style="text-align: left;">خاصية </span><span style="text-align: left;">background-clip يتفرع منها ثلاثة أكواد هُما كالتالي</span><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;">background-clip:<span style="color: blue;"> padding-box;</span><br />background-clip: <span style="color: magenta;">border-box;</span><br />background-clip: <span style="color: #b45f06;">content-box;</span></blockquote> حسناً ما هي هذه الأكواد ؟؟ هي كالتالي<br />بالنسبة لهذا الكود <span style="color: blue;">padding -box</span> فهو يقوم بجعل الخلفية سواء كانت صورة أو لون تغطي كل الجزء المطلوب إلا الأطراف وهذا مثال علي ذلك<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">padding</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,<br /></div><br /></body><br /></html></blockquote>ضع هذا الكود السابق في صفحة html واحفظها وجرب فتحها على المتصفح لتجدها كالتالي..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-riPCeRxiX6T1msfrXEHM7kB9ZLTjraiuikS7ynGcW5OkKj5y6QZ_B55v-_3B4xWUYp7U0D7fuj9WmvSwNRTNqY3l3X939Yh19LTp9gT_kQuJrsEHMGq0RGtx7ZHaxTNRLVgw0xjAIpy2/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-riPCeRxiX6T1msfrXEHM7kB9ZLTjraiuikS7ynGcW5OkKj5y6QZ_B55v-_3B4xWUYp7U0D7fuj9WmvSwNRTNqY3l3X939Yh19LTp9gT_kQuJrsEHMGq0RGtx7ZHaxTNRLVgw0xjAIpy2/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا ان الخلفية جميعها تلونت بالاصفر إلا الأطراف والمسئول عن اللون الاصفر كمان نعلم  background-color</td></tr></tbody></table><span style="text-align: left;">الكود الذي يليه </span><span style="color: magenta;">border-box</span> و هو يعطي لون للخلفية جميعها بما فيها الأطراف وهذا مثال على ذلك<br /><br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">border</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,<br /></div><br /></body><br /></html></blockquote> وبعد التجربة على صفحة html نجد الشكل كالتالي<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBF_KdZqitD8UenCjbkzDD7_NKQ_A2Clv_a6ZotCVzhe0oNsSqSWu0o50HCTdXmf31cffLw4eEr1ZRP0Yim3q-9SNxM2UxBDAygfUJ8FEWXTZW99brov4KMZrHbeaKANFAgLR8Td_5otwa/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBF_KdZqitD8UenCjbkzDD7_NKQ_A2Clv_a6ZotCVzhe0oNsSqSWu0o50HCTdXmf31cffLw4eEr1ZRP0Yim3q-9SNxM2UxBDAygfUJ8FEWXTZW99brov4KMZrHbeaKANFAgLR8Td_5otwa/s320/2.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا هنا أن الخلفية جميعها تلونت بما في ذلك الأطراف </td></tr></tbody></table>اما الكود الثالث والأخير وهو <span style="color: #b45f06;">content-box</span> المقصود به أنه يظلل الكتابه فقط أو المحتويات إن كان هناك صور او روابط فأيضاً يظللها , مثال على ذلك..<br /><blockquote class="tr_bq" dir="ltr" style="text-align: left;"><!DOCTYPE html><br /><html><br /><head><br /><style><br /><span style="color: blue;">div</span>{<br />width: 300px;<br />padding: 50px;<br />background-color :yellow;<br />background-clip: <span style="color: red;">content</span>-<span style="color: red;">box</span>;<br />border: 10px dotted #92b901;<br />}<br /></style><br /></head><br /><body><br /><<span style="color: blue;">div</span>><br />Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software, explanations, blog tools, educational sessions Mini Soft, software,<br /></div><br /></body><br /></html></blockquote>بعد وضعه في صفحة html وتطبيقه على المتصفح نجد المثال كالتالي ..<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZVIjG1TJENbHjOHFfcqDlBk8g1690r0uqqox_h8Tpf2FMGkntbw-a4puv_oNYmnXJ5GPQkfQfylf1d5xLEY7-kfVaM_k_ctsDXQTmd3qCl93asVBH_Kbj2ichmlhAc2jg6jIOPvBJugc/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZVIjG1TJENbHjOHFfcqDlBk8g1690r0uqqox_h8Tpf2FMGkntbw-a4puv_oNYmnXJ5GPQkfQfylf1d5xLEY7-kfVaM_k_ctsDXQTmd3qCl93asVBH_Kbj2ichmlhAc2jg6jIOPvBJugc/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">لاحظنا أن الجزء المظلل فقط هو المحتوى<br />عن الإطار الابيض الكبير ما بين المحتوى والإطار الأخضر مسئول عنه padding:50px</td></tr></tbody></table>وبهذا قد فهمنا ماهية هذه الخاصية الأكثر من رائعة وما تفعله لنا من تزيين لصفحات الإنترنت<br />يجب أن تعرف أن  هناك يجب فهمها بالعربية حتى يتنسى لك الفهم أكثر وهي كالتالي ..<br /><br /><div style="text-align: left;"><span style="color: blue;">المحتوى </span>= <span style="color: #cc0000; font-family: Verdana, sans-serif;">content</span></div><div style="text-align: left;"><span style="text-align: center;"><span style="color: blue; font-size: 13px;">الحشوة او الجسم الداخلي</span><span style="font-size: x-small;"> = </span><span style="color: #cc0000; font-family: Verdana, sans-serif;">padding</span></span></div><div style="text-align: left;"><span style="font-size: 13px; text-align: center;"><span style="color: blue;">الحدود</span> = </span><span style="color: #cc0000; font-family: Verdana, sans-serif;">border</span></div><span style="font-size: x-small;"><br /></span><br /><div style="text-align: center;">وبهذا ينتهي درسنا لهذه الليلة ,, نترككم في رعاية الله</div><div style="text-align: center;"><br /></div></div>

دروس دورة CSS : شرح خاصية background-clip

بسم الله , الحمد لله في الدرس السابق شرحنا خاصية الخلفية او background على هذا الرابط ( هنا ) اما الليلة إن شاء الله نقوم بشرح خواص أخرى من...

اقرأ المزيد

دروس دورة CSS : شرح الخاصية background

<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiw761WzZOTvbE37iZtGTCfR9HRF7ZQ1Ewih1dFGHZG5FqKzyMqWKuLOcJcG_FofD-lojdGZygcvExRc2o08hbCNDB2vQ0wod5zRnUSt83RyaJ8hyphenhyphenq7P6pKDDqfuQguoJs292WvsPUNed/s1600/MiniSoft.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiw761WzZOTvbE37iZtGTCfR9HRF7ZQ1Ewih1dFGHZG5FqKzyMqWKuLOcJcG_FofD-lojdGZygcvExRc2o08hbCNDB2vQ0wod5zRnUSt83RyaJ8hyphenhyphenq7P6pKDDqfuQguoJs292WvsPUNed/s1600/MiniSoft.png" /></a></div><br /><br /><div style="text-align: center;"><span style="color: red;">بسم الله , الحمد لله</span></div><br />في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية .<br />حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإنترنت سواء كانت ألوان أو صور وطريقة التحكم في الصور وعرضها , ايضاً يمكنك وضع صورة واحدة وجعلها تتكرر سواء افقياً او رأسياً او ملئ الصفحة أكلمها.<br /><br />لا تقتصر هذه الخاصية على الألوان والصور فقط, بل أن لها خصائص أخرى رُبما تعرفها لأول مرة وهذا ما سوف نستعرضه الآن سوياً ,, فنلبدأ درسنا على بركة الله .<br /><br />ملاحظة هامة,, لرؤية صور الشرح بوضوح تام اضغط على الصورة مرة واحدة فقط.<br /><br />و الآن سوف نقوم بعمل صفحة HTML  كالتالي..<br />افتح اي محرر نصوص ويستحسن Notepad Plus وتجده بشرح التنصيب على هذا الرابط ( <a href="http://minisoftwre.blogspot.com/2013/10/html-css-xml-notepad-final.html" target="_blank">هنا </a>)<br />ثم افتح صفحة جديد والصق بها التالي..<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><!DOCTYPE html><br /><html><br /><head><br /><style type='text/css'><br /><span style="color: blue;">body</span>{<br />background-image: url('http://im41.gulfup.com/z16yp.png');<br />background-color: #B7FF0F;<br />background-repeat: no-repeat;<br />background-attachment: fixed;<br />background-position: center;<br />}<br /></style><br /></head><br /><<span style="color: blue;">body</span>><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /><p>Mini Software</p><br /></body><br /></html></code></pre></div><br />بعد نسخ هذه الصفحة في البرنامج ستجدها عبارة عن كتابة سوداء فافعل التالي<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKyaKUeqfmNvdmLSYqoXNMpNoMfdVpldu8S5CBJIEfwGvaGSknuEOBYlR4Stcz5wQI0EFUDHCVFeTBLcko367TDw648wfb1n_Txu590CbQGb2KRv_0fELPsD9YYEEfYMg67czrRYFZzuA/s1600/1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKyaKUeqfmNvdmLSYqoXNMpNoMfdVpldu8S5CBJIEfwGvaGSknuEOBYlR4Stcz5wQI0EFUDHCVFeTBLcko367TDw648wfb1n_Txu590CbQGb2KRv_0fELPsD9YYEEfYMg67czrRYFZzuA/s320/1.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">1- اضغط لإختيار اللغة<br />2- قف على حرف H<br />3- اختر html</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HpZ8FTjjbVvvuvOaeHUS264VvDHtFdWSPwrUxAfGL79mwvQ1GJ6GqZKKr-mCqamKEi1q2ffi-K1awEYZGAWuW0uSDT9Nx_VvU4X_llCk8JnPhCSwVDLXrrIpx08yRoAy76zRDRMb4rkc/s1600/2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5HpZ8FTjjbVvvuvOaeHUS264VvDHtFdWSPwrUxAfGL79mwvQ1GJ6GqZKKr-mCqamKEi1q2ffi-K1awEYZGAWuW0uSDT9Nx_VvU4X_llCk8JnPhCSwVDLXrrIpx08yRoAy76zRDRMb4rkc/s320/2.png" width="280" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">اضغط هن للحفظ</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYRAX062-GOn7AMV6sonjQFIHXIgMKUhSCVMsN6rcJhm66kI53bSK1WLQ6WWftvfDXtY6oOTPZwtT3jwtaEAjz1TuzTCulhQCfdf8UmyHPThXlzufE1p66_9sFnMr3Xdc0kPzEg72X7Xb/s1600/3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYRAX062-GOn7AMV6sonjQFIHXIgMKUhSCVMsN6rcJhm66kI53bSK1WLQ6WWftvfDXtY6oOTPZwtT3jwtaEAjz1TuzTCulhQCfdf8UmyHPThXlzufE1p66_9sFnMr3Xdc0kPzEg72X7Xb/s320/3.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ثم اعطي الملف اي اسم تريد مثل الرقم واحد<br />2- اضغط Save</td></tr></tbody></table><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryCK4MJNyYkD_aFj9N9g31cCRfpTkPGQjX-4IX6KbNgufxDxNIYlf6XONC7k6Sht0sHSCh15NYEo0M8MjqJooGh-0Yk1yXOSTkWMSd_lBKTT2f3tgCauOOih3BJesOHR6JNn5a1rQs8Uy/s1600/4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgryCK4MJNyYkD_aFj9N9g31cCRfpTkPGQjX-4IX6KbNgufxDxNIYlf6XONC7k6Sht0sHSCh15NYEo0M8MjqJooGh-0Yk1yXOSTkWMSd_lBKTT2f3tgCauOOih3BJesOHR6JNn5a1rQs8Uy/s1600/4.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ستجد الملف وقد أخذ شكل المتصفح الإفتراضي لديك</td></tr></tbody></table> الان إفتح الملف وانظر كيف هو في المتصفح<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7K34X-lPyZFxYRHA4ma9gNdiGAOtHxsLhsIVh1TDbooV-v6Cb8T7FvaA5aRp-SNzZ-gxzabDFd-JilR95IhXD2oc-mUe8cBQXHuYGQT4tQ6AvHtrPdPqUcZc5gpOdyMa1his4whcI4yGg/s1600/5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7K34X-lPyZFxYRHA4ma9gNdiGAOtHxsLhsIVh1TDbooV-v6Cb8T7FvaA5aRp-SNzZ-gxzabDFd-JilR95IhXD2oc-mUe8cBQXHuYGQT4tQ6AvHtrPdPqUcZc5gpOdyMa1his4whcI4yGg/s320/5.png" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">ها هو الملف وقد فتح على المتصفح </td></tr></tbody></table>وتعالو نفسر كيف تم هذا ,, انظر الكود التالي المستخدم في الصفحة التي قُمنا بحفظها<br /><br /><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml">body{<br /><span style="color: red;">background</span>-<span style="color: blue;">image: url('http://im41.gulfup.com/z16yp.png');</span><br /><span style="color: red;">background</span>-<span style="color: #6aa84f;">color: #B7FF0F;</span><br /><span style="color: red;">background</span>-<span style="color: #b45f06;">repeat: no-repeat;</span><br /><span style="color: red;">background</span>-<span style="color: magenta;">attachment: fixed;</span><br /><span style="color: red;">background</span>-<span style="color: #674ea7;">position: center;</span><br />}</code></pre><br /> <span style="color: red;">هذا هو كود CSS الذي يسمى background يعني الخلفية </span><br /><span style="color: blue;">هذا يعني ان القادم هو رابط لصورة url ودائماً تكون بين قوسين ( )</span><br /><span style="color: #6aa84f;">هذا هو لون الصفحة الاخضر وهو عبارة عن لون من الوان الهيكس ولمعرفة المزيد اليك هذا الرابط به جميع الألوان</span><span style="color: blue;"> ( <a href="http://minisoftwre.blogspot.com/2013/09/colorpic.html" target="_blank">هنا</a> )</span><br /><span style="color: #b45f06;">وهذا يعني عدم تكرار الصورة و سوف نأخذ المزيد حول هذه الخاصية</span><br /><span style="color: magenta;">هذا يعني انه تم اصلاح رؤية الخلفية في اي منفذ عرض</span><br /><span style="color: #674ea7;">وهذا يعني ان الصورة تكون في المنتصف تماماً و سوف نأخذ المزيد حول هذه الخاصية</span><br /><span style="color: #a64d79;"><br /></span>هل يمكن كتابة نفس الكود بطريقة أخرى ؟ نعم يمكن كالتالي<br /><div dir="ltr" style="text-align: left;"><pre class="numbered" data-codetype="CSS+HTML+JQuery" dir="ltr" style="text-align: left;" title="Double Click to Copy"><code class="xml"><span style="color: red;">background</span>: <span style="color: #6aa84f;">#B7FF0F</span> <span style="color: blue;">url('http://im41.gulfup.com/z16yp.png')</span> <span style="color: #b45f06;">no-repeat</span> <span style="color: magenta;">fixed </span><span style="color: #674ea7;">center</span>; </code></pre></div><div dir="rtl" style="text-align: right;"> حسناً ,, الآن اخذنا فكرة كبيرة عن خاصية background ولكن بقى القليل و هو ,, إذا أردت أن اجعل الصورة متكررة في جميع انجاء الصفحة فيمكنك ان تمسح هذا الكود :</div><div style="text-align: center;"><div dir="ltr"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: no-repeat; </span></div></div><div style="text-align: center;"><span style="text-align: left;">او تجعله هكذا</span></div><div style="text-align: center;"><div dir="ltr"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat </span><span style="color: #b45f06; text-align: left;">repeat</span><span style="color: #b45f06; text-align: left;">;</span></div></div><div style="text-align: center;"><span style="text-align: left;">لتبقى الخلفية هكذا</span></div><div class="separator" style="clear: both; text-align: center;"></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavqo64hwvpgecnutbHGV6cbHu91_zTeJAoUfuMkaTjP8I-AFC-mEhkyyQcJeqaPr0ihvNPbWawvbfQoB6tkmo76NyT4A3NPgjlEBhIDJ5neBh_gVxqQuCyAnJim9bnJjWROpUhsvmeSBc/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavqo64hwvpgecnutbHGV6cbHu91_zTeJAoUfuMkaTjP8I-AFC-mEhkyyQcJeqaPr0ihvNPbWawvbfQoB6tkmo76NyT4A3NPgjlEBhIDJ5neBh_gVxqQuCyAnJim9bnJjWROpUhsvmeSBc/s320/6.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">و الان إذا أحببنا أن نجعل هذه الصورة تتكرر افقياً او رأسياً ماذا نفعل؟ </div><div class="separator" dir="rtl" style="clear: both; text-align: center;">لجعل الصورة متكررة افقياً نجعل الكود السابق هكذا</div><div class="separator" dir="ltr" style="clear: both; text-align: center;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat-x</span><span style="color: #b45f06; text-align: left;">;</span></div><div class="separator" dir="rtl" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">لتبقى الصورة هكذا</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39coIMUcTQuz6KAhJOgqfi_nb8xqyZ3LcWPb-JYIOmjWZ-AmLCctbVA9XyQkt0rwn8w7HYH0Gk3rIxH-td4SS4onW6c20L0d4saslZYNc84h4xqAJ8S1qh8qBCl8gz_woYsR5dbzsWPMv/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39coIMUcTQuz6KAhJOgqfi_nb8xqyZ3LcWPb-JYIOmjWZ-AmLCctbVA9XyQkt0rwn8w7HYH0Gk3rIxH-td4SS4onW6c20L0d4saslZYNc84h4xqAJ8S1qh8qBCl8gz_woYsR5dbzsWPMv/s320/7.png" width="320" /></a></div><div class="separator" dir="rtl" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">وإذت أحببنا أن نجعل الصورة تتكرر رأسياً فنجعل الكود هكذا</div><div class="separator" dir="ltr" style="clear: both; text-align: center;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #b45f06; text-align: left;">repeat: repeat-y</span><span style="color: #b45f06; text-align: left;">;</span></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;">لتبقى الصورة هكذا</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzr2H_lUUUiY9o5H0QbRCKqU2bbDTtxTgaA4MW-pCepgfZbjx1AGNVXvbIJwm3rawgk4H9vXdWCuI_hXrbMZQN_mBsw3SWv-zJsPzxJzOxr6IbAPgadAERnbAHg8pmqxQAd_USZ5oCE2y/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzr2H_lUUUiY9o5H0QbRCKqU2bbDTtxTgaA4MW-pCepgfZbjx1AGNVXvbIJwm3rawgk4H9vXdWCuI_hXrbMZQN_mBsw3SWv-zJsPzxJzOxr6IbAPgadAERnbAHg8pmqxQAd_USZ5oCE2y/s320/8.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" dir="rtl" style="clear: both; text-align: right;">هل هذا كل شئ ؟ بالطبع لا يمكنك أن تضع الصورة وحدها على اليمين او على الشمال وهذا بتغيير الكود التالي</div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red; text-align: left;">background</span><span style="text-align: left;">-</span><span style="color: #674ea7; text-align: left;">position: center; يجعل الصورة في المنتصف</span></div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red;">background</span>-<span style="color: #674ea7;">position: right; يجعل الصورة على اليمين</span></div><div class="separator" dir="ltr" style="clear: both; text-align: left;"><span style="color: red;">background</span>-<span style="color: #674ea7;">position: left; يجعل الصورة على اليسار</span></div><div class="separator" style="clear: both; text-align: left;"><span style="color: #674ea7;"><br /></span></div><div class="separator" dir="rtl" style="clear: both; text-align: center;">هذا ليس كل شئ بالنسبة لشرح الخلفيات او الباك جراوند backgroun ما زال هناك المزيد من الخواص ولكنها تحتاج درس منفصل وهو شرحنا القادم إن شاء الله</div><div class="separator" dir="rtl" style="clear: both; text-align: center;">السلام عليكم</div><div class="separator" style="clear: both; text-align: left;"><span style="color: #674ea7; text-align: left;"><br /></span></div></div>

دروس دورة CSS : شرح الخاصية background

بسم الله , الحمد لله في درسنا هذا سوف نتعلم الكثير حول خاصية background او الخلفية . حيث ان هناك أكثر من طريقة لوضع الخلفيات داخل صفحات الإن...

اقرأ المزيد

sevida arabic

دروس دورة CSS : شرح الخاصية border-bottom

دروس دورة CSS : شرح الخاصية border

دروس دورة CSS : شرح الخاصية background-position

دروس دورة CSS : شرح الخاصية background-color

دروس دورة CSS : شرح الخاصية background-repeat

دروس دورة CSS : شرح خاصية background-size في CSS3

دروس دورة CSS : شرح الخاصية background-origin في CSS3

دروس دورة CSS : شرح خاصية background-clip

دروس دورة CSS : شرح الخاصية background

المشاركات الشائعة

أرشيف المدونة الإلكترونية