آموزش مقدماتی HTML و CSS (جلسه ۱۱:کار با Typography-بخش اول)
1398/02/30 17:49 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه ۱۱:کار با Typography-بخش اول)

فیلد web typography به مرور زمان خیلی رشد کرده است. رشد و محبوبیت آن چندین دلیلی دارد. یکی از آن دلایل که همه می‌دانند، این است که باعث به وجود آمدن سیستمی برای ادغام فونت‌های وب خودمان در یک وبسایت شده است.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

در گذشته، به تعداد خیلی کمی از typefaceها که می‌توانستیم در یک وبسایت استفاده کنیم محدود بودیم. این typefaceها معمول و مرسوم‌ترین فونت‌های نصب شده روی رایانه‌ها بودند، بنابراین احتمال رندر شدن صحیح و مناسب آن‌ها در وبسایت‌ها بیشتر بود. اگر یک فونت روی یک رایانه نصب نشده بود، در وبسایت هم رندر نمی‌شد.

حالا، با قابلیت ادغام فونت‌ها، طیف خیلی وسیع‌تری از typefaceها را داریم و حق انتخابمان برای افزودن فونت‌های متفاوت به وبسایت خیلی بیشتر شده است.

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

Typeface در برابر فونت

واژه‌های typeface و فونت گاهی با هم اشتباه گرفته می‌شوند و این باعث گیج شدن کاربران می‌شود. در ادامه دقیقاً بررسی خواهیم کرد که هر واژه چه معنایی دارد.

Typeface چیزی است که ما می‌بینیم. Typeface تأثیر هنرمندانه ظاهر، حس و خوانایی متن است.

فونت یک فایل است که شامل یک typeface است. استفاده از یک فونت روی یک رایانه، برای رایانه امکان دسترسی به typeface را فراهم می‌کند.

یک روش برای کمک به مشخص کردن تفاوت بین typeface و فونت، مقایسه آن‌ها با آهنگ و MP3 است. Typeface از لحاظ کار هنری شبیه به آهنگ است. آهنگ توسط یک یا چندین هنرمند ساخته شده است و برای تفسیر و اظهار نظر عموم در دسترس است.

فونت، از طرف دیگر، خیلی شبیه به یک MP3 است، چون به خودی خود هیچ تأثیر هنری‌ای ندارد، بلکه فقط یک روش برای ارائه و نمایش ارزش هنری است.

افزودن رنگ به متن

معمولاً یکی از اولین تصمیماتی که در زمان ایجاد یک وبسایت اتخاذ می‌کنیم، انتخاب typeface اصلی و رنگ متنی است که باید استفاده شود. اگرچه چند ویژگی دیگر هم وجود دارند که می‌توانند تغییر کنند (مانند سایز، وزن و غیره)، اما typeface و رنگ متن در کل دارای بیشترین تأثیر بر ظاهر و خوانایی سایت است.

اینکه مجبور نیستیم حتماً از پیش‌فرض‌های مرورگر استفاده کنیم و می‌توانیم از typeface و رنگ متن مخصوص خودمان استفاده کنیم، باعث می‌شود حس و حال سایت بیشتر حالت سفارشی و خاص بودن بگیرد.

تنها ویژگی که باید برای رنگ متن تنظیم کنیم، ویژگی color است. ویژگی color یک مقدار رنگ می‌پذیرد، اما به فرمت‌های خیلی متفاوت. این فرمت‌ها (که در جلسات پنجم و ششم راجع به آن‌ها صحبت کردیم) عبارت‌اند از کلیدواژه‌ها، مقادیر هگزادسیمال و مقادیر RGB، RGBa، HSL و HSLa.

مقادیر هگزادسیمال متداول‌ترین موارد مورد استفاده هستند، چون بیشترین کنترل را با کمترین میزان زحمت فراهم می‌کنند.

اجازه دهید نگاهی به کد CSS مورد نیاز برای تغییر رنگ تمام متن داخل عنصر <html> در یک صفحه سایت داشته باشیم:

