[موسیقی] 

داگ لوید: بنابراین اجازه دهید یک نگاهی ویدیو در مورد یک زبان بیشتر صحبت کنیم. این بار ما در مورد 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 و B، قرمز، سبز، و آبی جزء. و بنابراین ما می توانید مشخص کنید هر رنگ ما می خواهیم توسط، به جای استفاده از آبی یا سبز یا سیاه و سفید، با استفاده از پوند و سپس شش رقم از سحر و جادو، و لازم است که به ما می دهد رنگ شش رقمی. به طوری که رنگ پس زمینه است. 

ما همچنین پیش زمینه ای رنگ، که معمولا رفتن به متن صفحه خود را. و شما به طور مشابه تواند انجام دهد که با کلمه کلیدی و یا شش رقمی سحر و جادو. بنابراین شما می توانید هر رنگ مشخص شما می خواهید برای متن صفحه شما در برابر خاص رنگ پس زمینه، تا بالا. شما همچنین می توانید تغییر دهید و مقابله با فونت و متن راه در صفحه ارائه شده است. 

بنابراین شما می توانید اندازه فونت را تغییر دهید. شما می توانید کلمات کلیدی، مانند اضافی استفاده کنید، فوق العاده کوچک، و یا خیلی خیلی کوچک خیلی، و یا متوسط، بزرگ، و غیره. شما می توانید نقطه ثابت استفاده کنید، 10 نقطه 12، و غیره. شما می توانید درصد، 80 درصد، 20 درصد استفاده کنید، که در آن 100٪ فونت پیش فرض است اندازه، است که معمولا به رفتن چیزی شبیه به 11 یا 12 امتیاز. و یا شما حتی می توانید آن را خاموش پایه اندازه فونت جدید ترین. اگر شما فقط نوشت و شما می دانید چیزی آنچه شما می خواهید آن را به کوچکتر، اما شما نمی دانید که دقیقا چه اندازه شما خواهید آن را به، خوب، شما می توانید فقط می گویند، اندازه فونت کوچکتر است. و آن را خاموش پایه، فقط تا بالا، آن را اندازه فونت است. و شما می توانید کوچکتر یا بزرگتر است. بنابراین در بسیاری از مختلف وجود دارد راه هایی برای مشخص اندازه فونت. 

شما همچنین می توانید آنچه را مشخص خانواده فونت شما می خواهید. اگر شما یک خاص نام و نام خانوادگی، یک راه وجود دارد در CSS-- ما قصد داریم در مورد آن صحبت here-- برای تعریف یک فونت بسیار خاص و آن را به صفحه خود جاسازی کنید. شما همچنین می توانید نام عمومی استفاده کنید. در بسیاری از فونت وب امن وجود دارد که از پیش تعریف شده در CSS. و اگر شما یک کاربر از مایکروسافت دفتر در 20 سال گذشته، شما احتمالا با آن آشنا هستید بسیاری از این فونت وب امن در حال حاضر، بار جدید روم، فونت Arial، پیک جدید، گرجستان، فونت، Verdana، با و غیره. اینها همه فونت وب امن در نظر گرفته. و در واقع، بخشی از دلیل آنها به دست می آمد شد مورد استفاده قرار گیرد به web-- هر صفحه بود دسترسی به این پیش فرض مجموعه ای از فونت با زواید حروف مختلف، و این همه مسائل فونت ما نمی خواهد به دریافت، اما این معمولا در CSS خود را در دسترس، حتی اگر شما نمی در غیر این صورت فونت را تعریف کنیم. در نهایت، شما می توانید متن خود را چین، به جای آن که به صورت پیش فرض تراز وسط قرار دارد به سمت چپ، شما می توانید از تراز آن به سمت راست، یا شما می توانید تراز آن محور، و یا توجیه به طوری که آن ضربه هر دو حاشیه. بنابراین کسانی که همه گزینه ها شما می توانید استفاده کنید برای تغییر آنچه متن خود را به نظر می رسد، و چگونه آن را در صفحه نمایش داده میشود. 

انتخابگرهای خود را انجام دهد باید تنها دستورات. ما قبلا دیدم تگ body انتخاب، انتخاب و برچسب نگاه درست مانند آن. نام شما برچسب، و سپس شما تعریف یک شیوه برای که برچسب. اما شما همچنین می توانید چیزی را انجام دهید به نام انتخاب ID. سلکتور به نظر می رسد بسیار مشابه است. اما توجه کنید، که در حال حاضر من با استفاده از نه یک تگ HTML، من با استفاده از، در این مورد، #unique، و یا مخلوط منحصر به فرد. اگر شما از یاد ما ویدئو در HTML، ما صحبت کردیم در مورد چگونگی برچسب ها می تواند ویژگی های داشته باشد. 

و یک ویژگی است که اعمال می شود به تقریبا همه تگ های HTML، اما ما در مورد آن صحبت نمی کند، چیزی به نام یک تگ ID است. بنابراین این CSS خاص را فقط برای تگ HTML است که یک ID بسیار خاص، که شما به نام ام. بنابراین اگر شما در جایی در کد خود را، در جایی در فایل HTML شما، یک برچسب و شما مشخص به عنوان یک ویژگی که برچسب، ID برابر منحصر به فرد، این شیوه خاص در اینجا تنها در بین اعمال که برچسب با ID منحصر به فرد. 

