لغة css هي اختصار لـ Cascading Style Sheets ، حيث أنها لغة تنسيق وهيكلة لصفحات الويب. تصب اهتمامها الكامل على عملية التصميم مثل الألوان والأزرار والخطوط وتنسيقات التصميم الأخرى التي تحتويها هذه اللغة.
في هذه المقالة نقدم دورة أساسية عن أشهر لغات تصميم الويب لغة CSS. pde يمكن الاشارة إليها ايضًا بأنها صفحة الأنماط , فهي تمثل المكون المرئي لمستند ما.[1]
ويمكن ربطها بلغات عديدة من ناحية التصميم بما في ذلك ملفات SVG وملفات XML التي يتم اعتمادها في الوقت الحالي في برمجة وتصميم الأجهزة الذكية وبعض الأماكن في أجهزة الحاسوب.[1]
كذلك الأمر بالنسبة لمواقع الويب حيث تساعد بالتعاون مع لغة جافا سكريبت و HTML في تغذية تصميم قوي وجذاب لواجهات الموقع.
على سبيل المثال , تمنحك لغة CSS جانب جيد في إدارة التصميم لصفحة الويب فهي تعمل على انها ملف يحفظ الامتداد الخاص بالهيكلة .css ومن ثم يتم الاتصال به جانبا دون فوضوية الصفحات الرئيسيه.
وبالتالي غالبا ما يتم الاتصال بها عن طريق ربط المصادر في ترويسة HTML الرئيسيه مع المحافظة على توحيد القيم أثناء الاتصال بها.
تمكنك لغة css من إحداث تغيير جذري على عناصر الصفحات جميعا وذلك من خلال الاشارة اليها بمعرفات أو كائنات يتم معاودة الاتصال بتلك العناصر من خلالها.
أيضا تساعدنا لغة CSS في بناء صفحات الويب الديناميكية وكذلك الصفحات الثابتة. تشكل تعليماتها البرمجية ناحية يمكن استغلالها في جمالية مواقع الويب خلال فترات البناء والتطوير.
call
{
//html elements
}
ولأن هذه اللغة من اللغات المستخدمة في تطوير صفحات الويب ، فإن استخدامها يقتصر على:
عند الوصول إلى هذه العناصر ، تقوم اللغة بتنشيط الخصائص المذكورة في مساحة كتابة CSS3 ليتم تطبيقها بمجرد اتصالنا بصفحة HTML.
من فضلك ، لفهم لغة CSS جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .html ثم تشغيله في متصفحك.
<html> <head> <style> div { color:red; } </style> </head> <body> <div>Hello World</div> </ body > </html>
css prefixes هي إمكانية توافق كود CSS مع جميع المتصفحات التي تستخدم فيها صفحات الموقع.
وبالتالي يتيح إمكانية حماية وعدم تعطيل كود css لصفحتنا عندما يتم إجراء تحديثات على المتصفحات بواسطة Google أو Mozilla أو غيرهما.
csstag { -prefixes "-your parameters" }
يتم فحص هذه المعرفات بواسطة المتصفحات على الفور.
حيث يضمن المستعرض الخاص بك التحقق من وجودها قبل تشغيل صفحة الويب ، ولكل متصفح صيغة مختلفة مرفقة بكود css بجوار المتغير الذي نقوم بتعديله ، وهنا أنواعها:
من فضلك ، لفهم بادئات البائع جيدًا ، انسخ الكود التالي في ملف نصي ولا تنس تغيير امتداده إلى .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 التي تؤدي وظيفة تصميم لصفحة واحدة أو مجموعة صفحات.
ويتم ذلك عبر الوصول المباشر من أي صفحة إلى عنوان المعرف الفريد أو اسم الفئة في HTML. وبالتالي فقد كانت الحلول جيدة في ربط ملفات css منفصلة قادرة على الوصول إلى جميع عناصر وعلامات html.
<head> <link rel='stylesheet' href='file.css' /> </head>حيث يتم تضمين ملف CSS في رأس صفحة HTML ليتم قراءتها من ملف آخر ويجب أن يكون ملف css في نفس المجلد مثل ملف HTML.
من فضلك ، لفهم ملف الارتباط 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 ، وهو ما يسمى overflow ، وهذه الميزة في لغة css.
و بالتالي يمكننا استخدامها لإخفاء بعض أجزاء النص لتنسيق الصفحة بشكل جيد ، ويعتمد ذلك على تحديد حجم معين للعلامة المراد تطبيقها لتجاوز ، ثم يتم إخفاء النصوص الطويلة المتبقية في العلامة.
tag { width:%value%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } tag:hover{ overflow:visible; }تحتوي إضافة css overflow على خاصية hovering لـ css ، والتي بدورها تنشط تجاوز النص عندما يكون مؤشر الماوس عليه ، ويعتمد تجاوز css على عاملين رئيسيين:
من فضلك ، لفهم 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 wrap. حيث يقوم على رسم الحدود التلقائية للنص الذي نقوم به تريد أن تسقط في الأسفل تلقائيًا.
HTML tag { background-color:%color%; padding:%val%; border:%val% type of border %color%; width:%val%; }هذه هي الصيغة العامة المعروفة عند إنشاء علامة 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.tag { transform://do something; }في الواقع ، يعد تنفيذ التحويل أمرًا سهلاً للغاية في CSS ويظهر بناء الجملة هذا عملية استدعاء وظيفة التحويل للقيام بشيء ما.
ستمكننا وظيفة التحويل في 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 على نطاق واسع للتحويل.
لكنها من الموضوعات التي يجب شرحها لأن القليل منا يعتمد على استخدامها.
على سبيل المثال فهي تعتمد على إعطاء قيم الحجم والانحراف والدوران.
تمامًا مثل الاتصال المباشر بهذه الوظائف ، وتقوم بهذا الدور من خلال ملء القيم بداخلها.
transform matrix(a , b , c , d ,x, y);الذي يعتمد على:
ستمكننا وظيفة التحويل في css من توفير الوقت للقيام بمهام التحويل السريع.
عند استخدام الرسوم المتحركة لـ CSS ، ستكون قد وفرت الوقت باستخدام JavaScript ، على سبيل المثال ، وهذه إحدى ميزات CSS.
من فضلك ، لفهم مصفوفة CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
#mat{ width:200px; height:200px; background-color :#D9D9D9; transform: matrix(2, 0, 0, 2, 200, 200); transition:all .7s ease-in-out; }
<!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>
تحدثنا عن المصفوفة في استخدامات متعددة ، وشرحنا التكبير والتصغير والانحراف والتدوير دون استخدام البعد الثالث.
بالتالي سوف نشرح في هذا الدرس ، كيف يتم استخدام المنظور, وهي خدعة بسيطة في أبعاد الشاشة يتم الإستناد إليها في لغات الويب.
لا تتصف هذه الخاصية بالتعقيد مقارنة مع اللغات المنخفضة ولكنها تقوم باستخدام توصيف معد مسبقًا في لغة CSS.
تعمل جميع شاشات الأجهزة بنظام ثنائي الأبعاد ، ولكن عندما ننظر إلى الأبعاد الثلاثية.
الآن تختلف الكلمات قليلاً ، هذا علم قديم يتحدث عن معادلات المنظور وهي تمثيل الكائنات المرئية على سطح مستو.
تعتبر اللوحة وهي غير مرتبطة بالواقع والفرق هو العمق Z الذي يؤدي هذه الحيلة الرائعة.
في هذا الدرس ، سوف نلعب قليلاً مع إحداثيات z-deep ونطبق هذا المفهوم في CSS. إنه سهل للغاية على النحو التالي:
transform:translateZ(degree value);لتمكين المنظور ثلاثي الأبعاد ، يجب علينا وضع قيمة في علامة html الخاصة بجسمنا على النحو التالي:
body{ perspective:100px; }
من فضلك ، لفهم تحويل CSS 3d جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
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); }
<!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 keyframes ، وجربنا مثالاً وفهمنا كيف تعمل لغة CSS مع نقل علامات html.
في الدرس السابق ذكرنا وظيفة الرسوم المتحركة بشكل عام حيث أنها تحتوي على الرسوم المتحركة وعدد الثواني اللازمة لتلك الرسوم المتحركة كما يلي:
animation: moving 10s ;
لكن في بعض الأحيان نحتاج إلى التجريد أثناء استخدام وظيفة الرسوم المتحركة ، على سبيل المثال ، نريد تخصيص الرسوم المتحركة لعلامة html محددة.
على سبيل المثال ، نريد تحديد عدد الثواني في سطر مختلف ، وأيضًا تحديد العدد number للتوقف عن تكرار علامة HTML الخاصة بنا.
وهذا ما سنتحدث عنه في هذا الدرس.
animation-iteration-count:infinite;ولكي نجعل عدد الحركات محدودًا ، سوف نعطي أي قيمة عددية على النحو التالي:
animation-iteration-count:5;هنا قمنا بتعيين عدد محدود من الرسوم المتحركة وهو 5 دورات فقط وهذا ما يميز الوصول إلى وظائف الرسوم المتحركة في 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; } }
<!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 هي احدى الطرق التي تساعدنا في استخدام مؤثرات التصميم في صفحات الويب وعناصر لغة HTML.
وبالتالي تمنحنا لغة CSS معالجة بسيطة وأكثر روعة للإطارات الرئيسية.
يعبر الإطار Frame عن مقدار الوقت اللازم لتحريك الرسومات على الشاشة مع الحفاظ على نفس الكفاءة.
في هذا الدرس سننقل علامة HTML عبر 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.
عند التحكم بإعدادات HTML ستحصل على مؤثرات حركية جانبية الصفحات , مما يدعو إلى التعرف على خصائص العناصر واكتشاف المزيد من قدرات صفحة الويب.
ولربما تستطيع أيضًا دمج لغة جافا سكريبت في مؤثرات الصفحة لتبدي بذلك بعض الجوانب الرائعة في برمجة العناصر.
من فضلك ، لفهم keyframes في لغة 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; } }
<!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 وقدمنا مثالًا سريعًا على كيفية تقسيم النص في علامة HTML ، في هذا الدرس سنضيف بعض ميزات التصميم البسيطة إلى الكود السابق.
/*Width*/ column-rule-width: 4px; /*Style*/ column-rule-style: dashed; /*color*/ column-rule-color: #D9D9D9;
من فضلك ، لفهم أسلوب 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; }
<!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 متعددة من الأشياء التي لا تخفى عن هذه اللغة في التصميم.
حيث إنها ميزة جيدة لدعم الشاشات الكبيرة أثناء قراءة عدد كبير من السطور.
وبالتالي تعتمد هذه الفكرة على تقسيم نص كبير إلى مجموعة من نصوص في نفس سياق المجلات الورقية.
column-count:2; column-gap: 70px;</pre > حيث يشير عدد الأعمدة إلى عدد الأعمدة التي نريد تقسيم النص إليها ، بينما تشير فجوة العمود إلى المسافات الفارغة بين العمودين.
من فضلك ، لفهم CSS متعدد الأعمدة جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
div{ column-count:3; column-gap: 100px; }
<!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 توفر لنا العديد من المزايا الموجودة في مكتبات الرسومات الأخرى , حيث أنها تعتمد على التحويل والتغيير عبر مؤقت الإطارات ، ما يسمح للعناصر بالظهور بطريقة لافتة للنظر.
transition:all 1.5s ;تعتمد وظيفة الانتقال على إجراء بعض التعديلات على علامات ووسوم HTML الخاصة التي تحتوي عليها ، حيث تنقسم عناصرها الأساسية إلى:
كالعادة ، هناك نقاط ضعف وقوة في جميع الأدوات ، وسنذكر العيوب المتعلقة بـ ميزة الإنتقال ، وهي:
من فضلك ، لفهم ميزة الإنتقال جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
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; }
<!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>
نعلم أن علامات HTML عمودية ، مما يعني أنه كلما أضفنا علامة HTML ، يحتفظ محتواها بسطر جديد في مساحة صفحتنا.
لكن ماذا لو وضعنا أكثر من علامة HTML أفقيًا ، هذا ما سنتحدث عنه في هذا الدرس.
.container{ //coordinates display:flex; flex-direction: row; }
توفر محاذاة CSS اتجاه عرض وطريقة لجعل العلامات تظهر بجانب بعضها البعض من خلال حافظة خاصة في العرض.
ومع ذلك فهي تأخذ خصائص ونوع العرض في صفحتنا ، وما يوجد داخل الحاوية فقط هو الذي يطبق تلك الخصائص ، و ما هو خارج يبقى خارج التنسيق.
كما هو معتاد في التكنولوجيا ، هناك إيجابيات وسلبيات. من عيوب استخدام تبرير المحتوى:
من فضلك ، لفهم CSS Justify جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
.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; }
<!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 تحتوي على هذه الخاصية لاستخدامها في صفحاتنا.
Opacity:value;يتم استدعاؤها في قيمة من 0 عشري إلى 1 عدد صحيح ، وكلما اقتربت القيمة من 1 كانت أقرب إلى الوضوح.
من فضلك ، لفهم عتامة 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; }
<!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 ببعض الأدوات الخاصة التي يجب أن تتحكم في طريقة عمل HTML. إحدى هذه الأدوات هي أداة الفرز التي تتيح لنا إعادة ترتيب مظهر العلامات وإعطاء الأولوية في التسلسل.
.container{ //Formats } .container .one{ //formats } .container .two{ //formats }حيث يتم إنشاء حاوية خاصة ووضع العديد من العلامات بداخلها ثم نبدأ بإعطاء الأولوية للعلامات كما نريد.
من فضلك ، لفهم ترتيب 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 }
<!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>
نحتاج أحيانًا إلى وضع نص كبير داخل الصفحة ، وبما أن كتابة النصوص تعتمد على كتابتها لتنتقل إلى سطر جديد.
لقد كان علينا إخفاء النص والتحكم في نزوله من خلال شريط التمرير ، وقد وفرت لنا CSS هذا الأمر الأكثر روعة أداة لاستخدامها في صفحة HTML الخاصة بنا.
overflow-x:hidden;حيث يكون التركيز على وصول إحداثيات x إلى حدود العلامة المستخدمة في HTML ، وعندما يحدث الاتصال ، سينخفض النص تلقائيًا مع تنشيط عجلة التمرير ، والتي تظهر غالبًا على الجانب الأيمن.
من فضلك ، لفهم شريط التمرير CSS جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
div{ width:200px; height:400px; padding:10px; background-color:#EEE; border: 1px solid #CCC; overflow-x:hidden; }
<!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 في درس بسيط جدا.
تخيل أنك أنشأت علامة HTML تحتوي على بيانات معينة وتريد إرفاق صورة بها. ستختار الصورة المناسبة لهذه العلامة وهذا ما سنفعله باستخدام CSS.
our div { background:url(''); }من أجل إنشاء صورة خلفية لعلامة HTML الخاصة بنا ، نضع عنوان URL للصورة التي نريد تنشيطها في الخلفية: url وسيتم عرض الصورة داخل حدود علامة HTML التي حددناها.
تُستخدم صور الخلفية بشكل متكرر في بعض أجزاء موقعنا على الويب ، وهي:
من فضلك ، لفهم خلفية 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; }
<!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 القلابة.
.MainTag{ } front tag{ } back tag{ }هذه ثلاث علامات رئيسية في جميع البطاقات في CSS تحتوي على:
من فضلك ، لفهم بطاقة CSS Flip بشكل جيد ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.
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); }
<!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>
المراجع