html {
  color: #555;
}

تغییر ویژگی‌های فونت

CSS ویژگی‌های خیلی متفاوتی برای ویرایش ظاهر و احساس یک صفحه وبسایت ارائه می‌دهند. این ویژگی‌ها در دو دسته قرار می‌گیرند: ویژگی‌های فونت محور و متن محور. قبل از اکثر این ویژگی‌ها یکی از کدهای پیشوند font-* یا text-* می‌آیند. برای شروع، در مورد ویژگی‌های فونت محور صحبت خواهیم کرد.

Font Family

ویژگی font-family  برای مشخص کردن اینکه کدام فونت (و همچنین کدام یک از فونت‌های fallback یا substitute) باید برای نمایش متن استفاده شود، به کار برد. مقدار ویژگی font-family شامل چندین نام فونت است که همه با ویرگول از هم جدا می‌شوند.

اولین فونت تعریف شده (از سمت چپ) به عنوان فونت اصلی انتخاب می‌شود. اگر اولین فونت در دسترس نباشد، فونت‌های جایگزین که بعد از آن تعریف شده‌اند از چپ به راست برای این منظور در نظر گرفته می‌شوند.

نام‌های فونت‌ها شامل دو یا تعداد بیشتری واژه هستند که باید در بین علائم دبل کوتیشن قرار بگیرند. علاوه بر این، آخرین فونت باید یک مقدار کلیدواژه‌ای باشد، که از فونت پیش‌فرض سیستم برای یک نوع خاص استفاده کند (معمولاً یا از sans-serif و یا serif استفاده می‌شود).

ویژگی font-family در عمل شبیه به کد زیر است:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

در این مثال، Helvetica Neue فونت انتخابی برای نمایش است. اگر این فونت در دسترس نباشد یا در یک سیستم نصب نشده باشد، فونت بعدی در لیست (یعنی Helvetica) استفاده می‌شود و الی آخر.

Font Size

ویژگی font-size قابلیت تنظیم سایز متن را با استفاده از مقادیر طولی معمول (به خصوص پیکسل، واحد‌های em، درصدها، pointها یا کلیدواژه‌های font-size) فراهم می‌کند.

در زیر کد CSS برای تنظیم یک font-size با مقدار ۱۴ پیکسل در عنصر <body>  را مشاهده می‌کنید:

body {
  font-size: 14px;
}

Font Style

برای تغییر متن به italics، یا برای جلوگیری از italic شدن متن، از ویژگی font-style استفاده می‌کنیم. ویژگی font-style چهار مقدار کلیدواژه‌ای می‌پذیرد که عبارت‌اند از: oblique، italic، normal و inherit. از بین این چهارتا، معمول‌ترین آن‌ها italic (متن را italic می‌کند) و normal (متن را به استایل نرمال بازمی‌گرداند) هستند.

کد CSS زیر تمام عنصرها دارای کلاس special را به گونه‌ای تنظیم می‌کند که ویژگی font-style آن‌ها دارای مقدار italic باشد:

.special {
  font-style: italic;
}

Font-variant

معمولاً زیاد اتفاق نمی‌افتد،، اما گاهی اوقات متن باید با small capitals یا small caps نوشته شود. برای چنین موارد خاصی، از ویژگی font-variant استفاده می‌کنیم. ویژگی font-variant سه مقدار می‌پذیرد: small-caps، normal و inherit.

معمول‌ترین مقادیری که استفاده می‌شوند، مقادیر normal و small-caps هستند، که برای تغییر دادن typefaceها بین نوع‌های نرمال و small caps به کار می‌روند.

برای تغییر تمام عناصر دارای کلاس firm از ویژگی font-variant با مقدار small-caps استفاده می‌شود:

.firm {
  font-variant: small-caps;
}

Font Weight

