عاجل

تعلم البرمجة php جزء2 نقابة الصحفيين html css مشروع صحيفة الكترونية

 محمد الضبعان   تاريخ النشر2021-11-04 07:10:24.327215 14328479

 

-          معنى focus  في تنسيقات css

يتم استخدام محدد التركيز البؤري focus  في css  لتحديد العنصر الذي تم التركيز عليه واعطائه خصائص بعينها كاللون او الخلفية او العرض ويتم استخدامه على العناصر التي تقبل ذلك .

input[type=text]:focus {

  background-color: red;

width: 300px;

}


  العنصر  input html

نستخدَم العنصر <input>  لإنشاء حقل جديد نتمكن من خلاله من اعطاء قيم لنموذج محدد استطيع من خلاله ادخال بيانات لقاعدة البيانات يتم ارسالها لاحقا الى السيرفر

والمثال التالي يوضح شكل وآليه عمل العنصر input  بانواعه المختلفة

 <input type="text"   name="text1"">

<input type="password"   name="pass" value=""">

<input type="checkbox"   name="answer1" value="bmw">

  <input type="checkbox"  name="answer2" value="mercedece">

  <input type="checkbox"   name=" answer3"  value=" metsubishe ">


رابط الفيديو 


 

خاصيه Display وتعنى طريقه عرض العنصـر فى الصفحة ويتم استخدامها من خلال  css وانواعها

 

1 : none   وتخفي العنصر من الصفحة

2 : inline تكون العناصر مجاورة لبعضها البعض وهذه الخاصية لا يمكن منح العنصر معها اية تنسيقات كالحجم واللون وغيره بينما يعمل معها فقط خاصية margin

3 : block تكون العناصر اسفل بعضها

4 : inline-block وهى دمج ميزه من ال inline و block

 

جرب الكود التالي هنا  

https://awamp.com/your_code.php

للتعرف على الفرق بين تاثير العناصر السابقة

كود html

<h1>خصائصh1>

<h2>display: inlineh2>
<div>عالم واحد للاعلام والرمجيات <span class="a">العرضspan>
 <span class="a">عالم واحدspan>برمجيات برمجيات برنمجيات div>

<h2>display: inline-blockh2>
<div>عالم واحد للاعلام والرمجيات <span class="b">العرضspan>
<span class="b">عالم واحدspan>برمجيات برمجيات برنمجياتdiv>

<h2>display: blockh2>
<div>عالم واحد للاعلام والرمجيات <span class="c">العرضspan>
<span class="c">عالم واحدspan>برمجيات برمجيات برنمجياتdiv>


كود  css


span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow;
  color: red;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow;
}




موضوعات ذات صلة

  • يشمل الموضوع سورس كود المحاضرة ب....

  • نتناول في الفصل الاول تعريف بالب....

  • نتناول في الجزء الثاني من دورة تع....

  • سنبدأ بتنفيذ المشروع وهو بوابة ص....