6:00:00 م
تستخدم تقنية (CSS) لضبط تصميم صفحة الويب حيث تضمن المزيد من الخيارات وتوفر الوقت والجهد للمصممين وخصوصا لمبرمجى المواقع الكبيرة وايضا مدعومة من قبل المتصفحات الرئيسية.
واذا كانت لغة الـ (HTML) هى اللغة التى تستخدم لوضع هيكلة ونظام منطقى لمحتويات صفحة الويب فتعد تقنية (CSS) هى النظام المستخدم لاضافة تصميم لهذه المحتويات .
وتستخدم تقنية الـ(CSS) فى صفحة الـ (HTML) باحدى ثلاثة طرق ......
الطريقة الاولى ... ضمن وسوم الـ (HTML) باستخدام خاصية الـ "STYLE" .
مثال:
<p style="font-family:times;color:green;">
This text is in Times and green</p>
الطريقة الثانية ... ضمن صفحة الـ (HTML) باستخدام وسم <style>.
مثال:
<html>
<head>
<title>Example<title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
الطريقة الثالثة ... باستخدام ملف خارجى يضم جميع اوامر الـ (CSS) ويأخذ الامتداد (.css) حيث تتضمن صفحة الويب رابطا لهذا الملف فى رأس الصفحة.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
هذه كانت مقدمة سريعة عن الـ (CSS) وما يعنينا هنا هى الطريقة الاولى حيث استخدام خاصية الـ (STYLE) مع وسوم الـ (HTML) .
مثال لتغيير لون خلفية الصفحة وخلفية عنوان وخلفية فقرة
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
مثال لتعيين نوع الخط ولونة وحجمة
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
مثال لتعيين اتجاة الخط
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ليست هناك تعليقات
إرسال تعليق