إنشاء خطوط في المغلق هو وسيلة سهلة وفعالة لإضافة نمط وجاذبية بصرية لعناصر تصميم الويب الخاص بك. غالبا ما يستخدم مطورو الويب خطوطا لتمييز الأقسام على الصفحة أو إنشاء لهجات أو ببساطة إضافة عناصر زخرفية.
يمكنك استخدام العديد من الخصائص والقيم المختلفة لإنشاء خطوط في كس. واحدة من أبسط الطرق هي استخدام خاصية الحدود ، والتي تسمح لك بإضافة خطوط حول العناصر. يمكنك ضبط سمك ولون ونمط الخط باستخدام القيم المناسبة.
على سبيل المثال ، لإنشاء خط رفيع حول عنصر بلون أحمر ، يمكنك استخدام الكود التالي:
شعبة {
الحدود: 1 بكسل أحمر صلب;
}
يحدد هذا الرمز سمك الخط (1 بكسل) والنمط (صلب) واللون (أحمر). يمكنك تغيير هذه القيم لإنشاء خطوط بأحجام وأنماط مختلفة تلبي احتياجات التصميم الخاص بك.
- المفاهيم الأساسية
- ما هو المغلق?
- كيف يعمل المغلق?
- أساسيات إنشاء خط
- باستخدام الحدود
- باستخدام عنصر زائف:: بعد
- تكوين مظهر الخط
- سؤال وجواب
- كيف يمكنني إنشاء خط أفقي بسيط في المغلق?
- كيف يمكنني تغيير طول الخط باستخدام المغلق?
- هل من الممكن تغيير لون الخط في المغلق?
- كيف يمكنني إنشاء خط عمودي في المغلق?
المفاهيم الأساسية
أتش تي أم أل (لغة ترميز النص التشعبي) هي لغة ترميز قياسية لصفحات الويب التي تحدد بنية ومحتوى مستند الويب. يتم استخدامه لوصف العناصر الموجودة على صفحة الويب وإقامة علاقتها مع بعضها البعض.
كس (أوراق الأنماط المتتالية) هي لغة ورقة أنماط تحدد كيفية عرض العناصر على صفحة الويب. يسمح لك بالتحكم في اللون والخط والتخطيط والجوانب الأخرى لتصميم صفحة الويب.
لأجزاء صغيرة من النص.
يتم استخدامه لتحديد بداية الفقرة ، و
— для определения его окончания..
.
ما هو المغلق?
كس (أوراق الأنماط المتتالية) هي لغة نمط تستخدم لتصميم صفحات الويب. باستخدام كس ، يمكنك تعيين أنماط مختلفة ومظهر عناصر صفحة الويب ، مثل الألوان والخطوط والخلفيات والأحجام وتخطيط العناصر.
كس يسمح للمطورين لإنشاء صفحات الويب الجميلة والجمالية ، وأيضا يجعل من السهل للحفاظ على وتعديلها. باستخدام الأنماط في ملفات كس منفصلة ، يمكنك بسهولة تغيير مظهر الموقع بأكمله عن طريق تغيير ملف نمط واحد فقط. هذا يبسط إلى حد كبير دعم المشاريع الكبيرة ويسرع عمل مطوري الويب.
كس يعمل على أساس القواعد التي تشمل محددات والإعلانات. تحدد المحددات عناصر أنماط الصفحة التي يجب تطبيقها عليها ، وتحدد الإعلانات كيف يجب أن تبدو العناصر المحددة.
يمكن تضمين قواعد كس الفردية مباشرة في شفرة هتمل لصفحة باستخدام علامة ، أو المعلنة في ملف كس منفصل ، والذي يتم ربطه بعد ذلك بصفحة الويب باستخدام علامة أو استيراد@.
يدعم كس العديد من الخصائص والقيم التي تسمح لك بالتحكم في جميع جوانب مظهر عناصر الصفحة تقريبا. على سبيل المثال ، يمكنك استخدام كس لتعيين لون النص والخلفية وأحجام الخطوط والهوامش والحدود والمزيد.
وأخيرا ، كس هي واحدة من تقنيات تطوير صفحة الويب الرئيسية ومهارة هامة لمطور الويب. باستخدامه ، يمكنك إنشاء مواقع ويب جميلة وحديثة تعرض بنفس الطريقة على أجهزة ومتصفحات مختلفة.
كيف يعمل المغلق?
كس (ورقة الأنماط المتتالية) هي لغة نمط تستخدم لوصف مظهر صفحة الويب.
تتكون صفحة الويب من عناصر هتمل التي تمثل محتويات الصفحة ، مثل النصوص والصور والجداول والعناصر الأخرى. كس يسمح لك لتحديد كيفية هذه العناصر يجب أن تكون على غرار لخلق نظرة جذابة ومتسقة.
لتطبيق الأنماط على عناصر الصفحة ، نستخدم قواعد كس ، والتي تتكون من محدد وكتلة إعلان نمط.
يحدد المحدد العناصر التي سيتم تطبيق الأنماط عليها. يمكن أن تكون المحددات فئات ومعرفات وعلامات ومحددات أخرى.
تحتوي كتلة إعلان النمط على خصائص وقيمها التي تحدد مظهر العناصر المحددة.
مثال على قاعدة كس:
ص {
اللون: أزرق;
حجم الخط: 18 بكسل;
محاذاة النص: المركز;
}
في هذا المثال ، يحدد محدد " ص "جميع عناصر" ص " على الصفحة ، وتعيين كتلة إعلان النمط الخصائص التالية لهم:
- اللون: يضبط لون النص على اللون الأزرق
- حجم الخط: يضبط حجم الخط على 18 بكسل
- محاذاة النص: محاذاة النص إلى المركز
يمكننا تطبيق قواعد كس على عناصر الصفحة باستخدام ثلاث طرق رئيسية:
- اتصال خارجي لملف كس باستخدام علامة
- التطبيق الداخلي للأنماط باستخدام علامة
- تطبيق مضمن للأنماط باستخدام سمة نمط العنصر
يمكن تطبيق الأنماط على عناصر مختلفة باستخدام محددات مختلفة. يمكننا أيضا إنشاء فئات ومعرفات لتعيين أنماط لعناصر معينة فقط.
من المهم أن نلاحظ أن كس يعمل على أساس الميراث المتتالية والأسلوب. هذا يعني أنه يمكن توريث الأنماط من العناصر الأصلية وإعادة كتابتها أو استكمالها بأنماط أخرى.
مع كس ، يمكن للمطورين إنشاء صفحات ويب جميلة وحديثة ، وكذلك ضمان مظهرها متسقة وجذابة.
أساسيات إنشاء خط
الخط هو عنصر رسومي يمكن استخدامه لفصل أو تنظيم عناصر مختلفة على الصفحة.
هناك عدة طرق لإنشاء خط في كس:
- استخدام العقار
- أو
- باستخدام العلامة
- استخدام العقار
. يمكنك استخدامه لتعيين العرض والنمط واللون من الخط. على سبيل المثال:
.محدد {
الحدود: 1 بكسل صلب #000;
}
. يمكنك تعيين المحتوى باستخدام كس وتعيين نمط خط لذلك. على سبيل المثال:
.محدد:: قبل {
المحتوى: "";
عرض: كتلة;
الارتفاع: 1 بكسل;
لون الخلفية: #000;
}
. تقوم هذه العلامة بإنشاء خط أفقي بشكل افتراضي. كس يمكن استخدامها لنمط الخط. على سبيل المثال:
. يمكنك تعيين صورة الخلفية كخط وضبط المعلمات الخاصة به. على سبيل المثال:
.محدد {
صورة الخلفية: التدرج الخطي (إلى اليمين, #000 0%, #000 100%);
الخلفية-المنصب: المركز;
الخلفية-كرر: لا-كرر;
الارتفاع: 1 بكسل;
العرض: 100%;
}
اختر الطريقة الأكثر ملاءمة لإنشاء خط ، اعتمادا على النتيجة المرجوة وأسلوب مشروعك.
باستخدام الحدود
الحدود هي طريقة سهلة لإضافة حد حول عنصر في كس. انها تسمح لك لتعيين سمك وأسلوب ولون الحدود.
لإنشاء حد في كس ، استخدم خاصية الحدود. فمثلا:.الحدود-مثال {
الحدود: 1 بكسل أسود صلب;
الحشو: 10 بكسل;
عرض: مضمنة كتلة;
}
في المثال أعلاه ، قمنا بتعيين الحدود حول الكتلة مع الفصل .الحدود-مثال. تحتوي الحدود على سمك 1 بكسل ، والنمط صلب واللون أسود. يتم أيضا استخدام الحشو داخل الكتلة ونوع العرض المضمن.
يمكنك استخدام قيم مختلفة لخاصية الحدود لإنشاء أنماط حدود مختلفة.:
لا شيء: تعطيل الحدود;
- صلب: يخلق خطا صلبا;
- متقطع: يخلق خط منقط;
- منقط: يخلق خط منقط من النقاط;
- مزدوج: يخلق خط مزدوج;
- الأخدود: يخلق تأثير 3 د للتعميق الداخلي;
- ريدج: يخلق تأثير انتفاخ 3 د;
- أقحم: يخلق تأثير 3 د من العطلة الداخلية;
- الإزاحة: يخلق تأثير انتفاخ 3 د.
- يمكن أيضا دمج قيم خاصية الحدود لإنشاء أنماط حدود أكثر تعقيدا. فمثلا:.الحدود-مثال {
الحدود: 1 بكسل متقطع أحمر;
}
في المثال أعلاه ، قمنا بتعيين الحدود حول الكتلة مع الفصل.الحدود-مثال. الحد لديه سمك 1 بكسل ، ونمط الخط المنقط واللون أحمر.
من خلال تحديد الحدود في كس ، يمكنك التحكم في مظهر العناصر على موقع الويب الخاص بك وإنشاء مجموعة متنوعة من أنماط الحدود.
باستخدام عنصر زائف:: بعد
العناصر الزائفة:: قبل و ::بعد يسمح لك بإضافة محتوى إلى عنصر دون الحاجة إلى تغيير رمز هتمل. يمكن استخدامها لإنشاء تأثيرات مختلفة ، بما في ذلك الخطوط.
لإنشاء خط باستخدام العنصر الزائف:: بعد ، نحتاج أولا إلى تعيين موضع العنصر الأصل على أنه نسبي (الموضع: نسبي). سيسمح لنا ذلك بوضع العنصر الزائف بالنسبة للعنصر الأصل.
ثم يمكننا إضافة الخصائص التالية إلى العنصر الأصل:
:: بعد: يشير إلى أننا سنستخدم العنصر الزائف:: بعد;
المحتوى: يحدد محتوى العنصر الزائف. في حالة الأسطر ، عادة ما يتم استخدام سلسلة فارغة ( " ) ، ولكن يمكننا أيضا استخدام نص أو حرف آخر;
- العرض: يحدد طريقة عرض العنصر الزائف. أسهل طريقة هي استخدام قيمة 'كتلة' ، والذي يسمح لنا لتعيين العرض والارتفاع من الخط;
- المنصب: يحدد وضع العنصر الزائف. في حالتنا ، يمكننا استخدام القيمة 'مطلق' لوضع الخط بالنسبة للعنصر الأصل.;
- اليسار والأعلى: اضبط موضع العنصر الزائف بالنسبة إلى الحواف اليسرى والعليا للعنصر الأصل. يمكننا تعيين إحدى القيمتين أو كلتيهما بالنسب المئوية أو وحدات البكسل لوضع الخط في المكان الصحيح;
- العرض والارتفاع: اضبط عرض وارتفاع العنصر الزائف. يمكننا تعيين هذه القيم في النسب المئوية أو بكسل ، اعتمادا على حجم الخط المطلوب.;
- لون الخلفية: يحدد لون الخلفية للعنصر الزائف ، والذي سيكون مرئيا كلون الخط;
- هنا مثال على رمز كس الذي يخلق خط أفقي:
- / * أنماط العنصر الأصل */
.الأم {
موضع: نسبي;}
/ * إنشاء عنصر زائف:: بعد */
.الوالد:: بعد {
المحتوى: ";
عرض: كتلة;
موضع: مطلق;
اليسار: 0;
أعلى: 50%;
العرض: 100%;
الارتفاع: 1 بكسل;
لون الخلفية: أسود;
}
باستخدام تغييرات مماثلة في رمز كس ، يمكنك إنشاء خط عمودي:
/ * أنماط العنصر الأصل */
.الأم {
موضع: نسبي;}
/ * إنشاء عنصر زائف:: بعد */
.الوالد:: بعد {
المحتوى: ";
عرض: كتلة;
موضع: مطلق;
اليسار: 50%;
أعلى: 0;
العرض: 1 بكسل;
الارتفاع: 100%;
لون الخلفية: أسود;
}
الآن أنت تعرف كيفية استخدام العنصر الزائف:: بعد لإنشاء خطوط في كس. يمكن أن يكون استخدام العناصر الزائفة مفيدا جدا ويساعد على تجنب الحاجة إلى تغيير رمز هتمل.
تكوين مظهر الخط
عند إنشاء خط في كس ، يمكنك تخصيص مظهره عن طريق تغيير خصائص مختلفة. تتضمن بعض الخصائص الأكثر شيوعا التي يمكن تعيينها لخط ما ما يلي:
سمك الخط: يمكنك استخدام الخاصية
عرض الحدود
- نمط الخط: الملكية
- لون الخط: الممتلكات
- شكل الخط: الملكية
- مثال رمز يوضح تطبيق هذه الخصائص:
هذا مثال على خط
في هذا المثال ، سيكون للخط سمك 2 بكسل ونمط متقطع ولون أحمر وزوايا مستديرة.
سؤال وجواب
كيف يمكنني إنشاء خط أفقي بسيط في المغلق?
يمكن إنشاء خط أفقي بسيط باستخدام خاصية الحدود وخاصية الحد السفلي ، وتحديد قيمة لسمك ونمط الخط.
كيف يمكنني تغيير طول الخط باستخدام المغلق?
لتغيير طول الخط ، يمكنك استخدام خاصية العرض وتحديد القيمة المطلوبة بالبكسل أو النسب المئوية.
هل من الممكن تغيير لون الخط في المغلق?
نعم ، يمكن تغيير لون الخط باستخدام خاصية لون الحدود ، والتي تحتاج إلى تحديد اللون المطلوب في شكل عرافة ، رغب أو اسم اللون.
كيف يمكنني إنشاء خط عمودي في المغلق?
لإنشاء خط عمودي ، يمكنك استخدام خاصية الحدود اليسرى أو الحدود اليمنى وتعيينها على القيم المطلوبة لسمك ونمط الخط ، وكذلك تحديد ارتفاع الخط باستخدام خاصية الارتفاع.