شما همچنین می توانید چیزی را انجام دهید به نام انتخاب کلاس. بنابراین علاوه بر داشتن ویژگی های ID، شما همچنین می توانید به دستورات HTML اضافه کردن یک ویژگی کلاس. و هنگامی که شما با استفاده از یک ویژگی کلاس، می توان آن را به برچسب های مختلف استفاده می شود. بنابراین اگر شما چند چیز است که شبیه، شاید شما می خواهم بگویم، تگ باز اه، اه، اه، اه، کلاس برابر دانش آموزان است. و سپس این خاص شیوه اعمال می شود به هر تگ که کلاس دانش آموزان است. در این مورد، ما مجموعه ای از رنگ پس زمینه به رنگ زرد، و ما می خواهم کدورت تعیین می کنند، که برچسب ما صحبت در مورد است، اما فقط با شفاف می پردازد چیزی است، تا 70٪، در این مورد. 

دو گزینه برای وجود دارد نوشتن شیوه. شما می توانید آنها ارسال به طور مستقیم به HTML خود را با قرار دادن شیوه در بین تگ سبک. و کسانی که برچسب های سبک داخل رفت برچسب ها سر از صفحه وب خود را. راه شاید بیشتر ترجیح به انجام آن است که به ارسال یک فایل css جداگانه، و سپس آن را به خود پیوند سند با استفاده از برچسب ها را لینک کنید. برچسب ها لینک، دوباره، از لینک، اگر شما از فیلم ما یاد HTML. برچسب ها و لینک چگونه ما جلو و در فایل های جداگانه. این نوع مانند معادل کد: #include برای برنامه نویسی وب. 

بنابراین اجازه دهید نگاهی به 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 پیکسل بالا است. بنابراین برای هر ردیف، به یاد داشته باشید این چیزی است که از تگ tr به کند، من آن را 50 پیکسل بالا. 

در نهایت، من این نظر را داشته باشد. و این است که چگونه ما را در نظرات CSS. آن را بسیار شبیه به دست گرفتن بلوک نظر ستاره بریده بریده نحو. تمام متن شما می خواهید. هیچ بریده بریده بریده بریده هر چند در CSS وجود دارد. برای نظر کوتاه درون خطی، ما باید برای استفاده از این فرمت خاص در اینجا. به نظر می رسد من انجام بسیاری از چیزهایی که در برچسب ها TD من. به یاد داشته باشید برچسب ها TD، یا جدول داده ها، که در واقع فقط ستون داخل ردیف ما، و ظاهرا برای هر قطعه از اطلاعات در جدول من، من می خواهم برای تنظیم رنگ پس زمینه را به سیاه و سفید، رنگ به سفید، رنگ پیش زمینه است. پس این است که برای رفتن به متن صفحه من. من می خواهم فونت بزرگ، 22 اشاره فونت، و من می خواهم آن را به خانواده فونت باشد، گرجستان است. بنابراین من به رفتن نیست دارند فونت پیش فرض. من قصد دارم به مشخص گرجستان، که یکی از کسانی که فونت وب امن است که ما قبل از دیده می شود. من می خواهم متن من به تراز وسط قرار دارد مرکزی، در وسط کادر، من نمی خواهم آن را به سمت چپ تراز وسط قرار دارد یا راست تراز وسط قرار دارد. و من می خواهم عرض ستون من به 50 پیکسل عرض و همچنین. اجازه دهید یک نگاه این به نظر می رسد، و ببینید که اگر این شاید بهبود می باشد. بنابراین من قصد دارم برای رفتن به table3.HTML که به یاد بیاورید، شامل table.CSS به عنوان یک لینک، و ما آن را پیش نمایش. که بسیار بهتر، درست است؟ این است که در واقع شروع به نگاه بسیار بیشتر شبیه یک جدول ضرب. من که مرز قرمز در اطراف میز من اما در حال حاضر من نیز مشخص کرده اند که هر سطر 50 پیکسل است، و یا آن را 50 پیکسل tall-- بهانه ای me-- هر ستون 50 پیکسل است. داده ها در هر ستون، و تنها داده ها، دارای یک پس زمینه سیاه و سفید. به همین دلیل کسانی که خطوط سفید وجود دارد. به دلیل فضای در بین همه آن سلول ها، این یک مرز در نمی و از خود، آن را فقط من فقط در پر کردن سلول، که در واقع باعث می شود مرزهای جدول که ظاهرا وجود داشت در تمام طول آن خطوط فقط نازک سفید بود. در حال حاضر آنها قابل مشاهده است. در حال حاضر آنها موسیقی پاپ بر روی صفحه نمایش. و این بسیار ساده است شیوه که من کار برده اید، و در حال حاضر به نظر می رسد جدول من بسیار بیشتر شبیه یک جدول چهار چهار ضرب، به جای یک ظرف غذا فقط چندپاره و فاقد تأثیرگذاری، که در آن همه چیز است که به وضوح سطر و ستون، اما نه فوق العاده سازمان یافته است. ما واقعا فقط خاراندن سطح از آنچه شما می توانید با CSS اینجا انجام دهید. خوشبختانه اسناد CSS را بسیار ساده است. شما چند استفاده از آن ویژگیها، نسبتا غالبا. آنهایی را که ما در مورد صحبت کردیم پیش از آن در این فیلم. چند که شما وجود دارد احتمالا استفاده نمی کند. و این خوب است، بیش از حد. اما فقط می دانم، که وجود دارد بسیاری از اسناد وجود دارد. بنابراین حتی اگر ما همه چیز را پوشش نمی دهد، شما قطعا در خود باقی نمانده است. اما CSS واقعا سرگرم کننده است به آزمایش با. و من به شدت شما را تشویق به بازی در اطراف با صفحات وب خود را، و ببینید که چگونه شما می توانید آنها را نگاه و احساس برای بهبود کاربر تجربه بازدید از صفحه خود را. من داگ لوید هستم. این CS50 است.