آموزش مقدماتیHTMLوCSS(جلسه۱۲:کار باTypography–بخش دوم)
1398/03/02 10:44 , میلاد صاحب نظر

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

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

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

به‌کارگیری ویژگی‌های متن

این که بدانید چگونه می‌توان ویژگی‌های Weight، Variant، style، size، family و line height یک فونت را تنظیم کرد، فقط نصف راه را پیموده‌اید. علاوه بر این، می‌توانیم تصمیم بگیریم که موقعیت، ظاهر، تو رفتگی، وضعیت و فضای متن نیز چگونه تنظیم شوند. اجازه دهید کار را با موقعیت متن آغاز کنیم.

Text Align

تعیین موقعیت متن یک بخش مهم از ایجاد ریتم و جریان یک صفحه است. این کار را با استفاده از ویژگی text-align انجام می‌دهیم. ویژگی text-align دارای ۵ مقدار است: justify، center، right، left و inherit. همه این مقادیر کاملاً واضح و مشخص هستند.

همان‌طور که انتظار می‌رود، آن‌ها متن را در سمت چپ، راست، یا مرکز صفحه قرار داده یا آن را تراز می‌کنند.

کد CSS زیر تمام متن پاراگراف‌ها را در مرکز قرار می‌دهد:

p {
  text-align: center;
}

به هر حال، ویژگی text-align نباید با ویژگی float اشتباه گرفته شود. مقادیر left و right از ویژگی text-align، متن داخل یک عنصر را در سمت چپ یا راست قرار می‌دهند، در حالی که مقادیر left و right در float کل عنصر را جا‌به‌جا می‌کنند.

گاهی ویژگی text-align نتیجه مطلوب را برای ما فراهم می‌کند و گاهی هم ممکن است لازم باشد از ویژگی float استفاده کنیم.

Text Decoration

ویژگی text-decoration چند روش برای زیباسازی متن فراهم می‌کند. این ویژگی مقادیر کلیدواژه‌ای line-through، overline، underline، none و inherit را می‌پذیرد.

ویژگی text-decoration استفاده‌های متنوعی دارد، اما مرسوم‌ترین استفاده آن برای underline کردن لینک‌ها است، که یک استایل مرورگر پیش‌فرض است.

کد CSS زیر برای همه عنصرهای دارای کلاس note با استفاده از یک text-decoration، خط زیرین یا Underline ایجاد می‌کند:

.note {
  text-decoration: underline;
}

می‌توان با مجزا سازی فضای هر کلیدواژه داخل مقدار، چندین مقدار text-decoration را به یک باره برای یک عنصر اعمال کرد.

Text Indent

ویژگی text-indent برای تورفتگی اول خط متن داخل یک عنصر به کار می‌رود، درست مانند نمونه‌هایی که در مستندات چاپ شده مشاهده می‌کنید. همه مقادیر طولی مرسوم برای این ویژگی به کار می‌روند، به خصوص پیکسل‌ها، pointها، درصدها و غیره.

مقادیر مثبت تورفتگی متن را به سمت داخل ایجاد می‌کنند، در حالی که مقادیر منفی تورفتگی را به سمت بیرون ایجاد می‌کنند.

کد CSS زیر، تورفتگی متن را برای تمام عنصرهای پاراگراف به اندازه ۲۰ پیکسل به سمت داخل ایجاد می‌کند:

p {
  text-indent: 20px;
}
Text Shadow

ویژگی text-shadow به ما این امکان را می‌دهد تا یک یا چندین سایه برای متن ایجاد کنیم. این ویژگی کلاً چهار مقدار می‌گیرد که از چپ به راست یکی پس از دیگری قرار می‌گیرند. سه مقدار اول، مقادیر طولی هستند و آخرین مقدار یک رنگ است.

در این سه مقدار طولی، اولین مقدار افست افقی سایه را مشخص می‌کند، دومین مقدار افست عمودی سایه را مشخص می‌کند و سومین مقدار شعاع پوشش سایه را مشخص می‌کند. چهارمین و آخرین مقدار، رنگ سایه است که می‌توانید آن را به هر رنگ موجود در ویژگی color تغییر دهید.

