CSS (Cascading Styel Sheet) عبارة عن سلسلة من قواعد التنسيق التي تتحكم في مظهر صفحات الويب، وهي إحدى الأدوات الأساسية لتصميم الويب. بعد ذلك سنبدأ في تعلم تنسيق بناء الجملة الأساسي لـ CSS.
1. قواعد تعريف CSS
ورقة الأنماط المتتالية عبارة عن ملف نصي عادي كامل، يُستخدم عادةً كملف منفصل بامتداد "css" ويحتوي محتواه على مجموعة من القواعد التي تخبر المتصفح بكيفية ترتيب المحتوى وعرضه في قواعد تعريف HTML محددة تتكون من ثلاثة أجزاء: المحددات والسمات وقيم السمات. بناء الجملة هو كما يلي:
بناء الجملة: محدد {الخاصية: القيمة}
↑ ↑ ↑
محدد {الخاصية: القيمة}
تتكون أنماط CSS من سلسلة من القواعد التي يتم تحليلها بواسطة متصفحات الويب ثم يتم تطبيقها على العناصر المقابلة في مستند HTML. تتكون قواعد نمط CSS من ثلاثة أجزاء، وهي المحددات والسمات والقيم:
1. المحدد: المحدد هو علامة html لتحديد النمط. بعد تحديد علامة html كمحدد، سيتم تغيير المحتوى الموجود أسفل العلامة في صفحة html وفقًا للقواعد التي تحددها CSS.
2. السمة: يشير اسم النمط الذي تريد تعيينه لعنصر HTML إلى المحتوى الذي سيتم تغييره في المحدد، وتشمل السمات الشائعة: سمات الخط، وسمات اللون، وسمات النص، وما إلى ذلك. فيما يلي ورقة الأنماط التي حددناها.
3. القيمة: يتم استخدام قيمة إحدى السمات، والتي تتكون من قيمة عددية ووحدة أو كلمة أساسية، للتحكم في تأثير العرض لسمة معينة.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}في ورقة الأنماط هذه:
1. @charsetgb2312 يعني استخدام مجموعة الأحرف القياسية الوطنية الصينية.
2. body وp هما علامتان في لغة html، ويتم تعيين ثلاثة أنماط لهاتين العلامتين، وهي:
عائلة الخط: تحدد نوع الخط الخاص بالخط.
"> 2. تضمين ورقة الأنماط
تسمى ورقة أنماط CSS المحددة داخل صفحة Html بورقة أنماط CSS المضمنة، أي أنه في الجزء الرئيسي من مستند HTML، يتم استخدام علامة النمط ويتم تحديد سلسلة من قواعد CSS في العلامة.
بناء الجملة: <head><styletype=text/css><!--......--></style></head>
يوضح:
يشير <style> إلى بداية ورقة أنماط CSS، وعلامة النهاية هي </style>. وفي علامة البداية <style>، يمكنك إضافة بعض السمات حسب الحاجة، مثل السمة type=text/css المذكورة أعلاه. العمود الذي يشير إلى أن ورقة أنماط CSS تعتمد نوع MIME، ومن مميزات هذا النوع أنه عندما لا يدعم المتصفح كود CSS، تتم تصفية كود CSS لمنع المتصفح من عرض كود CSS على شكل. كود المصدر. من أجل ضمان المزيد من الموثوقية، أضف معرف التعليق <!--...--> مرة أخرى في ورقة الأنماط. تم تعريف قواعد CSS في معرف التعليق هذا.
مثال 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>ورقة أنماط CSS المضمنة</title><styletype=text/css><!--@charsetgb2312; {الخط فا mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> الطيور من آلاف الجبال تطير عبر آلاف المسارات وتمحى آثار الإنسان<p>الطيور من آلاف الجبال تطير عبر آلاف المسارات وتمحى آثار الإنسان</p></body></html>3. الارتباط بأوراق الأنماط الخارجية
ورقة أنماط CSS الخارجية هي ملف خارجي بلاحقة .css. يمكن تطبيق تعريف ورقة أنماط خارجية على صفحات متعددة. باستخدام علامة الارتباط في صفحة HTML، يمكنك توصيل ورقة أنماط CSS الخارجية، ويكون بناء الجملة كما يلي:
القواعد:
<linkrel=stylesheethref=*.css” type=text/css>
المعلمة:
1. تشير السمة rel إلى كيفية دمج ورقة الأنماط مع مستند HTML. قيمة rel: ورقة الأنماط، تشير إلى تحديد ورقة أنماط خارجية
2. *.css هو ملف ورقة أنماط يتم حفظه بشكل منفصل.
مثال 2: قم بتعريف ملف CSS خارجي p2.css، ثم قم بتوصيل الملف في ملف t2.htm.
مثال 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>رابط إلى ورقة الأنماط الخارجية</title><styletype=text/css><!--@charsetgb2312; الجسم {عائلة الخط: 宋体؛f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>عزيزي، أنت تطير ببطء، انتبه من الوردة الشائكة التي أمامك<p>عزيزتي، افتح فمك، فإن رائحة الزهور في الريح ستسكرك</p></body></html>4. أوراق الأنماط المضمنة
تشير الأنماط المضمنة إلى أوراق أنماط CSS المحددة في علامات HTML الخاصة. علامات HTML شائعة الاستخدام هي بشكل أساسي بعض العناصر في BODY، مثل: <p>، <h2>، <ul>، <div>، وما إلى ذلك. فيما يلي أمثلة للأنماط المضمنة.
مثال 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>مستند بدون عنوان</title></head><body><divstyle=color:blue;font-size :30px;>رائحة الزهور في مهب الريح ستسكرك</div><pstyle=color:#ff0000;font-style:italic;>رائحة الزهور في مهب الريح ستسكرك</p>< /الجسم></html>
5. استيراد أوراق الأنماط الخارجية
يعني استيراد ورقة أنماط خارجية أنه تم إنشاء ورقة أنماط مضمنة في ملف html، ولكن يلزم استخدام بعض إعدادات ورقة الأنماط الخارجية. في هذه الحالة، يمكنك استيراد ورقة أنماط خارجية في <style> واستخدام @. الاستيراد كما هو موضح في المثال أدناه.
<html><head><styletype=text/css><!--@importurl(mystyle.css);إعلان أوراق الأنماط الأخرى--></style></head></body>..... .</body></html>
من بينها، @import url(mystyle.css); يعني استيراد ورقة الأنماط mystyle.css يجب أن تكون ورقة الأنماط الخارجية المستوردة في بداية ورقة الأنماط، فوق ورقة الأنماط الداخلية.
مثال 4
قم بتعريف ملف CSS خارجي p4.css، ثم قم باستيراد الملف في ملف t4.htm
مثال 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>استيراد ورقة الأنماط الخارجية</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>آلاف الطيور تطير عبر آلاف الجبال ولا يُرى أثر للبشر<p>آلاف الطيور تطير عبر آلاف الجبال ولا يُرى أثر للبشر</p></body></html>6. وراثة أوراق أنماط CSS
في ورقة أنماط CSS، سترث بعض سمات العلامة الفرعية سمات العلامة الأصلية، على سبيل المثال، تعد العلامة p عنصرًا فرعيًا في نص العلامة. عندما لا تقوم العلامة p بتعيين سمة لون الخط، فإن المحتوى في p سوف تستخدم قيمة اللون في الجسم، ويوضح المثال التالي هذا الموقف.
مثال 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>ورقة أنماط CSS المضمنة</title><styletype=text/css><!--@charsetgb2312; { عائلة الخط: 宋体;حجم الخط:20px;اللون:#FF0000;}p{font-family:宋体;حجم الخط:30px;}--></style></head><body>千山鸟تطير عبر آلاف المسارات، وتمحى آثار الإنسان<p>آلاف الجبال، وتطير الطيور عبر آلاف المسارات، وتمحى آثار الإنسان</p></body></html>7. قم بتعيين عناصر متعددة
يسمح CSS بتطبيق تنسيق واحد على علامات متعددة، ويتم فصل كل علامة بفاصلة عند استخدامها كمحدد، كما هو موضح في المثال التالي.
مثال 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>ورقة أنماط CSS المضمنة</title><styletype=text/css><!--@charsetgb2312; ، ح2، ح3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>تطير آلاف الطيور عبر آلاف الجبال ويختفي آلاف الأشخاص</h1> <h2> الطيور من آلاف الجبال تطير عبر آلاف المسارات، وتختفي دون أثر للأشخاص</h2><h3>الطيور من آلاف الجبال تطير عبر آلاف المسارات، وتختفي دون أثر للأشخاص</h3><p>الطيور من آلاف الجبال تطير عبر آلاف المسارات، وتختفي دون أن يترك أثرًا للناس</p></ body></html>