[Powered by Google Translate] [CSS] [جوزف اونگ - دانشگاه هاروارد] [این CS50 است. - CS50.TV] 

امروز ما خواهید بود صحبت کردن در مورد CSS یا شیوه نامه آبشاری است. 

پس آنچه که دقیقا CSS است؟ خوب، اجازه دهید شکستن CSS مدت پایین به 2 بخش: آبشار و ورق سبک. آبشاری کمی پیچیده تر است، و آن چیزی است که ما را در یکی دیگر از فیلم را پوشش میدهد. اما برای شروع، شیوه نامه نکات بسیار زیادی را در چه CSS است. این می افزاید: سبک های HTML یک صفحه وب، تغییر صفحه وب چگونه زیبا به نظر می رسد. این به این معنی همه چیز را از قلم متن به موقعیت از محتوا بر روی صفحه به چیزهای دیگر مثل ساخت گوشه یک جعبه گرد و یا اضافه کردن سایه به متن. شما حتی می توانید چیزهای دیوانه مثل همه چیز را بر روی صفحه نمایش متحرک انجام دهد. 

پس چگونه CSS با استفاده از HTML؟ نگاهی به این سایت ضعیف، به دنبال من فقط نوشتم. اگر راب در این سایت در حال حاضر، او احتمالا می خواهم چیزی شبیه می گویند، "وای! معرفی من به نظر می رسد وحشتناک است. جوزف، شما یک طراح افتضاح است." "با استفاده از فونت پیش فرض بار؟ Helvetica خیلی بهتر است." 

پس چه ممکن است ساده ترین راه برای درخواست یک ظاهر طراحی شده راب می خواهد؟ ترین راه آشکار تعداد زیادی از مردم در ابتدا نوشت CSS برای قرار دادن چیزی است که ما راست اظهارات سبک در عنصر خود با استفاده از ویژگی سبک HTML. یک تعریف سبک به سادگی از اموال عنصر HTML CSS شامل می خواهید به تغییر روده بزرگ و به دنبال آن مقدار جدید از اموال و نقطه و ویرگول در پایان. به عنوان مثال، اجازه دهید می گویند راب می خواهد یک مرز سیاه و سفید در اطراف خود معرفی کرد. ما برای اولین بار از موجودیت های style در دیو راب قرار داده شده در اینجا سپس در داخل کوتیشن قرار دادن یک اعلامیه CSS: "مرز: 1px جامد سیاه و سفید؛" پیکسل 1 نفر به عرض از مرز، جامد اشاره به سبک از مرز، و رنگ در پایان تعیین رنگ مرز است. 

اگر ما می خواهیم به سبک های متعدد بر روی یک عنصر، نوشتن این اظهارات در دنباله. برای مثال، اگر راب می خواهد متن هدر خود را در Helvetica با پس زمینه آبی رنگ و فضای بیشتری در اطراف متن، ما می توانیم این کار را انجام دهند: سبک = "فونت خانواده: Helvetica، رنگ پس زمینه: آبی؛ بالشتک: مقدار 5px؛" آخرین نقطه و ویرگول بدین شکل است که در واقع اختیاری است، اما مردم معمولا آن را نگه دارید برای خاطر ثبات. 

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

برای مردمی که واقعا دوست دارم به سازماندهی، شما ممکن است شروع به گرفتن کمی peeved کثیف این همه به نظر می رسد. تصور کنید اگر شما تا به حال برای انجام این کار را برای هر عنصر در صفحه، به علاوه در حال حاضر HTML و CSS خود را همه intermixed و بهم ریخته است. ناخالص، درست است؟ برای حل این مشکل، مردم در نهایت شروع به ابتلا به جدا خود را در HTML نشانه گذاری از یک ظاهر طراحی CSS خود را با استفاده از چیزی به نام انتخابگرهای CSS است. انتخابگرهای CSS استفاده می شوند به عناصر که به اعلامیه ها داده می شود را انتخاب کنید. انتخاب همراه با لیستی از اظهارات CSS است که اغلب به عنوان یک قاعده CSS نامیده می شود. این قوانین را می توان بین باز و بسته برچسب های HTML به سبک قرار داده است، اغلب در سر از سند است. 