ویژگی text-shadow یک سایه مشکی با تیرگی ۳۰ درصد را، ۳ پیکسل به سمت راست، ۶ پیکسل به پایین و به شعاع ۲ پیکسل از تمام عنصرهای <p> در متن تنظیم می‌کند:

p {
  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

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

همچنین می‌توان چندین سایه متن را با استفاده از مقادیر جدا شده با ویرگول به یکدیگر متصل و زنجیر کرد. به این شکل می‌توانید بیشتر از یک سایه به متن اضافه کنید. استفاده از سایه‌های بزرگ به ما اجازه می‌دهد تا آن‌ها را در بالا و پایین متن یا هر جهت دیگری که می‌خواهید قرار دهید.

Box Shadow

ویژگی text-shadow سایه را فقط روی متن یک عنصر قرار می‌دهد. اگر بخواهیم سایه را روی کل عنصر قرار دهیم، می‌توانیم از ویژگی box-shadow استفاده کنیم.

ویژگی box-shadow دقیقا همانند ویژگی text-shadow عمل می‌کند و مقادیری را برای افست‌های افقی و عمودی، شعاع پوشش سایه و یک رنگ می‌پذیرد.

ویژگی box-shadow همچنین یک مقدار طولی چهارم انتخابی نیز قبل از مقدار رنگ می‌پذیرد و این مقدار برای پخش کردن سایه است.

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

در آخر، ویژگی box-shadow می‌تواند شامل مقدار انتخابی inset در ابتدای مقادیر باشد و این مقدار سایه را درون یک عنصر و نه در بیرون آن، قرار می‌دهد.

Text Transform

ویژگی text-transform دقیقا مشابه ویژگی font-variant است. البته ویژگی font-variant به دنبال یک نوع جایگزین از یک typeface می‌گردد، اما ویژگی text-transform درون خط یا inline متن را بدون نیاز به یک typeface جایگزین تغییر می‌دهد.

ویژگی text-transform پنج مقدار می‌پذیرد: lowercase، uppercase، capitalize، none و inherit/

مقدار capitalize، اولین حرف هر کلمه را بزرگ می‌کند، مقدار Uppercase همه حروف را بزرگ می‌کند و مقدار lowercase همه حروف را کوچک می‌کند. استفاده از مقدار none، باعث بازگشتن تمام این مقادیر جایگزین شده به استایل متن اورجینال خودشان بازگردند.

کد CSS زیر باعث می‌شود متون موجود در تمام عنصرهای <p> با حرف بزرگ نمایش داده شوند:

p {
  text-transform: uppercase;
}
Letter-Spacing

با استفاده از ویژگی letter-spacing، می‌توانیم فضای (یا فاصله) بین حروف در یک صفحه را تنظیم کنیم. یک مقدار طولی مثبت، باعث می‌شود حروف بیشتر از هم فاصله بگیرند، در حالی که یک مقدار طولی منفی باعث نزدیک‌تر شدن حروف به یکدیگر می‌شود.

مقدار کلیدواژه‌ای none فاصله بین حروف را به سایز نرمالش بازمی‌گرداند.

استفاده از یک مقدار طولی نسبی در ویژگی letter-spacing کمک می‌کند تا اطمینان حاصل کنیم که وقتی font-size متن تغییر می‌کند، فضای بین حروف صحیح و متناسب باقی بماند. به هر حال، همیشه بهترین کار این است که در حین طراحی، کار را نیز بررسی کنیم و ببینیم چه کرده‌ایم.

کد CSS زیر باعث می‌شود تمام حروف درون عنصرهای <p> به اندازه 0.5 em به یکدیگر نزدیک‌تر شوند:

p {
  letter-spacing: -.5em;
}
Word Spacing

درست همانند ویژگی letter-spacing، می‌توانیم همچنین برای تنظیم فاصله بین کلمات درون یک عنصر، از ویژگی word-spacing استفاده کنیم. ویژگی word-spacint همان مقادیر طولی و کلیدواژه‌هایی را می‌پذیرد که ویژگی letter-spacing می‌پذیرفت.

البته، ویژگی word-spacing به جای اینکه فاصله بین حروف را مشخص کند، از آن مقادیر برای تنظیم فاصله بین کلمات استفاده می‌کند.

کد زیر باعث می‌شود همه کلمات داخل یک عنصر <p> به اندازه 0.25 em از هم فاصله بگیرند.

p {
  word-spacing: .25em;
}
همه ویژگی‌های متن در کنار یکدیگر

اجازه دهید به سراغ تیزر بلاگی که در جلسه پیش استفاده کردیم برگردیم، این دفعه چند ویژگی متن محور به بالای ویژگی‌های فونت محورمان اضافه می‌کنیم.

HTML

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

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

<p class="intro">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;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}
.intro {
  text-indent: 15px;
}
.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

