في هذا الدرس 3تصفّح المواضيع
CSS Syntax
قواعد لغة CSS
CSS Syntax قواعد لغة CSS
تتكون قاعدة التنسيق المعتادة في CSS من محدد Selector وكتلة تصريحات Declaration Block:
- المحدد يختار عنصرًا أو أكثر، مثل محدد اسم العنصر أو id أو class.
- تحتوي كتلة التصريحات بين { } على تصريح واحد أو أكثر، مثل color: red؛ والتصريح زوج من خاصية وقيمة. وقد تكون الكتلة فارغة.
ِCSS Syntax
طريقة كتابة قواعد CSS.
selector {property:value;property:value;}
CSS Selectors
تحديد عنصر HTML عن طريق CSS Selectors
CSS Selectors تحديد عنصر HTML عن طريق CSS Selectors
يمكننا أن نختار أي عنصر أو مجموعة عناصر في صفحة HTML عن طريق:
- Tag Name علامة عنصر HTML مثل <p> أو <h1> نختار h1 لتحديد عنصر <h1>.
- ID لعنصر مثل
<h1 id="abc">نكتب المحدد#abc. - Class Name لعناصر تحمل
class="paragraph"نكتب المحدد.paragraph؛ النقطة جزء من محدد CSS وليست من قيمة السمة.
Tag Name Selector
يتم تحديد tag name في البداية.
TagName {property:value;property:value;}Tag Name Selector
يتم تحديد p هذة هي طريقة إختيار العناصر عن طريق Tag Name.
p {property:value;property:value;}ID Selector
كتابة علامة hash شباك متبوعة بإسم id.
#idName {property:value;property:value;}ID Selector
تُكتب قيمة id بعد علامة hash شباك لتحديد عنصر له خاصية id تساوي logo.
#logo {property:value;property:value;}Class Selector
طريقة تحديد Class كتابة علامة dot متبوعاً بإسم Class الكلاس.
.ClassName {property:value;property:value;}Class Selector
يتم تحديد جميع العناصر التي تحمل إسم paragraph في صفحة HTML.
.paragraph {property:value;property:value;}
Declaration Block
كُتلة كتابة التنسيق Declaration Block
Declaration Block كُتلة كتابة التنسيق Declaration Block
كتلة التصريحات Declaration Block تأتي بعد المحدد وتحيط بها الأقواس المجعدة { }.
- داخلها تصريحات Declarations؛ يتكون كل تصريح من خاصية property وقيمة value تفصل بينهما النقطتان :، مثل
color: red. - نفصل بين التصريحات بالفاصلة المنقوطة الإنجليزية ;، وليس بين كتل مختلفة. يمكن إغفالها بعد آخر تصريح، لكن كتابتها تقلل الأخطاء عند الإضافة.
- مثال:
p { color: red; background: yellow; }يحتوي كتلة واحدة وتصريحين.
selector { property: value; property: value; }سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات12
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS Syntax قواعد بناء جملة CSS
- للمراجعة
- 02 Style نمط أو شكل
- للمراجعة
- 03 Element عنصر
- للمراجعة
- 04 Selector محدد
- للمراجعة
- 05 Declaration اعلان
- للمراجعة
- 06 Block كتلة
- للمراجعة
- 07 Tag Name اسم العلامة
- للمراجعة
- 08 Class فئة
- للمراجعة
- 09 Property خاصية
- للمراجعة
- 10 Color لون
- للمراجعة
- 11 Red أحمر
- للمراجعة
- 12 Semicolon فاصلة منقوطة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
- 03 ID ID
- Idenitity
- معرف هوية فريد
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.