الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

ممكن شرح للحاجات دى بعد اذنكم

بدأه shosho842000 في 10 فبراير 2013 · 5 رد · 2,293 مشاهدة · في تصميم الصفحات باستخدام ال "CSS"
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمته الله وبركاته 

ممكن شرح للحاجات دى لانى مش فاهما اوى 

انا مش فاهما دا clear: both 
-----------------------
line-height انا كل الى فاهما انى اعمل مسافه بين السطور فى الفقرات
-----------------------
font size="+3" دا بيزود على ايه هو ايه الاصل يعنى القيمة الاصليه ايه علشان يزود عليها 3 
------------------------
h1+p دا معناها ايه لما بيكون فاصله بينهم بيكون الاثنين ليهم نفس الخاصئص طيب وكدا ليه 
------------------------------
position:absolute ايه معنى دا 
----------------------------
border-collapse and tr:hover دا معنى ايه دا 

-----------------------

ايه الفرق بين text align and float  دا بيستخدم مع الخطوط ومع الصور 

----------------------------

display مامعنى هذا الخاصية

#2

أسئلتك تتطلب أمثلة كي تفهمها، اكتب في قوقل:

 

site:w3schools.com [ماتريد البحث عنه]

 

مثلاً: site:w3schools.com line-height

 

ستجد موقع w3school فيه أمثله مثل هذه الصفحة. إضغط على "Try it yourself" بالأخضر لتجربة المثال، يمكنك تعديل المثال ورؤية التغييرات بنفسك. و اضغط على "Play it" بالبرتقالي لتجربة الأمثلة الأخرى.

#3

شكرا ليك ولرايك بس انا كونت محتاجة حد يشرحلى الحاجات دا من الى هو فاهمه لانى مش فاهما مش اكثر وشكرا ليكم 

#4

السلام عليكم ...

 

  1. http://kutub.info/books/search?q=css
  2. يتكون الــ CSS  من مجموعة من الخصائص و لكل خاصية مجموعة من القيم , مثلا الخاصية clear   و ىعني (التنظيف أو الأزالة) و تأخذ القيم التالية :
    1. left  أي إزالة العناصر الطافية floating elements  من اليسار .
    2. right  أي إزالة العناصر الطافية من اليمين .
    3. both  إزالة العناصر الطافية من اليمين و اليسار (كلاهما) .
    4. none  عدم إزالة شئ .
    5. inherit (الشرح هنا) .
  3. لكن ما هي العناصر الطافية ؟ هي العناصر التي لها الخاصية float  التي تأخذ قيم left  أو right  أو .... و هي تحدد مكان العنصر .
  4. مثلا لو حاولنا المثال : 
    <html>
<body>
<div> AAAA </div>
<div> BBBB </div>
</body>
</html>

     سنجد أن المستعرض وضع النص AAAA  في سطر و النص BBBB  في سطر اسفله . و لنحاول المثال :

    <html>
<body>
<div style="float: left"> AAAA </div>
<div> BBBB </div>
</body>
</html>

    سنجد أن النص AAAA  قد تم وضعه في السطر الأول في اليسار و بقى فراغ (لنتخيل ذلك)  في السطر الأول , تم وضع النص BBBB  فيه . أي سنجد أن AAAA  و BBBB  في نفس السطر . الأن لنجرب الكود :

    <html>
<body>
<div style="float: left"> AAAA </div>
<div style="clear:both;"> BBBB </div>
</body>
</html>

     أي أن النص BBBB  طلب من المستعرض إزالة العناصر الطافي من كلا الجهتين بالنسبة له (both)  أي لن يتم وضع AAAA  معه  ,  و بالتالي ينزل BBBB  غلى الاسفل .

  5. جميع الاسئلة ستجدونها في الموقع المذكور ..

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#5

السلام عليكم ..

  1. line-height : لنتخيل أن النص يتم وضعه في أسطر .. سطر تلو السطر .. و الـــ line-height تمثل ارتفاع السطر و النص يتوضع في منتصف السطر  لنجرب المثال : 
    <html>