تمرین

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

  1. در حال حاضر همه لینک‌های درون صفحه دارای underline هستند، که استایل پیش‌فرض برای عنصرهای anchor است. گاهی این استایل چندان جالب توجه نیست، بنابراین قصد داریم کمی آن را تغییر دهیم.

    ابتدا به سراغ بخش لینک‌ها درون فایل css می‌رویم، کار را با حذف کردن underline از تمام عنصرهای anchor شروع می‌کنیم و این کار را با استفاده از ویژگی text-decoration انجام می‌دهیم.

    سپس، تمام عنصرهای anchor را که درون یک عنصر پاراگراف قرار دارند را انتخاب کرده و به آن‌ها یک bottom border می‌دهیم.

    می‌توانیم به جای استفاده از ویژگی border-bottom برای underline کردن تمام لینک‌ها درون هر پاراگراف، در عوض از ویژگی text-decoration استفاده کنیم.

    به هر حال، با استفاده از ویژگی border-bottom، کنترل بیشتری روی ظاهر شدن underline خواهیم داشت. در اینجا برای مثال، رنگ underline با رنگ خود متن فقط خواهد کرد.

    بخش لینک‌های ما که شامل استایل‌های قبلی که اضافه کردیم هم می‌باشد، باید به این شکل باشد:
    a {
      color: #648880;
      text-decoration: none;
    }
    a:hover {
      color: #a9b2b9;
    }
    p a {
      border-bottom: 1px solid #dfe2e5;
    }
    ​
  2. حالا برمی‌گردیم به سراغ عنصرهای <h5> از قبل، که استایل‌های آن‌ها کمی با بقیه هدینگ‌ها متفاوت است. اجازه دهید همه آن‌ها را با استفاده از ویژگی text-transform با حروف بزرگ نمایش دهیم. استایل‌های جدید عنصر <h5> باید به این شکل باشند:
    h5 {
      color: #a9b2b9;
      font-size: 14px;
      font-weight: 400;
      text-transform: uppercase;
    }
    ​
  3. اجازه دهید دوباره به سراغ عنصر <header> برویم و استایل‌های بیشتری برای منوی جهت‌یابی به کار ببریم (که در جلسه قبل برای آن مقدار اتریبیوت کلاس primary-nav را اضافه کردیم).

    بعد از ویژگی‌های font-size و font-weight، اجازه دهید چند ویژگی letter-spacint اضافه کنیم و از طریق ویژگی text-transform تمام متن را با حروف بزرگ نمایش دهیم.

    استایل‌های ما برای عنصر <nav> دارای مقدار اتریبیوت کلاس primary-nav باید شبیه به کد زیر باشند:
    .primary-nav {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .5px;
      text-transform: uppercase;
    }
    ​
  4. قبلاً، لوگو را درون عنصر <header> به سمت چپ float کردیم. حالا tagline ما مستقیماً در سمت راست لوگو قرار می‌گیرد. به هر حال، ما دوست داریم تا tagline کاملاً در سمت راست عنصر <header> قرار بگیرد. یعنی کاملاً به سمت راست برود.

    برای اینکه بتوانیم tagline را کاملاً به سمت راست جابه‌جا کنیم، باید یک ویژگی text-align با مقدار right را به عنصر <h3> که دارای مقدار اتریبیوت کلاس tagline است اضافه کنیم.

    وقتی استایل‌های جدید را به استایل‌های قبلی ویژگی margin اضافه کنیم، آنگاه استایل‌های جدید برای عنصر <h3> که دارای مقدار اتریبیوت کلاس tagline است به شکل زیر خواهد بود:
    .tagline {
      margin: 66px 0 22px 0;
      text-align: right;
    }
    ​
  5. همچنین می‌خواهیم منوهای جهت‌یابی موجود در هر دو عنصرهای <header> و <footer> نیز کاملاً به سمت راست بروند.

    چون هر دو عنصرهای <header> و <footer> دارای عنصرهای فرزندی هستند که به سمت چپ float شده‌اند، می‌توانیم از همان روشی که برای tagline بهره بردیم، استفاده کنیم.

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

    چون همین استایل‌های مشابه را در هر دو منوهای جهت‌یابی به اشتراک گذاشته‌ایم، به هر کدام یک کلاس nav می‌دهیم. عنصر <header> ما حالا به شکل زیر خواهد بود:
    <header class="container group">
    
      <h1 class="logo">...</h1>
    
      <h3 class="tagline">...</h3>
    
      <nav class="nav primary-nav">
        ...
      </nav>
    
    </header>​

    و عنصر <footer> نیز به این شکل خواهد بود:
    <footer class="primary-footer container group">
    
      <small>...</small>
    
      <nav class="nav">
        ...
      </nav>
    
    </footer>
    ​

    نباید فراموش کنیم که تغییرات در عنصرهای <header> و <footer> باید در تمام صفحات اعمال شوند.

  6. حالا که کلاس nav در هر دو منوهای جهت‌یابی قرار گرفته است، اجازه دهید یک بخش جدید درون فایل css برای افزودن استایل‌های جهت‌یابی مشترک اضافه کنیم. کار را با افزودن ویژگی text-align با مقدار Right برای مجموعه قوانین کلاس nav شروع می‌کنیم.

    بعداً این استایل‌ها را توسعه می‌دهیم، اما این می‌تواند یک زیر ساخت عالی باشد.
    /*
      ========================================
      Navigation
      ========================================
    */
    
    .nav {
      text-align: right;
    }​
  7. حالا که در حال افزودن ویژگی text-align به چند عنصر مختلف هستیم، اجازه دهید همچنین ویژگی text-align را با مقدار center به مجموعه قوانین selector کلاس hero نیز اضافه کنیم. محض اطلاع، این استایل‌ها، به خصوص ویژگی‌های height و padding درون بخش صفحه اصلی فایل css قرار گرفته‌اند.
    .hero {
      line-height: 44px;
      padding: 22px 80px 66px 80px;
      text-align: center;
    }
    ​

