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

HTML و CSS چیست؟
HTML، زبان نشانه گذاری HyperText، ساختار محتوا و معنای را با تعریف آن محتوا به عنوان مثال، عنوان ها، پاراگراف ها یا تصاویر می دهد. CSS، یا Cascading Style Sheets، یک زبان ارائه شده برای ایجاد ظاهر محتوای با استفاده از، به عنوان مثال، فونت ها یا رنگ ها است.
دو زبان HTML و CSS مستقل از یکدیگر هستند و باید باقی بمانند. CSS نباید درون یک سند HTML نوشته شود و بالعکس. به عنوان یک قانون، HTML همیشه محتوای را نمایش می دهد و CSS همیشه ظاهر آن محتوای را نشان می دهد.
با درک این تفاوت بین HTML و CSS، بیایید به جزئیات بیشتری در HTML بچرخیم.
درک شرایط مشترک HTML
در حالی که با HTML شروع می شود، احتمالا با اصطلاحات جدید و غالبا عجیب روبرو خواهید شد. با گذشت زمان، بیشتر و بیشتر با همه آنها آشنا خواهید شد، اما سه عنصر HTML معمولی که باید شروع کنید، عناصر، برچسب ها و ویژگی ها هستند.
عناصر
عناصر نمادهای هستند که ساختار و محتوای اشیا را در یک صفحه تعریف می کنند. بعضی از عناصر اغلب استفاده شده شامل سطوح مختلف سرفصل ها (شناسایی شده به عنوان <h1> از طریق <h6> عناصر) و پاراگراف ها (شناسایی به عنوان عنصر <p>)؛ این لیست شامل <a>، <div>، <span>، <strong> و <em> عناصر و بسیاری دیگر است.
عناصر با استفاده از مقادیر کمتر و بزرگتر از زوایای زوج، <>، اطراف نام عنصر را شناسایی می کنند. بنابراین، یک عنصر به صورت زیر نگاه می کند:
<a>
برچسب ها
استفاده از محدوده های کوچک و بزرگتر از زاویه اطراف عنصر، چیزی است که به عنوان برچسب شناخته می شود. برچسب ها اغلب در جفت باز و بسته شدن تگ ها رخ می دهد.
یک تگ باز کردن آغاز یک عنصر را نشان می دهد. این شامل علامت کمتر از علامت پس از یک نام عنصر است، و سپس با علامت بزرگتر از علامت پایان می یابد؛ به عنوان مثال، <div>
یک برچسب بسته شدن پایان یک عنصر را نشان می دهد. این شامل علامت کمتر از علامت است که به دنبال علامت رو به جلو و نام عنصر است و سپس با علامت بزرگتر از علامت پایان می یابد. به عنوان مثال، </ div>
محتویاتی که بین تگ های باز و بسته می افتد، محتوای آن عنصر است. برای مثال، پیوند لنگر، یک تگ باز از <a> و تگ بسته </a> دارد. چه چیزی بین این دو برچسب افت می کند، محتوای لینک لنگر است.
بنابراین، برچسب های لنگر کمی شبیه به این خواهد بود:
<a> ... </a>
ویژگی های
ویژگی ها خواص مورد استفاده برای ارائه اطلاعات اضافی در مورد یک عنصر است. شایع ترین ویژگی ها شامل شناسه id است که یک عنصر را شناسایی می کند. ویژگی کلاس، که یک عنصر را طبقه بندی می کند. attribute src، که یک منبع برای محتوای جاسازی شده را مشخص می کند؛ و ویژگی href که مرجع hyperlink به یک منبع مرتبط را فراهم می کند.
خصوصیات درون تگ باز، پس از نام یک عنصر تعریف می شود. به طور کلی صفات عبارتند از نام و مقدار. فرمت برای این ویژگی ها شامل نام ویژگی است که پس از یک علامت برابر و سپس یک مقدار مشخصه نقل قول می شود. به عنوان مثال، یک عنصر <a> که شامل یک ویژگی href است، مانند موارد زیر است:
<a href="http://shayhowe.com/"> Shay Howe </a>
شرایط عمومی HTML نسخه ی نمایشی
کد قبلی متن "Shay Howe" را در صفحه وب نشان می دهد و پس از کلیک کردن بر روی متن "Shay Howe" کاربران را به shayhowe.com می برد. عنصر لنگر با تگ های باز کردن <a> و بسته شدن </a> در متن تعریف شده و ویژگی و مقدار مرجع لینک های hyperlink در href" =shayhowe.com" در تگ باز می شود.
خطی نحو HTML
طرح کلی نحو HTML شامل عنصر، صفت و برچسب
اکنون که شما می دانید کدام عناصر HTML، برچسب ها و ویژگی ها، نگاهی اجمالی به صفحه نخست ما ایجاد می کنیم. اگر هر چیزی به نظر می رسد در اینجا، هیچ نگرانی - ما آن را رمزگشایی همانطور که ما بروید.
تنظیم ساختار سند HTML
اسناد HTML اسناد متنی ساده با فرمت فایل html ذخیره شده و نه یک پسوند فایل txt است. برای شروع نوشتن HTML، ابتدا به ویرایشگر متن ساده نیاز دارید
Adly این مایکروسافت ورد یا صفحات را شامل نمی شود، زیرا اینها ویراستاران متناهی هستند. دو تا از محبوب ترین ویرایشگرهای متن ساده برای نوشتن HTML و CSS Dreamweaver و Sublime Text هستند. جایگزین های رایگان نیز شامل Notepad ++ برای ویندوز و TextWrangler برای مک است.
تمام اسناد HTML دارای یک ساختار مورد نیاز است که عبارت زیر را شامل می شود: <! DOCTYPE html>، <html>، <head>، و <body>.
اعلامیه نوع سند، یا <! DOCTYPE html>، به مرورگرهای وب اطلاع می دهد کدام نسخه از HTML استفاده می شود و در ابتدای سند HTML قرار می گیرد. از آنجا که ما از آخرین نسخه HTML استفاده میکنیم، اعلامیه نوع سند ما به سادگی است <! DOCTYPE html>. بعد از اعلام نوع سند، عنصر <html> به معنای آغاز سند است.
در داخل عنصر <html>، عنصر <head> قسمت بالای سند را مشخص می کند، از جمله هر گونه metadata (همراه با اطلاعات در مورد صفحه). محتوای داخل عنصر <head> در صفحه وب نمایش داده نمی شود. در عوض، ممکن است شامل عنوان سند (که در نوار عنوان در پنجره مرورگر نمایش داده شده است)، پیوند به هر فایل خارجی یا هر فراداده مفید دیگر.
تمام محتوای قابل مشاهده در صفحه وب در عنصر <body> سقوط خواهد کرد. تجزیه یک ساختار سند HTML معمولی به نظر می رسد به شرح زیر است:
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> سلام جهان </ title>
</ head>
<body>
<h1> سلام دنیا </ h1>
<p> این یک صفحه وب است. </ p>
</ body>
</ html>
ساختار سند HTML نسخه ی نمایشی
کد قبلی نشان می دهد که سند با اعلامیه نوع سند آغاز می شود، <! DOCTYPE html>، به طور مستقیم توسط عنصر <html> دنبال می شود. داخل عنصر <html> عناصر <head> و <body> آمده است. عنصر <head> شامل کدگذاری شخصیت صفحه از طریق برچسب <meta charset = "utf-8"> و عنوان سند از طریق عنصر <title> است. عنصر <body> حاوی عنوان از طریق عنصر <h1> و یک پاراگراف از طریق عنصر <p> است. از آنجا که هر دو عنوان و پاراگراف درون عنصر <body> قرار دارند، در صفحه وب قابل مشاهده هستند.
هنگامی که یک عنصر در داخل یک عنصر دیگر قرار می گیرد، همچنین به عنوان توزیع شده شناخته می شود، ایده خوبی است که این عنصر را ترک کند تا ساختار سند را به خوبی سازماندهی و قابل خواندن نگه دارد. در کد قبلی، هر دو عنصر <head> و <body> درون عنصر <html> قرار گرفتند و انداختند. الگوی کشویی برای عناصر همچنان ادامه دارد به عنوان عناصر جدید در داخل عناصر <head> و <body> اضافه شده است.
عناصر خود بسته شدن
در مثال قبلی، عنصر <meta> تنها یک برچسب داشت و یک برچسب بسته را نداشت. ترس نیست، این عمدی بود. همه عناصر شامل تگ های باز و بسته نیستند. بعضی از عناصر فقط مطالب و رفتار خود را از صفات در یک برچسب واحد دریافت می کنند. عنصر <meta> یکی از این عناصر است. محتوای عنصر <meta> قبلی با استفاده از ویژگی و مقدار charset اختصاص داده شده است. دیگر عناصر selfclosing معمول عبارتند از:
<embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
ساختار مشخص شده در اینجا، استفاده از نوع سند <! DOCTYPE html> و <html>، <head> و <body> عناصر، بسیار معمول است. ما می خواهیم این ساختار سند را به صورت دستی نگه داریم، همان طور که ما اسناد جدید HTML ایجاد می کنیم.
اعتبار کد
مهم نیست که چگونه ما در هنگام نوشتن کد ما دقیق هستیم، ما ناگزیر اشتباه میکنیم. خوشبختانه، هنگام نوشتن HTML و CSS ما دارای اعتبار سنجی برای بررسی کار ما هستیم. W3C هر دو اعتبار سنجی HTML و CSS را ساخته است که کد را برای اشتباهات اسکن می کند. اعتبارسنجی کد ما نه تنها به آن در تمام مرورگرها به درستی ارائه می دهد، بلکه به ما در جهت بهترین روش برای نوشتن کد کمک می کند.
در تمرین
به عنوان طراحان وب و طراحان جلویی، ما لوکس حضور در تعدادی از کنفرانس های بزرگ اختصاص داده شده به صنایع دستی ما. ما قصد داریم کنفرانس خود، کنفرانس سبک، و ایجاد یک وب سایت برای آن در درس های زیر است. اینجا برویم
بیایید ویرایشگر متن خود را باز کنیم، یک فایل جدید با نام index.html ایجاد کنیم و آن را به مکانی که فراموش نخواهد کرد ذخیره کنیم. من قصد دارم یک پوشه در دسکتاپ من به نام "style-conference" ایجاد کنم و این فایل را در آنجا ذخیره کنم؛ احساس رایگان برای انجام همان.
در فایل index.html، ساختار سند، از جمله نوع سند <! DOCTYPE html> و عناصر <html>، <head> و <body> را اضافه کنید.
<! DOCTYPE html>
<html lang = "en">
<head>
</ head>
<body>
</ body>
</ html>
درون عنصر <head>، اجازه دهید عناصر <meta> و <title> را اضافه کنیم. عنصر <meta> باید دارای ویژگی و مقدار مناسب charset باشد، در حالی که عنصر <title> باید دارای عنوان صفحه باشد، بگذارید بگوییم «Conference Style».
<head>
<meta charset = "utf-8">
<title> کنفرانس سبک </ title>
</ head>
داخل عنصر <body>، اجازه دهید عناصر <h1> و <p> اضافه کنیم. عنصر <h1> باید شامل عنوانی باشد که ما مایل به inclusion-l هستیم
استفاده از "Styles Conference" دوباره استفاده کنید و عنصر <p> باید یک بند ساده برای معرفی کنفرانس خود داشته باشید.
<body>
<h1> کنفرانس سبک </ h1>
<p> هر ساله طراحان وب و طراحان جلویی پیشرفته در شیکاگو برای بحث در مورد آخرین فن آوری ها فرود می آیند. </ p> به ما بپیوندید
</ body>
اکنون وقت آن رسیده است که چگونه ما انجام داده ایم! بیایید فایل index.html خودمان را پیدا کنیم (معدن درون پوشه "style-conference" در دسکتاپ من است). دو بار کلیک کردن بر روی این فایل یا کشیدن آن به یک مرورگر وب آن را برای ما بازبینی می کند.
وب سایت کنفرانس سبک
اولین گام ما برای ساختن وب سایت کنفرانس سبک ما
بیایید کمی دنده ها را عوض کنیم، از HTML حرکت کنیم و CSS را نگاه کنیم. به یاد داشته باشید، HTML محتوای و ساختار صفحات وب را تعریف می کند، در حالی که CSS سبک بصری و ظاهر صفحات وب ما را تعریف می کند.
درک شرایط مشترک CSS
علاوه بر اصطلاحات HTML، چندین اصطلاح CSS معمولی وجود دارد که می خواهید خود را آشنا کنید. این شرایط عبارتند از: انتخابگرها، خواص و مقادیر. همانطور که با اصطلاح HTML، بیشتر با CSS کار می کنید، بیشتر این شرایط به طبیعت دوم تبدیل می شود.
انتخابگرها
همانطور که عناصر به یک صفحه وب اضافه می شوند، ممکن است از CSS استفاده کنند. انتخابگر دقیقا همان عنصر یا عناصر در HTML ما را تعیین می کند تا سبک ها (مانند رنگ، اندازه، و موقعیت) را به هدف قرار دهد و اعمال کند. انتخابگرها ممکن است شامل ترکیبی از مقادیر مختلف برای انتخاب عناصر منحصر به فرد باشند، همه بسته به اینکه چه ویژگی خاصی ما می خواهیم باشد. به عنوان مثال، ممکن است بخواهیم هر پاراگراف را در یک صفحه انتخاب کنیم، یا شاید ما بخواهیم فقط یک پاراگراف خاص را در یک صفحه انتخاب کنیم.
انتخابگرها عموما یک مقدار مشخصه مانند یک شناسه یا مقدار کلاس را هدف قرار میدهند یا نوع عنصر مانند <h1> یا <p> را هدف قرار میدهند.
در داخل CSS، selectors با brackets curly دنبال می شوند، {}، که شامل سبک هایی است که برای عنصر انتخاب شده اعمال می شود. انتخابگر در اینجا تمام عناصر <p> را هدف قرار می دهد.
پ { ... }
خواص
هنگامی که یک عنصر انتخاب می شود، یک ملک سبک هایی را که برای آن عنصر اعمال می شود تعیین می کند. نام اموال پس از یک انتخابگر، در داخل براکت های مجاور، {}، و بلافاصله قبل از کولون،:. خواص متعددی که می توانیم از آن استفاده کنیم، مانند پس زمینه، رنگ، اندازه قلم، ارتفاع و عرض، و خواص جدید اغلب اضافه شده است. در کد زیر ما تعریف رنگ ها و خواص فونت را برای همه عناصر <p> اعمال می کنیم.
پ {
رنگ: ...؛
اندازه فونت: ...؛
}
ارزش های
تا کنون یک عنصر را با انتخابگر انتخاب کرده ایم و تعیین می کنیم که سبک ما چه ویژگی هایی را با آن اعمال کنیم. حالا ما می توانیم رفتار آن اموال را با مقدار تعیین کنیم. مقادیر را می توان به عنوان متن بین کولون،، و semicolon، شناسایی کرد. در اینجا ما همه عناصر <p> را انتخاب می کنیم و مقدار خواص رنگ را به رنگ نارنجی می دهیم و مقدار دارایی فونت اندازه 16 پیکسل است.
پ {
رنگ نارنجی؛
فونت اندازه: 16 پیکسل؛
}
برای بررسی، در CSS قوانین ما شروع می شود با انتخاب، که بلافاصله توسط براکت های curly بارگذاری می شود. درون این براکت های در حال تعریف، اعلامیه هایی هستند که از جفت های مالکیت و ارزش تشکیل شده اند. هر یک از اعلان ها با یک املاک آغاز می شود، که توسط یک کولون، ارزش اموال و در نهایت یک ابهام قرار می گیرد.
یک شیوه معمول است که جفتهای اموال و ارزش را درون محدودههای در حال شکلگیری قرار دهیم. همانند HTML، این سوراخ ها به حفظ کد ما سازماندهی شده و قابل خواندن است.
طرح کلی نحو CSS
عکس. 1
طرح نحوی CSS شامل انتخابگر، خواص و مقادیر
دانستن چند اصطلاح رایج و نحو کلی CSS، شروع خوبی است، اما قبل از پریدن در عمق، چند مورد دیگر را یاد می گیریم. به طور خاص، ما باید نگاه دقیقتری به نحوه کارکرد انتخابگرها در CSS داشته باشیم.
کار با Selectors
انتخابگرها، همانطور که قبلا ذکر شد، نشان می دهد که کدام عناصر HTML در حال طراحی هستند. مهم است که به طور کامل درک کنید که چگونه از selectors ها استفاده می کنید و چگونگی استفاده از آنها را می توانید استفاده کنید. اولین گام این است که با انواع مختلف انتخابگر آشنا شوید. ما با رایج ترین انتخابگرها: نوع، کلاس و انتخابگرهای ID شروع می کنیم.
انتخاب نوع
عناصر هدف را بر اساس نوع عنصر خود انتخاب کنید. برای مثال، اگر می خواهیم تمامی اجزای تقسیم را هدف قرار دهیم، <div>، ما از select type div استفاده می کنیم. کد زیر یک انتخابگر نوع برای عناصر تقسیم و همچنین آن مربوط به HTML را انتخاب می کند.
CSS
div {...}
HTML
<div> ... </ div>
<div> ... </ div>
انتخاب کننده کلاس
انتخابگرهای کلاس به ما اجازه می دهند یک عنصر را بر اساس ارزش ویژگی کلاس موردنظر انتخاب کنیم. انتخابگرهای کلاس کمی خاص تر از انتخابگرهای نوع هستند، زیرا گروهی از عناصر را انتخاب می کنند تا همه عناصر یک نوع.
انتخابگرهای کلاس به ما اجازه می دهد سبک های یکسانی را برای عناصر مختلف در یک زمان با استفاده از یک مقدار مشخصه کلاس در عناصر چندگانه استفاده کنیم.
در CSS، کلاس ها با یک دوره پیشین،.، و سپس ویژگی کلاس مشخص می شوندارزش. در اینجا انتخابگر کلاس هر عنصر حاوی مقدار ویژگی کلاس عالی را انتخاب می کند، از جمله عناصر هر دو بخش و پاراگراف.
CSS
.عالی { ... }
HTML
<div class = "awesome"> ... </ div>
<p class = "awesome"> ... </ p>
انتخابگرهای ID
انتخابگرهای ID حتی دقیقتر از انتخابگرهای کلاس هستند، زیرا آنها فقط یک عنصر منحصر به فرد را در یک زمان هدف قرار می دهند. درست همانطور که انتخابگرهای کلاس از مقدار مشخصه کلاس element به عنوان انتخابگر استفاده می کنند، انتخابگرهای شناسه از یک ویژگی attribute id به عنوان یک انتخابگر استفاده می کنند.
صرف نظر از اینکه کدام عنصر در آنها ظاهر می شود، ارزش شناسایی شناسه تنها می تواند یک بار در هر صفحه استفاده شود. اگر مورد استفاده قرار گیرد باید برای عناصر قابل توجهی رزرو شود.
در داخل CSS، شناسه های شناسایی با یک علامت هش پیشرو # مشخص می شوند که به دنبال آن مقدار مشخصه id است. در اینجا انتخابگر ID فقط عنصر حاوی مقدار مشخصه attribute shayhowe را انتخاب می کند.
CSS
#shayhowe {...}
HTML
<div id = "shayhowe"> ... </ div>
انتخابگرهای اضافی
انتخابگرها بسیار قدرتمند هستند و انتخابگرهایی که در اینجا معرفی شده، رایج ترین انتخابگرهای ما هستند. این انتخابگرها تنها آغاز هستند. بسیاری از گزینه های پیشرفته تر وجود دارند و به راحتی در دسترس هستند. هنگامی که با این انتخابگرها احساس راحتی می کنید، نگران نباشید به برخی از گزینه های پیشرفته تر نگاه کنید.
درست است، همه چیز شروع به هم می شود. ما عناصر را به یک صفحه درون HTML اضافه می کنیم و سپس می توانیم آن عناصر را انتخاب کنیم و سبک های آنها را با استفاده از CSS اعمال کنیم. حالا اجازه دهید نقاط بین HTML و CSS ما را متصل کنیم و این دو زبان را با هم همکاری کنیم.
ارجاع CSS
برای دریافت CSS ما با HTML ما صحبت می کنیم، ما باید فایل CSS خود را در HTML ما مرجع. بهترین روش برای ارجاع به CSS ما این است که تمام سبک های ما را در یک ورق سبک خارجی جداگانه قرار دهیم که از داخل عنصر <head> سند HTML ما اشاره شده است. با استفاده از یک ورق سبک خارجی، ما می توانیم از همان سبک ها در کل وب سایت استفاده کنیم و به سرعت تغییرات را در سراسر سایت انجام دهیم.
گزینه های دیگر برای اضافه کردن CSS
گزینه های دیگر برای اشاره به CSS شامل استفاده از سبک های داخلی و درون خطی می باشد. شما ممکن است این گزینه ها را در وحشی مشاهده کنید، اما آنها به طور کلی برطرف می شوند، زیرا وب سایت های به روز رسانی را تند و تیز می کنند.
برای ایجاد ورق سبک خارجی CSS ما می خواهیم از ویرایشگر متن انتخاب خودمان دوباره برای ایجاد یک فایل متنی ساده با یک پسوند فایل CSS استفاده کنیم. فایل CSS ما باید در همان پوشه یا زیر پوشه ذخیره شود، جایی که فایل HTML ما واقع شده است.
در عنصر <head> سند HTML، عنصر <link> برای تعریف رابطه بین فایل HTML و فایل CSS استفاده می شود. از آنجا که ما به CSS پیوند می دهیم، از رابطه attribute با مقدار شی مشخص استفاده می کنیم تا رابطه آنها مشخص شود. علاوه بر این، ویژگی href (یا مرجع لینک) برای شناسایی مکان یا مسیر فایل CSS استفاده می شود.
مثال زیر از عنصر HTML <head> که به یک ورقه سبک خارجی منحصر می شود را در نظر بگیرید.
<head>
<link rel = "stylesheet" href = "main.css">
</ head>
برای اینکه CSS به درستی رندر شود، مسیر ارزش href attribute باید به طور مستقیم با جایی که فایل CSS ما ذخیره می شود، مرتبط باشد. در مثال قبلی، فایل main.css در همان مکان به عنوان فایل HTML ذخیره می شود، همچنین به عنوان دایرکتوری ریشه شناخته می شود.
اگر فایل CSS ما در یک پوشه زیر و یا زیر پوشه باشد، مقدار مشخصه href باید به این مسیر مرتبط باشد. به عنوان مثال، اگر فایل main.css ما در یک زیر پوشه به نام stylesheets ذخیره شده باشد، مقدار ویژگی href عبارت stylesheets / main.css است، با استفاده از یک اسلش رو به جلو برای نشان دادن در حال حرکت به یک زیر پوشه.
در این مرحله، صفحات ما به آرامی، اما قطعا شروع به زندگی می کنند. ما بیش از حد به CSS دست زده ایم، اما ممکن است متوجه شده باشید که برخی از عناصر سبک های پیش فرض ما را در CSS خود اعلام نکرده اند. این مرورگر است که سبک های CSS مورد نظر خود را برای این عناصر تحمیل می کند. خوشبختانه ما می توانیم این سبک ها را به آسانی بازنویسی کنیم، این همان چیزی است که ما بعدا با استفاده از بازنشستگی CSS انجام می دهیم.
با استفاده از CSS بازنشانی
هر مرورگر وب سبک های پیش فرض خود را برای عناصر مختلف دارد. چگونه گوگل کروم عنوان ها، پاراگراف ها، لیست ها و غیره را ارائه می دهد ممکن است متفاوت از نحوه کار اینترنت اکسپلورر باشد. برای اطمینان از سازگاری بین مرورگرها، بازنشستگی CSS به طور گسترده ای مورد استفاده قرار گرفته است.
بازنشانی CSS هر عنصر HTML معمولی را با یک شیء از پیش تعیین شده می گیرد و یک سبک یکپارچه برای همه مرورگرها فراهم می کند. این بازنشستگی معمولا شامل حذف هر نوع اندازه، حاشیه، پرده یا سبک اضافی و تون کردن این مقادیر پایین است. از آنجا که CSS آبشار از بالا به پایین بیشتر است که به زودی - بازنشانی ما باید در بالای صفحه سبک ما باشد. انجام این کار تضمین می کند که این سبک ها برای اولین بار خوانده شده و تمام مرورگرهای مختلف وب از یک خط پایه مشترک استفاده می کنند.
بازنشانی Meyer که سازگار است، شامل سبک برای عناصر HTML5 جدید است.
اگر احساس می کنید کمی پرماجرا هستید، Normalize.css نیز توسط Nicolas Gallagher ایجاد شده است. Normalize.css بر روی استفاده از تنظیم مجدد سخت برای تمام عناصر رایج تمرکز نمی کند، بلکه بر روی تنظیم سبک های معمول برای این عناصر است. این نیاز به درک قویتری از CSS، و همچنین آگاهی از آنچه که می خواهید سبک های خود را داشته باشید.
سازگاری متقابل مرورگر و تست
همانطور که قبلا ذکر شد، مرورگرهای مختلف عناصر را به شیوه های مختلف ارائه می دهند. مهم است که ارزش در سازگاری و آزمایش متقابل مرورگر را تشخیص دهیم. وب سایت ها نیازی به نگاه دقیقا در هر مرورگر ندارند، اما باید نزدیک باشند. کدام مرورگرهایی که مایل به پشتیبانی هستند و به چه میزان، تصمیماتی هستند که باید براساس آنچه که برای وب سایت شما مناسب است، باشد.
در همه موارد، تعداد کمی از مواردی که در هنگام نوشتن CSS وجود دارد مورد توجه است. خبر خوب این است که هر چیزی ممکن است، و با صبر کمی، ما آن را تمام کردن.
در تمرین
برگرداندن پشت به جایی که ما آخرین در وب سایت کنفرانس مانده است، بیایید ببینید که آیا می توانیم در کمی CSS اضافه کنیم.
درون پوشه "style-conferencing" ما، یک پوشه جدید به نام "assets" ایجاد کنیم. ما تمام دارایی های وب سایت ما، مانند ورق های سبک، تصاویر، فیلم ها و ... را در این پوشه ذخیره می کنیم. برای ورق های سبک ما، بیایید جلو برویم و پوشه دیگری با نام "stylesheets" در داخل پوشه "assets" اضافه کنیم.
با استفاده از ویرایشگر متن ما، یک فایل جدید با نام main.css ایجاد کرده و آن را در پوشه «stylesheets» که ما آن را ایجاد کرده ایم ذخیره کنید.
با نگاهی به فایل index.html ما در یک مرورگر وب می توانید ببینید که عناصر <h1> و <p> هر یک از سبک های پیش فرض CSS دارند. به طور خاص، هر کدام از آنها یک اندازه فونت و فاصله در اطراف آنها دارند. با استفاده از بازنشانی اریک مایر، می توانیم این سبک ها را تغییر دهیم، به این ترتیب هر یک از آنها را از همان پایگاه می توانیم طراحی کنیم. برای انجام این کار، اجازه دهید به وب سایت اریک برگردیم، مجددا تنظیم مجدد کنیم و آن را در بالای فایل main.css ما قرار دهیم.
/ * meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
مجوز: هیچ (دامنه عمومی)
* /
HTML، body، div، span، applet، object، iframe،
h1، h2، h3، h4، h5، h6، p، blockquote، pre،
a، abbr، acronym، آدرس، بزرگ، cite، کد،
دل، dfn، em، img، ins، kbd، q، s، samp،
کوچک، اعتصاب، قوی، زیر، sup، tt، var،
ب، تو، من، مرکز
dl، dt، dd، ol، ul، li،
fieldset، فرم، برچسب، افسانه
جدول، caption، tbody، tfoot، thead، tr، th، td،
مقاله، کنار، بوم، جزئیات، جاسازی
شکل، شکل، پایه، هدر، hgroup،
منو، نوک، خروجی، ruby، بخش، خلاصه،
زمان، علامت، صدا، ویدئو {
حاشیه: 0؛
padding: 0؛
مرز: 0؛
فونت اندازه: 100٪؛
فونت: به ارث بری
عمودی: خط پایه؛
}
/ * بازنشانی HTML5 نمایش صفحه نمایش برای مرورگرهای قدیمی * /
مقاله، کنار، جزئیات، شکل، شکل
footer، header، hgroup، menu، nav، بخش {
نمایش: بلوک؛
}
بدن {
خط ارتفاع: 1؛
}
ol، ul {
لیست سبک: هیچ؛
}
blockquote، q {
نقل قول: هیچکدام؛
}
blockquote: before، blockquote: after،
q: قبل، q: بعد از {
محتوا: ''؛
محتوا: هیچ؛
}
جدول {
فروپاشی مرز: سقوط؛
فاصله مرز: 0؛
}
با شروع فایل اصلی main.css، ما آن را به فایل index.html ما متصل می کنیم. باز کردن فایل index.html در ویرایشگر متن ما، اجازه دهید عنصر <link> را در عنصر <head> ما، درست بعد از عنصر <title> اضافه کنیم.
از آنجا که ما یک صفحه سبک را درون عنصر <link> ارجاع می دهیم، می توانیم رابطه attribute، rel را با یک مقدار از شیوه نامه اضافه کنیم.
ما همچنین می خواهیم حاوی یک مرجع لینک با استفاده از ویژگی href به فایل main.css ما باشد. به یاد داشته باشید، فایل main.css ما در پوشه "stylesheets" ذخیره شده است، که در داخل پوشه "assets" قرار دارد. بنابراین، مقدار خصیصه href، که مسیر به فایل main.css است، باید asset / stylesheets / main.css باشد.
<head>
<meta charset = "utf-8">
<title> کنفرانس سبک </ title>
<link rel = "stylesheet" href = "assets / stylesheets / main.css">
</ head>
زمان برای بررسی کار ما و ببینید که آیا HTML و CSS ما همراه هستند. در حال باز کردن فایل index.html ما (و یا تازه کردن صفحه اگر آن را در حال حاضر باز شده) در یک مرورگر وب باید نتایج کمی متفاوت از قبل نشان می دهد.
وب سایت کنفرانس سبک
وب سایت کنفرانس سبک ما با بازنشانی CSS
نسخه ی نمایشی و کد منبع
در زیر شما می توانید وب سایت کنفرانس سبک ها را در حالت فعلی خود مشاهده کنید و همچنین کد منبع وب سایت را در حالت فعلی خود دانلود کنید.
مشاهده وب سایت کنفرانس سبک ها یا دانلود کد منبع (فایل زیپ)
خلاصه
تا کنون خیلی خوب! ما چند درس بزرگ در این درس گرفته ایم.
فقط فکر می کنم، شما در حال حاضر اصول اولیه HTML و CSS را می دانید. همانطور که ما ادامه می دهیم و زمان بیشتری را صرف نوشتن HTML و CSS می کنید، با دو زبان راحت تر خواهید شد.
برای بازگرداندن، تا کنون ما موارد زیر را پوشش داده ایم:
تفاوت بین HTML و CSS
با آشنا شدنعناصر HTML، برچسب ها و صفات
ساختار نخستین صفحه وب خود را تنظیم کنید
درک با انتخابگرها، خواص و مقادیر CSS
کار با انتخابگرهای CSS
CSS را در HTML خود بنویسید
مقدار CSS بازنشانی می شود