<body>
<div style="float: left"> AAAA </div>
<div style="clear:both;"> BBBB </div>
<div style="line-height:5"> DDDD </div>
<div style="line-height:10"> EEE </div>
<div>FFFF </div>
</body>
</html>

     

  2. font size  : القيمة الافتراضية لها هي 3 و هو يزيد عليها ثلاثة أي تصبح 6  (مجال القيم من 1 إلى 7) و لنجزب المثال  :

    <html>
<body>
<font size="+3"> Font=+3</font> <br>
<font size="6"> Font=6</font><br>
<font size="3"> Font=3</font><br>
<font size="-3"> Font=-3</font><br>
<font size="1"> Font=1</font><br>
</body>
</html>

     

  3. position:absolute : الخاصية position  تحدد طريقة توضع العنصر , و تأخذ القيم : (static, relative, absolute or fixed) بالنسبة للقيمة absolute  فهي تعني ان موضع العنصر سيحسب بناء على موضع العنصر الأب له : لنجرب المثال :

    <div style="position:absolute;left:900px;" > GGGG</div><br>
<div style="position:absolute;left:600px;" > <div style="position:absolute;left:300px;" > HHHH</div></div><br>

     حيث لدينا أولا div  و المسافة على يساره هي 900px  ..   و في السطر الثاني  لدينا div  آخر  و المسافة على يساره هي 600px  و لكن لدينا div  داخله و المسافة علي يساره هي 300px  لكنها ستحسب ليس بناء على النافذة الاصلية و لكن بناء على الأب له (الــ div  الأب له) أي ستضاف 300 + 600   .

  4. border-Collapse أي هل يتم دمج الحدود الدخلية للخلايا مع بعضها ام تبقي منفصلة مثال :

    <html>
<body>
<table style="border-Collapse:collapse;"> 
<tr>
<td style="border-style:solid;border-color:#ff0000;">collapse</td>
<td style="border-style:solid;border-color:#00ff00;">collapse</td>
</tr>
</table>

<table style="border-Collapse:separate;"> 
<tr>
<td style="border-style:solid;border-color:#ff0000;">separate</td>
<td style="border-style:solid;border-color:#00ff00;">separate</td>
</tr>
</table>
</body>
</html>

     

  5. display  كيفية طهور العنصر و القيمة none  تعني انه مخفي (مثال) .

  6. ارك لكم الباقي للبحث عنها  .

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

#6

السلام عليكم ...

  1. الخاصية font-weight تعني سماكة الخط و تأخذ القيم (normal = سماكة عادية, bold = سميك , bolder = اسمك , lighter = أقل سماكة ,  أو قيمة عددية) و لنجرب المثال التالي و نعرف الفرق : 
    <div style="font-weight:normal;"> normal </style> <br>
<div style="font-weight:bold;"> bold </style> <br>
<div style="font-weight:bolder;"> bolder </style> <br>
<div style="font-weight:lighter;"> lighter </style> <br>
<div style="font-weight:500;"> font-weight =500 </style> <br>

     

  2. الخاصية : text-transform و تعني تحويل حالة النص و تأخذ القيم (capitalize = جعل أول حرف من الكلمة بحرف كبير , uppercase = تحويل كل النص إلى حروف كبيرة سواء الحروف في أول أو وسط او آخر الكلمة أي كل الحروف تحول للكبير , lowercase = تحويل كل حروف النص إلى الصغير)  المثال :

    <div style="text-transform:capitalize;"> capitalize text </style> <br>
<div style="text-transform:uppercase;"> uppercase text </style> <br>
<div style="text-transform:lowercase;"> LOWER TEXT </style> <br>

     

لا إله إلا الله ... محمد رسول الله

لو كانت مشاركتي مفيدة و تريد تشجيعي على المزيد من العطاء , فضلا قم بتقييم المشاركة

المعرًف القديم : houssam11350_11350

من مواضيعي : ArabGenCode : مولد كود و إجراءات مخزنة و واجهات لجداول سيكوال سيرفر

مواضيع مشابهة