منتديات رحيل لكل العرب

منتديات رحيل لكل العرب (https://r7il.com/vb/)
-   قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress (https://r7il.com/vb/f20/)
-   -   طريقة استخدام css في الصفحة (https://r7il.com/vb/t3556/)

الفارس 05-04-2019 01:31 PM

طريقة استخدام css في الصفحة
 
طريقة استخدام CSS في الصفحة
توجد ثلاث طرق لإجراء عملية تنسيق صفحة الويب وهي كالتالي:
1- تضمين اسم الملف بالامتداد .css داخل العنصر head في بداية صفحة html كالتالي (وهي الطريقة المُوصى بها):

<link rel='stylesheet' type='text/css' href='path/to/style.css'>
2- كتابة قواعد css مباشرة في ملف الصفحة:

<style>
a { color: purple; }
</style>
3- تنسيق العنصر بطريقة مباشرة:

<div style="border: 1px solid red;">
</div>
الأولوية أم التتالي
العنصر الواحد في صفحة الويب قد يكون مُستهدفا (محددا) من قبل مجموعة متعددة من المحددات، وقد يكون هناك تعديل أو تحديد لقيمة خاصية تابعة لهذا العنصر من قبل أكثر من مُحدد. في مثل هذه الحالات، فإن قاعدة واحدة سيكون لها الأولوية في التطبيق على هذا العنصر.
القواعد التي تمتلك محددات مُفصلة لها أولوية على المحددات ذات التفاصيل الأقل، والقواعد التي تأتي في النهاية تقوم بالتعديل على القواعد التي قبلها (وهذا يعني أنه في حالة تضمين ملفي css وكلاهما يقومان بتحديد عنصر والتعديل على خصائصه، فإن ترتيب ربط الملفات يحكم تنسيق العنصر حسب قاعدة الترتيب المذكورة والتي تُسمى التتالي أو التتابع).

استعلامات الوسائط Media queris
استعلامات الوسائط هي خاصية بدأت من CSS 3 وتسمح لك بتحديد متى تُطبَّق قواعد CSS، مثلا عند الطباعة، أو عند كثافة وأبعاد شاشة معينين.
أمثلة:
هذه قاعدة CSS تُطبَّق على كل الأجهزة.

h1 {
font-size: 2em;
color: white;
background-color: black;
}
يعدّل استعلام الوسيط التالي القاعدة السابقة عند الطباعة:

@media print {
h1 {
color: black;
background-color: white;
}
}
يجعل استعلام الوسيط التالي حجم الخط أكبر في شاشة بعرض 480 بكسل على الأقل:

@media screen and (min-width: 480px) {
h1 {
font-size: 3em;
font-weight: normal;
}
}


الساعة الآن 03:05 AM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO ©2010, Crawlability, Inc. TranZ By Almuhajir

Security team