مؤسسة CSS المرجعي
التخلف عن مؤسسة
مؤسسة لاستخدام حجم الخط المستعرض الافتراضي ( font-size:100% ). بالنسبة لمعظم جهاز متصفح سطح المكتب، وحجم الخط الافتراضي هو 16px. لمتصفح للهواتف النقالة، وحجم الخط الافتراضي هو 12px. الخط الافتراضي هو "Helvetica Neue" ، والتخلف خط الارتفاع إلى 1.5 .
يتم تطبيق هذه الإعدادات على <body> عنصر ضمن العنصر.
وبالإضافة إلى ذلك، <p> العنصر الخارجي والجزء السفلي من المسافة (الهامش السفلي) هو 1.25rem، خط الطول 1.6.
نص
عناصر HTML التالية، أنشأت مؤسسة حتى أسلوب مستقل جعلها لن تستخدم النمط الافتراضي للمتصفح. انقر على "محاولة" لمشاهدة المثال على الانترنت.
| العنصر | وصف | أمثلة على الانترنت |
|---|---|---|
| <H1> - <H6> | H1 - H6 العناوين | محاولة |
| <A> | الروابط الضوء الأزرق، تحريك الماوس إلى الرابط سيتم تسطير | محاولة |
| <الصغيرة> | ضوء العنوان الفرعي نص رمادي | محاولة |
| <اقتباس فقرة> | وحدة الاقتباس | محاولة |
| <قوية> | نص جريء | محاولة |
| <إم> | المائل | محاولة |
| <ابر> | تحديد كلمة الاختصار، استخدم يبدو العنصر تنتشر النص التسطير، نقل ما يصل الماوس سيدفع | محاولة |
| <KBD> | تلقي الأوامر مدخلات لوحة المفاتيح: CTRL + P | محاولة |
| <hr> | مستوى | محاولة |
| <رمز> | شظية | محاولة |
| <UL> | قائمة غير مرتبة | محاولة |
| <رأ> | قائمة أمر | محاولة |
| <دل> | قائمة وصفية | محاولة |
محاذاة النص
استخدام الطبقة CSS لتعديل محاذاة النص:
| فئة | وصف | أمثلة |
|---|---|---|
| .text يسار | النص محاذاة إلى اليسار | محاولة |
| .text اليمين | النص محاذاة إلى اليمين | محاولة |
| .text الوسط | مركز | محاولة |
| .text-تبرير | برر | محاولة |
محاذاة أحجام مختلفة للشاشة
استخدام الطبقة CSS لتعديل محاذاة النص من أحجام مختلفة للشاشة:
| فئة | وصف | أمثلة |
|---|---|---|
| اليسار | ||
| غادر. الصغيرة-النص | كل حجم الشاشة من اليسار | محاولة |
| . الصغيرة اليسار فقط تحويل النص | الشاشة الصغيرة اليسار (العرض أقل من 40em) | محاولة |
| .medium النص يسار | والعرض هو أكبر من حجم الشاشة 40.0625em اليسار | محاولة |
| .medium فقط النص يسار | محاذاة عرض 40.0625em إلى اليسار من حجم 64em الشاشة | محاولة |
| غادر .large تحويل النص | والعرض هو أكبر من حجم الشاشة 64.0625em اليسار | محاولة |
| غادر .large فقط تحويل النص | محاذاة عرض 64.0625em إلى اليسار من حجم 90em الشاشة | محاولة |
| غادر .xlarge تحويل النص | والعرض هو أكبر من حجم الشاشة 90.0625em اليسار | محاولة |
| غادر .xlarge فقط تحويل النص | محاذاة عرض 90.0625em إلى اليسار من حجم 120em الشاشة | محاولة |
| غادر .xxlarge تحويل النص | والعرض هو أكبر من حجم الشاشة 120em اليسار | محاولة |
| محاذاة إلى اليمين | ||
| . الصغيرة النص اليمين | جميع أبعاد الشاشة تبرير بزر الماوس الأيمن | محاولة |
| . الصغيرة فقط نص اليمين | الشاشة الصغيرة محاذاة اليمين (العرض أقل من 40em) | محاولة |
| .medium نص اليمين | العرض أكبر من حجم 40.0625em الانحياز حق الشاشة | محاولة |
| .medium فقط نص اليمين | محاذاة عرض 40.0625em لحجم 64em الصحيحة الشاشة | محاولة |
| .large نص اليمين | العرض أكبر من حجم 64.0625em الانحياز حق الشاشة | محاولة |
| .large فقط نص اليمين | محاذاة عرض 64.0625em لحجم 90em الصحيحة الشاشة | محاولة |
| .xlarge نص اليمين | العرض أكبر من حجم 90.0625em الانحياز حق الشاشة | محاولة |
| .xlarge فقط نص اليمين | محاذاة عرض 90.0625em لحجم 120em الصحيحة الشاشة | محاولة |
| .xxlarge نص اليمين | العرض أكبر من حجم 120em الانحياز حق الشاشة | محاولة |
| محاذاة | ||
| . الصغيرة النص الوسط | تنسيق بين جميع أحجام الشاشة | محاولة |
| . الصغيرة فقط النص الوسط | صغر حجم الشاشة محورها (العرض أقل من 40em) | محاولة |
| .medium النص الوسط | العرض أكبر من حجم الشاشة تركزت 40.0625em | محاولة |
| .medium فقط النص الوسط | عرض 40.0625em إلى أحجام الشاشة 64em تركزت | محاولة |
| .large النص الوسط | العرض أكبر من حجم الشاشة تركزت 64.0625em | محاولة |
| .large فقط النص الوسط | عرض 64.0625em إلى أحجام الشاشة 90em تركزت | محاولة |
| .xlarge النص الوسط | العرض أكبر من حجم الشاشة تركزت 90.0625em | محاولة |
| .xlarge فقط النص الوسط | 90.0625em العرض إلى 120em أحجام الشاشة تركزت | محاولة |
| .xxlarge النص الوسط | العرض أكبر من حجم الشاشة تركزت 120em | محاولة |
| برر | ||
| . الصغيرة-النص يبرر | وبررت جميع الأحجام الشاشة | محاولة |
| . الصغيرة فقط تحويل النص يبرر | تبرير صغر حجم الشاشة (العرض أقل من 40em) | محاولة |
| .medium تحويل النص تبرير | عرض أكبر من حجم الشاشة 40.0625em تبرير | محاولة |
| .medium فقط تحويل النص تبرير | محاذاة طرفي عرض الشاشة ل64em حجم 40.0625em | محاولة |
| .large تحويل النص تبرير | عرض أكبر من حجم الشاشة 64.0625em تبرير | محاولة |
| .large فقط تحويل النص تبرير | محاذاة طرفي عرض الشاشة ل90em حجم 64.0625em | محاولة |
| .xlarge تحويل النص تبرير | عرض أكبر من حجم الشاشة 90.0625em تبرير | محاولة |
| .xlarge فقط تحويل النص تبرير | محاذاة طرفي عرض حجم الشاشة 90.0625em إلى 120em | محاولة |
| .xxlarge تحويل النص تبرير | عرض أكبر من حجم الشاشة 120em تبرير | محاولة |
آخر
| فئة | وصف | أمثلة |
|---|---|---|
| .left | غادر العائمة عنصر | محاولة |
| .right | عناصر الحق العائمة | محاولة |
| .clearfix | تعويم واضحة - يجب أن يضاف إلى العنصر العنصر الأصل العائمة | |
| .hide | العنصر الخفي (المغلق display: none ) | محاولة |
| .list-مضمنة | جميع العناصر مرتبة في نفس الصف | محاولة |
| .lead | السماح <ص> العنصر هو أكثر بروزا | محاولة |
| .subheader | وضع <H1> بلون ضوء - <H6> عناصر | محاولة |