گاهی، می‌خواهیم استایل متن را bold کنیم یا وزن خاصی از یک typeface را تغییر دهیم. برای چنین مواردی، از ویژگی font-weight استفاده می‌کنیم. ویژگی font-weight یا مقادیر کلیدواژه‌ای و یا عددی می‌پذیرد.

مقادیر کلیدواژه‌ای عبارت‌اند از lighter، bolder، bold، normal و inherit. از این مقادیر کلیدواژه‌ای، توصیه می‌شود که بیشتر از مقادیر normal و bold برای تغییر متن از نرمال به bold و برعکس استفاده کنید. به جای استفاده از مقادیر کلیدواژه‌ای bolder یا lighter، بهتر است از مقدار عددی برای کنترل‌های خاص بیشتر استفاده کنید.

در عمل، کد CSS برای تنظیم مقدار ویژگی font-weight روی bold برای هر عنصر دارای کلاس daring به این شکل است:

.daring {
  font-weight: bold;
}

مقادیر عددی ۱۰۰، ۲۰۰، ۳۰۰، ۴۰۰، ۵۰۰، ۶۰۰، ۷۰۰، ۸۰۰ و ۹۰۰ مخصوص typefaceهایی هستند که دارای چند وزن می‌باشند. ترتیب این وزن‌ها از کمترین وزن (یعنی ۱۰۰) شروع شده و به سمت بیشترین وزن (یعنی ۹۰۰) می‌رود.

برای درک بهتر باید بدانید که، مقدار کلیدواژه normal با مقدار عددی ۴۰۰ و مقدار کلیدواژه bold با مقدار عددی ۷۰۰ برابر است. بنابراین، هر مقدار عددی کمتر از ۴۰۰ خیلی نازک و هر مقدار عددی بیشتر از ۷۰۰ خیلی ضخیم و bold است.

تغییر font-weight به ۶۰۰ برای هر عنصر دارای کلاس daring، باعث می‌شود متن نیمه bold باشد. یعنی به اندازه کلیدواژه bold متن ضخیم نیست. کد این مثال را در زیر مشاهده می‌کنید:

.daring {
  font-weight: 600;
}

وزن‌های typeface

قبل از استفاده از مقدار عددی، باید بررسی کنیم و ببینیم آیا typeface مورد استفاده ما دارای وزن مد نظر ما می‌باشد یا خیر. تلاش برای استفاده از یک وزن که برای یک typeface خاص موجود نیست، باعث می‌شود آن استایل‌ها به صورت پیش‌فرض به نزدیک‌ترین مقدار تبدیل شوند.

برای مثال، Times New Roman که یک typeface است دارای دو وزن است: normal یا ۴۰۰ و bold یا ۷۰۰. تلاش برای استفاده از وزن ۹۰۰ باعث می‌شود typeface به طور پیش‌فرض به نزدیک‌ترین وزن مرتبط تغییر یابد، که در این مورد همان ۷۰۰ است.

Line Height

Line Height فاصله بین دو خط از متن را مشخص می‌کند (گاهی به آن leading نیز گفته می‌شود) و با استفاده از ویژگی line-height تعریف می‌شود. ویژگی line-height تمام مقادیر طولی کلی را می‌پذیرد که در جلسات پنجم و ششم در مورد آن‌ها صحبت کردیم.

بهترین کار برای افزایش خوانایی وبسایت‌ این است که مقدار line-height را حدود ۱.۵ برابر مقدار ویژگی font-size تنظیم کنید. می‌توانید این کار را خیلی سریع و راحت با تنظیم مقدار line-height روی 150% یا فقط 1.5 انجام دهید.

به هر حال، اگر با یک صفحه گرید یا جدولی کار می‌کنید، اعمال کنترل بیشتر روی line-height با استفاده از پیکسل‌ها ممکن است بهتر و مطلوب‌تر باشد.

در کد CSS زیر، ما مقدار ویژگی line-height درون عنصر را روی ۲۲ پیکسل قرار داده‌ایم، بنابراین ۲۲ پیکسل بین هر خط از متن فاصله می‌افتد:

body {
  line-height: 22px;
}

