عناصر التحكم في CSS صفحات الأنماط الإنسيابية
رواد مدونة الطالب الرقمية ، ولكل المهتمين بتعلم لغة css والتي كما يجهل الكل هي ليست لغة برمجة بل لغة مضهر
فيستعان بها لتنسيق مضاهر المواقع و الصفحات خاصة المبرمجة بواسطة لغة html .
وفي هذا الموضوع قررت أن أدرج أهم عناصر التحكم في أنماط الإنسيابية في لغة css
و سيتم إدراجها في جدول لستهيل استوعابها في أربع خانات
إسم النمط ، القيمة ، التوضيح فيما يخص القيمة و أخيرا وصف موجز عن النمط ووظيفته.
وتم تصنيف عناصر التحكم إلى سبعة أصناف كتالي:
1/ عناصر التحكم
2/ عناصر التحكم بالنص
3/ عناصر التحكم بالقوائم والفأرة
4/ عناصر التحكم بالألوان والخلفية
5/ عناصر التحكم بالهوامش والحدود
6/ عناصر التحكم بالمواضع
7/ عناصر التحكم بالوضوح
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
font-family
|
<family-name>
|
الخط أو الخطوط المفضلة
بالإمكان إدراج عدة خطوط يفصلها فاصلة
والخط المركب يكون محاط بعلامتي تنصيص
|
لإدراج أسماء الخطوط المراد عرضها
|
font-style
|
normal
italic
oblique
|
إلغاء أي أنماط أخرى
مائل
إمالة النص إلى اليمين
|
نمط الخط
|
font-variant
|
normal
small-caps
|
إلغاء أي أنماط أخرى
لتحويل الأحرف الصغيرة لكبيرة
|
التحكم
بحجم الخط (كبتل-سمول)
|
font-weight
|
normal
bold
100-900*
|
إلغاء أي أنماط أخرى
عريض
زيادة العرض اعتماداً على النسخ البديلة المتاحة
|
عرض الخط
|
font-size
|
<length>
<percentage>
smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large
|
بالنقطة pt أو البيكسل
px
بالنسبة المئوية
تحسب بالنسبة للحجم الافتراضي
|
حجم
الخط
|
font
|
<font-style>
<font-variant>
<font-weight>
<font-size>
<line-height>
<font-family>
|
قيمة font-style نمط الخط
قيمة font-variant الأحرف الكبيرة
قيمة font-weight عرض الخط
قيمة font-size حجم الخط
قيمة line-height المسافة
بين الأسطر
قيمة font-family أسماء
الخطوط
|
لإدراج العديد من القيم في خاصية واحدة
|
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
word-spacing
|
normal
<length>
|
إلغاء
أي أنماط أخرى
بالأرقام
|
مسافة
التباعد بين الكلمات
|
letter-spacing
|
normal
<length>
|
إلغاء
أي أنماط أخرى
بالأرقام
|
مسافة
التباعد بين الأحرف
|
vertical-align
|
baseline
<percentage>
sub
super
top
text-top
middle
bottom
text-bottom
|
الحالة
الطبيعية للنص
بالنسبة
المئوية
النص
منخفضاً تحت الخط الأساسي
النص
مرتفعاً فوق الخط الأساسي
الأعلى
نسبة إلى أكثر العناصر ارتفاعاً في السطر
إلى
الأعلى نسبة إلى أعلى نص العنصر الأصلي
الوسط
نسبة إلى وسط العنصر الأصلي
الأسفل
نسبة إلى أكثر العناصر انخفاضاً
إلى
الأسفل نسبة إلى أسفل نص العنصر الأصلي
|
المحاذاة العمودية للنص
|
line-height
|
normal
<length>
<percentage>
|
الوضع
الطبيعي
بالأرقام
بالنسبة
المئوية
|
المسافة
بين الأسطر
|
text-decoration
|
none
underline
overline
line-through
blink
|
إلغاء
أي قيم ممنوحة سابقاً
خط تحت
النص
خط فوق
النص
خط وسط
النص
تحويل
النص إلى نص وامض
|
زخرفة
النص
|
text-transform
|
none
capitalize
uppercase
lowercase
|
إلغاء
أي قيم ممنوحة سابقاً
إظهار
الحرف الأول من كل كلمة بحرف كبير
إظهار
كل الأحرف كبيرة
إظهار
كل الأحرف صغيرة
|
إعداد
حالة النص
|
text-align
|
left
right
center
justify
|
محاذاة
النص للهامش الأيسر
محاذاة
النص للهامش الأيمن
محاذاة النص في الوسط
كشيدة -
محاذاة النص للجانبين الأيمن والأيسر
|
محاذاة
النص
|
text-indent
|
<length>
<percentage>
|
بالأرقام
بالنسبة
المئوية
|
إضافة
مسافة بادئة للفقرات
|
white-space
|
normal
pre
nowrap
|
تسمح
لبرنامج الاستعراض بتحديد كيفية معاملة المسافات
تحتفظ
بالعديد من المسافات
تمنع
التفاف النص بدون علامة فاصل
|
تعريف
مسافة بيضاء لمحدد ما
|
|
عناصر التحكم بالقوائم والفأرة
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
list-style-type
|
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
|
●
○
■
.
I
i
A
a
لا شيء
|
شكل
نقاط القائمة
|
list-style-image
|
none
url(<url>)
|
لا شيء
رابط صورة
|
صورة
لنقاط القائمة
|
list-style-position
|
inside
outside
|
محاذاة
الأسطر المتعاقبة مع الرمز النقطي
محاذاة الأسطر المتعاقبة مع بداية السطر
|
موضع
القائمة
|
list-style
|
<list-style-type>
<list-style-position>
<list-style-image>
|
شكل
نقاط القائمة
موضع القائمة
صورة لنقاط القائمة
|
إدراج
جميع الخصائص في موضع واحد
|
cursor
|
auto
crosshair
hand
pointer
move
n-resize
se-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
w-resize
text
help
|
تلقائي
- مرر الماوس على كلمة "مثال"
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
مثال
|
لتغيير
شكل الماوس عند المرور على القائمة أو الكلمة
|
|
عناصر التحكم بالألوان والخلفية
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
color
|
<color>
|
اسم
اللون أو رمزه
|
لون
الخط
|
background-color
|
transparent
<color>
|
اللون
الافتراضي
اسم اللون أو رمزه
|
لون
الخلفية
|
background-image
|
none
url(<url>)
|
عدم
استخدام أي خلفية
رابط صورة الخلفية
|
صورة
للخلفية
|
background-repeat
|
repeat-x
repeat-y
no-repeat
|
تكرار
أفقياً
تكرار عمودياً
عدم التكرار
|
تكرار
الخلفية
|
background-attachment
|
scroll
fixed
|
توجيه
رسم الخلفية بحيث يتم تمريره مع العنصر
عدم تصفح محتوى الخلفية مع باقي العناصر
|
كيفية
معالجة الخلفية
|
background-position
|
<percentage>
<length>
top
center
bottom
left
right
|
بالنسبة
المئوية
بالأرقام
محاذاة الخلفية من الأعلى
محاذاة الخلفية من الوسط
محاذاة الخلفية من الأسفل
محاذاة الخلفية من اليسار
محاذاة الخلفية من اليمين
|
موضع
الخلفية
|
background
|
<background-color>
<background-image>
<background-repeat>
<background-attachment>
<background-position>
|
لون
الخلفية
صورة للخلفية
تكرار الخلفية
كيفية معالجة الخلفية
موضع الخلفية
|
استخدام جميع الخصائص في موضع واحد
|
|
عناصر التحكم بالهوامش والحدود
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
margin-top, -right,
-bottom, -left
|
<length>
<percentage>
auto
|
بالأرقام
بالنسبة المئوية
تلقائي
|
هامش
العنصر-أعلى، يمين، أسفل، يسار
|
margin
|
<length>
<percentage>
auto
|
بالأرقام
بالنسبة المئوية
تلقائي
|
هوامش
العنصر
|
padding-top,
-right, -bottom, -left
|
<length>
<percentage>
|
بالأرقام
بالنسبة المئوية
|
حاشية
العنصر-أعلى، يمين، أسفل، يسار
|
padding
|
<length>
<percentage>
|
بالأرقام
بالنسبة المئوية
|
حواشي
العنصر
|
border-color
|
<color>
|
اسم
اللون أو رمزه
|
لون
حدود العنصر
|
border-style
|
none
|
dotted
|
dashed
|
solid
|
double
|
groove
|
ridge
|
inset
|
outset
|
|
إزالة
أي أنماط تم إضافتها مسبقاً
|
|
|
|
|
|
|
|
|
|
نمط
حدود العنصر
|
border-width-top, -right, -bottom, -left
|
<length>
medium
thin
thick
|
بالأرقام
متوسط
رفيع
سميك
|
عرض حد
العنصر-أعلى، يمين، أسفل، يسار
|
border-width
|
<length>
medium
thin
thick
|
بالأرقام
متوسط
رفيع
سميك
|
عرض حدود العنصر
|
border-top, -right,
-bottom, -left
|
<border-width>
<border-style>
<color>
|
عرض حد
العنصر
نمط حد العنصر
لون حد العنصر
|
حد
العنصر-أعلى، يمين، أسفل، يسار
|
border
|
<border-width>
<border-style>
<color>
|
عرض حد
العنصر
نمط حد العنصر
لون حد العنصر
|
حدود العنصر
|
width
|
auto
<length>
<percentage>
|
تلقائي
بالأرقام
بالنسبة المئوية
|
العرض
|
height
|
auto
<length>
|
تلقائي
بالأرقام
|
الطول
|
float
|
none
left
right
|
الإعداد
الافتراضي
محاذاة العنصر لليسار
محاذاة العنصر لليمين
|
محاذاة
العنصر
|
clear
|
none
left
right
both
|
إلغاء
أي أنماط مضافة مسبقاً
يسار
يمين
كلاهما (اليمين واليسار)
|
منع
التفاف النص
|
display
|
block
inline
list-item
none
|
يقوم
بتعريف العلامة كعلامة مستوى كتلة ويضع فاصل أسطر أعلى العنصر وأسفله
يقوم بتعريف العلامة كعلامة داخلية ويمنع وجود فواصل
أسطر
يضع علامة عنصر قائمة على السطر الأول من النص،
بالإضافة إلى وضع فاصل أعلاه وأسفله وتسمح هذه الشفرة للعنصر بأن يتم
استخدامه كجزء من القائمة
يؤدي لعدم عرض العنصر وسيبدو وكأنه غير موجود في
الصفحة
|
كيفية
عرض العنصر
|
|
عناصر التحكم بالمواضع
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
position
|
static
absolute
relative
fixed
|
تؤدي
إلى انسياب المحتوى داخلياً، ولكن لا يمكن تغيير الموضع بواسطة سمات
top و left في
JavaScript.
تقوم بتعيين موضع العنصر بشكل مستقل عن أي محتوى آخر
في عنصره الأصلي، وإذا لم يكن العنصر متداخلاً في عنصر آخر ، سيتم تحديد
موضعه نسبة إلى نص المستند.
تقوم بتعيين موضع العنصر داخلياً وتسمح بإعداد
الموضع نسبة إلى الموضع الأصلي من خلال سمات top
و left في JavaScript.
تقوم بوضع العنصر بشكل مستقل عن أي محتوى في عنصره
الأصلي، تماماً مثل العنصر الذي يتم تعيين موضعه تعييناً مطلقاً
|
موضع
العنصر
|
left
|
auto
<length>
<percentage>
|
تلقائي
بالأرقام
بالنسبة المئوية
|
موضع
العنصر من اليسار
|
top
|
auto
<length>
<percentage>
|
تلقائي
بالأرقام
بالنسبة المئوية
|
موضع
العنصر من الأعلى
|
bottom
|
auto
<length>
<percentage>
|
تلقائي
بالأرقام
بالنسبة المئوية
|
موضع
العنصر من الأسفل
|
right
|
auto
<length>
<percentage>
|
تلقائي
بالأرقام
بالنسبة المئوية
|
موضع
العنصر من اليمين
|
z-index
|
auto
number
|
تلقائي
رقم سالب أو موجب (غير مسموح بكتابة أرقام عشرية)
|
رصف
الكائنات
(التعيين ثلاثي الأبعاد للمواضع)
|
|
عناصر التحكم بالوضوح
|
الاسم
|
القيمة
|
توضيح القيمة
|
وصف
|
clip
|
auto
<shape>
|
تسمح
لبرنامج الاستعراض بتحديد حجم القطع عادة (100%)
مثال:
style {
position: absolute;
clip: rect(15 350 195
50);
top: 0px;
left: 0px;
}
|
|
إعداد
المنطقة المرئية للعنصر (القطع)
((تحديد القدر الذي سيكون مرئياً من العنصر في
النافذة))
|
overflow
|
visible
hidden
scroll
auto
|
يتم
استخدامها لإظهار الجزء المقطوع من العنصر، وتخبر هذه الكلمة الأساسية
برنامج الاستعراض بتجاهل القطع.
تقوم بإخفاء الانسياب الزائد وتمنع شريط التمرير من
الظهور
تقوم بإعداد أشرطة تمرير حول المنطقة المرئية للسماح
للزائر بتصفح محتوى العنصر
تسمح برنامج الاستعراض بتحديد الكيفية التي ستتم
معاملة المواد الإضافية بها بعد القطع
|
أعداد
مكان الانسياب الزائد
|
visibility
|
inherit
visible
hidden
|
تؤدي
إلى أن يتم منح العنصر حالة رؤية عنصره الأصلي
تؤدي إلى أن يكون العنصر مرئياً
تؤدي إلى أن يكون العنصر غير مرئياً عندما تتم
معالجته مبدئياً على الشاشة
|
حالة
رؤية العنصر
|
|
و السلام عليكم و رحمة الله و بركاته
يونس
