الاسم الكامل لـ CSS هو Cascading Style Sheet. أوراق الأنماط المتتالية.
1. أربع طرق لتطبيق CSS:
1. النوع المضمن:
2. نوع الرابط الخارجي:
3. النوع المستورد
4. نوع السمة:
2. تعريف CSS:
حدد الكائن {السمة 1: القيمة 1 السمة 2: القيمة 2 السمة 3: القيمة 3؛
يحب:
تد {حجم الخط: 12px؛ اللون: #FFFF00}
.myname{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
ثلاثة كائنات اختيار
1. محدد HTML (TagName)
2.محدد الفئة (.NAME)
3. محدد الهوية (#IDname)
4. الكائنات الخاصة (a:hover a:link a:visit a:active)
1.محدد HTML
محدد HTML هو الحرف الترميزي لـ HTML، مثل: DIV، TD، H1. نطاق محدد HTML هو كافة العلامات الموجودة في كافة الصفحات التي يتم تطبيق النمط عليها.
مثال:
td
{
اللون: #FF0000؛
}
-->
ملاحظة: وظيفة الكود هي تحويل النص الموجود في خلايا الجدول إلى اللون الأحمر تلقائيًا.
2. محدد الفئة
لتحديد محدد فئة، تحتاج إلى إضافة نقطة "." إلى اسمه. مثل ".classname". نطاق محدد الفئة هو كافة العلامات التي تحتوي على "class = "classname"".
مثال:
.الخط الأحمر
{
اللون: #FF0000؛
}
-->
ملاحظة: لا يوجد "class="fontRed"" في الخيار الثاني، وبالتالي لا يتحول النص إلى اللون الأحمر.
3. محدد الهوية
لتحديد معرف محدد، تحتاج إلى إضافة نقطة "#" إلى اسمه. مثل "#IDname". نطاق محدد المعرف هو كافة العلامات التي تحتوي على "ID = "classname"".
مثال:
#fontRed
{
اللون: #FF0000؛
}
-->
ملاحظة: لا يوجد "ID = "fontRed"" في الرقم الثاني، وبالتالي لا يتحول النص إلى اللون الأحمر.
4. الكائنات الخاصة هناك أربعة أنواع من الكائنات الخاصة، والتي يتم تعيينها للكائنات المرتبطة:
a:hover الارتباط التشعبي عند تحريك الماوس فوقه
أ:رابط ارتباط تشعبي عادي لا يمكن الوصول إليه
أ: تمت زيارة الارتباط التشعبي الذي تمت زيارته
نطاق الكائن الخاص للارتباط التشعبي a:active عند النقر بالماوس هو كل العلامات (هذه الجملة تخضع للمناقشة، لأنه ستكون هناك قريبًا طريقة لقلب الكلمة "الكل").
مثال:
ج: تحوم
{
اللون: #0000FF؛
زخرفة النص: تسطير؛
}
-->
انتبه إلى ما يلي، فهو مفيد جدًا! ! !
أ.اسم الفئة:تحويم
#اسم_المعرف:تحويم
يتم استخدام طريقتي الكتابة هاتين مع .classname و#IDname على التوالي. يصبح نطاقه جميع العلامات التي تحتوي على "class = "classname"" أو "ID = "IDname"". يمكن أن تساعدك طريقة الكتابة هذه في تحقيق تأثيرات a:hover متعددة على نفس الصفحة. يمكنك إلقاء نظرة على الفرق بين نص شريط التنقل على الصفحة الرئيسية لـ Yiwang وعنوان المقالة العادي عند تمرير الماوس فوقه.
4. التطبيق:
1. تطبيق العلامات تلقائيًا
2. فئة خاصة = "NAME"
3.معرف الهوية = "اسم الهوية"
4. يتم تطبيق الكائنات الخاصة تلقائيًا 5. خصائص CSS
هناك العديد من خصائص CSS، مثل اللون، وهو الأكثر استخدامًا أعلاه، للإشارة إلى لون النص. يمثل لون الخلفية لون الخلفية. هذا هو الأهم، ولكن بما أن الأمر ليس صعبًا، فما عليك سوى الرجوع إلى الدليل ذي الصلة.
خصائص علامات CSS/مرجع الخصائص فيما يلي قائمة بخصائص علامات ورقة الأنماط (CSS) المدعومة حاليًا.
سمات علامة CSS/سمات
السلوك، سمات السلوك،
الخط واتجاه سمة النص
اتجاه [دي ؟ ريك ؟؟ ن] دليل
الخط
عائلة الخط
حجم الخط
نمط الخط
الخط المتغير [?v??ri?nt] المتغير
وزن الخط [ويت] الوزن
وضع إيمود [م؟ود] الوضع
تخطيط الشبكة [؟leiaut] تخطيط التنضيد [ɡrid] الشبكة
تخطيط-شبكة-شار [t?ɑ:](حرق..)
تخطيط خط الشبكة
وضع تخطيط الشبكة
تخطيط الشبكة من النوع
تباعد الحروف [?let?] تباعد الحروف [?speisi?]
فاصل سطر [بريك] فاصل
ارتفاع الخط [هايت] الارتفاع
الحد الأدنى للارتفاع
روبي محاذاة [؟ru:bi] روبي
روبي المتراكمة [؟؟uv??hæ?] تبرز
موضع روبي [p??zi??n] لتحديد المواقع
محاذاة النص
مسافة تلقائية للنص [speis] تباعد تلقائي
زخرفة النص [?dek??rei??n] الزخرفة
مسافة بادئة للنص [in?dent] التنضيد
ضبط النص على محاذاة [?d??stifai].
نص-كشيدة-مساحة
تجاوز سعة النص [??uv??fl?u] تجاوز السعة
تغيير تحويل النص [træns?f?:m].
نص تسطير الموقف
يونيكود-بيدي [?bi:di]
محاذاة عمودية
مساحة بيضاء
فاصل الكلمات
التفاف الكلمة
وضع الكتابة
ومرفق الخلفية
لون الخلفية
صورة الخلفية
موقف الخلفية
موقف الخلفية-x
موقف الخلفية ذ
تكرار الخلفية
حد سمة تخطيط
اللون
الحدود السفلية
الحدود أسفل اللون
نمط الحدود السفلية
عرض الحدود السفلية
انهيار الحدود*
لون الحدود
الحدود اليسرى
لون الحدود اليسرى
نمط الحدود اليسرى
عرض الحدود اليسرى
الحدود اليمنى
الحدود اليمنى اللون
الحدود اليمنى على غرار
عرض الحدود اليمنى
نمط الحدود
أعلى الحدود
لون الحدود العلوي
نمط الحدود الأعلى
عرض الحد العلوي
عرض الحدود
واضح
يطفو
تدفق التخطيط
هامِش
الهامش السفلي
الهامش الأيسر
الهامش الأيمن
أعلى الهامش
حشوة
الحشو أسفل
الحشو لليسار
الحشو الصحيح
الحشو الأعلى
شريط التمرير-3dlight-اللون
لون شريط التمرير
لون شريط التمرير الأساسي
شريط التمرير-اللون الداكن
لون وجه شريط التمرير
شريط التمرير تسليط الضوء على اللون
لون ظل شريط التمرير
تخطيط الجدول
سمة تصنيف
التكبير
/التصغير تعرض نمط القائمة
صورة نمط القائمة
موضع نمط القائمة
مقطع
سفلي لسمة تحديد المواقع
من نوع القائمة
ارتفاع
غادر
تجاوز
تجاوز-x
تجاوز ذ
موضع
يمين
قمة
الرؤية
عرض
صفحة سمة الطباعة
z-index
pageBreakAfter
pageBreakBefore
مرشح سمة التصفية
الزائفة والسمات الأخرى: نشط
@charset
المؤشر
:الحرف الأول
:السطر الأول
@الخط الوجه
:تحوم
@يستورد
!مهم
:وصلة
@وسائط
@صفحة
:زار
طريقتان رئيسيتان لتحقيق تأثيرات حدود صورة CSS
. الطريقة الأبسط هي تحديد الحدود (الحدود) لـ img في ملف CSS على سبيل المثال:
img.framed {
الحشو: 6 بكسل؛
الحدود: 1 بكسل صلبة #CCCCCC؛
لون الخلفية: #FFFFFF }
ثم في ملف HTML، أو عند تحديث صفحة الويب، فإن استخدام class = "framed" لتعريف الصورة المضمنة سيكون له تأثير الحدود المقابل.
ميزة الطريقة المذكورة أعلاه هي أنها بسيطة نسبيًا، لكن التأثير الذي يتم تحقيقه يكون رتيبًا نسبيًا وقد لا يحقق بالضرورة نتائج مرضية وبعض المؤثرات الخاصة، مثل الظلال وتغيرات الألوان وما إلى ذلك. يمكن القيام بذلك بشكل جيد جدًا باستخدام استبدال الصور وترجمة الموضع، ولن أخوض في التفاصيل هنا، وأعتقد أنه بمجرد أن تتعلم CSS الأساسي، لن يكون من الصعب تحدي تأثيرات CSS الأكثر تقدمًا.
فرز بناء جملة CSS لحدود الجدول
نحن نعلم أن Dreamweaver يقوم بعمل رائع في إنشاء الجداول، ولكن في مرحلة ما لا يزال يتعين دمجه مع CSS لتحقيق بعض التأثيرات المحددة، فلنفرز بناء جملة CSS لحدود الجدول أولاً. ثم قم بتقديمه بشكل منفصل حول كيفية تجميل حدود الجدول باستخدام CSS.
يتضمنبناء جملة CSS المحدد لحدود الجدول
ما يلي: عرض الحد العلوي، عرض الحد الأيمن، عرض الحد السفلي، عرض الحد الأيسر، عرض الحدود، لون الحدود، نمط الحدود، الحد العلوي، الحد السفلي، الحد الأيسر، الحد الأيمن، الحدود، العرض، الارتفاع والتسميات ذات الصلة وما إلى ذلك.
1. بناء جملة عرض الحد العلوي
: border-top-width: <value>
القيم المسموح بها: رفيع |. متوسط سميك |. <length>
القيمة الأولية: متوسطة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا
يتم استخدام سمة عرض الحد العلوي للتحديد أ عرض الحد العلوي للعنصر. يمكن أن تكون القيمة واحدة من ثلاث كلمات أساسية، لا تتأثر أي منها بحجم الخط أو طوله، ويمكن استخدامها لتنفيذ عروض متناسبة. القيم السلبية غير مسموح بها. ويمكن استخدامه أيضًا لاختصار الحد العلوي أو عرض الحد أو خصائص الحد.
2. بناء جملة عرض الحد الأيمن
: border-right-width: <value>
القيم المسموح بها: رفيع |. متوسط سميك |. <length>
القيمة الأولية: متوسطة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا
يتم استخدام سمة عرض الحد الأيمن للتحديد العنصر عرض الحد الأيمن. يمكن أن تكون القيمة واحدة من ثلاث كلمات أساسية، لا تتأثر أي منها بحجم الخط أو طوله، ويمكن استخدامها لتنفيذ عروض متناسبة. القيم السلبية غير مسموح بها. يمكن استخدامه أيضًا لاختصار الحد الأيمن أو عرض الحدود أو خصائص الحدود.
3. بناء جملة عرض الحد السفلي
: border-bottom-width: <value>
القيم المسموح بها: رفيع متوسط |. <length>
القيمة الأولية: متوسطة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا
يتم استخدام سمة عرض الحد السفلي للتحديد العنصر عرض الحد السفلي. يمكن أن تكون القيمة واحدة من ثلاث كلمات أساسية، لا تتأثر أي منها بحجم الخط أو طوله، ويمكن استخدامها لتنفيذ عروض متناسبة. القيم السلبية غير مسموح بها. ويمكن استخدامه أيضًا لاختصار الحد السفلي أو عرض الحد أو خصائص الحد.
4. بناء جملة عرض الحد الأيسر
: border-left-width: <value>
القيم المسموح بها: رفيع متوسط |. <length>
القيمة الأولية: متوسط
ينطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا
يتم استخدام سمة عرض الحد الأيسر للتحديد العنصر عرض الحد الأيسر. يمكن أن تكون القيمة واحدة من ثلاث كلمات أساسية، لا تتأثر أي منها بحجم الخط أو طوله، ويمكن استخدامها لتنفيذ عروض متناسبة. القيم السلبية غير مسموح بها. ويمكن استخدامه أيضًا لاختصار الحد الأيسر أو عرض الحد أو خصائص الحد.
5. بناء جملة عرض الحدود
: عرض الحدود: <القيمة>
القيم المسموح بها: [ رفيع |. متوسط |. <الطول> ]{1,4}
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا توجد
سمة لعرض الحدود حدود العنصر بقيمة واحدة إلى أربع قيم، حيث تكون القيمة عبارة عن كلمة أساسية أو طول. الأطوال السلبية غير مسموح بها. إذا تم إعطاء القيم الأربع جميعها، فإنها تنطبق على أنماط الحدود العلوية واليمنى والسفلى واليسرى على التوالي. إذا تم إعطاء قيمة، فسيتم تطبيقها على كل حافة. إذا أعطيت قيمتان أو ثلاث، فإن القيمة المحذوفة تساوي الطرف المقابل. هذه الخاصية هي اختصار للخصائص العلوية، اليمنى، السفلية، اليسرى. يمكنك أيضًا استخدام سمة الحدود المختصرة.
6. بناء جملة لون الحدود
: border-color: <value>
القيم المسموح بها: <color>{1,4}
القيمة الأولية:تنطبق
قيمة سمة اللون
على: جميع الكائناتالتوافق مع الإصدارات السابقة: لا
تقوم سمة لون الحدود بتعيين الحدود لون العنصر . يمكنك استخدام كلمة رئيسية واحدة إلى أربع كلمات رئيسية. إذا تم إعطاء القيم الأربع جميعها، فإنها تنطبق على أنماط الحدود العلوية واليمنى والسفلى واليسرى على التوالي. إذا تم إعطاء قيمة، فسيتم تطبيقها على كل حافة. إذا أعطيت قيمتان أو ثلاث، فإن القيمة المحذوفة تساوي الطرف المقابل. يمكنك أيضًا استخدام سمة الحدود المختصرة.
7. صيغة نمط الحدود
: نمط الحدود: <القيمة>
القيم المسموح بها: [ لا شيء |. متقطع |. أخدود |. بداية |.
القيمة الأولية: لا شيء
تنطبقعلى
: جميع الكائنات
مع: لاتُستخدم خاصية نمط الحدود لتعيين نمط حدود العنصر. يجب استخدام هذه الخاصية لتحديد حدود مرئية. يمكنك استخدام كلمة رئيسية واحدة إلى أربع كلمات رئيسية. إذا تم إعطاء القيم الأربع جميعها، فإنها تنطبق على أنماط الحدود العلوية واليمنى والسفلى واليسرى على التوالي. إذا تم إعطاء قيمة، فسيتم تطبيقها على كل حافة. إذا أعطيت قيمتان أو ثلاث، فإن القيمة المحذوفة تساوي الطرف المقابل. يمكنك أيضًا استخدام سمة الحدود المختصرة.
لا شيء: لا يوجد أسلوب؛
منقط: خط منقط؛
متقطع: خط متقطع؛
صلب: خط متصل؛
مزدوج: خط مزدوج؛
الأخدود: خط الأخدود.
سلسلة من التلال: سلسلة من التلال؛
أقحم: مقعر؛
البداية: محدبة.
8. بناء جملة الحد العلوي
: border-top: <value>
القيم المسموح بها: <عرض الحد العلوي> ||. <نمط الحدود> ||. <color>
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا توجد
سمة حد علوي هي a اختصار لتعيين العرض والنمط واللون لحدود العنصر. لاحظ أنه يمكن إعطاء نمط حدود واحد فقط. يمكنك أيضًا استخدام سمة الحدود المختصرة.
9. بناء جملة الحدود اليمنى
: الحدود اليمنى: <القيمة>
القيم المسموح بها: <عرض الحدود اليمنى> ||. <نمط الحدود> ||. <اللون>
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا توجد
سمة حدود صحيحة هي a اختصار لتعيين العرض والنمط واللون للحد الأيمن للعنصر. لاحظ أنه يمكن إعطاء نمط حدود واحد فقط. يمكنك أيضًا استخدام سمة الحدود المختصرة.
10.
بناء جملة الحد السفلي: الحد السفلي: <القيمة>
القيم المسموح بها: <عرض الحد السفلي> || <نمط الحدود> ||. <اللون>
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا توجد
سمة حد سفلي هي a اختصار لتعيين العرض والنمط واللون للحد السفلي للعنصر. لاحظ أنه يمكن إعطاء نمط حدود واحد فقط. يمكنك أيضًا استخدام سمة الحدود المختصرة.
11.
بناء جملة الحد الأيسر: الحدود اليسرى: <القيمة>
القيم المسموح بها: <عرض الحدود اليسرى> || <نمط الحدود> ||. <اللون>
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا توجد
خاصية الحد الأيسر هي a اختصار لتعيين العرض والنمط واللون للحد الأيسر للعنصر. لاحظ أنه يمكن إعطاء نمط حدود واحد فقط. يمكنك أيضًا استخدام سمة الحدود المختصرة.
12. بناء جملة الحدود
: الحدود: <القيمة>
القيم المسموح بها: <عرض الحدود> ||. <نمط الحدود> ||.
القيمة الأولية: غير محددة
تنطبق على: كافة الكائنات
التوافق مع الإصدارات السابقة: لا
خاصية الحدود هي إعداد اختصار لـ عرض ونمط ولون حدود العنصر.
تتضمن أمثلة إعلانات الحدود ما يلي:
H2 { border:groove 3em }
ج: الرابط {الحدود: أزرق خالص}
ج: تمت الزيارة { الحدود: منقط رفيع #800080 }
ج: نشط { الحدود: أحمر مزدوج سميك }
يمكن لسمة الحدود تعيين أربعة أنواع فقط من الحدود؛ ويمكنها فقط إعطاء العرض والنمط لمجموعة واحدة من الحدود. من أجل إعطاء قيم مختلفة للحدود الأربعة لعنصر ما، يجب على منشئي صفحات الويب استخدام سمة واحدة أو أكثر، مثل: الحد العلوي، الحد الأيمن، الحد السفلي، الحد الأيسر، لون الحدود، عرض الحدود، نمط الحدود، عرض الحد العلوي أو عرض الحد الأيمن أو عرض الحد السفلي أو عرض الحد الأيسر.
13.
بناء جملة العرض: العرض: <القيمة>
القيم المسموح بها: <الطول> |. <percent> |. auto
القيمة الأولية: تلقائي
ينطبق على: مستوى الكتلة وعناصر الاستبدال
التوافق مع الإصدارات السابقة: لا
القيمة الأولية لسمة العرض هي "تلقائي"، وهذا هو العرض الأصلي للعنصر (هناك عرض العنصر نفسه). تشير النسبة إلى عرض العنصر الأصلي. غير مسموح بقيم الطول السالبة.
14. بناء جملة الارتفاع
: الارتفاع: <القيمة>
القيم المسموح بها: <الطول> |. auto
القيمة الأولية: تلقائي
تنطبق على: مستوى الكتلة وعناصر الاستبدال
التوافق مع الإصدارات السابقة: لا
القيمة الأولية لسمة الارتفاع هي "تلقائي"، وهي قيمة العنصر الارتفاع الأصلي (هناك ارتفاع العنصر نفسه). تشير النسبة إلى عرض العنصر الأصلي. غير مسموح بقيم الطول السالبة.
15. فيما يتعلق بتسمية
جدول الملصقات، يجب وضع تعريف نمط الجدول بأكمله في الجدول؛
تسمية الخلية td، يجب وضع تعريف نمط الخلية في td.
BODY هو العنصر الرئيسي في مستند الويب، وتقع جميع النطاقات المرئية ضمن عنصر <BODY>.
الزر يمكن أن يكون زر حقل النموذج على شكل "إرسال" أو "إعادة تعيين" أو ما إلى ذلك.
يحدد DIV منطقة على صفحة الويب ويُعرف الارتفاع أو العرض أو الموضع المطلق لهذه المنطقة
عنصر صورة IMG، حدد مصدر الصورة عن طريق تحديد السمة "src".
INPUT حقل نموذج الإدخال
MARQUEE تأثير الترجمة المتحركة
يحدد SPAN منطقة على صفحة الويب ويُعرف الارتفاع أو العرض أو الموضع المطلق لهذه المنطقة
منطقة النص TEXTAREA
TFOOT مربع نص الإدخال متعدد الأسطر
خلية رأس الجدول TH
عنوان الجدول THEAD
صف جدول TR