السلام عليكم في الدرس السادس من دورة برمجة الويب على مدونة بوابة العلم
الان نبدأ بحول الله
بعدما تعرفنا على أساسيات ال html فأنت الان مبرمج html لكنك لا زلت لا تستطيع التحكم في ألوان و ديكور صفحتك بمعنى أخر لا تشعر بفائدة ما تعلمته أنا أيضا واجهت هذا المشكل لأني عندما كنت أتجول النت باحثا عن دروس لم أجد التطبيقات كنت فقط أتعلم
لا أكثر لكني كنت أعاني في التطبيق لذلك أحاول الالمام ما أمكن بكل ما سيحتاجه أي قارئ لمواضيعي ....
فمثلا اذا كنت تريد التحكم في حجم الخط أو نوعه بالاضافة الى لونه و بالاطار الجمالي مثلا و ضعه داخل اطار كملاحظة بسيطة نستطيع القول بأن هذا الدرس لا يعد ضمن ال htm لكنني وضعته كدرس أخير في html لننتقل بعدها الى css
اذا نبدأ بأول مثال للcss :
<p style="font-size:20px;">size 20</p>
<p style="font-family:courier;">Courier</p>
<p style="font-size:20px; font-family:courier;"> Courier size 20</p>
شرح الوسوم :
font-size : و يستعمل في css للتحكم بحجم الخط و هناك عدة وحات للقياس في المواضيع اللاحقة سنستعمل وحدة ال px
font-family : و تستعمل لاختيار نوع الخط و يمكنك أخد الاسماء من أي برنامج كتابة استعملنا في شرحنا "courier"
ويمكن جمع كلتا الخاصيتين باستعمال ; كما في المثال أعلاه
النتيجة
size 20
Courier
Courier size 20
يبدو العمل شاقا بعض الشيء اذا حاولنا تكرير الوسوم عدة مرات لذالك فبامكاننا ادراجها في صفحة html بشكل يجعلها تتحكم في كل الصفحة كما في المثال أسفله :
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>اسم الموقع</h1>
<h2> أنشئهاcss مرحبا بكم في أول صفحة</h2>
<p>cssهنا تطهر خصائص</p>
</body>
</html>
في المثال أعلاه وضعت في رأس الصفحة، ولذلك يمكن تطبيقها في الصفحة كاملة، لفعل ذلك عليك فقط أن تضع الوسم
<style type="text/css"> الذي يخبر المتصفح بأنك تستخدم CSS.; و هنا تجد بعض الخصائص العامة لصفحتك ...
ستفيدك
<p style="color:green;">نص أخضر</p>
<h1 style="background-color: blue;">أعلى الصفحة باللون الأزرق</h1>
<body style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht332nq2CrGP2CXfq0PN0R-Ygbr235qXbrpsDkAHvzJL7DVaiVhU1xRFdfdTt-5W8eMf88Yf3MmuzCUHVp5p2ddslPy9SwYoc-YaUedhfmowqI_f2IWZ5Mpv2EsmDFo0-7pzU0EnB3lQk/s798/aaa.jpg');">
<p style="padding:25px;border:1px solid red;">هذا النص سيكون داخل اطار أحمر من نوع solid وعرضه1px</p>
<img src="مسار الصورة" alt="الاسم الذي اخترته" style="position:absolute;bottom:الاحداثية من الأسفل الى الاعلىpx;right:من اليوين الى اليسارpx;" />
لا يمكنك تعلم CSS في عشر دقائق، وكما ذكرنا أعلاه، هذا الدرس هو مجرد مقدمة قصيرة، لاحقاً يمكنك أن تتعلم المزيد بنفسك في دروس CSS.
ولكن الان لنركز على html في الدرس اللاحق لنتعلم كيفية وضع الموقع في الشبكة لا تنسى اذا كان هذا أول درس تقرأه فبامكانك قراءة الدروس السابقة لانشاء الشروع الأول ....
لا تنسى ترك تعليق فكلمة شكر تكفيني في حال ما اذا استفدت و اذا نسيت ذكر شيء بامكانك اخباري و شكرا ...
المصدر مدونة بوابة العلم
0 التعليقات Blogger 0 Facebook
إرسال تعليق
من حق الكل وضع تعليقات دون التعريف بأنفسهم لأني على يقين بأخلاقكم الحسنة