English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

تعليمية HTML الأساسية

وسائط HTML

دليل مرجعي HTML

دليل أساسي HTML5

API HTML5

وسائط HTML5

CSS لـ HTML

CSS (Cascading Style Sheets) تستخدم لترميم عناصر علامات HTML.

المزيد من الأمثلة عبر الإنترنت

استخدام النمط في HTML
هذا المثال يوضح كيفية إضافة معلومات النمط إلى جزء <head> لترميم HTML.

إظهار كيفية إعداد رابط بدون علامة تحتية باستخدام خاصية النمط.
كيفية إعداد رابط بدون علامة تحتية باستخدام خاصية style.

الرابط إلى جدول النمط الخارجي
هذا المثال يوضح كيفية الرابط إلى جدول النمط الخارجي.

كيفية استخدام CSS

تم استخدام CSS بدءًا من HTML 4، ويتم استخدامه لتحسين ترميز عناصر HTML.

يمكن إضافة CSS إلى HTML عبر الطرق التالية:

  • النمط المدمج - استخدام خاصية "style" في عنصر HTML

  • النمط الداخلي - استخدام عنصر <style> في منطقة <head> من مستند HTML لاستضافة CSS

  • الاستعانة بالملفات CSS الخارجية - استخدام ملف CSS الخارجي

أفضل طريقة هي من خلال الاستعانة بملف CSS الخارجي.

نحن نستخدم في دليل HTML الخاص بنا النمط CSS المدمج لشرح الأمثلة، وهو يهدف إلى تبسيط الأمثلة ويسهل عليك تحرير الكود بشكل مباشر وتشغيل الأمثلة على الإنترنت.

يمكنك من خلال هذا الموقع دليل CSS للتعرف على المزيد من معلومات CSS.

النمط المدمج

عندما يحتاج نمط معين إلى تطبيقه على عنصر معين، يمكن استخدام النمط المدمج. يتم استخدام نمط المدمج من خلال استخدام خاصية النمط في العلامة ذات الصلة. يمكن أن تحتوي خاصية النمط على أي خصائص CSS. في المثال التالي، يتم عرض كيفية تغيير لون الفقرة وعرض الهوامش اليسرى.

<p style="color:blue;margin-left:20px;">هذا هو الفقرة.</p>

للتعرف على المزيد من النمطات، يرجى زيارة دليل CSS.

مثال على النمط HTML - لون الخلفية

تعريف خاصية لون الخلفية (background-color) لتعريف لون الخلفية لعدد من العناصر:

مثال

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body style="background-color:yellow;">
<h2　style="background-color:red;">هذا هو العنوان</h2>
<p　style="background-color:green;">هذا هو جملة.</p>
</body>
</html>
اختبار لرؤية ‹/

خصائص لون الخلفية القديمة (background-color) كانت تستخدم خاصية bgcolor.

اختبار لرؤية ‹/›

عادة ما يتم استخدام خصائص font-family (عائلة الخط)، color (اللون)، وfont-size (حجم الخط) لتعريف نماذج النص، وليس العلامة <font>.

مثال على النمط HTML - تلقيح النص

استخدم خصائص text-align (تلقيح النص) لتعيين طريقة تلقيح النص المستوى والأفقية والعمودية:

مثال على الإنترنت

!DOCTYPE　html
<html>
<head>　
<meta　charset="utf-8">　
<title>دليل الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<h1　style="text-align:center;">عنوان مركزي</h1>
<p>هذا هو جملة.</p>
</body>
</html>
اختبار لرؤية ‹/›

خصائص تلقيح النص text-align استبدلت العلامة القديمة <center>.

جدول النمط الداخلي

عندما تحتاج ملف واحد إلى نمط خاص، يمكنك استخدام جدول النمط الداخلي. يمكنك تعريف جدول النمط الداخلي من خلال علامة <style> في جزء <head>:

<head>
<style　type="text/css">
body　{background-color:yellow;}
p　{color:blue;}
</style>
</head>

جدول النمط الخارجي

عندما تحتاج إلى تطبيق النمط على العديد من الصفحات، فإن جدول النمط الخارجي سيكون الخيار المثالي. باستخدام جدول النمط الخارجي، يمكنك تغيير مظهر الموقع بأكمله عن طريق تغيير ملف واحد.

<head>
<link　rel="stylesheet"　type="text/css"　href="mystyle.css">
</head>

علامات النمط HTML

العلامةالوصف
<style>تعريف نماذج النص
<link>تعريف عنوان إدراج المصادر

العلامات والخصائص المهملة

في HTML 4، العلامات والخصائص التي كانت تستخدم لتعريف نماذج عناصر HTML قد تم إزالتها. لن يتم دعم هذه العلامات في إصدارات العلامات الجديدة من HTML.

العلامات غير الموصى بها تشمل: <font>, <center>, <strike>

خصائص غير المقترحة الاستخدام: color و bgcolor.

عرض الفيديو في HTMLعناصر الرأس في HTML