حالا سایت Style Conference دارای چند استایل جدی است. کم‌کم تمام استایل‌های ما دارند با یکدیگر جفت و جور می‌شوند و وبسایت ما در حال پیشرفت است.

وبسایت Styles Conference ما با اضافه شدن چند ویژگی متن محور

شکل ۱۲.۱. وبسایت Styles Conference ما با اضافه شدن چند ویژگی متن محور در حال زنده شدن است.

 

استفاده از فونت‌های Web-Safe

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

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

این فونت‌ها به فونت‌های Web-Safe معروف هستند.

فقط تعداد کمی از آن‌ها وجود دارند و امن‌ترین فونت‌های Web-Safe در لیست زیر آمده‌اند:

  • Arial
  • Courier New, Courier
  • Garamond
  • Georgia
  • Lucida Sans, Lucida Grande, Lucida
  • Palatino Linitype
  • Tahoma
  • Time New Roman, Times
  • Trebuchdt
  • Verdana

ادغام فونت‌های وب

ما همچنین می‌توانیم فونت‌ها را در یک سرور آپلود کنیم و آن‌ها را از طریق کد CSS به شکل font-face@ به وبسایت اضافه کنیم. این قابلیت برای typography آنلاین غوغا کرده است. حالا، Typography بیشتر از همیشه در حالت آنلاین پویاتر و زنده‌تر است.

ادغام فونت‌های وب مخصوص به خودمان کمی شبیه به کد CSS زیر است. ابتدا، از طریق ویژگی font-family با استفاده از دستور font-face@ نام فونتمان را شناسایی می‌کنیم و همچنین از طریق ویژگی src منبع فونتمان (مسیر فایل فونت که حاوی فونت منتخب ما است) را به دست می‌آوریم.

