[عزف الموسيقى] 

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

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

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

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

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

ثم يمكنك استخدام كلمة رئيسية، حتى CSS لديها بعض الألوان التي تم إنشاؤها في ذلك، الأزرق، الأخضر، أسود، وألوان بسيطة جدا نعرفه. ولكن يمكنك أيضا تحديد أي لون عرافة التي ترغب. أذكر أن الألوان يمكن تحديد من قبل مجموعة من ثلاثة أرقام عرافة 0-255، RG وب، و الأحمر والأخضر والأزرق والمكون. وحتى نتمكن من تحديد أي لون نريد من خلال، بدلا من استخدام اللون الأزرق أو الأخضر أو ​​الأسود، استخدام الجنيه ثم ستة أرقام من عرافة، وهذا من شأنه أن يعطي لنا اللون المكون من ستة أرقام. لذلك هذا هو لون الخلفية. 

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

حتى تتمكن من تغيير حجم الخط الخاص بك. يمكنك استخدام الكلمات الرئيسية، مثل اضافية، اضافية صغيرة، أو س س صغيرة، أو متوسطة، بوجه عام، وهلم جرا. يمكنك استخدام نقاط ثابتة، 10 نقطة، 12 نقطة، وهلم جرا. يمكنك استخدام النسب المئوية، 80٪، 20٪، حيث 100٪ هو الخط الافتراضي الحجم، والتي عادة ما يذهب ل يكون شيئا مثل 11 أو 12 نقطة. أو يمكنك حتى نبني تشغيله حجم الخط الأخير. إذا كنت كتبت للتو شيئا وأنت تعرف ما تريده هو ليكون أصغر، ولكن كنت لا تعرف ما هو حجم لكم بالضبط تريد أن تكون، أيضا، يمكنك أن تقول فقط، حجم الخط أصغر. وسوف تستند الخروج من، للتو أعلاه، فإنه من حجم الخط. ويمكنك الحصول على أصغر أو أكبر. لذلك هناك الكثير من مختلف طرق لتحديد حجم الخط. 

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

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

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

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

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

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

لذلك نحن في CS50 IDE الآن، وإذا لم يعتادوا، سنقوم سحب ما يصل في هذه جدول صفحة HTML. Table.HTML الأساس تعرف فقط محتويات من multiple-- كان من المفترض أن يكون جدول الضرب من قبل أربعة أربعة. انها واضحة جدا. وكنا نعتقد أنه سيكون تبدو منظمة تنظيما جيدا جدا. ولكن في الواقع، عندما كنا معاينة هذه الصفحة، ونحن نرى أنه نوع من القبيح، أليس كذلك؟ ومن الواضح لدينا الصفوف والأعمدة هنا. هناك نوعا من الانفصال. ولكنها ليست فصل حقيقي. نحن لا تحصل في الواقع الكثير من المعلومات هنا. وليس هناك فصل بين الصفوف والأعمدة من حيث قواعد أفقية أو عمودية. أننا ربما قد يجعل هذا تبدو أفضل قليلا. لذلك دعونا نحاول. لذلك أنا ذاهب لإغلاق هذا التبويب هنا. وانا ذاهب لإغلاق بلدي table.HTML، ولدي نسخة أخرى هنا دعا table2.HTML. سنقوم فتح أن ما يصل. الجسم من الصفحة هو نفس الشيء تقريبا، ولكني تغيرت قليلا في الأعلى. وسوف انتقل لأعلى هنا. لاحظ أن هذا الوقت، وأنا باستخدام علامات أسلوب المضمنة. لقد فتحت علامة النمط، وأنا الآن تعريف الأنماط CSS داخل فقط من ذلك. لدي الأنماط التي تقول الجدول. هذا هو بلدي العلامة محدد. أنا لا تستخدم نقطة أو التجزئة، الذي سوف افعله لو كان استخدام ID أو محدد الصف. لدي جدول here-- العلامة محدد. هذا النمط هو الذهاب الى تنطبق على كل علامة الجدول. يبدو أريد أن أضع واحدة بكسل واسعة، الحدود الزرقاء الصلبة، داخل مائدتي. الذي يبدو وكأنه هو على الأرجح يساعد في هذه الحالة، أليس كذلك؟ ونحن في طريقنا ل تبدو الأمور أفضل بكثير. لذلك هذا هو على ما يرام. أسلوبيا، لقد قمت فقط جزءا لا يتجزأ من بلدي الأنماط هنا. انها بالتأكيد طريقة مقبولة للقيام بذلك. دعونا نرى ما يبدو هذا مثل. ولذا فإنني سوف أعود إلى هنا، و أنا سوف معاينة بلدي table2.HTML. حسنا، هذا ليس تماما ما أردت، ولكنه هو بالضبط ما طلبنا. قلنا ان هذا الاسلوب هو سنطبق على جدول أعمالنا. مائدتنا لديها الآن بكسل واحد واسعة، والحدود الزرقاء الصلبة من حوله. نحن لا تحصل في الواقع في خلايا الجدول. نحن فقط الحصول على الطاولة. لذلك عملت CSS. وقد طبقت عليه الأنماط على جدول أعمالنا. ولكنها لم تفعل تماما ما أردنا أن تفعله. كيف يمكننا الحصول على القيام ما نريد أن نفعل؟ 

