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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

من جوزف هستم، و این CS50 است. 

[CS50.TV] 

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