طراحی سایت و فروشگاه اینترنتی

ساخت اولین وب سایت شما

در این درس 1

شرایط مشترک HTML

ساختار سند

ارجاع CSS

CSS

شرایط مشترک CSS

کار با Selectors

با استفاده از CSS بازنشانی

اشتراک گذاری

به اشتراک گذاشتن در توییتر

 

در فیسبوک به اشتراک بگذارید

 

به اشتراک گذاشتن در + Google

 

دانش آموزان و معلمان، تا 60? در Adobe Creative Cloud ذخیره کنید.

تبلیغات از طریق کربن

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

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

در این کتاب، من قصد دارم به شما نشان دهد که چگونه وب سایت های خود را با استفاده از دو زبان رایج ترین زبان های 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>عناصر، و بسیاری دیگر.

عناصر با استفاده از مقادیر کمتر و بزرگتر از زوایای زوج < >،، اطراف نام عنصر را شناسایی می کنند. بنابراین، یک عنصر به صورت زیر نگاه می کند:

1

2

<a>

              

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

یک تگ باز کردن آغاز یک عنصر را نشان می دهد. این شامل علامت کمتر از علامت پس از یک نام عنصر است، و سپس با علامت بزرگتر از علامت پایان می یابد؛ به عنوان مثال، <div>.

یک برچسب بسته شدن پایان یک عنصر را نشان می دهد. این شامل علامت کمتر از علامت است که به دنبال علامت رو به جلو و نام عنصر است و سپس با علامت بزرگتر از علامت پایان می یابد. به عنوان مثال، </div>.

محتویاتی که بین تگ های باز و بسته می افتد، محتوای آن عنصر است. مثلا یک پیوند لنگر، برچسب باز <a>و یک تگ بسته را داشته </a>باشد. چه چیزی بین این دو برچسب افت می کند، محتوای لینک لنگر است.

بنابراین، برچسب های لنگر کمی شبیه به این خواهد بود:

1

2

<a>...</a>

              

ویژگی های

ویژگی ها خواص مورد استفاده برای ارائه اطلاعات اضافی در مورد یک عنصر است. شایع ترین ویژگی ها عبارتند از idویژگی، که یک عنصر را شناسایی می کند. classویژگی، که طبقه بندی یک عنصر؛ srcویژگی، که یک منبع برای محتوای درج مشخص می کند. و hrefویژگی که مرجع hyperlink به یک منبع مرتبط را فراهم می کند.

خصوصیات درون تگ باز، پس از نام یک عنصر تعریف می شود. به طور کلی صفات عبارتند از نام و مقدار. فرمت برای این ویژگی ها شامل نام صفتی است که علامت برابر است و سپس مقدار مشخصه نقل قول است. به عنوان مثال، یک <a>عنصر از جمله hrefویژگی به نظر می رسد به شرح زیر است:

1

2

<a href="http://shayhowe.com/">Shay Howe</a>

              

شرایط عمومی HTML نسخه ی نمایشی

کد قبلی متن "Shay Howe" را در صفحه وب نشان می دهد و پس از کلیک کردن بر روی متن "Shay Howe" کاربران را به http://shayhowe.com/ می برد. عنصر لنگر با برچسب های باز <a>و بسته شدن </a>متن درج شده است و ویژگی و مقدار مرجع لینک های hyperlink href="http://shayhowe.com"در تگ باز می شود.

خطی نحو HTML

عکس. 1

طرح کلی نحو HTML شامل عنصر، صفت و برچسب

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

تنظیم ساختار سند HTML

اسناد HTML اسناد متنی ساده ذخیره شده با یک .htmlپسوند فایل و نه یک .txtپسوند فایل است. برای شروع نوشتن HTML، ابتدا به یک ویرایشگر متن ساده نیاز دارید که از آن راحت استفاده کنید. متاسفانه این مایکروسافت ورد یا صفحات را شامل نمی شود، زیرا آنها ویراستاران متناهی هستند. دو تا از محبوب ترین ویرایشگرهای متن ساده برای نوشتن HTML و CSS Dreamweaver و Sublime Text هستند. جایگزین های رایگان نیز شامل Notepad ++ برای ویندوز و TextWrangler برای مک است.

همه اسناد HTML یک ساختار مورد نیاز است که شامل اظهارنامه و عناصر زیر است: <!DOCTYPE html>، <html>، <head>، و <body>.