می‌توان همچنین از Line Height برای تنظیم قرارگیری یک خط از متن که داخل یک عنصر قرار دارد، در مرکز محور عمودی استفاده کرد. استفاده از مقدار ویژگی یکسان برای ویژگی‌های line-height و height باعث می‌شود متن در مرکز محور عمودی قرار گیرد:

.btn {
  height: 22px;
  line-height: 22px;
}

می‌توان از این تکنیک برای کلید‌ها، پیام‌های هشدار و دیگر بلوک‌های متن خط استفاده کرد.

ویژگی‌های فونت Shorthand

تمام ویژگی‌های فونت محور که قبلاً معرفی شدند دارای قابلیت ترکیب شدن و قرار گرفتن درون یک ویژگی font و پذیرفتن مقدار shorthand هستند. ویژگی font می‌تواند چندین مقدار از ویژگی‌های فونت محور را بپذیرد. ترتیب این مقادیر ویژگی باید از چپ به راست به این شکل باشند: line-height، font-size، font-weight، font-variant، font-style و font-family.

به عنوان یک مقدار shorthand، این مقادیر ویژگی از چپ به راست بدون استفاده از ویرگول لیست می‌شوند (به جز نام فونت‌ها، برای مثال برای مجزا کردن مقدار ویژگی font-family از ویرگول استفاده می‌شود). از یک forward slash (/)، برای جدایی انداختن بین مقادیر ویژگی‌های font-size و line-height استفاده می‌شود.

در هنگام استفاده از مقادیر shorthand، همه مقادیر ویژگی‌ها انتخابی هستند، به جز مقادیر ویژگی‌های font-size و font-family. با این حساب، در مقادیر Shorthand اگر بخواهیم، فقط می‌توانیم مقادیر ویژگی‌های font-size و font-family را درج کنیم.

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

همه ویژگی‌های font در کنار یکدیگر

اجازه دهید مثالی را بررسی کنیم که از تمام این ویژگی‌های فنت محور در کنار یکدیگر استفاده می‌کند. کدهای HTML و CSS زیر، احتمالات متفاوت را در هنگام مشخص کردن استایل متن نمایش می‌دهند.

HTML

<h2><a href="#">I Am a Builder</a></h2>

<p class="byline">Posted by Shay Howe</p>

<p>Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue&#8230;</a></p>

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

CSS Pseudo-Classes

در کدهای CSS بالا از کلاس pseudo به نام hover: استفاده شد و تا حالا در هیچ کدی آن را ندیده بودیم. کلاس‌های pseudo کلیدواژه‌هایی هستند که می‌توان آن‌ها را به انتهای یک selector اضافه کرد تا زمانی که یک عنصر در یک کد یا حالت منحصر به فرد است، بتوان به آن استایل داد.

زمانی که یک کاربر با موس روی یک عنصر حرکت می‌کند، کلاس pseudo با نام hover: به آن عنصر استایل می‌دهد.

همان‌طور که در این مثال‌ها نشان داده شد، اگر این کلاس همراه با یک عنصر <a> به کار برود، تمام عنصرهای <a> در زمانی که با موس روی آن‌ها حرکت شود، استایل‌های منحصر به فرد دریافت می‌کنند. حالا عنصرهای <a> ما وقتی موس روی آن‌ها حرکت کند تغییر رنگ می‌دهند.

