HTML Styles
-
في HTML يستخدم Style لتطبيق واضافة خصائص على element مثل لون الخط font Color، حجم الخط font-size ، نوع الخط Font-family .... الخ.
تعرفنا في الدرس HTML Attribute على شو هي attribute وكيف بتم تطبيقها. وفي هذا الدرس بنطبق HTML Attribute من نوع style
للتذكير قلنا ان attribute بتكون من اسم وقيمة
<tagname style="property:value;">
Property هي اسم الخاصية المطلوب تطبيقها ، و value هي القيمة المطلوبة
تمام نبدأ بأمثلة لنفهم الموضوع :
تطبيق Background Color
تستخدم هذه الخاصية للتحكم بلون الخلفية ل HTML elements.
انسخ الكود التالي في صفحة HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre>
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
</body>
</html>
</body>
</html>
شوف النتيجة
تم تطبيق اللون المطلوب على خلفية الصفحة كاملة .
يمكن تطبيق لون الخلفية على pre> tag> فقط بالإضافة الى لون الخلفية للصفحة كاملة .
عدل على الكود السابق الى :
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre style="background-color:red;">
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
</body>
</html>
</body>
</html>
شوف النتيجة
تطبيق Text Color
في هذه الخاصية يمكن التحكم بلون الخط فقط، خلونا نعدل على الكود السابق الى
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre style="background-color:red; color: white;">
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
</body>
</html>
</body>
</html>
طبقنا في هذا الكود اللون الأبيض على pre> tag>
شغل الصفحة وشوف النتيجة:
تطبي نوع الخط font-family
يمكن تغيير نوع الخط باستخدام الامر font-family
نعدل على الكود السابق
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre style="background-color:red; color: white;font-family: Arial, Helvetica, sans-serif;">
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
<p style="font-family: 'Times New Roman', Times, serif;"> My First paragraph in HTML</p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة :
لاحظ قمنا بتطبيق نوعين من الخطوط الأول على <pre> باسم Arial والثاني على <p> باسم Times New Roman
تطبيق حجم الخط Text Size
لتغيير حجم الخط نعدل على الكود السابق الى:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre style="background-color:red; color: white;font-family: Arial, Helvetica, sans-serif; font-size: large;">
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
<p style="font-family: 'Times New Roman', Times, serif; font-size: 30px;"> My First paragraph in HTML</p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة :
تطبيق اتجاه النص Text Alignment
يمكن تغير اتجاه النص ويستخدم حسب اللغة في الصفحة باستخدام الامر text-align
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
</head>
<body>
<!DOCTYPE html>
<html>
<body style="background-color:rgb(172, 226, 161);">
<h2>Welcome </h2>
<pre style="background-color:red; color: white;font-family: Arial, Helvetica, sans-serif; font-size: large; text-align: left;">
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
My First paragraph in HTML
</pre>
<p style="font-family: 'Times New Roman', Times, serif; font-size: 30px; text-align: right;"> My First paragraph in HTML</p>
</body>
</html>
</body>
</html>
شغل الصفحة وشوف النتيجة :
اترك تعليقك