تعلم لغة css: التحكم في الصور images
لغة css توفر العديد من القواعد التي يمكن من خلالها التحكم في الصور، وفي هذا الدرس سنرى:
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم large
وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:
لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم large
وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:
كود html
- التحكم في حجم الصور
- توجيه الصور
- اضافة الصور كخلفية
التحكم في حجم الصور الصور Images Size in CSS
للتحكم في حجم صور يتم استعمال قاعدتي width و height التي رأيناها سابقا في درس ببببببببب.لدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم large
وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:
التوجيه Aligning
توجيه الصور يحتمل خيارين وهما يمين أو يسار باستعمال قاعدة floatلدينا كود html حيث تم ادراج صورة مع استعمال خاصية class باسم large
وكود css للتحكم في الصورة أعلاه يكون بهذا الشكل:
التوسيط Centring
الصور تعتبر من العناصر التي تتبع قاعدة inline، فإذا وضعت صورة تقوم بأخذ مكانها بجانب فقرة نصية مثلا. لذلك لجعلها في الوسط يجب تحويلها لعنصر block حتى يمكن التحكم فيها وجعلها في الوسط.كود html
<img src="photo.png" class="mylogo"/>
كود css
img.mylogo{
display: block;
margin: 0 auto;
}
استعمال الصورة كخلفية Background Images
يمكن استعمال الصور كخلفيات ب css وإليكم الطريقة:
body {
background-image: url("pattern.gif");
}
}
الخلفية يمكن التحكم بها بطرق عدة، وأهم القواعد هي:
Background-repeat وتحتمل الخيارات التالية:
repeat إعادة الخلفية
repeat-x أفقيا
repeat-y عموديا
no-repeat عدم إعادة الخلفية
كود css:
كود css:
body {
background-image: url("pattern.gif");
Background-repeat: repeat;
}
Background-repeat: repeat;
}
background-attachement وتحتمل الخيارات التالية:
fixed لا تتحرك
scroll تتحرك مع النزول لأسفل الصفحة
كود css:
كود css:
body {
background-image: url("pattern.gif");
background-attachement: fixed;
}
background-attachement: fixed;
}
background-position
left top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل
كود css:
ويمكن استعمال النسبة المئوية
x% y% القيمة الأولى افقيا والثانية عموديا
أو البيكسلز px
10px 50px
left top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل
كود css:
body {
background-image: url("pattern.gif");
background-position: top left;
}
background-position: top left;
}
ويمكن استعمال النسبة المئوية
x% y% القيمة الأولى افقيا والثانية عموديا
أو البيكسلز px
10px 50px
لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله