حقایق را با این نکات دریافت کنید
همه مرورگرهای وب شامل مواردی هستند که به عنوان "سبک های پیش فرض" شناخته می شوند. اینها سبک هایی هستند که در غیاب هر گونه اطلاعات سبک دیگر، ظاهر و احساس عناصر HTML را تعیین می کنند. به عنوان مثال، در تقریبا هر مرورگر، نمایش پیش فرض از لینک ها یک رنگ آبی روشن با خط زیر است. این است که چگونه این لینک ها به نظر می رسد مگر اینکه شما به آنها بگویید به نمایش در راه های مختلف.
سبک های پیش فرض مرورگر می تواند مفید باشد، اما در بسیاری از موارد طراحان وب می خواهند این سبک ها را حذف کنند تا بتوانند با سبک هایی که 100٪ کنترل دارند، تازه شروع کنند. این کار با استفاده از آنچه که به عنوان یک "سبک اصلی" شناخته می شود انجام می شود.
یک شیوه کارشناسی ارشد باید اولین شیوه ای است که شما در همه اسناد خود می نویسم. شما از یک شیوه کارشناسی ارشد برای پاک کردن تنظیمات مرورگر پیش فرض استفاده می کنید که می تواند مشکلی در طراحی وب سایت متقابل مرورگر ایجاد کند. هنگامی که سبک را با سبک اصلی پاک کنید، طراحی شما از همان مکان در تمام مرورگرها شروع می شود - مثل یک نقاشی تمیز برای نقاشی.
پیش فرض های جهانی
سبک کارشناسی ارشد شما باید از صفر کردن حاشیه ها، سطوح و مرزهای صفحه شروع شود. بعضی از مرورگرهای وب به طور پیش فرض بدن سند را به 1 یا 2 پیکسل از لبه های مرورگر محصور می کند. این باعث می شود که همه آنها یکسان باشند:
html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ }شما همچنین می خواهید فونت را سازگار کنید. همچنین مطمئن شوید که اندازه فونت را تا 100 درصد یا 1 درجه تنظیم کنید، به طوری که صفحه شما در دسترس است، اما اندازه آن هنوز هم سازگار است. و مطمئن باشید که شامل خط ارتفاع.
body {font: 1em / 1.25 Arial، Helvetica، sans serif؛ }فرمت سرصفحه
عنوان های سرصفحه یا هدر (H1، H2، H3، و غیره) به طور معمول به نوع bold متن با حاشیه های بزرگ و یا حاشیه در اطراف آنها متناظر است. با پاک کردن وزن، حاشیه ها و پرده ها، شما اطمینان حاصل می کنید که این برچسب ها بدون داشتن سبک های اضافی بزرگتر (و یا کوچکتر) از متن در اطراف آنها باقی می مانند:
h1، h2، h3، h4، h5، h6 {حاشیه: 0؛ padding: 0؛ فونت وزن: طبیعی؛ فونت خانواده: Arial، Helvetica، sans-serif؛ }ممکن است بخواهید تنظیمات خاصی را برای اندازه تخصیص نامه ها و سطوح مختلف به برچسب های عنوان خود داشته باشید، اما این واقعا به سبک سایت طراحی شده بستگی دارد و باید از صفحه سبک اصلی کنار گذاشته شود. شما می توانید سبک های بیشتری برای این دسته ها اضافه کنید، به عنوان مورد نیاز برای طراحی خاص خود.
قالب بندی متن ساده
فراتر از سرفصل ها، برچسب های متنی دیگری وجود دارد که باید حتما پاک شود. یکی از مجموعه هایی که اغلب مردم فراموش می کنند، برچسب سلول جدول (TH و TD) و تگ های فرم (SELECT، TEXTAREA و INPUT) هستند. اگر شما آنها را به همان اندازه بدن و متن پاراگراف خود تنظیم نکنید، ممکن است ناخوشایند از اینکه مرورگرها آنها را رندر می کنند، شگفت زده می شوند.
p، th، td، li، dd، dt، ul، ol، blockquote، q، مخفف، abbr، a، input، select، textarea {margin: 0؛ padding: 0؛ فونت: طبیعی طبیعی عادی 1m / 1.25 Arial، Helvetica، sans-serif؛ }همچنین می توانید نقل قول های خود را (BLOCKQUOTE و Q)، اختصارات و اختصارات را کمی سبک اضافی بدهید تا آنها کمی بیشتر به نظر برسند:
blockquote {margin: 1.25em؛ padding: 1.25em} q {font-style: italic؛ } acronym، abbr {cursor: help؛ border-bottom: 1px dotted؛ }پیوندها و تصاویر
پیوندها آسان هستند و می توانند از آن متن زیر با رنگ قرمز روشن آبی استفاده کنند. من ترجیح می دهم همیشه پیوندهای من باقی بماند، اما اگر شما آن را به روش دیگری ترجیح می دهید، می توانید این گزینه ها را به طور جداگانه تنظیم کنید. من همچنین رنگ ها را در ورق سبک اصلی نمی گنجانم، زیرا این بستگی به طراحی دارد.
a، a: link، a: visited، a: active، a: hover {text-decoration: underline؛ }با تصاویر، مهم است که مرزها را خاموش کنید. در حالی که اکثر مرورگرها یک مرز را در اطراف یک تصویر ساده نشان نمی دهند، زمانی که تصویر مرتبط است، مرورگرها مرز را خاموش می کنند. برای رفع این:
img {border: none؛ }جداول
در حالی که جداول دیگر برای مقاصد طرح استفاده نمی شوند، سایت شما هنوز هم می تواند از آنها برای داده های واقعی tabluar استفاده کند. این یک استفاده خوب از جداول HTML است. ما قبلا مطمئن شده ایم که اندازه متن پیش فرض برای سلول های جدول شما یکسان است، اما چند سبک دیگر که باید تنظیم کنید تا جداول شما باقی بمانند:
جدول {حاشیه: 0؛ padding: 0؛ مرز: هیچ؛ }تشکیل می دهد
مانند سایر عناصر، باید حاشیه ها و سطوح اطراف فرم هایتان را پاک کنید. یکی دیگر از چیزهایی که دوست دارم انجام دهم این است که تگ فرم را به عنوان " inline " بازنویسی کنید تا فضای اضافی را اضافه نکنید که در آن برچسب را در کد قرار دهید. همانند سایر عناصر متن، اطلاعات فونت را برای select، textarea و ورودی بالای بالا تعریف می کنم، به طوری که این همان بقیه متن من است.
form {margin: 0؛ padding: 0؛ نمایش: درون خطی؛ }این نیز یک ایده خوب برای تغییر مکان نما برای برچسب شما است. این به مردم کمک می کند تا ببینند که برچسب چه زمانی روی آن کلیک می کند.
برچسب {نشانگر: اشاره گر؛ }کلاس های مشترک
برای این بخش از سبک استاد، شما باید کلاسهایی را تعریف کنید که برای شما اهمیت دارند. این ها برخی از کلاس های من هستند که اغلب استفاده می کنند. توجه داشته باشید که آنها به هیچ عنصر خاصی تنظیم نشده اند، بنابراین شما می توانید آنها را به هر چیزی که نیاز دارید اختصاص دهید:
پاک کن {روشن: هر دو؛ } .floatLeft {شناور: چپ؛ } .floatRight {شناور: راست؛ } .textLeft {text-align: left؛ } .textRight {text-align: right؛ } .textCenter {text-align: center؛ } .textJustify {text-align: justify؛ } .blockCenter {نمایش: بلوک؛ حاشیه سمت چپ: خودکار؛ حاشیه سمت راست: خودکار؛ } / * به یاد داشته باشید برای تنظیم عرض * / .bold {font-weight: bold؛ } .italic {font-style: italic؛ } .underline {text-decoration: underline؛ } .noindent {حاشیه سمت چپ: 0؛ padding-left: 0؛ } .nomargin {حاشیه: 0؛ } .nopadding {padding: 0؛ } .nobullet {list-style: none؛ list-style-image: none؛ }به یاد داشته باشید که چون این کلاسها قبل از هر سبک دیگری نوشته شده و فقط کلاس هستند، با ویژگی های سبک خاص تر که در آبشار رخ می دهند، آسان است . اگر متوجه شوید که یک کلاس مشترک را در یک عنصر تنظیم کرده اید و تاثیری ندارد، باید مطمئن شوید که در یکی از شیوه های بعدی که بر آن عنصر تاثیر می گذارد، هیچ شیوه دیگری وجود ندارد.
کل Stylesheet اصلی
/ * Default Defaults * / html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ } body {font: 1em / 1.25 Arial، Helvetica، sans serif؛ } / * Headlines * / h1، h2، h3، h4، h5، h6 {margin: 0؛ padding: 0؛ فونت وزن: طبیعی؛ فونت خانواده: Arial، Helvetica، sans-serif؛ } / * سبکهای متن * / p، th، td، li، dd، dt، ul، ol، blockquote، q، acronym، abbr، a، input، select، textarea {margin: 0؛ padding: 0؛ فونت: طبیعی طبیعی عادی 1m / 1.25 Arial، Helvetica، sans-serif؛ } blockquote {margin: 1.25em؛ padding: 1.25em} q {font-style: italic؛ } acronym، abbr {cursor: help؛ border-bottom: 1px dotted؛ } کوچک {font-size: .85em؛ } بزرگ {font-size: 1.2em؛ } / * Links and Images * / a، a: link، a: visited، a: active، a: hover {text-decoration: underline؛ } img {border: none؛ } / * جداول * / جدول {حاشیه: 0؛ padding: 0؛ مرز: هیچ؛ } / * فرم ها * / فرم {حاشیه: 0؛ padding: 0؛ نمایش: درون خطی؛ } برچسب {مکان نما: اشاره گر؛ } / * کلاس های مشترک * / .clear {پاک: هر دو؛ } .floatLeft {شناور: چپ؛ } .floatRight {شناور: راست؛ } .textLeft {text-align: left؛ } .textRight {text-align: right؛ } .textCenter {text-align: center؛ } .textJustify {text-align: justify؛ } .blockCenter {نمایش: بلوک؛ حاشیه سمت چپ: خودکار؛ حاشیه سمت راست: خودکار؛ } / * به یاد داشته باشید برای تنظیم عرض * / .bold {font-weight: bold؛ } .italic {font-style: italic؛ } .underline {text-decoration: underline؛ } .noindent {حاشیه سمت چپ: 0؛ padding-left: 0؛ } .nomargin {حاشیه: 0؛ } .nopadding {padding: 0؛ } .nobullet {list-style: none؛ list-style-image: none؛ }مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 10/6/17