حسنا، دعونا نلقي نظرة على واحد أكثر نسخة من هذا في table3.HTML. لذلك أنا ذاهب لمجرد إغلاق علامات التبويب هذه. انا ذاهب الى العودة هنا إلى بلدي ملف شجرة، وفتح table3.HTML. مرة أخرى، أريد لها أن تبدو جميلة مماثلة هنا في البداية. لكن إشعار، وهذه المرة، بدلا من استخدام ورقة أنماط جزءا لا يتجزأ من الحق في ذلك، انا ذاهب الى ربط في الأنماط باستخدام علامة الارتباط. لذلك أنا على ما يبدو ربط في الأنماط دعا tables.CSS، ويساوي هذا جيدا الأنماط فقط means-- جيدا، ما هو هذا الملف بالنسبة إلى ما أنا doing-- هو الأنماط التي أنا تستخدم لصفحتي. حتى لو كنت حقا تريد أن ترى ما أفعله مع CSS هنا، لست بحاجة للذهاب مفتوحة ذلك ملف table.CSS كذلك. ومن ثم سنذهب إلى أكثر من هنا مرة أخرى لشجرة ملفنا. هناك table.CSS. سنقوم البوب ​​مفتوحة. ونحن الآن نشهد قليلا من CSS. على ما يبدو، لدي بضعة من الأشياء يحدث هنا. أنا على ما يبدو تريد أن تضع خمسة بكسل واسعة، الحدود الحمراء الصلبة، حول مائدتي. نحن نعلم بالفعل أن ما يجري للذهاب فقط على محيط. رأينا أن في table2.HTML. مع كل صف، وأنا على ما يبدو تريد تحديد أن ارتفاع الصف 50 بكسل عالية. لذلك لكل صف، تذكر هذا ما تفعله العلامة طن تبريد، أنا جعلها 50 بكسل عالية. 

وأخيرا، أود أن هذا التعليق. وهذه هي الطريقة التي تجعل تعليقات في CSS. انها تشبه الى حد بعيد استيلاء كتلة تعليقات النجوم مائل بناء الجملة. جميع النص الذي تريده. ليس هناك مائل مائل وإن كان في CSS. للحصول على تعليقات قصيرة المضمنة، لدينا لاستخدام هذا شكل خاص هنا. يبدو أن أفعله ل الكثير من الأشياء في بلدي علامات الدفتيريا. تذكر به TD، أو طاولة البيانات، والتي هي في الحقيقة مجرد الأعمدة داخل الصفوف لدينا، وعلى ما يبدو لكل قطعة من البيانات في مائدتي، أريد لتعيين لون الخلفية ل يكون لونه أسود، ولون لتكون بيضاء، اللون هو اللون الأمامي. ولذلك فإن هذا سيكون نص الصفحة الخاصة بي. أريد الخط الكبير، 22 يشير الخط، وأريد أن يكون من عائلة الخط، جورجيا. لذلك أنا لن يكون الخط الافتراضي. انا ذاهب الى تحديد جورجيا، التي هي واحدة من تلك الخطوط الآمنة على شبكة الإنترنت أن رأيناه من قبل. أريد النص الذي قدمته إلى الانحياز مركزيا، في منتصف منطقة الجزاء، أنا لا أريد أن أن تترك محاذاة أو محاذاة إلى اليمين. وأريد عرض مقالي أن يكون 50 بكسل كذلك. دعونا نلقي نظرة على ما يبدو هذا مثل، ومعرفة ما إذا كان هذا هو ربما تحسن. لذلك أنا ذاهب للذهاب الى table3.HTML، التي أذكر، ويشمل table.CSS كحلقة وصل، وسنقوم معاينته. هذا أفضل كثيرا، أليس كذلك؟ هذا هو في الواقع بدأت تبدو الكثير أشبه جدول الضرب. لدي أن الحدود الحمراء حول مائدتي ولكن الآن كما أنني قد حددت أن كل صف 50 بكسل، أو انها 50 بكسل tall-- عذر me-- كل عمود 50 بكسل. البيانات في كل عمود، وفقط البيانات، لديه خلفية سوداء. ولهذا السبب تلك خطوط بيضاء هناك. لأن الفضاء في بين كل تلك الخلايا، انها ليست الحدود في وحد ذاته، انها مجرد أنا ملء فقط في الخلايا، والتي في الواقع يجعل حدود الجدول، والتي على ما يبدو كانت موجودة طوال الوقت، فإنه كانت خطوط بيضاء رقيقة فقط. الآن انهم مرئية. الآن هم انصرف على الشاشة. وحتى هذا هو بسيط جدا الأنماط التي كنت التطبيقية، والآن مائدتي يبدو الكثير من مثل طاولة أربعة أربعة الضرب، بدلا من فوضى مجرد مختلطة، حيث كل شيء الصفوف والأعمدة بشكل واضح، لكن المنظمة لم فائقة أيضا. نحن في الحقيقة مجرد خدش السطح ما يمكنك القيام به مع CSS هنا. لحسن الحظ وثائق CSS هو أمر سهل جدا. عليك استخدام العديد من ل الصفات، في كثير من الأحيان إلى حد ما. تلك تحدثنا عن في هذا الفيديو في وقت سابق. هناك العديد من أنك ربما لن تستخدم جميع. وهذا شيء طيب، أيضا. ولكن أعرف فقط، أن هناك الكثير من الوثائق هناك. لذلك حتى لو لم نكن تغطي كل شيء، كنت بالتأكيد لا تترك لوحدك. لكن CSS هو حقا متعة في تجربة. وأود أن أشجع بقوة لك للعب مع حولها صفحات الويب الخاصة بك، ونرى كيف يمكنك ان تجعل منهم الشكل والمظهر لتحسين المستخدم تجربة زيارة الصفحة الخاصة بك. أنا دوغ ويد. هذا هو CS50.