نتائج البحث

اذهب إلى التنقل اذهب إلى البحث

التعامل مع CSS في jQuery

تعمل التوابع الموجودة في هذا القسم على جلب وضبط قيم خاصيات CSS لعنصر محدَّد (أو مجموعة عناصر محدَّدة). ‎.height()‎ يجلب هذا التابع الطول الحالي لأول عنصر في مجموعة العناصر المتطابقة أو يغير الطول لكل العناصر المتطابقة. ‎.innerHeight()‎ يعيد هذا التابع قيمة الطول الحالي (تتضمن قيمة الحواشي فقط دون الإطار) لأول عنصر في مجموعة العناصر المطابقة أو يغير الطول الداخلي لكل العناصر المطابقة. ‎.innerWidth()‎ يعيد هذا التابع قيمة العرض الحالي (تدخل قيمة الحواشي ضمنها فقط) لأول عنصر من مجموعة العناصر المطابقة ...

CSS/Topics/Selectors

الخاصية الوصف محددات الأنواع مُحدِّد النوع (type selector) في CSS يُطابِق العناصر وفق اسم العقدة، أي أنه يُحدِّد جميع العناصر التي لها نوع معيّن في المستند. محددات الأصناف مُحدِّد الصنف (class selector) في CSS يُطابِق العناصر وفق قيمة الخاصية class التابعة لها. محددات المُعرِّفات مُحدِّد المُعرِّف (ID selector) في CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها. المحدد العام المُحدِّد العام (universal selector) في CSS يطابق جميع العناصر. محددات الخاصيات مُحدِّد الخاصيات (attribute selector) في CSS يُطابِق العناصر إذ ...

الخاصيات المخصصة في CSS

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎. بطاقة الخاصية القيمة الابتدائية لا يوجد تُطبَّق على جميع العناصر. قابلة للوراثة لا قابلة للحركة لا القيمة المحسوبة كما حُدِّدَت. --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); أمثلة المثال الآتي يُعرِّف متغيرين ثم يستخدم قيمتهما في بقية المستند، لاحظ كيف ستُطبَّق قواعد الوراثة على الخاصيات المخصصة: <p id="firstParagraph">يجب أن تحتوي هذه الفقرة على خلفية ...

ملحقات CSS في Sass

