 طريقة ربط التنسيق style بوسوم الهوتمل طرق الاعلان عنها وطرق استدعائها
بسم الله الرحمن الرحيم
في هذه المقالة ساوضح كيفية الاعلان عن التنسيق css وكيفية استدعائه
ماهو التنسيق
التنسيق هو الشكل النهائي الذي سيظهر للمتصفح وهو مايتحكم بالارتفاعات ولون الخط والخط ......الخ
كيفية الاعلان عن التنسيق طبعا التنسيق هو كل شي في ملف css
او النص الذي يكون ضمن وسم
<style type="text/css">
</style>
طرق الاعلان يمكن الاعلان عن التنسيق بعدة طرق
1-موجهة مباشرةالى وسم محدد ويتم ذلك عن طريق كتابة اسم الوسم ثم الكتلة مثال
<style type="text/css">
input{
background-color:#000;
}
</style>
هنا كان الاعلان عن اسم الوسم وهو وسم input
ثم قوسي حصر ومن ثم التنسيق المراد اضافته وينتهي كل تنسيق بفاصلة منقوطة
مثال كامل
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>المثال الاول</title>
<style type="text/css">
input{
background-color:#000;
}
</style>
</head>
<body>
<input name="Text1" type="text" />
</body>
</html>
الطريقة الثانية
الاتدعاء بالمعرف اي بالصفة للوسم
id
يتم الاعلان عن اسم التنسيق بالبدء بعلامة الباوند اي #
ثم المعرف اي
id="t"
مثال عن التنسيق
<style type="text/css">
#t{
background-color:#000;
}
</style>
طبعا ماننسى اعطاء العنصر معرفه مثال كامل
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>المثال الاول</title>
<style type="text/css">
#t{
background-color:#000;
}
</style>
</head>
<body>
<input id="t" type="text" />
</body>
</html>
الطريقة الثالثة وهي الاستدعاء باسم الفئة مباشرة ويتم ربطه بالخاصية
class
فيكون اول شي نقطة ثم اسم الفئة ثم قوسي حصر ثم الكتلة مثال
<style type="text/css">
.rt{
background-color:#00ff00;
}
</style>
طبعا نضيف الصفة class للعنصر وتكون قيمتها اسم الفئة المرادة مثال
class="rt"
مثال متكامل
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>المثال الاول</title>
<style type="text/css">
.rt{
background-color:#00ffff;
}
</style>
</head>
<body>
<input class="rt" type="text" />
</body>
</html>
بهذا ننهي عملية الاستدعاء والاعلان طبعاواحد ممكن يخطر بباله انه بدو اكثر من تنسيق بنفس الوقت
اي يصنف التنسيق حسب حاجته وهذا مطلب احترافي من اجل اعادة صياغة التنسيق
يمكن ذلك عن طريق الاستدعاء بواسطة الايدي والفئة مع العلم ان الالولية للاخير اي للمعلن عنه اخيرا
طيب كيفية ربط اكثر من تنسيق لعنصر ما يمكن عن طريق اسم الوسم بالاضافة الى المعرف بالاضافة الىاسم الفئة او يمكن حسب الطريقة التالية حصر كلهم في الفئة على ان يفصل بينهما بفراغ مثال
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>المثال الاول</title>
<style type="text/css">
.bg{
background-color:#000fff;
}
.bor{
border: 9px solid #996633;
}
</style>
</head>
<body>
<input class="bg bor" type="text" />
</body>
</html>
وطبعا حسب فكرتك يمكنك دمج هذه الطرق
ارجو من الله ان اكون وفقت في شرحي والله ولي التوفيق
تلميح يمكنك من خلال الجافا سكربت تغيير التنسيق عن طريق
استبدال قيمة class والتي تتحولفي الجافا سكربت الى className
مثال
document.getElementById('t').className='tr';
وقل ربي زدني علما
|