اعلامیه نوع سند، و یا <!DOCTYPE html>، اطلاع می دهد که مرورگرهای وب کدام نسخه از HTML استفاده می شود و در ابتدای سند HTML قرار می گیرد. از آنجا که ما از آخرین نسخه HTML استفاده میکنیم، اعلامیه نوع سند ما به سادگی است <!DOCTYPE html>. بعد از اعلام نوع سند، این <html>عنصر به معنای آغاز سند است.

در داخل <html>عنصر، <head>عنصر بالای سند، از جمله هر گونه ابرداده (همراه با اطلاعات در مورد صفحه) شناسایی می کند. محتوای داخل <head>عنصر در صفحه وب نمایش داده نمی شود. در عوض، ممکن است عنوان سند (که در نوار عنوان در پنجره مرورگر نمایش داده می شود)، پیوند به هر فایل خارجی یا هر فراداده مفید باشد.

تمام محتوای قابل مشاهده درون صفحه وب در داخل <body>عنصر قرار دارد. تجزیه یک ساختار سند HTML ساده به نظر می رسد به شرح زیر است:

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Hello World</title>

  </head>

  <body>

    <h1>Hello World</h1>

    <p>This is a web page.</p>

  </body>

</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 معمول عبارتند از:

<br> <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>عناصر.

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html lang="en">

  <head>

  </head>

  <body>

  </body>

</html>

                  

در داخل <head>عنصر، اجازه دهید اضافه کردن <meta>و <title>عناصر. <meta>عنصر باید شامل ویژگی charset مناسب و ارزش، در حالی که <title>عنصر باید عنوان حاوی صفحه اجازه دهید بگویم "سبک کنفرانس."

1

2

3

4

5

<head>

  <meta charset="utf-8">

  <title>Styles Conference</title>

</head>

                  

در داخل <body>عنصر، اجازه دهید اضافه کردن <h1>و <p>عناصر. این <h1>عنصر باید شامل عنوانی باشد که ما مایل به آن هستیم - اجازه دهید دوباره از «کنفرانس سبک» استفاده کنیم و <p>عنصر باید یک بند ساده برای معرفی کنفرانس خود داشته باشد.

1

2

3

4

5

<body>

  <h1>Styles Conference</h1>

  <p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>

</body>

                  

اکنون وقت آن رسیده است که چگونه ما انجام داده ایم! بیایید فایل index.html خودمان را پیدا کنیم (معدن درون پوشه "style-conference" در دسکتاپ من است). دو بار کلیک کردن بر روی این فایل یا کشیدن آن به یک مرورگر وب آن را برای ما بازبینی می کند.

وب سایت کنفرانس سبک

عکس. 1

اولین گام ما برای ساختن وب سایت کنفرانس سبک ما

بیایید کمی دنده ها را عوض کنیم، از HTML حرکت کنیم و CSS را نگاه کنیم. به یاد داشته باشید، HTML محتوای و ساختار صفحات وب را تعریف می کند، در حالی که CSS سبک بصری و ظاهر صفحات وب ما را تعریف می کند.

درک شرایط مشترک CSS

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

انتخابگرها

همانطور که عناصر به یک صفحه وب اضافه می شوند، ممکن است از CSS استفاده کنند. انتخاب تعیین دقیقا همان است که عنصر یا عناصر در HTML ما به هدف قرار دادن و سبک (مانند رنگ، اندازه، و موقعیت) اعمال می شود. انتخابگرها ممکن است شامل ترکیبی از مقادیر مختلف برای انتخاب عناصر منحصر به فرد باشند، همه بسته به اینکه چه ویژگی خاصی ما می خواهیم باشد. به عنوان مثال، ممکن است بخواهیم هر پاراگراف را در یک صفحه انتخاب کنیم، یا شاید ما بخواهیم فقط یک پاراگراف خاص را در یک صفحه انتخاب کنیم.

انتخابگرهای به طور کلی هدف قرار دادن یک مقدار ویژگی، مانند idو یا classارزش ها، یا هدف قرار دادن نوع عنصر، مانند <h1>و یا <p>.

در داخل CSS، selectors با brackets curly دنبال می شود {}، که شامل سبک هایی است که برای عنصر انتخاب شده اعمال می شود. انتخابگر در اینجا تمام <p>عناصر را هدف قرار می دهد .

1

2

p { ... }

              

خواص

