التمهيد لمحة عامة CSS
في هذا الفصل، سوف نشرح البنية الأساسية للجزء رئيسي من التمهيد، بما في ذلك مطوري الويب لدينا جعل أفضل وأسرع وأفضل الممارسات أقوى.
HTML 5 DOCTYPE (DOCTYPE)
يستخدم التمهيد بعض عناصر HTML5 وخصائص CSS. من أجل هذه للعمل، تحتاج إلى استخدام HTML5 نوع المستند (DOCTYPE). وهكذا، في بداية المشروع التمهيد استخدام يحتوي على مقطع التعليمات البرمجية التالية.
<!DOCTYPE html> <html> .... </html>
إذا كانت بداية صفحة في التمهيد خلق لا يستخدم HTML5 نوع المستند (DOCTYPE)، قد تواجه بعض المتصفحات عرض مشاكل التضارب التي قد تواجه حتى بعض الحالات تتعارض بموجب ذلك لا يمكن أن تمر W3C التحقق من صحة القياسي في التعليمات البرمجية .
الأولوية للأجهزة المحمولة
الأجهزة النقالة الأولوية هي أهم تغيير في التمهيد 3.
في الإصدارات السابقة من التمهيد (حتى 2.x)، و كنت بحاجة إلى أن أقتبس CSS آخر يدويا، لجعل المشروع بأكمله لدعم ودية للهواتف النقالة.
ليس بعد الآن، التمهيد 3 الافتراضية CSS نفسه دعم ودية للهواتف النقالة.
التمهيد 3 تم تصميم أولوية جهاز الهاتف النقال، تليها سطح المكتب. هذا هو في الواقع تحول في الوقت المناسب جدا، واستخدام المزيد والمزيد من الناس من الأجهزة النقالة.
لجعل موقع الويب التنمية التمهيد للأجهزة المحمولة الصديقة لضمان تقديم السليم وتكبير الشاشة التي تعمل باللمس، وكنت بحاجة إلى إضافة علامات العرض ميتا في رأس الصفحة، على النحو التالي:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
خاصية العرض معدات التحكم في العرض. لنفترض أن موقعك سيكون مع مختلف والأجهزة دقة الشاشة لتصفح، ثم تعيينها إلى جهاز العرض للتأكد من أنه يجعل بشكل صحيح على أجهزة مختلفة.
الأولي على نطاق و= 1.0 لضمان تحميل الصفحة، ونسبة 1: 1 العرض، لن يكون هناك التحجيم.
على متصفح الجهاز المحمول، وذلك بإضافة المستخدم قابلة = لا للالعلامة الوصفية العرض لتعطيل (التكبير) وظيفة التحجيم لها.
عادة، والحد الأقصى الحجم = 1.0 والمستخدم قابلة = لا معا. بعد تعطيل هذه الوظيفة التكبير، ويمكن للمستخدم تمرير الشاشة، يمكنك جعل موقعك تبدو أشبه يشعر التطبيق الأصلي.
لاحظ أنه في هذا الطريق ونحن لا ننصح استخدام جميع المواقع، وسوف تعتمد على الظروف الخاصة بك!
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
صورة تستجيب
<img src="..." class="img-responsive" alt="响应式图像">
بإضافة فئة IMG استجابة التمهيد 3 يسمح للصورة لدعم تخطيط الاستجابة التي هي أكثر ودية.
دعونا نلقي نظرة على ما تحتوي هذه الفئة على الممتلكات المغلق.
في التعليمات البرمجية أدناه، يمكنك ان ترى صورة الطبقة IMG تستجيب يعطي أقصى العرض: 100٪؛ وارتفاع: السيارات، والملكية يمكن زيادتها بحيث لا يتجاوز الصورة حجم العنصر الأصلي.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
وهذا يدل على أن الصورة المرتبطة جعلت ك مضمنة كتلة. عند تعيين خصائص العرض من عنصر غير مضمنة لبنة، عنصر مضمنة فيما يتعلق بمضمون شكل العرض من حوله، ولكن مع فارق مضمنة أنه في هذه الحالة فإننا يمكن أن يحدد العرض والارتفاع.
ارتفاع الإعداد: ارتفاع السيارات، والعناصر ذات الصلة يعتمد على المتصفح.
تعيين الحد الأقصى العرض هو 100٪ يتجاوز أي عرض محدد بواسطة الخاصية العرض. انها تسمح الصور لدعم تخطيط الاستجابة التي هي أكثر ودية.
العرض العالمي، والتخطيط والروابط
عرض عالمي الأساسي
التمهيد 3 باستخدام الجسم {هامش: 0؛} لإخراج الجثة من الهوامش.
النظر في الإعدادات التالية للجسم:
هيئة {
الخط بين أفراد الأسرة: "هلفتيكا نويه"، هلفتيكا، ارييل، بلا الرقيق؛
FONT-SIZE: 14px؛
خط الطول: 1.428571429.
اللون: # 333333؛
لون الخلفية: # FFFFFF.
}
القاعدة الأولى لتعيين نمط الخط الافتراضي للجسم "هلفتيكا نويه"، هلفتيكا، ارييل ، بلا الرقيق.
القاعدة الثانية من نص حجم الخط الافتراضي من 14 بكسل.
القاعدة الثالثة هي لضبط ارتفاع الصف الافتراضي هو 1.428571429.
القاعدة الرابعة تعيين لون النص الافتراضي ل# 333333.
حكم نهائي يحدد لون الخلفية الافتراضي هو أبيض.
تنضيد
استخدام @ الخط بين أفراد الأسرة القاعدي، @ حجم الخط القاعدي والممتلكات @ خط الطول قاعدة كما الطباعة.
رابط نمط
تعيين اللون من خلال خاصية العالمي الربط @ الارتباط اللون.
النمط الافتراضي للارتباط، الإعدادات التالية:
و: تحوم،
و: التركيز {
اللون: # 2a6496.
النص الديكور: التأكيد.
}
و: التركيز {
الخطوط العريضة: رقيقة منقط # 333؛
الخطوط العريضة: 5px السيارات -webkit التركيز الدائري اللون.
الخطوط العريضة لموازنة: -2px.
}
لذلك، عند مرور الماوس فوق الارتباط أو وصلات النقر فوق، يتم تعيين اللون إلى # 2a6496. وفي الوقت نفسه، سيكون هناك تسطير.
وبالإضافة إلى ذلك، فإن الروابط النقر فوق، وسوف يكون هناك رمز اللون لرقيقة متقطع مخطط رقم 333. قاعدة أخرى هي وضع الخطوط العريضة ل5 بكسل، ومتصفح القائمة على بكت لديها -webkit التركيز الدائري اللون ملحقات المستعرض. ومن المقرر كفاف تعويض إلى بكسل -2.
كل من هذه الأنماط يمكن العثور عليها في scaffolding.less.
تجنب التناقضات عبر متصفح
التمهيد استخدام تطبيع لبناء الاتساق عبر متصفح.
Normalize.css هو ملف CSS الصغيرة التي توفر أفضل الاتساق عبر متصفح في عناصر HTML النمط الافتراضي.
الحاويات (حاوية)
<div class="container"> ... </div>
الطبقة الحاوية التمهيد 3 لمحتوى الصفحة الحزمة. دعونا نلقي نظرة على هذا الملف فئة bootstrap.css .container.
.container {
الحشو اليمين: 15px؛
الحشو اليسرى: 15px؛
الهامش اليمين: السيارات.
هامش اليسار: السيارات.
}
خلال التعليمات البرمجية أعلاه، وهوامش الحاوية اليمنى واليسرى (هامش الحق، الهامش الأيسر) قررت من قبل المتصفح.
يرجى ملاحظة أنه نظرا لالحشو (الحشو) هي ذات العرض الثابت، حاويات الافتراضي لا يمكن أن تتداخل.
.container: من قبل،
.container: بعد {
عرض: الجدول؛
المحتوى: ""؛
}
وهذا يولد-عناصر الزائفة. وضع جدول العرض، فإنه سيتم إنشاء مجهولة الجدول خلية وسياق كتلة التنسيق الجديد. : قبل الزائفة عنصر لمنع انهيار هامش ،: بعد العناصر الزائفة لمسح تعويم.
إذا ظهرت سمة conteneditable في HTML، منذ بعض الأخطاء أوبرا، وخلق مساحة للتغلب على هذه العناصر. ويمكن القيام بذلك باستخدام المحتوى: "" لإصلاح.
.container: بعد {
واضحة: على حد سواء؛
}
أنه يخلق الزائفة عنصر، ويضمن أن جميع السفن العائمة الذي يحتوي على كافة العناصر.
التمهيد 3 CSS لديه تطبيق ردا على استفسارات وسائل الإعلام، يتم تعيين استفسارات وسائل الإعلام في قيم عتبة مختلفة ماكس-عرض للحاوية، وذلك لتتناسب مع نظام الشبكة.
media (مين العرض: 768px) {
.container {
العرض: 750px؛
}
متصفح التمهيد / دعم الأجهزة
التمهيد يمكن أن تعمل بشكل جيد في أحدث المكتبية ومتصفح محطة المحمول.
المتصفحات القديمة قد تكون غير معتمدة بشكل جيد.
الجدول التالي التمهيد دعم أحدث الإصدارات من المتصفحات ومناهج:
| الكروم | فايرفوكس | IE | دار الأوبرا | رحلات السفاري | |
|---|---|---|---|---|---|
| الروبوت | نعم | نعم | لا ينطبق | NO | لا ينطبق |
| دائرة الرقابة الداخلية | نعم | لا ينطبق | لا ينطبق | NO | نعم |
| نظام التشغيل Mac OS X | نعم | نعم | لا ينطبق | نعم | نعم |
| نوافذ | نعم | نعم | نعم * | نعم | NO |
* دعم التمهيد ل Internet Explorer 8 والإصدارات الأحدث من إنترنت إكسبلورر.