القواعد المتشعّبة (Nested Rules) تسمح Sass لقواعد CSS بأن تتشعّب داخل بعضها البعض ولا تطبَّق في تلك الحالة القاعدة الداخليَّة إلّا ضمن المُحدّد الخارجي الذي يتضمّنها (outer rule's selector). انظر على سبيل المثال إلى الشيفرة التالية: #main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; } } ستُصرّف إلى: #main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: ...

CSS/Topics/Filter

الخاصية الوصف filter الخاصية filter في CSS تسمح لنا بتطبيق تأثيرات مثل تغيير اللون وتأثير الضبابية على أحد العناصر، وتُستخدَم المُرشِّحات (filters) عمومًا لتعديل طريقة عرض الصور <img> والخلفياتbackground والإطارات border.

CSS/Topics/List

الخاصية الوصف counter-increment تُزيد أو تُنقِص قيمة أحد عدّادات CSS بقيمة معيّنة، ويمكن إعادة تعيين العدّاد إلى رقم معيّن باستخدام الخاصية counter-reset. counter-reset تُعيد ضبط قيمة أحد عدّادات CSS إلى قيمة معيّنة، ويمكن زيادة أو إنقاص قيمة العداد باستخدام الخاصية counter-increment. list-style الخاصية list-style في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصياتlist-style-type و list-style-image و list-style-position. list-style-image تُحدِّد صورةً لتُستخدَم للإشارة إلى عناصر القائمة. من المستحسن عادةً استخدام الخاصية المختصرة list-style لضبط قيمة هذه الخاصية. list-style-position تُحدِّد مكان إشارة عناصر القائمة. ومن المستحسن عادةً استخدام الخاصية المختصرة list-style. list-style-type ...

CSS/Topics/Grid

الخاصية الوصف grid الخاصية grid المختصرة في CSS تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح (أي grid-template-rows و grid-template-columns وgrid-template-areas)، وجميع الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا (أي grid-auto-rows و grid-auto-columns و grid-auto-flow)، والخاصيات التي تُضبِط الفراغ بين الأعمدة والأسطر (أي grid-column-gap وgrid-row-gap)، وكل ذلك في قاعدة واحدة. grid-area الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه. grid-auto-columns تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا. grid-auto-flow تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. grid-auto-rows تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. grid-column الخاصية grid-column في CSS هي خاصية مختصرة ...

بناء Javascript و CSS

مقدمة لا يفرض Laravel عليك استخدام أي معالج JavaScript و CSS، إلّا إنّه يوفّر نقطة انطلاق بسيطة باستخدام Bootstrap و Vue ممّا سيساعد العديد من التطبيقات. بصفة عامّة، يستخدم Laravel أوامر npm لتنصيب حزم الواجهات الأمامية هذه. CSS يوفّر Laravel Mix واجهة برمجية (API) سهلة ومعبّرة لترجمة Sass أو Less، وهي إضافات للغة CSS الأساسية التي تضيف المتغيّرات والمخاليط (mixins) والعديد من الخصائص الأخرى التي تجعل العمل بلغة CSS أكثر متعة. في هذه الصفحة، سنناقش باختصار ترجمة CSS بصفة عامّة ...

الدالة calc()‎ في CSS

الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات <length> و <percentage> و <angle> و <time> و <number> و <integer>. /* property: calc(expression) */ width: calc(100% - 80px); أمثلة يمكن بسهولة ضبط موضع أحد العناصر باستخدام الدالة calc()‎ بتحديد قيمة للهامش، ففي هذا المثال أنشأنا عنصرًا يمتد على طول النافذة، مع فراغ بمقدار 40px على جانبيه: <div class="banner">هذا هو الشعار!</div> شيفرة CSS: .banner { position: absolute; ...

CSS/Topics/Values

الخاصية الوصف القيمة الفعلية القيمة الفعلية (actual value) لإحدى خاصيات CSS هي القيمة المستخدمة لتلك الخاصية بعد إجراء أيّة عمليات تقريب لازمة، فمثلًا قد لا يعرض المتصفح الإطاراتborder إلا إذا كانت سماكتها تكافئ رقمًا صحيحًا بواحدة البكسل، لذا قد تُقرِّب تلك السماكة إلى أقرب عدد صحيح قبل تطبيقها. القيمة المحسوبة القيمة المحسوبة (computed value) لإحدى خاصيات CSS تُحسَب من القيمة المُحدَّدة. القيمة المُحدَّدة القيمة المُحدَّدة (specified value) لإحدى خاصيات CSS هي القيمة المضبوطة لتلك الخاصية، سواءً من صفحة الأنماط مباشرةً، أو من العنصر ...

CSS/Topics/Transform

الخاصية الوصف backface-visibility تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر. perspective تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر، لكي نتمكن من وضع العناصر الأبناء في ذاك الفضاء، وتسمح هذه الخاصية لنا بإضفاء شعور بالعمق إلى العنصر، بجعل العناصر الأقرب إلى المستخدم تبدو وأكبر، والعناصر الأبعد تبدو أصغر. perspective-origin تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing ...

دوال التوقيت في CSS

نوع البيانات <timing-function> يشير إلى الدوال الرياضية التي تصف سرعة تغيير القيم أحادية البعد في الحركات، وهذا ما يسمح بتغيير سرعة الحركات خلال فترة الحركة. دوال الحركة السلسة تُنشِئ علاقة نسبية بين الوقت والناتج، وتكون القيمتان رقميتين <number>، وتُمثِّل القيمة 0.0 الحالة الابتدائية والقيمة 1.0 الحالة النهائية. دالة توقيت لها مخرجات أكبر من 1. دالة توقيت لها مخرجات أكبر 1 لكنها مقصوصة. اعتمادًا على الدالة المُستخدمة، قد يصبح الناتج في بعض الأحيان أكبر من 1.0 أو أصغر من 0.0 أثناء ...

CSS/Topics/At Rule

الخاصية الوصف ‎@charset تُحدِّد ترميز المحرف المستخدم في صفحة الأنماط، ويجب أن تكون أوّل تعليمة في الملف ولا يسبقها أي محرف، وإذا حُدِّدَت أكثر من قاعدة ‎@charset في الملف نفسه فلن تؤخذ إلا أوّل قاعدة، ولا يمكن أن تُستعمَل هذه القاعدة في الخاصية style على عناصر HTML أو داخل العنصر<style>. ‎@font-face تسمح للمطورين بتحديد خطوط خاصة لعرض النص الموجود في صفحات الويب، وذلك بالسماح للمطورين بتعريف خطوط خاصة بهم، والقاعدة ‎@font-face أدت إلى فتح المجال أمام المطورين لاستخدام أي خطٍ يشاؤون بدل أن يكونوا ...

CSS/Topics/Flexbox

الخاصية الوصف align-content تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. align-items تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية justify-content لكن في الاتجاه المعامد. align-self تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية align-items، وإذا كانت حاشية margin أحد العناصر في المحور المعامد مضبوطةً إلى autoفسيتم تجاهل الخاصية align-self. flex تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية ...

التابع ‎.css()‎‎ في jQuery

يُستخدَم التابع ‎.css()‎ في الحصول على القيمة المحسوبة لخاصية من خاصيات التنسيق (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق. ‎.css( propertyName )‎ القيمة المعادة سلسلة نصيّة من الكائن String. الوصف الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة. ‎.css( propertyName )‎ أضيفت في الإصدار: 1.0. propertyName سلسلة نصيّة String، وتُمثِّل اسم خاصيّة CSS. ‎.css( propertyNames )‎ أضيفت في الإصدار: 1.9. propertyNames مصفوفة Array، وتُمثِّل ...

CSS/Topics/Text

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

CSS/Topics/Misc

العنصر الوصف ‎--*‎ أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمة يمكن إعادة استخدامها في المستند عبر الدالة var()‎. attr()‎ الدالة attr()‎ في CSS تُستعمَل للحصول على قيمة إحدى خاصيات العنصر المُحدَّد واستخدامها في أنماط CSS، ويمكن استعمالها أيضًا على العناصر الزائفة (pseudo-elements) وفي هذه الحالة ستُستخدَم قيمة خاصية العنصر الأصل. calc()‎ الدالة calc()‎ في CSS تسمح بإجراء عمليات حسابية عند تحديد قيم خاصيات CSS، ويمكن استخدامها في أي موضع يُسمَح فيه باستخدام أنواع البيانات<length> و <percentage> و <angle> و <time> و <number> و<integer>. inherit الكلمة المحجوزة inherit في ...

CSS/Topics/Font

الخاصية الوصف font الخاصية font في CSS هي خاصية مختصرة تؤدي إلى ضبط قيم الخاصيات font-style و font-variant و font-weight و font-size و line-height و font-family، وذلك لتحديد الخط المستخدم في العنصر. font-family تُحدِّد قائمةً تحتوي على نوع خط واحد أو أكثر من أنواع الخطوط الخاصة أو العامة، وذلك لتُطبَّق على العنصر. font-kerning تتحكم باستخدام معلومات تآلف الأحرف (kerning information) المُخزّنة في الخط المستخدم. font-size تضبط حجم الخط، وضبط حجم الخط قد يؤدي إلى تغيير حجم عناصر أخرى، لأن حجم الخط سيُستخدَم لحساب قيمة الأطوال <length> ذات الواحدة em و ex. font-size-adjust الخاصية font-size-adjust في CSS تقول أنَّ حجم الخط ...

CSS/Topics/Columns

الخاصية الوصف column-count تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها. column-fill تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا. column-gap تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements). column-rule الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة. هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة. column-rule-color تُحدِّد لون الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر ...

CSS/Topics/Text

الخاصية الوصف direction تضبط اتجاه النص، ونستخدم القيمة rtl معها للإشارة إلى اللغات التي تُكتَب من اليمين إلى اليسار مثل اللغة العربية، و ltr للغات التي تُكتَب من اليسار إلى اليمين مثل اللغة الإنكليزية. لاحظ أنَّ اتجاه النص يُعرَّف عادةً باستخدام الخاصية dir على عنصر <html> لكامل المستند، وليس باستخدام الخاصية direction. letter-spacing تُحدِّد ما هو التباعد بين الأحرف النصية. line-break تُحدِّد سلوك المتصفح في الانتقال إلى سطرٍ جديد عند التعامل مع علامات الترقيم والرموز. overflow-wrap تُحدِّد إذا كان على المتصفح الانتقال إلى سطر جديد ضمن الكلمات نفسها لمنع ...

عرض (20 السابقة | 20 التالية) (20 | 50 | 100 | 250 | 500).