شامل في تعلمCSS , HTML داخل وتيقة html

تم تحميل الصفحة في 1,4221804 ثانية
شامل في تعلمCSS , HTML داخل وتيقة html
إنضم
10 يناير 2018
المشاركات
544
الإعجابات
510
النقاط
93
الإقامة
Morocco

بما أن الدورة هيا دورة شامل حول CSS سوف نتطرق في هدا الموضوع الى كيفية إستخدام CSS
داخل وتيقة HTML وتحكم في Style عن طريقها عوض إستخدامها في كل tag متل الموضوع السابق


كما دكرنا في المواضيع السابقة أن head يستخدم من أجل جلب ملفات CSS ويستخدم أيظن في كتابة كود الخاص بها

من أجل إستخدام CSS داخل وتيقة Html نقوم بفتح وسم داخل Head بهدا الشكل


HTML:
<!DOCTYPE html>
<html>
<head>
    
<style>
هنا
</style>
</head>
<body>
</body>
</html>

نلاحظ على أن إسم tag style

في البداية من الأساسي أن تعرف أنه في CSS نكتب إسم tag تم نفتح {هنا } ونظع داخله الكود الخاص بنا

متال

HTML:
<!DOCTYPE html>
<html>
<head>
<style>

body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;font-size: 40px;}

</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
صور تطبيقية






نلاحظ أنه تم تغير خلفية body
;ولون النص h1
ولون وحجم الفقرة p

ويمكنك وضع ملف خارجي ووضع كود CSS بداخله بدون وإستدعاء الملف عن طريق الكود التالي

HTML:
<link rel="stylesheet" href="styles.css">
متال
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>

<body style="background-color: powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
صور تطبيقية



نظع الملف الخارجي في نفس الملف مع وتيقة html



ونظع بداخلها الكود كتالي





ملاحظة: يمكن أيظن إستدعاء ملف CSS من رابط خارجي مرفوع على أي موقع أخر
متال :
HTML:
<link rel="stylesheet" href="https://www.dev-pont.com/html/styles.css">
 
إنضم
10 يناير 2018
المشاركات
544
الإعجابات
510
النقاط
93
الإقامة
Morocco
أكواد خاصة ب CSS

CSS Fonts
HTML:
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
CSS Border
HTML:
p {
  border: 1px solid powderblue;
}
CSS Padding

HTML:
p {
  border: 1px solid powderblue;
  padding: 30px;
}
CSS Margin

HTML:
p {
  border: 1px solid powderblue;
  margin: 50px;
}
The id Attribute

HTML:
<p id="p01">I am different</p>
The class Attribute
HTML:
<p class="error">I am different</p>
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل