Index - اكاديمية ماجد

التقنية الأساسية لتصميم و التنسيق CSS

اهداف الدورة:

مساعدتك في تصميم موقع بتسعة دروس فقط
مساعدتك على فهم معاني اغلب الدالات / التاقات
قي نهاية الدورة سيكون باستطاعتك تصميم موقع مستقبلاً

مقدمة عن CSS

تعتبر التقنية الاساسية لتصميم وتنسيق اغلب المواقع يمكن اعتبارها اداة الرسم لتصميم الموقع في هذا القسم سوف تتعلم الكثير من التعريفات عنها

وعلى غرار المواقع الجميلة التي زرتها عبر الإنترنت والتي اعجبك تصميمها, السؤال هل تتوقع انك سوف تصمصم موقع بتسعة خطوات؟

بعد نهاية الدورة سوف تكون قادر على تصميم موقع بهذا الشكل

<!DOCTYPE html>
<html dir="rtl">
<head>
<link href="/css/site.min.css" rel="stylesheet">
<style>
* {
    box-sizing: border-box;
}
/*لتحديد اتجاهات هيئة الصفحة ونوعية الخط والمسافات*/
body {
    padding-top: 0px; 
    margin: 0;
    font-family:tahoma;
}
/*لتحديد حجم الخط للعناوين*/
    h1, h2, h3, h4 {
    font-size: 18px;
}
/*تحديد حجم الخط بالفقرات النصية*/
p {
    font-size: 14px;
}
/* لتصميم خلفية شريط الروابط */
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #555;
}
/* لتحديد اتجاه القوالب */
li {
    float: right;
}
/* لتحديد لون الخط + اتجاه النص + تحديد مسافة القوائم عن اطراف الموقع */
li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* لتحديد لون القالب لحظة التمرير على شريط الروابط*/
li a:hover, .dropdown:hover .active .dropbtn {
    background-color: green;
}
/* لتحديد نوعية العرض للقائمة المنسدلة*/
li.dropdown {
    display: inline-block;
}
/* لتحديد العرض و المكان و لون الخلفية و اقل عرض و صندوق التضليل للقائمة المنسدلة*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/*  لتحديد لون الخط و المسافة عن اطراف العرض واتجاه النص للقائمة المنسدلة*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: right;
}
/* لتحديد لون القالب عند التمرير للقائمة المنسدلة*/
.dropdown-content a:hover {background-color: #f1f1f1}
/* لتحديد لون القالب عند التمرير للقائمة المنسدلة*/
.dropdown:hover .dropdown-content {
    display: block;
}
/* تصميم الهيدر, اللون, اتجاه الكتابة */
.header {
    background-color: lightgray;
padding: 20px;
text-align: center;
}
/* اضافة اللون الاسود الى قائمة الارتباطات */

/*تحديد الصفحة بعد قائمة الارتباطات*/
.row:after {
content: "";
display: table;
clear: both;
}
/*انشاء ثلاث اعمدة غير متساوية بالعرض على نفس الصف */
.column {
float: right;
padding: 10px;
}
/* عمود اليمين و اليسار ولون الخلفية للعمود و طول العمود في الصفحة  */
.column.side {
width: 20%;
box-border: 15px;
background-color: #f1f1f1;
height:100%;
}
/* العمود الوسطي */
.column.middle {
width: 60%;
}
/*  لتحديد نوعية النص و الحدود و العرض للجدول*/
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
/*  لتحديد الحدود و اتجاه النص و اتزان المسافة لصف الرئيسي و الصفوف الاخرى*/
td, th {
    border: 1px solid #dddddd;
    text-align: right;
    padding: 8px;
}
/*   تحديد لون الصفوف الزوجية بالون الرمادي الفاتح*/
tr:nth-child(even) {
    background-color: #dddddd;
}
/* تصميم تذييل الصفحة */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* مسؤول العرض ليتناسب مع اغلب اجهزة العرض كاجهزة الحاسوب, التابلت, الهواتف الذكية */
@media (max-width: 600px) {
    .column.side, .column.middle {
        width: 100%;
    }
}
</style>
</head>
<body>

<ul> 
            <li><a class="active" href="#home">الرئيسية</a></li> 
            <li><a href="#news">مقالاتي</a></li> 
            <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">الخيارات</a> 
            <div class="dropdown-content">
            <a href="#">الرابط 1</a> 
            <a href="#">الرابط 2</a> 
            <a href="#">الرابط 3</a> 
            </div>  
            </li>
             <li><a href="#home">اتصل بنا</a></li>           
        </ul>
        <div class="header">
    <h1>عنوان الموقع: مدونة اكاديمية ماجد</h1> 
    <p>وصف الموقع: هنا سوف اكتب بحوثي ومدوناتي</p>
</div>
<div class="row">
        <div class="column side">
        <h4>لماذا الاكاديمية؟</h4>
            <p>اتمنى ان ارى ابداعتنا وابتكاراتنا تعود الينا من جديد, لقد تقدمنا على العالم اجمع عصوراً, هل سيعودالينا الابتكار والابداع لخدمة الانسانية؟</p>
        <h4>اين الاكاديمية؟</h4>
            <p>لا يوجود لها موقع واسال الله ان تكون ذات منفعة لكل بيت عربي</p>
        <h4>السعر؟</h4>
            <p>مجانا للأبد, وبكل تواضع</p> 
        </div> 
        <div class="column middle">
        <h1>البداية</h1>
            <p>بكل تواضع وامتنان اقدم لكم جهد سنتين من العمل على التدريبات لتكون سهلة وبين ايديكم وبلغتكم العربية. .</p><p>بكل فخر اقدم لكم مجهوداتي واسال الله ان تكون سهلة مبسطه مما يجعل التطور المعرفي لديك يفوق توقعاتي</p> 
            <h3>تواجدكم بالتدريبات سوف يكون:</h3>
                <p>المحفز الاكبر لي لنقديم اضافات اكثر احترافية و بمستويات متطورة</p>
            <h4>اتمنى يوماً ان ارى حاسب الي باللغة العربية 100% صنع بدولة عربية</h4>
            <table>
              <tr style="background-color:black; color: white;">
                  <th>الشركة</th>
                  <th>المسؤول</>
                  <th>الدولة</th>
            
              </tr>
              <tr>
                  <td>مايكروسوفت</td>
                  <td>بيل غيتس</td>
                  <td>امريكا</td>
              </tr>
              <tr>
                  <td>آبل</td>
                  <td>ستيف جوبز</td>
                  <td>امريكا</td>
              </tr>
              <tr>
                  <td>سوني</td>
                  <td>كازا هيراي</td>
                  <td>اليابان</td>
              </tr>
              
            </table>
        </div> 
        <div class="column side" style="background: #fff">
            <h2>الإعلانات</h2> 
                <p>اعلانات جديدة سيتم طرحها هنا</p> 
                <img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="150" height="120">
        </div>
</div> 
<div class="footer">
    <p class="w3-medium">مدعوم من <a href="~/Home" target="_blank" style="color: #199EB8">اكاديمية ماجد</a></p>
</div>
</body>
</html>

التاق	الوصف
background	خاصية مختصرة لتحديد جميع خصائص الخلفية في إعلان واحد
background-attachment	لتعيين ما إذا كانت صورة الخلفية ثابتة أو مخطوطات مع بقية الصفحة
background-color	لتعيين لون خلفية العنصر
background-image	لتعيين صورة كخلفية
background-position	لتعيين موضع بدء صورة الخلفية
background-repeat	يحدد إذا / كيف سيتم تكرار صورة الخلفية
border	ملكية مختصرة لتعيين جميع الخصائص للحدود الأربعة في إعلان واحد
border-bottom	خاصية مختصرة لتحديد كل الخصائص للحد الأدنى في إعلان واحد
border-bottom-color	تعيين لون الحدود الحد الأدنى لون
border-bottom-style	تعيين نمط الحد السفلي نمط الحدود
border-bottom-width	لتعيين عرض الحد السفلي
border-color	تعيين لون الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة ألوان
border-left	خاصية مختصرة لتعيين جميع الخصائص للحافة اليسرى في إعلان واحد
border-left-color	لتعيين لون الحد الأيسر
border-left-style	لتعيين نمط الحدود اليسرى
border-left-width	لتعيين عرض الحد الأيسر
border-right	خاصية مختصرة لتعيين جميع الخصائص للحدود الصحيحة في إعلان واحد
border-right-color	لتعيين لون الحدود الصحيحة
border-right-style	لتعيين نمط الحد الأيسر
border-right-width	لتعيين عرض الحد الأيسر
border-style	تعيين نمط الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة أنماط
border-top	خاصية مختصرة لتعيين جميع الخصائص للحد الأعلى في إعلان واحد
border-top-color	لتعيين لون الحد العلوي
border-top-style	لتعيين نمط الحد العلوي
border-top-width	لتعيين عرض الحد العلوي
border-width	يمكن أن تكون خاصية الاختزال لتحديد عرض الحدود الأربعة في إعلان واحد، من قيمة واحدة إلى أربع قيم
font	خاصية الاختزال لتعيين كافة الخصائص لخط في إعلان واحد
font-family	قائمة ذات أولوية لأسماء عائلة الخط و / أو أسماء العائلة العامة لعنصر
font-size	لتعيين حجم الخط
font-size-adjust	يحدد قيمة جانب للعنصر الذي سيحافظ على ارتفاع x لخط الاختيار الأول
font-stretch	تكثف أو توسع عائلة الخط الحالية
font-style	لتعيين نمط الخط
font-variant	يعرض النص بخط صغير أو خط عادي
font-weight	تعيين وزن الخط
border	ملكية مختصرة لتعيين جميع الخصائص للحدود الأربعة في إعلان واحد
border-bottom	خاصية مختصرة لتحديد كل الخصائص للحد الأدنى في إعلان واحد
border-bottom-color	تعيين لون الحدود الحد الأدنى لون
border-bottom-style	تعيين نمط الحد السفلي نمط الحدود
border-bottom-width	لتعيين عرض الحد السفلي
border-color	تعيين لون الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة ألوان
border-left	خاصية مختصرة لتعيين جميع الخصائص للحافة اليسرى في إعلان واحد
border-left-color	لتعيين لون الحد الأيسر
border-left-style	لتعيين نمط الحدود اليسرى
border-left-width	لتعيين عرض الحد الأيسر
border-right	خاصية مختصرة لتعيين جميع الخصائص للحدود الصحيحة في إعلان واحد
border-right-color	لتعيين لون الحدود الصحيحة
border-right-style	لتعيين نمط الحد الأيسر
border-right-width	لتعيين عرض الحد الأيسر
border-style	تعيين نمط الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة أنماط
border-top	خاصية مختصرة لتعيين جميع الخصائص للحد الأعلى في إعلان واحد
border-top-color	لتعيين لون الحد العلوي
border-top-style	لتعيين نمط الحد العلوي
border-top-width	لتعيين عرض الحد العلوي
border-width	يمكن أن تكون خاصية الاختزال لتحديد عرض الحدود الأربعة في إعلان واحد، من قيمة واحدة إلى أربع قيم
bottom	يحدد إلى أي مدى تكون الحافة السفلية للعنصر أعلى / أسفل الحافة السفلية للعنصر الرئيسي
clip	لتعيين شكل عنصر. يتم قص العنصر في هذا الشكل، ويتم عرضه
left	لتحديد مدى وصول الحافة اليسرى للعنصر إلى يسار / يسار الحافة اليسرى للعنصر الرئيسي
overflow	لتعيين ما يحدث إذا تجاوز محتوى أحد العناصر مساحته
position	وضع عنصر في وضع ثابت أو نسبي أو مطلق أو ثابت
right	لتحديد مدى وصول الحافة اليمنى للعنصر إلى يسار / يمين الحافة اليمنى للعنصر الرئيسي
top	يحدد إلى أي مدى تكون الحافة العلوية للعنصر أعلى / أسفل الحافة العلوية للعنصر الرئيسي
vertical-align	لتعيين المحاذاة العمودية للعنصر
z-index	لتعيين ترتيب المكدس لعنصر
border-collapse	لتحديد ما إذا تم تصغير حدود الجدول إلى حد واحد أو فصله كما هو الحال في هتمل القياسي
border-spacing	يحدد المسافة التي تفصل حدود الخلية (فقط لنموذج â € œparparâ € ؟؟)
caption-side	لتعيين موضع تسمية الجدول
empty-cells	يحدد ما إذا كان سيتم عرض الخلايا الفارغة في جدول (فقط لنموذج â € œseparated borderâ € ؟؟)
table-layout	لتعيين الخوارزمية المستخدمة لعرض خلايا الجدول والصفوف والأعمدة
color	لتعيين لون النص
direction	لتعيين اتجاه النص
line-height	لتعيين المسافة بين الخطوط
letter-spacing	زيادة المسافة بين الأحرف أو تقليلها
text-align	لمحاذاة النص في عنصر
text-decoration	لإضافة زخرفة إلى نص
text-indent	يسرد السطر الأول من النص في عنصر
text-shadow	لإضافة ظل إلى نص
text-transform	للتحكم في الحروف في عنصر
unicode-bidi
white-space	لتعيين كيفية معالجة المسافة البيضاء داخل عنصر
word-spacing	زيادة أو تقليل المسافة بين الكلمات

background

خاصية مختصرة لتحديد جميع خصائص الخلفية في إعلان واحد

background-attachment

لتعيين ما إذا كانت صورة الخلفية ثابتة أو مخطوطات مع بقية الصفحة

background-color

لتعيين لون خلفية العنصر

background-image

لتعيين صورة كخلفية

background-position

لتعيين موضع بدء صورة الخلفية

background-repeat

يحدد إذا / كيف سيتم تكرار صورة الخلفية

border

ملكية مختصرة لتعيين جميع الخصائص للحدود الأربعة في إعلان واحد

border-bottom

خاصية مختصرة لتحديد كل الخصائص للحد الأدنى في إعلان واحد

border-bottom-color

تعيين لون الحدود الحد الأدنى لون

border-bottom-style

تعيين نمط الحد السفلي نمط الحدود

border-bottom-width

لتعيين عرض الحد السفلي

border-color

تعيين لون الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة ألوان

border-left

خاصية مختصرة لتعيين جميع الخصائص للحافة اليسرى في إعلان واحد

border-left-color

لتعيين لون الحد الأيسر

border-left-style

لتعيين نمط الحدود اليسرى

border-left-width

لتعيين عرض الحد الأيسر

border-right

خاصية مختصرة لتعيين جميع الخصائص للحدود الصحيحة في إعلان واحد

border-right-color

لتعيين لون الحدود الصحيحة

border-right-style

لتعيين نمط الحد الأيسر

border-right-width

لتعيين عرض الحد الأيسر

border-style

تعيين نمط الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة أنماط

border-top

خاصية مختصرة لتعيين جميع الخصائص للحد الأعلى في إعلان واحد

border-top-color

لتعيين لون الحد العلوي

border-top-style

لتعيين نمط الحد العلوي

border-top-width

لتعيين عرض الحد العلوي

border-width

يمكن أن تكون خاصية الاختزال لتحديد عرض الحدود الأربعة في إعلان واحد، من قيمة واحدة إلى أربع قيم

font

خاصية الاختزال لتعيين كافة الخصائص لخط في إعلان واحد

font-family

قائمة ذات أولوية لأسماء عائلة الخط و / أو أسماء العائلة العامة لعنصر

font-size

لتعيين حجم الخط

font-size-adjust

يحدد قيمة جانب للعنصر الذي سيحافظ على ارتفاع x لخط الاختيار الأول

font-stretch

تكثف أو توسع عائلة الخط الحالية

font-style

لتعيين نمط الخط

font-variant

يعرض النص بخط صغير أو خط عادي

font-weight

تعيين وزن الخط

border

ملكية مختصرة لتعيين جميع الخصائص للحدود الأربعة في إعلان واحد

border-bottom

خاصية مختصرة لتحديد كل الخصائص للحد الأدنى في إعلان واحد

border-bottom-color

تعيين لون الحدود الحد الأدنى لون

border-bottom-style

تعيين نمط الحد السفلي نمط الحدود

border-bottom-width

لتعيين عرض الحد السفلي

border-color

تعيين لون الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة ألوان

border-left

خاصية مختصرة لتعيين جميع الخصائص للحافة اليسرى في إعلان واحد

border-left-color

لتعيين لون الحد الأيسر

border-left-style

لتعيين نمط الحدود اليسرى

border-left-width

لتعيين عرض الحد الأيسر

border-right

خاصية مختصرة لتعيين جميع الخصائص للحدود الصحيحة في إعلان واحد

border-right-color

لتعيين لون الحدود الصحيحة

border-right-style

لتعيين نمط الحد الأيسر

border-right-width

لتعيين عرض الحد الأيسر

border-style

تعيين نمط الحدود الأربعة، يمكن أن يكون من واحد إلى أربعة أنماط

border-top

خاصية مختصرة لتعيين جميع الخصائص للحد الأعلى في إعلان واحد

border-top-color

لتعيين لون الحد العلوي

border-top-style

لتعيين نمط الحد العلوي

border-top-width

لتعيين عرض الحد العلوي

border-width

يمكن أن تكون خاصية الاختزال لتحديد عرض الحدود الأربعة في إعلان واحد، من قيمة واحدة إلى أربع قيم

bottom

يحدد إلى أي مدى تكون الحافة السفلية للعنصر أعلى / أسفل الحافة السفلية للعنصر الرئيسي

clip

لتعيين شكل عنصر. يتم قص العنصر في هذا الشكل، ويتم عرضه

left

لتحديد مدى وصول الحافة اليسرى للعنصر إلى يسار / يسار الحافة اليسرى للعنصر الرئيسي

overflow

لتعيين ما يحدث إذا تجاوز محتوى أحد العناصر مساحته

position

وضع عنصر في وضع ثابت أو نسبي أو مطلق أو ثابت

right

لتحديد مدى وصول الحافة اليمنى للعنصر إلى يسار / يمين الحافة اليمنى للعنصر الرئيسي

top

يحدد إلى أي مدى تكون الحافة العلوية للعنصر أعلى / أسفل الحافة العلوية للعنصر الرئيسي

vertical-align

لتعيين المحاذاة العمودية للعنصر

z-index

لتعيين ترتيب المكدس لعنصر

border-collapse

لتحديد ما إذا تم تصغير حدود الجدول إلى حد واحد أو فصله كما هو الحال في هتمل القياسي

border-spacing

يحدد المسافة التي تفصل حدود الخلية (فقط لنموذج â € œparparâ € ؟؟)

caption-side

لتعيين موضع تسمية الجدول

empty-cells

يحدد ما إذا كان سيتم عرض الخلايا الفارغة في جدول (فقط لنموذج â € œseparated borderâ € ؟؟)

table-layout

لتعيين الخوارزمية المستخدمة لعرض خلايا الجدول والصفوف والأعمدة

color

لتعيين لون النص

direction

لتعيين اتجاه النص

line-height

لتعيين المسافة بين الخطوط

letter-spacing

زيادة المسافة بين الأحرف أو تقليلها

text-align

لمحاذاة النص في عنصر

text-decoration

لإضافة زخرفة إلى نص

text-indent

يسرد السطر الأول من النص في عنصر

text-shadow

لإضافة ظل إلى نص

text-transform

للتحكم في الحروف في عنصر

unicode-bidi

white-space

لتعيين كيفية معالجة المسافة البيضاء داخل عنصر

word-spacing

زيادة أو تقليل المسافة بين الكلمات

اتصل بنا

حفر الباطن, المملكة العربية السعودية

majidacademy@gmail.com

+1(801)369-4595

دورة في CSS

التقنية الأساسية لتصميم و التنسيق CSS

اهداف الدورة:

مقدمة عن CSS

المهارات المكتسبة من الدورة كالتالي:

بعد نهاية الدورة سوف تكون قادر على تصميم موقع بهذا الشكل

قائمة تضم مجموعة كبيرة من الدالة/التاق مع وصف وظيفة التاق

اتصل بنا

التواصل الاجتماعي