إضافة أنماط (Styles) css إلى عناصر HTML
يمكن إرفاق معلومات النمط كمستند منفصل أو مضمنة في صفحة HTML نفسها. هنالك ثلاث طرق لتطبيق الأنماط (styles) على صفحة HTML.
- أنماط مضمنة داخل العنصر (Inline styles) - باستخدام السمة
styleفي وسم البدء (الفتح). - أوراق الأنماط المضمنة داخل صفحة الويب (Embedded style sheets) - باستخدام العنصر
<style>في قسم<head>من صفحة الويب. - أوراق الأنماط الخارجية (External style sheets) - باستخدام العنصر
<link>لربط صفحة الويب بملفات CSSخارجية.
الأنماط المضمنة داخل العنصر (Inline styles) لها أعلى أولوية ، وأوراق الأنماط الخارجية (External style sheet) لها أدنى أولوية. هذا يعني أنك إذا حددت أنماطًا للفقرات الخاصة بك في كل من الأنماط المضمنة و الأوراق الخارجية ، فإن قواعد النمط المتضاربة في ورقة الأنماط المضمنة ستلغي ورقة الأنماط الخارجية.
أنماط css مضمنة داخل العنصر (Inline styles)
تُستخدم الأنماط المضمنة داخل العنصر لتطبيق قواعد أنماط فريدة على عنصر معين ، من خلال وضع قواعد CSS مباشرةً في وسم البداية. يتم اضافة النمط إلى العنصر باستخدام سمة style.
تتضمن سمة style سلسلة من خصائص CSS (property) والقيمة (value) على شكل ازواج. كل زوج property: value مفصول بفاصلة منقوطة (;) ، تمامًا كما تكتب في الأنماط المضمنة أو الورقة الخارجية. ولكن يجب أن يكون كل شيء في سطر واحد ، أي لا يوجد فاصل أسطر بعد الفاصلة المنقوطة.
.
يوضح المثال التالي كيفية تحديد لون النص وحجم الخط:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال على الأنماط المضمنة داخل العنصر</title>
</head>
<body>
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>
</body>
</html>
المخرج 1
لا يوصى بإستخدام الأنماط المضمنة داخل العنصر نظرًا لأن قواعد النمط مضمنة مباشرة داخل وسوم HTML ، هذا سوف يسبب إختلاط محتوى صفحة الويب مع الانماط ، مما يجعل تحديث موقع الويب أو صيانته أمرًا صعبًا للغاية.
أوراق الأنماط css المضمنة داخل صفحة الويب(Embedded style sheets)
تؤثر أوراق الأنماط المضمنة (Embedded) أو الداخلية (internal) فقط على صفحة الويب التي يتم تضمينها فيها.
يتم تعريف أوراق الأنماط المضمنة في قسم <head> من صفحة HTML باستخدام الوسم <style>. يمكنك تحديد أي عدد من عناصر <style> داخل قسم <head>.
يوضح المثال التالي كيف يتم تضمين قواعد الأنماط داخل صفحة الويب.
<!DOCTYPE html>
<html lang="en">
<head>
meta < charset="utf-8">
<title>مثال على أوراق الأنماط المضمنة داخل صفحة الويب</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
المخرج 2
تحدد السمة type الخاصة بعلامة <style> و <link> على سبيل المثال type="text/css" لغة ورقة الأنماط. هذه السمة ببساطة سمة إعلانية لإخبار المتصفح نوع العنصر <style> . يمكنك حذف هذه السمة لأن CSS هي لغة ورقة الأنماط القياسية والافتراضية في HTML5.
أوراق الأنماط css الخارجية (External style sheets)
تُعد ورقة الأنماط الخارجية (external style sheet) مثالية عند تطبيق النمط على العديد من الصفحات.
تحتوي ورقة الأنماط الخارجية على جميع قواعد الأنماط في مستند منفصل يمكنك ربطه من أي صفحة HTML على موقعك. أوراق الأنماط الخارجية هي الأكثر مرونة لأنه مع ورقة الأنماط الخارجية ، يمكنك تغيير مظهر موقع ويب بأكمله عن طريق تحديث ملف واحد فقط.
يمكنك إرفاق أوراق أنماط خارجية بطريقتين - الربط (linking) والاستيراد (importing)
ربط أوراق الأنماط الخارجية
قبل الربط ، نحتاج إلى إنشاء ورقة أنماط أولاً. دعونا نفتح محرر النصوص وننشأ ملف جديد.
الآن اكتب كود CSS التالي داخل هذا الملف واحفظه كـ "style.css".
body {
background-color: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
يمكن ربط ورقة أنماط خارجية بصفحة HTML باستخدام الوسم <link>.
يتم وضع الوسم <link> داخل قسم <head> ، كما هو موضح هنا:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>مثال على ربط أوراق الأنماط الخارجية</title>
<link rel="stylesheet" href="examples/css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
المخرج 3
من بين الطرق الثلاث ، يعد استخدام ورقة الأنماط الخارجية أفضل طريقة لتحديد الأنماط وتطبيقها على مستندات HTML. كما ترى بوضوح تم اضافة القليل من التغيرات إلى صفحة HTML.
استيراد أوراق الأنماط css الخارجية
تعد قاعدة @import طريقة أخرى لتحميل ورقة أنماط خارجية. يوجه تعبير @import المتصفح إلى تحميل ورقة أنماط خارجية واستخدام أنماطها.
إن أبسط طريقة لاستخدامه هي داخل عنصر <style> في قسم <head>.
لاحظ في المثال التالي قد تم تضمين قواعد CSS أخرى في عنصر <style>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على استيراد أوراق الأنماط الخارجية</title>
<style>
@import url("examples/css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>The styles for this heading are defined in the imported style sheet</h1>
<p>The styles for this paragraph are defined in the embedded style sheet.</p>
</body>
</html>
المخرج 4
ايضا، يمكننا استخدام تعبير @import اكثر من مرة لاستيراد اكثر من ورقة أنماط لصفحة HTML واحدة. لاحظ المثال التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS @import rule</title>
<style>
@import url("examples/css/layout.css");
@import url("examples/css/color.css");
body {
color:blue;
font-size:14px;
}
</style>
</head>
<body>
<div>
<h1>Importing External Style Sheet</h1>
<p>The layout styles of these HTML element is defined in 'layout.css' and colors in 'color.css'.</p>
</div>
</body>
</html>
المخرج 5
يجب أن توضع جميع قواعد @import في بداية صفحة الأنماط (style sheet).
أي قاعدة نمط معرفة في ورقة الأنماط نفسها تلغي القاعدة المتعارضة في أوراق الأنماط المستوردة.
قد تتسبب قاعدة @import في حدوث مشكلات في الأداء ، يجب عليك عمومًا تجنب استيراد أوراق الأنماط.
كورس css
عدد الموضوعات 28 الخاصة ب كورس ' css3 ' العدد الكلي .