از اینجا به بعد، با درج کردن نام فونت داخل مقدار ویژگی font-family، می‌توانیم از این فونت استفاده کنیم.

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
  font-family: "Lobster", "Comic Sans", cursive;
}

داشتن قابلیت ادغام هر گونه typeface در یک وبسایت به این معنا نیست که از لحاظ قانونی اجازه انجام این کار را داریم. Typefaceها کارهای هنری هستند و پست کردن آن‌ها روی سرور به دیگران اجازه می‌دهد تا راحت آن‌ها را بدزدند.

اجازه استفاده از یک typeface به مجوزی که به ما اعطا شده است بستگی دارد.

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

برخی از این شرکت‌ها (مانند Typekit و Fontdeck) یک روش عضویتی برای مجاز کردن فونت‌ها دارند، در حالی که شرکت‌های دیگر (مانند Google Fonts) فونت‌ها را به صورت رایگان مجاز می‌کنند. قبل از اینکه فونتی را آپلود کنید، اول مطمئن شوید که اجازه انجام این کار را دارید.

تمرین

به منظور اضافه کردن مقداری ویژگی و شخصیت به وبسایت Styles Conference، اجازه دهید از Google Font در وبسایتمان استفاده کنیم.

  1. بیایید به وبسایت Google Fonts برویم و به دنبال فونتی که می‌خواهیم بگردیم: یعنی Lato. وقتی آن را یافتیم، اجازه دهید کار را با افزودن آن به مجموعه‌مان و پیروی کردن از مراحل بیان شده در آن سایت ادامه دهیم.

    وقتی زمان آن رسید که انتخاب کنیم که می‌خواهیم از کدام font weight استفاده کنیم، باید اطمینان حاصل کنیم که حتماً ۳۰۰ و ۴۰۰ را انتخاب کنیم، چون از قبل آن‌ها را در کد CSS به کار برده‌ایم. همچنین اجازه دهید ۱۰۰ را نیز برای یک نوع دیگر به مجموعه اضافه کنیم.

    گوگل به ما یک عنصر <link> اضافی می‌دهد تا در عنصر <head> در تمام صفحات اضافه کنیم. این عنصر <link> جدید را دقیقا در زیر عنصر <link> موجود قرار می‌دهیم.

    عنصر جدید شامل رفرنس صفحه استایل (style sheet) مناسب به سمت گوگل است، که همچنین شامل یک فایل CSS جدید است که دارای یک دستور font-face@ است که برای اینکه بتوانیم از فونت Lato استفاده کنیم یک دستور ضروری است.

    با اضافه شدن عنصر <link> جدید، عنصر <head> ما شبیه به کد زیر خواهد شد:
    <head>
      <meta charset="utf-8">
      <title>Styles Conference</title>
      <link rel="stylesheet" href="assets/stylesheets/main.css">
      <link rel="stylesheet"
      href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
    </head>
    ​
  2. به محض اینکه عنصر <link> جدید را به تمام صفحاتمان اضافه کردیم، آماده‌ایم تا شروع به استفاده از فونت Lato کنیم. این کار را با اضافه کردن فونت به پشته فونت اصلی قرار گرفته داخل ویژگی font درون استایل‌های عنصر <body> انجام می‌دهیم.

    حالا Lato را به ابتدای پشته فونتمان اضافه می‌کنیم تا به این شکل درآید:

    Lato”, “open sans”, “Helvetica Neue”, Helvetica, Arial, sans-serif“.

    اگرچه Lato فقط یک کلمه است، اما چون یک فونت وب ادغام شده است، باید آن را در همه رفرنس‌های CSS، با علائم کوتیشن احاطه کنیم. استایل‌های جدید عنصر <body> به این شکل خواهند بود:
    body {
      color: #888;
      font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    ​
  3. Lato حالا دیگر باید آماده و فعال باشد و باید بتوانیم آن را در تمام متون موجود در وبسایت Styles Conference ببینیم. اجازه دهید نگاه دقیق‌تری به لوگو داشته باشیم و آن را کمی به روز رسانی کنیم.

    درون مجموعه قوانین selector کلاس logo، کار را با اضافه کردن ویژگی font-weight با مقدار ۱۰۰ شروع می‌کنیم تا متن را خیلی خیلی نازک کند.

    همچنین از ویژگی text-transform با مقدار uppercase استفاده می‌کنیم تا تمام حروف را بزرگ کند، همچنین از ویژگی letter-spacing با مقدار 5 پیکسل استفاده می‌کنیم تا یک فضای خیلی ناچیز بین هر حرف داخل لوگو ایجاد کنیم.

    در کل، استایل‌های لوگو به این شکل خواهند بود:
    .logo {
      border-top: 4px solid #648880;
      float: left;
      font-size: 48px;
      font-weight: 100;
      letter-spacing: .5px;
      line-height: 44px;
      padding: 40px 0 22px 0;
      text-transform: uppercase;
    }
    ​
  4. چون یک ویژگی font-weight با مقدار ۱۰۰ داریم، اجازه دهید همچنین عنصر پاراگراف درون بخش hero را نیز روی همان وزن تنظیم کنیم. می‌توانیم از Selector موجود برای این کار استفاده کنیم و مجموعه قوانین جدید به این شکل خواهند بود:
    .hero p {
      font-size: 24px;
      font-weight: 100;
    }
    ​

وبسایت Styles Conference ما چند گام بسیار مهم و بزرگ در این دو جلسه برداشت و ظاهر وبسایت ما واقعاً در حال درخشان شدن است.

صفحه خانه Styles Conference بعد از اضافه شدن فونت وب Lato Google به آن

شکل ۱۲.۲. صفحه خانه Styles Conference بعد از اضافه شدن فونت وب Lato Google به آن.

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                  کد منبع وبسایت Styles Conference

درج کردن انتقادات و نقل‌قول‌ها

نویسندگی آنلاین گاهی شامل نقد منابع یا نقل‌قول‌های مختلف است. تمام موارد نقد و نقل‌قول متفاوت را می‌توان با استفاده از عنصرهای هم معنی خودشان در HTML پوشش داد: یعنی عنصرهای <q>، <cite> و <blockquote>.

چون ظاهر آن‌ها نسبت به متون معمولی کاملاً مجزا و متفاوت است، در این جلسه در مورد آن‌ها نیز صحبت خواهیم کرد.

اینکه یاد بگیرید چه موقع از کدام عنصر و اتریبیوت برای نقد و نقل‌قول مناسب استفاده کنید، به تمرین و زمان نیاز دارد. در کل، از این قوانین پیروی کنید:

  • <cite>: قابل استفاده برای اشاره به یک کار خلاقانه، یک ناشر یا یک منبع.
  • <q>: قابل استفاده برای نقل‌قول‌های کوتاه و یک خطی.
  • <blockquote>: قابل استفاده برای نقل‌قول‌های طولا‌نی و بزرگ‌تر.
نقد یک کار خلاقانه

عنصر inline یا درون خطی <cite> در HTML برای نقد یک کار خلاقانه استفاده می‌شود. عنصر باید به طور پیش‌فرض شامل عنوان کار، یا نام ناشر یا یک آدرس URL به سمت آن کار باشد. محتوای احاطه شدن درون عنصر <cite> درون مرورگر به شکل italic ظاهر می‌شود.

برای درج رفرنس‌های بیشتر، می‌توانید در صورت امکان و وجود، یک هایپرلینک به سمت منبع اصلی نقد قرار دهید.

در کد زیر، کتاب استیو جابز اثر والتر آیزاکسون درون عنصر <cite> آدرس‌دهی شده است. درون نقد همچنین یک هایپرلینک به سمت کتاب وجود دارد.

<p>The book <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspirational.</p>

نقل‌قول‌های دیالوگی و منثور

اکثر مواقع، درون متون دیگر یک دیالوگ یا نثر به صورت نقل‌قول به شکل inline آورده می‌شود. برای این منظور، عنصر inline یا درون خط <q> (یا نقل‌قول) باید استفاده شود.

عنصر <q> از نظر معنایی هم نشان‌دهنده دیالوگ یا نثر نقل‌قول شده است و نباید برای هیچ منظور دیگری مورد استفاده قرار گیرد.

به طور پیش‌فرض، مرورگر برای ما علائم کوتیشن مناسب را قرار می‌دهد و حتی علائم کوتیشن را بر اساس زبان شناسایی شده درون اتریبیوت جهانی lang تغییر می‌دهد.

در زیر یک مثال مشاهده می‌کنید:

<p>Steve Jobs once said, <q>One home run is much better than two doubles.</q></p>
نقد دیالوگی یا منثور

 یک اتریبیوت انتخابی برای درج در عنصر <q>، اتریبیوت cite است. اتریبیوت cite به عنوان یک رفرنس نقادانه برای نقل‌قول عمل می‌کند و به شکل یک URL است. این اتریبیوت ظاهر عنصر را تغییر نمی‌دهد.

بلکه خیلی ساده برای گوشی‌های همراه و دیگر دستگاه‌های مشابه، مقادیری را اضافه می‌کند. چون اتریبیوت درون مرورگر قابل مشاهده نیست، همچنین مفید است که در کنار نقد انجام شده، یک هایپرلینک به سمت این منبع نیز قرار گیرد.

در زیر یک مثال مشاهده می‌کنید:

<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Steve Jobs</a> once said, <q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">One home run is much better than two doubles.</q></p>

نقل‌قول خارجی

برای نقل‌قول یک بلوک بزرگ متن که از یک منبع خارجی می‌آید و چندین خط را پوشش می‌دهد، از عنصر <blockquote> استفاده می‌کنیم.

عنصر <blockquote> یک عنصر سطح block است که می‌توان چندین عنصر سطح block دیگر را به صورت تو در تو در آن به کار برد، به خصوص هدینگ‌ها و پاراگراف‌ها.

در زیر مثالی وجود دارد که از عنصر <blockquote> استفاده می‌کند:

<blockquote>
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
</blockquote>
 نقد خارجی

نقل‌قول‌های طولانی‌تر مورد استفاده درون عنصر <blockquote> گاهی شامل یک نقد هم هستند. این نقد ممکن است اتریبیوت cite و عنصر <cite> را خطر بیندازد.

اتریبیوت cite را می‌توان در عنصر <blockquote> درج کرد – به همان شکلی که قبلاً در عنصر <q> از آن استفاده شد – تا یک رفرنس نقادانه برای نقل‌قول به شکل یک URL ایجاد کند.

سپس عنصر <cite> می‌تواند بعد از خود نقل‌قول قرار گیرد تا منبع اصلی نقل‌قول را (در صورت مربوط بودن) مشخص کند.

کد HTML زیر شامل یک نقل‌قول بزرگ از استیو جابز است که در اصل از مجله Fortune گرفته شده است. نقل‌قول با استفاده از عنصر <blockquote> با یک اتریبیوت cite علامت‌گذاری شده است تا مشخص کند اصل نقل‌قول در کجا قرار دارد.

در عنصر <blockquote>، عنصر <cite> همراه با یک عنصر <a>، یک نقد و رفرنس اضافی برای نقل‌قول فراهم می‌کند که برای کاربران قابل رویت است.

<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
  <p><cite>&#8212; Steve Jobs in <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm"> Fortune Magazine</a></cite></p>
</blockquote>

خلاصه

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

بسیار خب، مبحث کار با Typography نیز به اتمام رسید. در این دو جلسه مباحث زیر مورد بررسی قرار گرفتند:

  • افزودن رنگ به متن برای زیباتر کردن آن

  • اعمال ویژگی‌های فونت محور، از جمله font-weight، font-style، font-size، font-family و غیره.

  • اعمال ویژگی‌های متن محور از جمله text-shadow، text-indent، text-decoration، text-align و غیره.

  • تاریخچه فونت‌های web-safe و چگونگی ادغام آن‌ها با فونت‌ها وب خودمان

  • چگونگی علامت‌گذاری مناسب انتقادها و نقل‌قول‌ها

مسلح کردن متن محتوای سایت و استفاده از 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 در جلسه قبلی بررسی شد. این مبحث که ...

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

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

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