تمرین

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

  1. کارمان را با به روز رسانی فونت در تمام متن شروع می‌کنیم. برای این منظور، استایل‌ها را در عنصر <body> اعمال می‌کنیم. پس با یک color شروع می‌کنیم و همچنین مقادیر line-height، font-size، font-weight و font-family را نیز با روش‌های ویژگی فونت و مقادیر shorthand اضافه می‌کنیم.
    برای اینکه فایل css را تا جای ممکن مرتب نگاه داریم، اجازه دهید یک بخش جدید برای این استایل‌های سفارشی ایجاد کنیم و آن را دقیقاً در زیر Reset و در بالای استایل‌های grid قرار دهیم.
    باید کد زیر را اضافه کنیم:
    /*
      ========================================
      Custom styles
      ========================================
    */
    body {
      color: #888;
      font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    ​
  2. در جلسات هفتم و هشتم، شروع به اضافه کردن چند استایل typographic کردیم، به خصوص یک margin پایین به چند سطح مختلف از هدینگ‌ها و پاراگراف‌ها اضافه کردیم. در همان بخش فایل css، اجازه دهید یک رنگ به سطوح هدینگ ۱ تا ۴ اضافه کنیم.
    h1, h2, h3, h4 {
      color: #648880;
    }
    ​

    حالا که مشغول شدیم، اجازه دهید همچنین به این سطح هدینگ مختلف، سایز فونت نیز اضافه کنیم. عنصرهای <h1> و <h2> ما از مقادیر font-size خیلی بزرگی استفاده می‌کنند. در نتیجه، همچنین باید مقادیر line-height آن‌ها را را نیز افزایش دهیم تا متن را بین این عناصر نگه داشته و خوانایی آن را حفظ کنیم. بنابراین مقادیر line-height را روی ۴۴ پیکسل قرار می‌دهیم که این مقدار دو برابر مقدار line-height درون مجموعه قوانین عنصر <body> است.
    h1 {
      font-size: 36px;
      line-height: 44px;
    }
    h2 {
      font-size: 24px;
      line-height: 44px;
    }
    h3 {
      font-size: 21px;
    }
    h4 {
      font-size: 18px;
    }
    ​
  3. عنصرهای <h5> ما قرار است کمی منحصر به فردتر از بقیه هدینگ‌ها باشند. در نتیجه، کمی استایل‌های آن‌ها را تغییر می‌دهیم.
    قصد داریم از مقدار ویژگی color متفاوت و font-size کمی کوچک‌تر برای این عنصرها استفاده کنیم و می‌خواهیم font-weight را به ۴۰۰ یا normal تغییر دهیم.
    به طور پیش‌فرض، مرورگرها هدینگ‌ها را با مقدار bold از ویژگی font-weight رندر می‌کنند. اما از طرفی، هدینگ‌های ما در حال حاضر همه روی مقدار ۳۰۰ برای ویژگی font-weight تنظیم شده‌اند. Reset ما در بالای فایل css مقدار ویژگی font-weight را به normal تغییر داده و سپس مقدار ۳۰۰ از ویژگی fon-weight درون مجموعه قوانین عنصر <body>، مقدار ویژگی font-weight تمام هدینگ‌ها را به ۳۰۰ تغییر می‌دهد.
    مقدار ۴۰۰ از ویژگی font-weight در عنصر <h5> در واقع باعث می‌شود این عنصر کمی ضخیم‌تر از بقیه هدینگ‌ها و متون دیگر ما باشد.
    h5 {
      color: #a9b2b9;
      font-size: 14px;
      font-weight: 400;
    }
    ​
  4. Reset ما در ابتدای صفحه استایل، همچنین عنصرهای <cite>، <strong> و <em> را به استایل‌های پیش‌فرض مرورگر ریست می‌کند، که می‌خواهیم این حالت پیش نیاید. برای عنصرهای <strong> می‌خواهیم برای ویژگی font-weight مقدار ۴۰۰ را تنظیم کنیم، که در واقع برابر است با normal، نه bold، چون در حال حاضر typeface مورد استفاده ضخیم‌تر از اکثر typefaceهای دیگر است. سپس، برای عنصرهای <cite> و <em> می‌خواهیم مقدار font-style را روی italic تنظیم کنیم.
    strong {
      font-weight: 400;
    }
    cite, em {
      font-style: italic;
    }
    ​
  5. حسابی روی غلتک افتادیم، پس اجازه دهید با افزودن چند استایل به عنصرهای anchor ادامه دهیم. در حال حاضر آن‌ها دارای رنگ آبی پیش‌فرض مرورگر هستند. پس اجازه دهید رنگ آن‌ها را مشابه رنگ عنصرهای هدینگ <h1> تا <h4> قرار دهیم. علاوه بر این، اجازه دهید برای زمانی که کاربر با موس روی یک anchor می‌آید، از کلاس سودوی hover: برای تغییر رنگ آن عنصر به خاکستری روشن استفاده کنیم.
    /*
      ========================================
      Links
      ========================================
    */
    
    a:hover {
      color: #a9b2b9;
    }
    a {
      color: #648880;
    }
    
     ​
  6. اجازه دهید نگاهی به عنصر <header> داشته باشیم و استایل‌هایمان را در آن به روز رسانی کنیم. کار را با به روز رسانی لوگو شروع می‌کنیم و ویژگی‌های font-size و line-height را به مجموعه قوانین لوگو اضافه می‌کنیم. وقتی ویژگی‌های جدیدی به ویژگی‌های قبلی float، border-top و padding اضافه می‌کنیم، مجموعه قوانین جدید باید چیزی شبیه به کد زیر باشند:
    .logo {
      border-top: 4px solid #648880;
      float: left;
      font-size: 48px;
      line-height: 44px;
      padding: 40px 0 22px 0;
    }
    ​
  7. چون سایز لوگو را کمی افزایش دادیم، اجازه دهید یک margin به عنصر <h3> درون عنصر <header> اضافه کنیم تا کمی تعادل برقرار شود. این کار را با قرار دادن یک مقدار اتریبیوت کلاس tagline روی عنصر <h3> و سپس استفاده از آن کلاس درون کد CSS برای اعمال حاشیه‌های مناسب انجام می‌دهیم.
    نباید فراموش کنیم که تغییرات در عنصر <h3> باید در تمام صفحات اعمال شوند.
    HTML
    <h3 class="tagline">August 24&ndash;26th &mdash; Chicago, IL</h3>
    ​
    CSS
    .tagline {
      margin: 66px 0 22px 0;
    }
    ​
  8. بعد از عنصر <h3> که مقدار اتریبیوت کلاس tagline برای آن مشخص شد، نوبت به عنصر <nav> می‌رسد. اجازه دهید یک مقدار اتریبیوت کلاس primary-nav به عنصر <nav> اضافه کنیم و ویژگی‌های font-size و font-weight را نیز برای ساده‌تر کردن جهت‌یابی نسبت به بقیه هدرها اضافه کنیم.
    HTML
    <nav class="primary-nav">
      ...
    </nav>
    ​

    CSS
    .primary-nav {
      font-size: 14px;
      font-weight: 400;
    }
    ​
  9. حالا که عنصر <header> کمی شکل و شمایل بهتری پیدا کرد، اجازه دهید همچنین نگاهی هم به عنصر <footer> داشته باشیم. با استفاده از کلاس primary-footer، اجازه دهید رنگ font-size را برای متن درون عنصر <footer> تغییر دهیم. علاوه بر این، اجازه دهید مقدار ویژگی font-weight عنصر <small> را به ۴۰۰ افزایش دهیم.
    با درج کردن استایل‌های موجود، استایل‌ها برای بخش فوتر اصلی ما باید شبیه به زیر باشد:
    .primary-footer {
      color: #648880;
      font-size: 14px;
      padding-bottom: 44px;
      padding-top: 44px;
    }
    .primary-footer small {
      float: left;
      font-weight: 400;
    }
    ​
  10. همچنین بیایید کمی صفحه اصلی را نیز به روز رسانی کنیم. کار را با بخش hero شروع می‌کنیم، مقدار ویژگی line-height کلی بخش را به ۴۴ پیکسل افزایش می‌دهیم. همچنین متن درون بخش را نیز بزرگ‌تر می‌کنیم، این کار را با افزایش مقدار font-size عنصر <h2> به ۳۶ پیکسل و مقدار font-size عنصر <p> را به ۲۴ پیکسل انجام می‌دهیم.
    می‌توانیم تمام این تغییرات را با استفاده از Selector کلاس hero موجود و ایجاد selectorهای جدید برای عنصرهای <h2> و <p> انجام دهیم. استایل‌های ما برای بخش hero حالا به این شکل تجزیه می‌شوند:
    .hero {
      line-height: 44px;
      padding: 22px 80px 66px 80px;
    }
    .hero h2 {
      font-size: 36px;
    }
    .hero p {
      font-size: 24px;
    }
    ​
  11. در آخر، یک مشکل کوچک داریم که باید در صفحه اصلی برطرف کنیم. قبلاً در زمانی که کاربر موس را روی عنصرهای Anchor می‌‌آورد، به تمام آن‌ها مقدار رنگ خاکستری روشن را اضافه کردیم. این روش عالی است، به جز برای سه تیزر موجود در صفحه اصلی که در آن‌ها عنصر anchor هر دو عنصرهای <h3> و <h5> را احاطه کرده است. چون عنصرهای <h3> و <h5> دارای تعریف رنگ مخصوص به خودشان هستند، پس توسط کلاس سودوی hover: که قبلاً گفته شد تأثیر نمی‌پذیرند.
    خوشبختانه می‌توانیم این مشکل را برطرف کنیم، اگرچه به یک selector خیلی پیچیده نیاز داریم. پس کار را با اضافه کردن مقدار اتریبیوت کلاس teaser را به تمام ستون‌ها در صفحه اصلی شروع می‌کنیم. از این کلاس به طور مختصر به عنوان یک Selector سنجش‌گر استفاده می‌کنیم.
    <section class="grid">
    
      <!-- Speakers -->
      
      <section class="teaser col-1-3">
        <a href="speakers.html">
          <h5>Speakers</h5>
          <h3>World-Class Speakers</h3>
        </a>
        <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
      </section>
    
      ...
    
    </section>
    ​

    حالا که یک کلاس سنجش‌گر داریم، آماده‌ایم تا چند کار سنگین در CSS انجام دهیم و یک Selector‌ بسیار پیچیده ایجاد کنیم. کار را با selector مخصوص کلاس teaser شروع می‌کنیم، چون ما فقط می‌خواهیم عنصرهای درون یک عنصر که دارای کلاس teaser است را هدف قرار دهیم. از آنجا به بعد، می‌خواهیم استایل‌ها را به عنصرهایی که درون عنصرهای anchor قرار گرفته‌اند (همان‌هایی که کاربر با موس روی آن‌ها می‌آید) اضافه می‌کنیم. بنابراین همراه با نوع Selector از کلاس سودوی hover: نیز استفاده می‌کنیم. در آخر، Selector نوع h3 را برای انتخاب عنصرهای <h3> که می‌خواهیم این استایل‌ها به آن‌ها اضافه شوند، استفاده می‌کنیم.
    در کل، Selector و استایل‌های ما برای این عنصرهای <h3> به شکل زیر خواهد بود:
    .teaser a:hover h3 {
      color: #a9b2b9;
    }
    ​

وای، این تمرین خیلی بزرگ شد. خبر خوب این است که صفحه اصلی سایت Styles Conference ما کم‌کم ظاهر خوب و قابل قبولی به دست آورده است و کمی حال و هوای شخصی سازی دارد.

تصویر ۱۱.۱. وبسایت Styles Conference

تصویر ۱۱.۱. وبسایت Styles Conference ما به واسطه چند ویژگی فونت محور دچار تغییرات خوب و زیبایی شد.

خلاصه

در این جلسه وارد مبحث typograpghy شدیم. مباحثی که در این جلسه مورد بررسی قرار گرفتند عبارت‌اند از تعریف typeface و فونت و همچنین اصلاح فونت به روش‌های مخلتف برای افزایش خوانایی متن سایت. در جلسه آینده همین مباحث ادامه خواهند داشت و مطلب typography تکمیل خواهد شد.

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات