لغة css : دورة أساسية عن أشهر لغات تصميم الويب

التقنية

2023-02-04 10:58:29 تم النشر بتاريخ

لغة css هي اختصار لـ Cascading Style Sheets ، حيث أنها لغة تنسيق وهيكلة لصفحات الويب. تصب اهتمامها الكامل على عملية التصميم مثل الألوان والأزرار والخطوط وتنسيقات التصميم الأخرى التي تحتويها هذه اللغة.

في هذه المقالة نقدم دورة أساسية عن أشهر لغات تصميم الويب لغة CSS. pde يمكن الاشارة إليها ايضًا بأنها صفحة الأنماط , فهي تمثل المكون المرئي لمستند ما.^[1]

ويمكن ربطها بلغات عديدة من ناحية التصميم بما في ذلك ملفات SVG وملفات XML التي يتم اعتمادها في الوقت الحالي في برمجة وتصميم الأجهزة الذكية وبعض الأماكن في أجهزة الحاسوب.^[1] كذلك الأمر بالنسبة لمواقع الويب حيث تساعد بالتعاون مع لغة جافا سكريبت و HTML في تغذية تصميم قوي وجذاب لواجهات الموقع.

على سبيل المثال , تمنحك لغة CSS جانب جيد في إدارة التصميم لصفحة الويب فهي تعمل على انها ملف يحفظ الامتداد الخاص بالهيكلة .css ومن ثم يتم الاتصال به جانبا دون فوضوية الصفحات الرئيسيه. وغالبا ما يتم الاتصال بها عن طريق ربط المصادر في ترويسة HTML الرئيسيه مع المحافظة على توحيد القيم أثناء الاتصال بها.

تمكنك لغة css من إحداث تغيير جذري على عناصر الصفحات جميعا وذلك من خلال الاشارة اليها بمعرفات أو كائنات يتم معاودة الاتصال بتلك العناصر من خلالها.

أيضا تساعدنا لغة CSS في بناء صفحات الويب الديناميكية وكذلك الصفحات الثابتة. تشكل تعليماتها البرمجية ناحية يمكن استغلالها في جمالية مواقع الويب خلال فترات البناء والتطوير.

ميزات لغة CSS

وسنذكر العديد من المزايا التي تتضمنها لغة css في صفحات الويب وهي:

تبسيط الصفحة بقدر ما هو ممكن وإجراء تعديلات على التصميم من خلال الوصول إلى بطاقة الألوان.
جعل الصفحة متوافقة مع جميع أحجام الشاشات ، مثل شاشات الحاسوب ووحدات التحكم وحتى الهواتف الذكية.
تعمل على تطوير وتكوين العديد من أنماط صفحات الويب أو السمات ، والتي تتيح للمستخدمين تغيير تلك الألوان وفقًا إلى أذواقهم.
الوصول إلى جميع محتويات الصفحات الكبيرة في بضعة أسطر وتعديلها حسب الرغبة.

تعريف صيغة عامة

call
{
   //html elements
}

ولأن هذه اللغة من اللغات المستخدمة في تطوير صفحات الويب ، فإن استخدامها يقتصر على:

- <div , p , ....> tags.
- Classes.
- ID's

عند الوصول إلى هذه العناصر ، تقوم اللغة بتنشيط الخصائص المذكورة في مساحة كتابة CSS3 ليتم تطبيقها بمجرد اتصالنا بصفحة HTML.

مثال

من فضلك ، لفهم لغة CSS جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<html>

<head>

<style>
div
{
    color:red;
}
</style>


</head>

<body>

<div>Hello World</div>
</ body >

</html>

css prefixes وطريقة تفعيل التوافق مع صفحات الويب

css prefixes هي إمكانية توافق كود CSS مع جميع المتصفحات التي تستخدم فيها صفحات الموقع، كما يتيح إمكانية حماية وعدم تعطيل كود css لصفحتنا عندما يتم إجراء تحديثات على المتصفحات بواسطة Google أو Mozilla أو غيرهما.

تعريف

csstag
{
  -prefixes "-your parameters"
}

أنواع css prefixes

يتم فحص هذه المعرفات بواسطة المتصفحات على الفور ، حيث يضمن المستعرض الخاص بك التحقق من وجودها قبل تشغيل صفحة الويب ، ولكل متصفح صيغة مختلفة مرفقة بكود css بجوار المتغير الذي نقوم بتعديله ، وهنا أنواعها:

-webkit-: الذي يدعم التوافق مع متصفحات جوجل كروم.
-moz-: الذي يدعم التوافق مع متصفحات Firefox.
-o-: الذي يدعم التوافق مع متصفحات Opera.
-ms-: الذي يدعم التوافق مع متصفحات Internet Explorer.

مثال

من فضلك ، لفهم بادئات البائع جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .html ثم قم بتشغيله في متصفحك.

<html>

<head>

<style>

div
{

    border:1px solid #CCC;
    width:30%;
    padding:50px;
    height:100px;
    margin:120px auto;
    background:#EEE;

    box-shadow:Horizontal Shadow | Vertical Shadow | blur | Spread | color | inset , outset;  /*This is Comment*/

    -moz-box-shadow:5px 5px 10px 10px #DDD;
    -webkit-box-shadow:5px 5px 10px 10px #DDD; /*inset;*/ ;/*inset puts the shadow inside the box */

    -o-box-shadow:5px 5px 10px 10px #DDD;
    box-shadow:5px 5px 10px 10px #DDD;
}

</style>


</head>

<body>

<div>Welcome To CSS3</div>
</ body >

</html>

ربط ملفات css

في مشاريع الويب الكبيرة ، قد نحتاج إلى استخدام الكثير من أكواد CSS التي تؤدي وظيفة تصميم لصفحة واحدة أو مجموعة صفحات. من خلال الوصول المباشر من أي صفحة إلى عنوان المعرف الفريد أو اسم الفئة في HTML ، كانت الحلول جيدة في ربط ملفات css منفصلة قادرة على الوصول إلى جميع عناصر وعلامات html.

تعريف

<head>
    <link rel='stylesheet' href='file.css' />
</head>

حيث يتم تضمين ملف CSS في رأس صفحة HTML ليتم قراءتها من ملف آخر ويجب أن يكون ملف css في نفس المجلد مثل ملف HTML.

فوائد ربط ملفات css

لدينا العديد من الفوائد التي سنكتسبها عند وضع CSS في ملف خاص وهي:

تنظيم وتقليل الكود من صفحتنا الرئيسية.
الوصول بسهولة إلى ملفات CSS في المشاريع الكبيرة.

مثال

من فضلك ، لفهم ملف الارتباط css جيدًا ، انسخ الأكواد التالية في الملف النصي ولا تنس تغيير امتداده إلى .css وتسميته بالملف حتى نتمكن من ربطه لاحقًا.

div
{
    width:200px;
    height:200px;
    background-color:#DDD;

    margin:20px auto;	/*This instruction for center margins*/



    /*I will use webkit tools to support	other than browser*/

    border-radius:50px;
}

من فضلك ، لفهم ملف ارتباط css جيدًا ، انسخ الأكواد التالية في ملف نصي جديد ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Link CSS File Source</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            This is normal Div
        </div>
    </body>

</html>

إضافة css overflow

إضافة css overflow ، وهو ما يسمى overflow ، وهذه الميزة في لغة css. و بالتالي يمكننا استخدامها لإخفاء بعض أجزاء النص لتنسيق الصفحة بشكل جيد ، ويعتمد ذلك على تحديد حجم معين للعلامة المراد تطبيقها لتجاوز ، ثم يتم إخفاء النصوص الطويلة المتبقية في العلامة.

تعريف

tag
{
    width:%value%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

tag:hover{
    overflow:visible;
}

تحتوي إضافة css overflow على خاصية hovering لـ css ، والتي بدورها تنشط تجاوز النص عندما يكون مؤشر الماوس عليه ، ويعتمد تجاوز css على عاملين رئيسيين:

حجم العلامة.
ضع القناع
يظهر الاختفاء عند Hover.

فوائد إضافة css overflow

سيؤدي التعامل مع علامات متعددة في html إلى تقليل المسافات في صفحة HTML الخاصة بنا ، وكان تجاوز CSS هو الحل الأفضل لإخفاء بعض حدود النص من صفحتنا. سنذكر بعض فوائد استخدام الفائض:

سهل الاستخدام.
التوافق عن طريق إنشاء علامات HTML سريعة الاستجابة.
حسن استخدام موارد الصفحة.
تغليف النصوص.

مثال

من فضلك ، لفهم overload CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Word Wrap, White Space</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <style>
    div
{
    background-color:#EEE;
    padding:10px;
    border:1px solid #CCC;
    width:300px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div:hover{
    overflow:visible;
}
    </style>

    <body>
        <div>
            <h3>Without break The word</h3>
            <p>file:///C:/Users/mutaSYS/Desktop/CSS/part8%20Text%20Overflow/Word%20Wrap,%20White%20Space.html</p>
        </div>
    </body>

</html>

الدوران في css و html

الدوران في css و html سنتحدث الآن عن كيفية عمل التفاف تلقائي للنص داخل العلامة. هذه الطريقة ليست كما كانت من قبل ، فهي الأكثر استخدامًا في معظم المواقع نظرًا للحاجة إلى وجود حدود في العديد من النصوص وهذا ما يتبناه css wrap والذي يقوم على رسم الحدود التلقائية للنص الذي نقوم به تريد أن تسقط في الأسفل تلقائيًا.

تعريف

HTML tag
{
    background-color:%color%;
    padding:%val%;
    border:%val% type of border %color%;
    width:%val%;

}

هذه هي الصيغة العامة المعروفة عند إنشاء علامة HTML والعمل على النزول تلقائيًا إلى سطر جديد ضمن حدود العلامات ، والذي يحتوي على:

الخلفية: حدد لونك بسهولة لعلامة HTML.
المساحة المتروكة: مسافات بين حدود النص وعلامات HTML من الخارج.
نوع الحد: الذي يحتوي على حجم خط الحدود ونوع الحد مثل الخط المتصل أو المنقط أو غيره.
عرض علامة HTML: ما هو حجم العلامة في صفحتنا.

فوائد الدوران في css و html

تتعدد فوائد استخدام التفاف CSS في قوالب HTML ، وتشمل:

إضافة ما نريد داخل النص دون مراعاة عرض العلامة.
سهولة الاستخدام ، وكثيرا ما يتم استخدامها.

والآن أوضحنا بعض خصائص التفاف css في استخدام النصوص ونأمل أن نكون قد قدمنا لك الفكرة جيدًا.

مثال

من فضلك ، لفهم التفاف CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Text Overflow</title>


        <style>
        div
            {
                background-color:#D9D9D9;
                padding:10px;
                border:2px solid #CCC;
                width:300px;
                white-space:normal;

            }

        </style>
    </head>

    <body>
        <div>This is Tajersys Website This is Tajersys Website School This is Tajersys Website School</div>
        <p>file:///   C:/Users/       mutaSYS/Desktop/CSS/part9%20Word%20Wrap,%20White%20Space/Text%20overflow.html</p>
    </body>

</html>

خاصية التحول CSS

خاصية التحول CSS هو أمر يتعلق بخصائص الرسوم المتحركة ، لكن هذا ممكن في CSS ، والتي لها مزايا قوية في صفحات الويب بشكل عام ، في هذا الدرس ، سنعرض ثلاثة أوامر رئيسية للرسوم المتحركة CSS حتى نتمكن من تطبيقها معًا.

تعريف

css.tag
{

    transform://do something;
}

في الواقع ، يعد تنفيذ التحويل أمرًا سهلاً للغاية في CSS ويظهر بناء الجملة هذا عملية استدعاء وظيفة التحويل للقيام بشيء ما.

أنواع خاصية التحول CSS

ينقسم التحويل في CSS إلى:

التدوير: هو عملية تدوير العناصر داخل HTML بغض النظر عن محتواها على الإطلاق.
الانحراف: انحراف العناصر بقيمة إحداثي س أو ص.
التحجيم: قم بتغيير حجم العناصر ليكون أكبر أو أصغر.

فوائدها

ستمكننا وظيفة التحويل في css من توفير الوقت للقيام بمهام التحويل السريع. عند استخدام الرسوم المتحركة لـ CSS ، ستكون قد وفرت الوقت باستخدام JavaScript ، على سبيل المثال ، وهذه إحدى ميزات CSS.

مثال

من فضلك ، لفهم تحويل CSS جيدًا ، انسخ الرموز التالية في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>2D Transform types in CSS</title>
        <style>

        #rot
{
    background-color:#D9D9D9;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:rotate(-30deg);

}


#sk
{
    background-color:#DD3135;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:skewY(20deg);

}

#scale
{
    background-color:#806565;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:scaleX(1.5);

}
        </style>
    </head>

    <body>
        <div>
            <h3 id = "rot">This is rotation</h3>
            <h3 id = "sk">This is skew</h3>
            <h3 id = "scale">This is scale</h3>
        </div>
    </body>

</html>

خصائص الإزاحة والتحويل في لغة CSS

لا تُستخدم مصفوفات CSS الرسوم المتحركة في CSS على نطاق واسع للتحويل ، ولكنها من الموضوعات التي يجب شرحها لأن القليل منا يعتمد على استخدامها ، فهي تعتمد على إعطاء قيم الحجم والانحراف والدوران ، تمامًا مثل الاتصال المباشر بهذه الوظائف ، وتقوم بهذا الدور من خلال ملء القيم بداخلها.

تعريف

transform matrix(a , b , c , d ,x, y);

الذي يعتمد على:

أ: مقياس س إحداثيات.
ب: انحراف إحداثيات ص.
ج: الانحراف x الإحداثيات.
د: مقياس إحداثيات ص.
x: تحويل موضع x.
y: تحويل موضع y.

فوائد مصفوفات CSS

مثال

من فضلك ، لفهم مصفوفة CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

#mat{
    width:200px;
    height:200px;

    background-color :#D9D9D9;

     transform: matrix(2, 0, 0, 2, 200, 200);

     transition:all .7s ease-in-out;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>2D Transform - Matrix</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div id = "mat">Hello World</div>
    </body>

</html>

استخدام transform perspective في CSS

تحدثنا عن المصفوفة في استخدامات متعددة ، وشرحنا التكبير والتصغير والانحراف والتدوير دون استخدام البعد الثالث ، والذي سنشرح في هذا الدرس ، كيف يتم استخدام المنظور ، وهي خدعة بسيطة في أبعاد الشاشة يتم الإستناد إليها في لغات الويب. لا تتصف هذه الخاصية بالتعقيد مقارنة مع اللغات المنخفضة ولكنها تقوم باستخدام توصيف معد مسبقًا في لغة CSS.

تعريف

تعمل جميع شاشات الأجهزة بنظام ثنائي الأبعاد ، ولكن عندما ننظر إلى الأبعاد الثلاثية ، ستختلف الكلمات قليلاً ، هذا علم قديم يتحدث عن معادلات المنظور ، وهي تمثيل الكائنات المرئية على سطح مستو. وهي اللوحة وهي غير مرتبطة بالواقع والفرق هو العمق Z الذي يؤدي هذه الحيلة الرائعة. في هذا الدرس ، سوف نلعب قليلاً مع إحداثيات z-deep ونطبق هذا المفهوم في CSS. إنه سهل للغاية على النحو التالي:

transform:translateZ(degree value);

لتمكين المنظور ثلاثي الأبعاد ، يجب علينا وضع قيمة في علامة html الخاصة بجسمنا على النحو التالي:

body{
    perspective:100px;
}

فوائد خصائص التحول

من أهم فوائد استخدام البعد الثالث في لغة CSS لدينا:

بناء صفحات جميلة سيحبها زوار موقعك.
الإستخدام على نطاق واسع في ألعاب الويب.
يعتمد على لغة JavaScript على مزايا CSS ، فهي ثنائية ناجحة.

مثال

من فضلك ، لفهم تحويل CSS 3d جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

body{
    perspective:100px;
}

.parent{
    width:300px;
    height:300px;
    margin:30px auto;
    position:relative;
    background-color:#E8E8E8;
    transition:all .8s ease-in-out;
    transform:rotateY(20deg);
    transform-style:preserve-3d;
}

.child{
    width:300px;
    height:300px;
    position:absolute;
    left:30px;
    top:30px;
    background-color:#D9D9D9;
    transform:translateZ(50px) transform:rotateY(45deg);
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>3D Transform - Transform Origin, Style</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "parent">

            <div class="child"></div>

        </div>

    </body>

</html>

إعداد css iteration

تحدثنا عن CSS keyframes ، وجربنا مثالاً وفهمنا كيف تعمل لغة CSS مع نقل علامات html. في الدرس السابق ذكرنا وظيفة الرسوم المتحركة بشكل عام حيث أنها تحتوي على الرسوم المتحركة وعدد الثواني اللازمة لتلك الرسوم المتحركة كما يلي:

animation: moving 10s ;

لكن في بعض الأحيان نحتاج إلى التجريد أثناء استخدام وظيفة الرسوم المتحركة ، على سبيل المثال ، نريد تخصيص الرسوم المتحركة لعلامة html محددة ، أو على سبيل المثال ، نريد تحديد عدد الثواني في سطر مختلف ، نريد أيضًا تحديد العدد number للتوقف عن تكرار علامة HTML الخاصة بنا ، وهذا ما سنتحدث عنه في هذا الدرس.

تعريف

عندما نصل إلى عدد المرات التي يتم فيها تنفيذ الحركة ، فإننا نستخدم هذه الوظيفة:

animation-iteration-count:infinite;

ولكي نجعل عدد الحركات محدودًا ، سوف نعطي أي قيمة عددية على النحو التالي:

animation-iteration-count:5;

هنا قمنا بتعيين عدد محدود من الرسوم المتحركة وهو 5 دورات فقط وهذا ما يميز الوصول إلى وظائف الرسوم المتحركة في CSS لأن هذا يجعل من السهل فهم الكود الخاص بنا.

فوائد

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

تخفيض وتنظيم أعداد الحركة إذا كان لدينا أكثر من وظيفة حركية.
تقليل موارد الذاكرة و استهلاك ذاكرة التخزين المؤقت للمتصفح مما يحافظ على سرعة صفحة الويب الخاصة بنا.

مثال

من فضلك ، لفهم تكرار CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.first{
    width: 100px;
    height: 100px;

    background-color:#F00;
    margin:20px auto;
    margin-top:300px;
    position:absolute;


    animation-name: moving; /*This is type of keyframe*/
    animation-duration: 3s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count*/

}


/*Animation functions*/
@keyframes moving{
    0% , 100% {
        top:200px;
        left:200px;
    }

    25%{
        top:200px;
        left:100px;
    }

    50%{
        top:200px;
        left:100px;
    }

    75%{
        top:200px;
        left:100px;
    }

}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Iteration </title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="first">This is first</div>
    </ body >

</html>

استخدام keyframes في لغة css

keyframes في لغة css هي احدى الطرق التي تساعدنا في استخدام مؤثرات التصميم في صفحات الويب وعناصر لغة HTML.

وبالتالي تمنحنا لغة CSS معالجة بسيطة وأكثر روعة للإطارات الرئيسية ، والإطار هو مقدار الوقت اللازم لتحريك الرسومات على الشاشة مع الحفاظ على نفس الكفاءة ، في هذا الدرس سننقل علامة HTML عبر CSS.

حيث تمنحك keyframes في لغة css إدارة للحركات عبر نظام نسبي وتتبع , فهي تعمل على تبديل حالة الرسم خلال مدة التفعيل.

keyframes في لغة css

يتم ادراج حركة الإطارات عن طريق التغيير التدريجي للقيم , وينطبق ذلك على أنماط css المتعددة.^[1] وبالتالي يتم تحديد حدوث تغيير النمط عن طريق النسبة المئوية والتي تقاس من 0% إلى 50% أو حتى 100%.^[1]

div
{
  animation: moving 10s ;
}

@keyframes moving{

    0% {
          /*your code here*/
         }
    100% {
        /*your code here*/
    }
}

على سبيل المثال , توفر لك الوصول إلى ميزة الحركة في وظيفة الرسوم المتحركة ، متبوعة بعدد الثواني أو كسور الثواني التي نريد استمرار العرض فيها. بالإضافة إلى مراحل تغيير العلامة التي يتم تعديلها في keyframes الحركية ، حيث تتجاوز النسبة بداية ونهاية المراحل من 0٪ إلى٪ 100.

فوائدها

لدى مفاتيح الإطارات في CSS فوائد عديدة يمكن تلخيصها في التالي:

تنسيق جميل ورائع للصفحة والمؤثرات , وبالتالي عودة الزائرين إلى صفحتنا.
تعمل بشكل مثالي مع لغة JavaScript.
القدرة على الاستخدام في الصور المصغرة مثل: أيقونة التحميل ، العد التنازلي ، إلخ..

عند التحكم بإعدادات HTML ستحصل على مؤثرات حركية جانبية الصفحات , مما يدعو إلى التعرف على خصائص العناصر واكتشاف المزيد من قدرات صفحة الويب. ولربما تستطيع أيضًا دمج لغة جافا سكريبت في مؤثرات الصفحة لتبدي بذلك بعض الجوانب الرائعة في برمجة العناصر.

مثال

من فضلك ، لفهم keyframes في لغة css جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width: 100px;
    height: 100px;
    color:#FFFFFF;
    text-align:center;
    background-color:#D9D9D9;


    position:absolute;



    animation: moving 10s ;
}


/*Animation functions*/
@keyframes moving{
    0% {
        top:0;
        left:0;
        background-color:#D9D9D9;
    }

    25%{
        top:0;
        left:1000px;
        background-color:#893E3E;
    }

    50%{
        top:200px;
        left:100px;
        background-color:#8CA7B6;
    }

    75%{
        top:200px;
        right:100px;
        background-color:#2C5B76;
    }

    100%{
        top:150px;
        right:75px;
        background-color:#70F3F8;
    }
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>  CSS Keyframes</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Welcome to CSS keyframe
        </div>
    </ body >

</html>

لا يقف الأمر على حركة العناصر فحسب , على سبيل المثال , فقد نحتاج إلى تصغير وتكبير الخطوط وتغيير ألوانها أو ربما اضافة عناصر أخرى لم تكن موجودة من ذي قبل.

إنشاء أعمدة css

في دروس أخرى، تحدثنا عن الأعمدة المتعددة في CSS وقدمنا مثالًا سريعًا على كيفية تقسيم النص في علامة HTML ، في هذا الدرس سنضيف بعض ميزات التصميم البسيطة إلى الكود السابق.

تعريف

سنقوم بإضافة بعض التغييرات على النص الخاص كما في الكود التالي:

    /*Width*/
column-rule-width: 4px;

/*Style*/
column-rule-style: dashed;

/*color*/
column-rule-color: #D9D9D9;

عرض قاعدة العمود: الذي يحتوي على عرض الأسطر المنفصلة بين الفقرة.
نمط قاعدة العمود: الذي يحتوي على نوع من الأسطر المنفصلة ، توفره CSS كنوع مثل: متقطع ، أو منقط.
لون قاعدة العمود: الذي يشير إلى لون هذه الخطوط المنفصلة.

فوائد إنشاء أعمدة css

يمكننا تلخيص فوائد استخدام الأعمدة المتعددة من أجل:

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

مثال

من فضلك ، لفهم أسلوب CSS متعدد الأعمدة جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    border:1px solid #D9D9D9;
    padding: 10px;
    -webkit-column-count:3;
    column-count:3;
    -webkit-column-gap: 50px;
    column-gap: 50px;

    /*Width*/			/*Here*/
    column-rule-width: 4px;

    /*Style*/
    column-rule-style: dashed;

    /*color*/
    column-rule-color: #D9D9D9;


}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>

أعمدة CSS متعددة

أعمدة CSS متعددة من الأشياء التي لا تخفى عن هذه اللغة في التصميم ، حيث إنها ميزة جيدة لدعم الشاشات الكبيرة أثناء قراءة عدد كبير من السطور ، وتعتمد هذه الفكرة على تقسيم نص كبير إلى مجموعة من نصوص في نفس سياق المجلات الورقية.

تعريف

column-count:2;
column-gap: 70px;

</pre > حيث يشير عدد الأعمدة إلى عدد الأعمدة التي نريد تقسيم النص إليها ، بينما تشير فجوة العمود إلى المسافات الفارغة بين العمودين.

فوائد أعمدة CSS متعددة

هناك فوائد عديدة في تقسيم النصوص إلى أعمدة ، وهي:

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

مثال

من فضلك ، لفهم CSS متعدد الأعمدة جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{

    column-count:3;
    column-gap: 100px;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Multi Columns</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.

            Text messaging, or texting, is the act of composing and sending electronic messages,
            typically consisting of alphabetic and numeric characters,
            between two or more users of mobile devices, desktops/laptops, or other type of compatible computer.
            Text messages may be sent over a cellular network, or may also be sent via an Internet connection.
        </div>
    </body>

</html>

تفعيل الزمن في لغة CSS أثناء التصميم

ميزة الإنتقال CSS توفر لنا العديد من المزايا الموجودة في مكتبات الرسومات الأخرى , حيث أنها تعتمد على التحويل والتغيير عبر مؤقت الإطارات ، ما يسمح للعناصر بالظهور بطريقة لافتة للنظر.

تعريف

تحتوي ميزة الإنتقال CSS على مؤقت بسيط يتم استدعاؤه بسهولة شديدة ويحتوي بشكل عام على بناء جملة أساسي:

transition:all 1.5s ;

تعتمد وظيفة الانتقال على إجراء بعض التعديلات على علامات ووسوم HTML الخاصة التي تحتوي عليها ، حيث تنقسم عناصرها الأساسية إلى:

جميع الوسوم: هي القيمة المحددة تلقائيًا ، والتي تشير إلى أنه تم إجراء تعديلات على جميع العناصر دون استثناء ، حيث يمكننا تعديلها إلى أي عنصر وإضافة الانتقال الخاص به.
الثواني: ويشير إلى الوقت الذي يستغرقه التغيير ، بما فيها عدد الثواني والفترة الزمنية.

فوائد ميزة الإنتقال CSS

هناك العديد من الفوائد التي سنجدها عند استخدام الانتقال وهي:

إضافة ميزات وجماليات للمحتوى بطريقة رائعة.
تنسيق علامات HTML مع الحفاظ على المظهر العام للصفحة.

عيوب استخدام ميزة الإنتقال CSS

كالعادة ، هناك نقاط ضعف وقوة في جميع الأدوات ، وسنذكر العيوب المتعلقة بـ ميزة الإنتقال ، وهي:

بطىء عند تحميل محتويات الصفحة.
مشاكل الاستجابة للأجهزة الطرفية والشاشات الصغيرة ما يجعلها محدودة الاستخدام.

مثال

من فضلك ، لفهم ميزة الإنتقال جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:100px;
    height:100px;
    text-align:center;
    background-color:#D9D9D9;
    margin: 50px Auto;
    color:#FFFFFF;
    transition:all 1.5s , background-color 6s;
}

div:hover{
    width:200px;
    height:200px;
    background-color:#390505;
    font-size : 30px;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Transition</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>Welcome To CSS</div>
    </body>

</html>

استخدام justify في صفحة الويب

نعلم أن علامات HTML عمودية ، مما يعني أنه كلما أضفنا علامة HTML ، يحتفظ محتواها بسطر جديد في مساحة صفحتنا ، ولكن ماذا لو وضعنا أكثر من علامة HTML أفقيًا ، وهذا ما سنتحدث عنه في هذا الدرس.

تعريف

.container{
    //coordinates

    display:flex;
    flex-direction: row;
}

توفر محاذاة CSS اتجاه عرض وطريقة لجعل العلامات تظهر بجانب بعضها البعض من خلال حافظة خاصة في العرض ، والتي تأخذ خصائص ونوع العرض في صفحتنا ، وما يوجد داخل الحاوية فقط هو الذي يطبق تلك الخصائص ، و ما هو خارج يبقى خارج التنسيق.

فوائد

استخدام محاذاة المحتوى لها فوائد عديدة يمكن تلخيصها على النحو التالي:

استغلال مساحة الشاشات الكبيرة عن طريق ملء الفراغات اليمنى والوسطى.
ضغط المحتوى لاستيعاب أكبر عدد من العلامات لتقليل التنسيق الرديء على شاشات متعددة.
تشكيل نوع وطبيعة المعلومات التي تظهر بشكل دائم والحفاظ على التحديثات لتظهر للمستخدمين بسرعة.

سلبيات محاذاة css

كما هو معتاد في التكنولوجيا ، هناك إيجابيات وسلبيات. من عيوب استخدام تبرير المحتوى:

صعوبة التحكم في طريقة العرض في الهواتف المحمولة ، لأن تصفح الهواتف المحمولة يعتمد على الارتفاع وليس العرض ، ويكاد يكون من المؤكد أن خاصية التبرير تفقد خصائصها أثناء استخدامها على الهاتف.
فقدان التحكم في الصفحات الكبيرة التي تحتوي على قواعد بيانات أثناء تضمين لغات البرمجة الأخرى في المشروع.

مثال

من فضلك ، لفهم CSS Justify جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.container{
    width:800px;
    margin:50px auto;
    background-color:#D9D9D9;
    display:flex;
    flex-direction: row;
}

.container div{
    background-color:#592C2C;
    color:#FFF;
    width:200px;
    height:100px;
    padding:10px;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS  Flex Flow | Justify Content</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div>Div1</div>
            <div>Div2</div>
            <div>Div3</div>
        </div>

    </body>

</html>

شفافية الحدود css

هذه خاصية للرسومات وتشير إلى إعطاء قيمة في دالة للقيام بمعادلة حسابية بسيطة للحصول على نتيجة معامل المظهر أو العتامة والشيء الجميل هو أن لغة CSS تحتوي على هذه الخاصية لاستخدامها في صفحاتنا.

تعريف

للشفافية استخدامات عديدة ، كما قلنا ، لكن تسميتها في CSS بسيطة جدًا:

Opacity:value;

يتم استدعاؤها في قيمة من 0 عشري إلى 1 عدد صحيح ، وكلما اقتربت القيمة من 1 كانت أقرب إلى الوضوح.

فوائد

استخدام التعتيم له فوائد عديدة منها:

يتم استخدامها في المكونات الجانبية على الصفحة وليس لها فائدة كبيرة.
يستخدم على نطاق واسع في الصور المصغرة.
علامات Html النشطة وغير النشطة مثل القوائم أو الأقسام.

مثال

من فضلك ، لفهم عتامة CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:0.4;

}

div:hover{
    width:500px;
    height:100px;
    padding:10px;
    background-color:#D9D9D9;
    Opacity:1;

}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS Opacity</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            This is our opacity div
        </div>
    </body>

</html>

ترتيب CSS

تتميز CSS ببعض الأدوات الخاصة التي يجب أن تتحكم في طريقة عمل HTML. إحدى هذه الأدوات هي أداة الفرز التي تتيح لنا إعادة ترتيب مظهر العلامات وإعطاء الأولوية في التسلسل.

تعريف

يعتمد مبدأ الطلب في CSS على فكرة إعطاء الأولوية للعرض داخل الحاوية الخاصة التي تحتوي على جميع علامات HTML مثل:

.container{
    //Formats
}

.container .one{
    //formats
}

.container .two{
    //formats
}

حيث يتم إنشاء حاوية خاصة ووضع العديد من العلامات بداخلها ثم نبدأ بإعطاء الأولوية للعلامات كما نريد.

مثال

من فضلك ، لفهم ترتيب CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.container{
    width:200px;
    height:500px;
    margin:50px auto;
    background-color:#B6DCEC;
    display:flex;
    flex-wrap:wrap;

}

.container div{
    color:#FFFFFF;
    width:200px;
    height:100px;
    padding:10px;

}

.container .one{
    background-color:#DD3135;
    order: 3
}

.container .two{
    background-color:#83C6E7;
    order:1
}

.container .three{
    background-color:#FFDE59;
    order:2
}

.container .four{
    background-color:#B6DCEC;
    order:4
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS ordering</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "container">
            <div class="one">Div 1</div>
            <div class="two">Div 2</div>
            <div class="three">Div 3</div>
            <div class="four">Div 4</div>
        </div>

    </body>

</html>

عجلة scrollbar

نحتاج أحيانًا إلى وضع نص كبير داخل الصفحة ، وبما أن كتابة النصوص تعتمد على كتابتها لتنتقل إلى سطر جديد ، كان علينا إخفاء النص والتحكم في نزوله من خلال شريط التمرير ، وقد وفرت لنا CSS هذا الأمر الأكثر روعة أداة لاستخدامها في صفحة HTML الخاصة بنا.

تعريف

يتم تعريف شريط التمرير (عجلة scrollbar) واستخدامه على النحو التالي:

overflow-x:hidden;

حيث يكون التركيز على وصول إحداثيات x إلى حدود العلامة المستخدمة في HTML ، وعندما يحدث الاتصال ، سينخفض النص تلقائيًا مع تنشيط عجلة التمرير ، والتي تظهر غالبًا على الجانب الأيمن.

فوائد عجلة scrollbar

سنذكر فوائد استخدام شريط التمرير على صفحتنا وهي:

وضع العناصر وإجبارها على عدم الخروج من العلامات.
زيادة محتوى صفحة الويب الخاصة بنا بشكل غير مخفي ، مما يمنح الزائرين خيار إظهار النصوص أو تجاهلها.
حافظ على تصميم جميل ومتسق للصفحة وساعد في الاختيار المتعدد.
القيام بتضمين عدد كبير جدًا من الروابط الواردة على الصفحة لإجبار الزوار على البقاء في الموقع.
تضمين شريط التمرير في أي محتوى HTML من أي نوع.
شريط تمرير محتوى متعدد تحت شريط تمرير الصفحة الرئيسية.

مثال

من فضلك ، لفهم شريط التمرير CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width:200px;
    height:400px;
    padding:10px;
    background-color:#EEE;
    border: 1px solid #CCC;
    overflow-x:hidden;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS scrollbar Overflow</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            1.This is Our main line first long sentences This is Our main line first long sentences<br/>
            2.This is Our main line first long sentences This is Our main line first long sentences<br/>
            3.This is Our main line first long sentences This is Our main line first long sentences<br/>
            4.This is Our main line first long sentences This is Our main line first long sentences<br/>
            5.This is Our main line first long sentences This is Our main line first long sentences<br/>
            6.This is Our main line first long sentences This is Our main line first long sentences<br/>
            7.This is Our main line first long sentences This is Our main line first long sentences<br/>
            8.This is Our main line first long sentences This is Our main line first long sentences<br/>
        </div>
    </body>

</html>

استخدام الخلفيات Background

استخدام الخلفيات Background في درس بسيط جدا. تخيل أنك أنشأت علامة HTML تحتوي على بيانات معينة وتريد إرفاق صورة بها. ستختار الصورة المناسبة لهذه العلامة وهذا ما سنفعله باستخدام CSS.

تعريف

our div
{
  background:url('');
}

من أجل إنشاء صورة خلفية لعلامة HTML الخاصة بنا ، نضع عنوان URL للصورة التي نريد تنشيطها في الخلفية: url وسيتم عرض الصورة داخل حدود علامة HTML التي حددناها.

خصائص استخدام الخلفيات CSS

هناك عدة خصائص يجب مراعاتها عند إضافة صورة خلفية وهي:

العرض والارتفاع: يوصى بتعيين حجم العرض أو الارتفاع الخاص بك.
النصوص: عند إضافة بعض علامات النص ، يُفضل إعطاء ألوان مختلفة لتظهر بوضوح شديد.

الاستخدامات

تُستخدم صور الخلفية بشكل متكرر في بعض أجزاء موقعنا على الويب ، وهي:

الصفحة الرئيسية: تستخدم العديد من المواقع صور الخلفية على الصفحة الرئيسية ، مما يعكس انطباعًا جميلًا للزوار.
الشبكة GRID: نحتاج إلى استخدام صور الخلفية عند استخدام الشبكة ، وتظهر كفاءة الصورة عالية جدًا عند استدعاء العناوين والمعلومات من قواعد البيانات.

مثال

من فضلك ، لفهم خلفية CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

.background{
    width:400px;
    height:200px;

    float:left;
    background:url('https://www.lifewire.com/thmb/Jr8JLKAqhDSa4sobdYe7LX-0QA0=/774x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/surf-internet-url-henrik5000-e-getty-images-56fa7f855f9b5829867282a9.jpg');
    background-size:cover;
    border-radius:5px;

}


p{
    background-color:#D9D9D9;
    font-size:24px;
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> CSS Background</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class="background">
            <p>Hello i am <a href="https://tajersys.com">tajersys.com </a>and i will show you how to use background in css</p>
        </div>

    </body>

</html>

استخدام البطاقات css

استخدام البطاقات css يتطلب ادراك بعض المهام البسيطة حول البعد الثالث في CSS ، والذي ساعدنا على فهم العمق ، وهو ثلث المتغيرات ثلاثية الأبعاد ، وفي هذا الدرس سنطبق مثالاً باستخدام المنظور باستخدام بطاقات CSS القلابة.

تعريف

تحتوي بطاقة CSS flip على علامتي HTML داخل علامة رئيسية تديرها عند تمكين ميزة CSS 3D-Perspective ، والتي غالبًا ما تكون هكذا في معظم العلامات:

.MainTag{

}

front tag{

}

back tag{

}

هذه ثلاث علامات رئيسية في جميع البطاقات في CSS تحتوي على:

الأساسي: يتم تحديد حجم وأبعاد البطاقة بداخلها ، مثل العرض والارتفاع والرسوم المتحركة والألوان.
الجبهة: ونقوم ببناء الوجه الأمامي للبطاقة ونقوم بإعداد الصيغ اللازمة.
رجوع: ونحدد ظهر البطاقة بنفس الخصائص التي ذكرناها سابقاً.

فوائد استخدام البطاقات css

استخدام بطاقات العرض في CSS له مزايا عديدة وهي:

مظهر جميل لتصميم صفحتنا في CSS.
استغلال أكبر قدر ممكن من المساحة على الصفحة بإخفاء بعض الميزات أو إظهارها فجأة.
استفد من خصائص البعد الثالث.

مثال

من فضلك ، لفهم بطاقة CSS Flip بشكل جيد ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

body{
    perspective:500px;
}


.default{
    width:350px;
    height:300px;
    margin:100px auto;
    position:relative;
    transition: all .8s ease-in-out;
    transform-style:preserve-3d;
}

.default:hover{
    transform: rotateY(180deg);
}

 div{
    position:absolute;
    left:0;
    top:0;
    border-radius:10px;
    width:100%;
    height:100%;
    line-height:300px;
    color:#D9D9D9;
    font-size:40px;
    text-align:center;
}

.front{
    background-color:#38B6FF;
}

.back{
    background-color:#FF5757;
    transform:rotateY(180deg);
}

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title> 3D Transform Filp Card CSS</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div class = "default">
            <div class="front"> This is front</div>

تمت الكتابة بواسطة : محمد

آخر تحديث : 2023-02-04 10:59:09