آسانتر آن است تا با یک مثال را ببینید. بنابراین شروع شده توسط ایجاد یک قانون ساده CSS کنیم. اول، اجازه دهید قرار دادن برچسب های style در بخش head صفحه HTML ما. بعد، انتخاب. ما شروع کردن با استفاده از یکی از ساده ترین انتخابگرهای، نماد مخلوط، که انتخاب عنصر HTML صفت ID خود را. در این مورد ما به دیو که نشان دهنده مقدمه راب را انتخاب کنید تایپ نماد مخلوط ID دیو، راب. در حال حاضر آشکار. ما اضافه کردن پرانتز باز و بسته و تغییر اظهارات خطی قبلی ما را در دیو راب در داخل این پرانتز، تجدید، و، سرد، مقدمه راب هنوز هم دارای یک مرز سیاه در اطراف آن منهای زشتی های درون خطی کثیف. 

در حال حاضر، چه اگر ما می خواستیم به داخل H1 مقدمه راب را انتخاب کنید؟ شما ممکن است فکر می کنم، "اجازه دهید یک ID را بر روی آن قرار داده است و پس از آن حرکت سبک های پیشین ما است." که کار می کند، اما CSS است راه دیگر اجازه دادن به عناصر انتخاب کنید با استفاده از آنچه که ما می خواهیم به ترکیب combinators انتخابگرهای ساده. به عنوان مثال، یک کاراکتر فضای خالی را می توان به عنوان یک ترکیب استفاده می شود برای مشخص کردن همه موارد، از مجموع 1 انتخاب که در داخل زندگی می کنند یکی دیگر از انتخاب. این برای تلفن های موبایل بسیار پیچیده تر از آن واقع شده است. در اینجا یک مثال است. ما را تایپ کنید # غارت، اضافه کردن یک فضا، و به دنبال آن با H1، یکی دیگر از انتخاب ساده به نام انتخاب تگ انتخاب نوع از عناصر مانند divs یا پاراگراف است. فضای ترکیبی از 2 انتخابگرهای ساده ما، استفاده از تمام اظهارات CSS و پرانتز فرفری به تگ H1 است که در داخل عنصر با ID = "راب" زندگی می کنند. فقط برای شما را متقاعد کند که کار می کند، من رنگ فونت سفید، تجدید تغییر، و، نگاه، هدر راب سفید. 

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

که شامل این فایل های جدید را به عنوان CSS در این سند من فقط HTML تگ لینک استفاده کنید. در اینجا من گفتن که من ارتباط در جدول به سبک خارجی، ویژگی rel. و تعیین مسیر فایل را با موجودیت href من. در حال حاضر من نشانه گذاری HTML و CSS به سادگی در فایل های کاملا جداگانه سازماندهی، است که تقریبا همیشه راه طراحان ترجیح می دهند کار کردن با HTML و CSS. 

در صورتی که شما نگرانم، انتخابگرهای ساده عبارتند از انتخابگرهای ID و انتخاب برچسب مانند آنهایی را که ما فقط دیدم و همچنین به عنوان انتخابگرهای کلاس برای انتخاب عناصر با یک کلاس خاص، انتخابگرهای ویژگی برای انتخاب عناصر با ویژگی های دیگری مانند نوع = "رادیو" برای ورودی های دکمه های رادیویی، و pseudoselectors مانند شناور و تمرکز برای تعیین یک ظاهر طراحی شده زمانی که فعل و انفعالات مانند تکاپو بیش از یک عنصر رخ می دهد. 

combinators مشترک شامل فاصله خالی برای همه کودکان و کاما به تشخیص یک گزینشگر. دیگران شما ممکن است روبرو می شوند شامل فلش فقط برای کودکان مستقیم، ریشه یابی لغات برای همه خواهر و برادر که بعد از این عنصر رخ می دهد، ورود به سیستم به علاوه 1 خواهر و برادر می آید که بلافاصله پس از این عنصر است. 

با ترکیب این گزینشگران و combinators، شما می توانید طیف وسیعی از یک ظاهر طراحی شده شما می توانید بر روی یک صفحه وب داده شده دستیابی به گسترش و نوشتن CSS موثر تر است. تنها با چند خط CSS شما من تایپ کردن در اینجا، من به سرعت می تواند چیزی شبیه به این مثل چیزی شبیه به این را. 

من یوسف، و این CS50. 

[CS50.TV] 

آه، از کجا شروع کنم؟ اجازه دهید من می توانم بدون - [می خندد] خیلی خوب است. اضافه کردن - اجازه بدهید که جمله بندی تغییر دهید. اوه اوه. متأسفم.