هنگامی که یک عنصر انتخاب می شود، یک ملک سبک هایی را که برای آن عنصر اعمال می شود تعیین می کند. نام اموال پس از یک انتخابگر، در داخل براکت های مجعد {}، و بلافاصله قبل از یک روده بزرگ، رخ می دهد :. خواص متعدد ما می توانید استفاده کنید، مانند وجود دارد background، color، font-size، height، و width، و خواص جدید اغلب اضافه شده است. در کد زیر، ما تعریف colorو font-sizeخواص را به همه <p>عناصر اعمال می شود .

1

2

3

4

5

p {

  color: ...;

  font-size: ...;

}

              

ارزش های

تا کنون یک عنصر را با انتخابگر انتخاب کرده ایم و تعیین می کنیم که چه سبک ما می خواهیم با ملک اعمال کنیم. حالا ما می توانیم رفتار آن اموال را با مقدار تعیین کنیم. مقادیر را می توان به عنوان متن بین کولون :، و semicolon، شناسایی کرد ;. در اینجا ما همه <p>عناصر را انتخاب می کنیم و مقدار ارزش colorدارایی را تعیین می کنیم orangeو مقدار font-sizeملک به 16پیکسل ها می شود .

1

2

3

4

5

p {

  color: orange;

  font-size: 16px;

}

              

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

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

طرح کلی نحو CSS

عکس. 1

طرح نحوی CSS شامل انتخابگر، خواص و مقادیر

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

کار با Selectors

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

انتخاب نوع

نوع انتخابگرهای عناصر بر اساس نوع عنصر خود را هدف قرار دهند. به عنوان مثال، اگر می خواهیم تمام عناصر تقسیم را هدف قرار <div>دهیم، از یک نوع انتخاب select استفاده می کنیم div. کد زیر یک انتخابگر نوع برای عناصر تقسیم و همچنین آن مربوط به HTML را انتخاب می کند.

CSS

1

2

div { ... }

              

HTML

1

2

3

<div>...</div>          

<div>...</div>

              

انتخاب کننده کلاس

انتخابگرهای کلاس به ما اجازه می دهند یک عنصر را بر اساس classارزش مشخصه عنصر انتخاب کنیم . انتخابگرهای کلاس کمی خاص تر از انتخابگرهای نوع هستند، زیرا گروهی از عناصر را انتخاب می کنند تا همه عناصر یک نوع.

انتخابگرهای کلاس به ما اجازه می دهند سبک یکسانی را برای عناصر مختلف در یک زمان با استفاده از یک classمقدار مشخصه در میان عناصر چندگانه استفاده کنیم.

در CSS، کلاس ها با یک دوره پیشرو مشخص می شوند، .و به دنبال آن classمقدار ویژگی است. در اینجا انتخابگر کلاس هر عنصر حاوی classمقدار ویژگی awesome، شامل عناصر هر دو بخش و پاراگراف را انتخاب می کند.

CSS

1

2

.awesome { ... }

              

HTML

1

2

3

<div class="awesome">...</div>

<p class="awesome">...</p>

              

انتخابگرهای ID

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

صرف نظر از اینکه کدام عنصر در آنها ظاهر می شود، idمقادیر ویژگی تنها می تواند یک بار در هر صفحه استفاده شود. اگر مورد استفاده قرار گیرد باید برای عناصر قابل توجهی رزرو شود.

در CSS، شناسه های شناسایی با یک علامت هش برجسته مشخص می شوند، #و به دنبال آن idمقدار مشخصه می باشد. در اینجا انتخابگر ID فقط عنصر حاوی idمقدار attribute را انتخاب می کند shayhowe.

CSS

1

2

#shayhowe { ... }

              

HTML

1

2

<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 پیوند می دهیم، از relصفت با ارزش استفاده stylesheetمی کنیم تا ارتباط آنها را مشخص کنیم. علاوه بر این، ویژگی href(یا مرجع لینک) برای شناسایی مکان یا مسیر فایل CSS استفاده می شود.

مثال زیر از یک <head>عنصر سند HTML که به یک ورقه سبک خارجی منحصر می شود را در نظر بگیرید.

1

2

3

4

<head>

  <link rel="stylesheet" href="main.css">

</head>

وب سایت کاربر پسند              

برای اینکه CSS به درستی رندر شود، مسیر hrefمقدار ارزش باید به طور مستقیم با جایی که فایل CSS ما ذخیره می شود، مرتبط باشد. در مثال قبلی، main.cssفایل در همان مکان به عنوان فایل HTML ذخیره می شود، همچنین به عنوان دایرکتوری ریشه شناخته می شود.

اگر فایل CSS ما در یک پوشه زیر و یا زیر پوشه باشد، hrefمقدار مشخصه باید به این مسیر مربوط باشد. به عنوان مثال، اگر main.cssپرونده ما در یک زیر شاخه نامگذاری شده ذخیره شود stylesheets، hrefمقدار مشخصه stylesheets/main.css، با استفاده از یک اسلش رو به جلو برای نشان دادن حرکت به یک پوشه زیر است.

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

با استفاده از CSS بازنشانی

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

CSS resets take every common HTML element with a predefined style and provide one unified style for all browsers. These resets generally involve removing any sizing, margins, paddings, or additional styles and toning these values down. Because CSS cascades from top to bottom—more on that soon—our reset needs to be at the very top of our style sheet. Doing so ensures that those styles are read first and that all of the different web browsers are working from a common baseline.

There are a bunch of different resets available to use, all of which have their own fortes. One of the most popular resets is Eric Meyer’s reset, which has been adapted to include styles for the new HTML5 elements.

If you are feeling a bit more adventurous, there is also Normalize.css, created by Nicolas Gallagher. Normalize.css focuses not on using a hard reset for all common elements, but instead on setting common styles for these elements. It requires a stronger understanding of CSS, as well as awareness of what you’d like your styles to be.

Cross-Browser Compatibility & Testing

As previously mentioned, different browsers render elements in different ways. It’s important to recognize the value in cross-browser compatibility and testing. Websites don’t need to look exactly the same in every browser, but they should be close. Which browsers you wish to support, and to what degree, is a decision you will need to make based on what is best for your website.

In all there are a handful of things to be on the lookout for when writing CSS. The good news is that anything is possible, and with a little patience we’ll figure it all out.

In Practice

Picking back up where we last left off on our conference website, let’s see if we can add in a bit of CSS.

Inside of our “styles-conference” folder, let’s create a new folder named “assets.” We’ll store all of the assets for our website, such as our style sheets, images, videos, and so forth, in this folder. For our style sheets, let’s go ahead and add another folder named “stylesheets” inside the “assets” folder.

Using our text editor, let’s create a new file named main.css and save it within the “stylesheets” folder we just created.

Looking at our index.html file in a web browser, we can see that the <h1> and <p> elements each have default CSS styles. Specifically, they each have a unique font size and spacing around them. Using Eric Meyer’s reset, we can tone down these styles, allowing each of them to be styled from the same base. To do this let’s head over to Eric’s website, copy his reset, and paste it at the top of our main.css file.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126

  License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}

body {

 

}

ol, ul {

  list-style: none;

}

blockquote, q {

  quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

  content: "";

  content: none;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

}

                  

With our main.css file starting to take shape, let’s connect it to our index.html file. Opening the index.html file in our text editor, let’s add the <link> element within our <head> element, just after the <title> element.

Because we’ll be referencing a style sheet within the <link> element, let’s add the relation attribute, rel, with a value of stylesheet.

We also want to include a hyperlink reference, using the href attribute, to our main.css file. Remember, our main.css file is saved within the “stylesheets” folder, which is inside the “assets” folder. Therefore, the href attribute value, which is the path to our main.css file, needs to be assets/stylesheets/main.css.

1

2

3

4

5

6

<head>

  <meta charset="utf-8">

  <title>Styles Conference</title>

  <link rel="stylesheet" href="assets/stylesheets/main.css">

</head>

                  

Time to check out our work and see if our HTML and CSS are getting along. Now opening our index.html file (or refreshing the page if it’s already opened) within a web browser should show slightly different results than before.

Fig 1

Our Styles Conference website with a CSS reset

Demo & Source Code

در زیر شما می توانید وب سایت کنفرانس سبک ها را در حالت فعلی خود مشاهده کنید و همچنین کد منبع وب سایت را در حالت فعلی خود دانلود کنید.

مشاهده وبسایت کنفرانس سبک ها  یا دانلود کد منبع (فایل زیپ)

خلاصه

تا کنون خیلی خوب! ما چند درس بزرگ در این درس گرفته ایم.

فقط فکر می کنم، شما در حال حاضر اصول اولیه HTML و CSS را می دانید. همانطور که ما ادامه می دهیم و زمان بیشتری را صرف نوشتن HTML و CSS می کنید، با دو زبان راحت تر خواهید شد.

برای بازگرداندن، تا کنون ما موارد زیر را پوشش داده ایم: