شرح لغة CSS الدرس الثاني

شرحنا في الدرس السابق اساسيات لغة css ، وهذا اكمال الدرس كما وعدناكم

خامسا:التحكم بالابعاد:


التحكم بالعرض :
width للتحكم بالعرض بشكل مباشر باسناد قيمة ثابتة min-width لتحديد قيمة صغرى للعرض max-width لتحديد قيمة قصوى للعرض ، وتستخدم هذه الطريقة عند الحاجة لجعل عرض العنصر يتأرجح بين القيمتين الصغرى والقصوى مثلا على حسب عرض شاشة العرض او لاسباب اخرى قد تحتاجها بحيث نسند للخاصية width القيمة auto
width:1000px;
    OR
width:auto;
min-width:500px;
max-width:1000px;
التحكم بالارتفاع:
توجد ثلاث خصائص للتحكم بالارتفاع height , min-height , max-height وتعامل نفس خواص العرض.
وحدات القياس :
px وحدة قياس تدعى البكسل وتساوي نقطة من الشاشة.
% النسبة المئوية وتحدد بالنسبة للعنصر الاب الذي يحتويه.
em كل واحد em يساوي 16 بكسل.
cm سنتي متر
mm مللي متر
هذه الوحدات الاساسية للقياس وتوجد ايضا وحدات اخرى مثل pc , in , pt

height:1000px;
    OR
height:auto;
min-height:500px;
max-height:1000px;

سادسا : التحكم بالازاحة :


التحكم بالإزاحة الخارجية :
margin للتحكم بالازاحة الخارجية او ما يسمى بالهوامش ويمكن تخصيص الازاحة الخارجية من جهة معينة بواسطة احدى الخواص الاتية:
margin-left , margin-top , margin-bottom ,margin-right
margin:10px;
      OR
margin-bottom:10px;
margin-top:20px;
margin-left:5px;
margin-right:7px;
التحكم بالإزاحة الداخلية:
padding للتحكم بالازاحة الداخلية ويمكن تخصيص الازاحة الداخلية من جهة او جهات معينة بواسطة احدى الخواص الاتية:
padding-left , padding-top , padding-bottom ,padding-right


padding:10px;
      OR
padding-bottom:10px;
padding-top:20px;
padding-left:5px;
padding-right:7px;

سابعا: تنسيق الحدود


التحكم بالحدود الداخلية :
الخاصية border تستخدم لتنسيق الحدود الداخلية للعنصر وتتوفر على ثلاث خصائص رئيسية border-width لتحديد عرض الحد وborder-color لتحديد لون الحد وايضا border-style لتحديد ستايل الحد وتأتي مع هذه الخاصية العديد القيم مثل solid صلب , dotted حد نقطي وغير الكثير
كما بإمكانك تخصيص حد من اي اتجاه سواءٌ الاعلى اوالاسفل اويمين او يسار كما هو موضح في الاسفل :
border-width:1px;
border-color:#336699;
border-style:solid;
      OR 
   الكل في امر واحد
border:1px solid #336699;
  
        تخصيص لكل اتجاه حد معين
border-top:1px solid #ccc;
border-bottom:1px solid #f00;
border-left:2px solid #0f0;
border-right:2px solid #0f0;
التحكم بالحد الخارجي:
الخاصية outline لتحديد خصائص الحد الخارجي , وتأتي ايضا مع الثلاث الخصائص المتوفرة مع الحد الخارجي من عرض الحد واللون والاستايل كما هو موضح في الاسفل

outline-width:1px;
outline-color:#ccc;
outline-style:solid;
      OR
     الكل في امر واحد
outline:1px solid #ccc;

ثامنا : تنسيق الخلفية


تحديد لون معين للخلفية :
background-color:#cdcdcd;
    OR
background:#cdcdcd;
تحديد صورة معينة للخلفية :
تحديد صورة معينة للخلفية من خلال الخاصية background-image ويتم استدعاء الصورة من خلال url وتضع مسار الصوره واسمها مع امتداد الصورة مسبوق بنقطة
ملاحظة هامة :
في حال كانت الصورة صغيرة سيتم تكرار الصورة في الخلفية وللتحكم بالتكرار نستخدم الخاصية background-repeat , وتأتي مع القيم التالية no-repeat عدم تكرار الصورة repeat لتكرار الصورة , repeat-x تكرار الصورة بشكل افقي صف واحد ، repeat-y تكرار الصورة بشكل رأسي عمود واحد كما هو موضح في التالي
background-image:url('imgFolder/imgName.png');
background-repeat:no-repeat;

تاسعا: خاصية تموضع العنصر


الخاصية position تستخدم للتحكم بكيفية وضع العنصر في الصفحة وتأتي مع عدة قيم كالتالي:
static تأتي default
relative تحديد مكان وضع العنصر على حسب احداثيات محددة بالنسبة للعنصر نفسه ، وتسند القيم باستخدام الخصائص left , top ,rihgt , bottom وميزته انه لايمكن وضعه في امام او مقدمة عنصر اخر.
absolute يتم تحديد موضع العنصر باحداثيات ثابتة بالنسبة للعنصر الاب الذي يحتويه.
fixed يتم وضع العنصر بتحديد احداثيات ثابتة بالنسبة للصفحة ككل او بمعنى اصح للشاشة لانه يبقى ثابت وظاهر على الشاشة دائما ولايتحرك مع تحريك الصفحة.
position:relative;   OR  position:fixed;    OR    position:absolute;
             لتحدبد الاحداثيات 
left:100px;
top:20px;
right:300px;
bottom:140px;

عاشرا: خاصية التعويم


الخاصية float تستخدم للتحكم بكيفية وضع العنصر داخل العنصر الاب ، مثلا لديك عنصرين صورة ونص وتريد الصورة على اليمين بينما النص على اليسار تستخدم float:right على الصورة و float:left على النص
float:left;

الحادي عشر : خصائص القوائم


الخاصية list-style لتحديد ستايل القائمة بامكانك تغييرها الى دائرة اومربع او تخفيها وتطبق هذه الخصائص الى العنصر ul
list-style:disc;
list-style:square;
list-style:none;
كما بإمكانك عمل صورة بدلا عن الارقام والرموز باستخدام الخاصية list-style-image
list-style-image:url('imgpath/imgName.gif');

الثاني عشر: خصائص العرض


الخاصية display تستخدم للتحكم بكيفية عرض العنصر ومن القيم الهامة لهذه الخاصية:
inline عرض العناصر في سطر واحد
block عرض كل عنصر في سطر
none اخفاء العنصر
display:inline;
display:block;
display:none;
تبقت اشياء بسيطة سوف نتكلم عنها في درس لاحق ، وايضا CSS3 سنخصص لها درس كامل ان شاء الله واي استفسار ضعوه في تعليق...
مواضيع ذات صلة

0 اترك تعليقاً...