طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

قالب بندی متن در CSS و کار با فونت

قالب بندی متن در CSS و کار با فونت

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

در ابتدا می خواهم شما را با دستوراتی برای سبک دهی به متن و قالب بندی آن آشنا کنم. با من همراه باشید:

قالب بندی متن با CSS

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

منظور از قالب بندی استفاده از ویژگی هایی است که به متن ها شکل و شمایل خاصی برای زیبایی می دهد. این ویژگی ها شامل ویژگی هایی برای همتراز کردن، تغییر نحوه نمایش متن ها (مثل فونت، خط کشیدن زیر متن، تنظیم فاصله بین آنها و …) و رنگ متن هستند. در این جلسه با ویژگی های مروبوط به قالب بندی متن در CSS آشنا می شویم.

رنگ متن ها

اهمیت رنگ ها در استفاده درست و مناسب از آنها برای زیبایی هرچه تمامتر متن است. بارها در مثال های مختلف دیده اید که برای تعیین رنگ از ویژگی color  استفاده کرده ایم و به سه روش به این ویژگی مقدار دادیم:

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	color: blue;
	}
	p.p01 {
		color: red;
		margin: 1px;
		padding: 1px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p> اگر کدهای CSS را بررسی کنید می بینید که رنگ تمام اجزاء را با انتخاب body به آبی تغییر داده ایم. در نتیجه این پاراگراف نیز با اینکه هیچ دستور CSS برای رنگ آن ننوشته ایم به رنگ آبی نمایش داده می شود. </p>
 <p class="p01"> اما این پاراگراف با کلاس p01 به رنگ قرمز نمایش داده می شود. <br> دلیل این تغییر رنگ این است که برای این پاراگراف رنگ قرمز را سِت کرده ایم که دستورات مربوط به آن در خطهای بعدی دستورات body قرار گرفته است. همانطور که می دانید، دستور رنگ این پاراگراف، دستور رنگ body را بی اثر کرده است و رنگ قرمز را برای این پاراگراف در نظر گرفته است. </p>
 <p> توجه کنید که رنگ پس زمی نه با ویژگی background-color تنظیم می شود و رنگ نمایش اجزا با ویژگی color. </p>
</body>
</html>

آموزش CSS – بخش پنجم

text-align

متن ها را می توان با ویژگی text-align  چپ چین، راست چین، وسط چین و یا هم تراز کرد. مقادیری که می توان به این ویژگی داد عبارتند از:  left  برای چپ چین، right  برای راست چین و center  برای وسط چین و مقدار justify  برای همتراز کردن.

اگر جهت نوشتن متن ها (direction) از راست به چپ باشد، پیش فرض text-align  مقدار right  است. و بر عکس. اگر جهت نوشتن متن ها از چپ به راست باشد، پیش فرض text-align  مقدار left  خواهد بود. اگر جهتی برای المان ها تنظیم نشود، پیش فرض مرورگرها، یعنی از چپ به راست در نظر گرفته می شود.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	color: blue;
	}
	p.p01 {
		color: red;
		margin: 2px;
		padding: 1px;
		text-align: left;
	}
	p.p02 {
		color: red;
		margin: 2px;
		padding: 1px;
		text-align: right;
	}
	p.p03 {
		color: red;
		margin: 2px;
		padding: 1px;
		text-align: center;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Page Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف چپ چین است. </p>
 <p class="p02"> این پاراگراف راست چین است. </p>
 <p class="p03"> این پاراگراف وسط چین شده است بنابراین در وسط صفحه قرار دارد. </p>
 <p class="p04">ویژگی text-align برای این پاراگراف تنظیم نشده است. چون جهت راست به چپ برای صفحه انتخاب شده است، بنابراین متن به صورت راست چین نوشته شده است.</p>
</body>
</html>

آموزش CSS – بخش پنجم

توجه کنید که مقدار justify  با مقدار center  متفاوت است. در justify  تمام خطوط به طور منظم از سمت چپ و راست زیر هم قرار دارند و طول خطوط با هم یکسان است. اما در center  اینگونه نیست و خطوط می توانند هر اندازه ای متناسب با صفحه داشته باشند.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "iran sans";
	 	color: blue;
	}
	p.description {
		color: #00ff00;
		margin: 2px;
		padding: 1px;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		min-height: 190px;
		border: 2px solid red;
		margin: 15px;
		padding: 3px;
	}
	div.center {
		text-align: center;

	}
	div.justify {
		text-align: justify;

	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Page Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="center">
    <p class="description"> این دایو با کلاس center است. مقدار ویژگی text-align آن center است. در پاراگراف زیر اندازه خطوط مساوی نست. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed sint, sequi, inventore quia rerum a cupiditate aperiam placeat non, magni beatae consequuntur ipsam quis amet consectetur nisi sit repellendus totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde recusandae facilis iusto explicabo eveniet necessitatibus temporibus eos provident nihil. Blanditiis, perspiciatis, dolor? Asperiores esse tempora deserunt, assumenda doloribus numquam nemo. </p>
 </div>
 <div class="justify">
    <p class="description"> این دایو با کلاس justify است. مقدار ویژگی text-align آن justify است. در پاراگراف زیر اندازه خطوط مساوی است. </p>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis tenetur in at voluptate delectus aliquam, porro soluta voluptatibus aut adipisci. Facilis similique in voluptate corporis, quidem. Dolores facilis commodi explicabo! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem modi aperiam repellendus asperiores explicabo commodi, voluptate expedita! Qui quasi ut maxime debitis alias repudiandae dicta sunt tempore, vel nemo voluptatum!</p>
 </div>
</body>
</html>

آموزش CSS – بخش پنجم

text-decoration

ویژگی text-decoration  برای آرایش متن استفاده می شود. مقادیری که می توان به این ویژگی داد عبارتند از: none  ، overline  ، line-through  و underline  است. کاربرد و نحوه آرایش متن با این مقادیر را در مثال زیر بررسی می کنیم.

/*style.css*/
 body { 
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 2px solid red;
	padding: 5px;
}
p.none {
	text-decoration: none;
}
p.overline {
	text-decoration: overline;
}
p.linethrough {
	text-decoration: line-through;
}
p.underline {
	text-decoration: underline;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Page Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="none">text-decoration: none;</p>
 <p class="overline">text-decoration: overline;</p>
 <p class="linethrough">text-decoration: line-through;</p>
 <p class="underline">text-decoration: underline;</p>
</body>
</html>

آموزش CSS – بخش پنجم

text-transform

در متون لاتین می توان بزرگ یا کوچک بودن حروف را با ویژگی text-transform  تنظیم کرد. مقادیر این ویژگی عبارتند از uppercase  (بزرگ کردن حروف  هر لغت) ، lowercase  (کوچک کردن حروف هر لغت) و capitalize  (بزرگ نویسی فقط حروف اول).

/*style.css*/
 body { 
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 2px solid red;
	color: purple;
}
p.uppercase {
	text-transform: uppercase;
}
p.lowercase {
	text-transform: lowercase;
}
p.capitalize {
	text-transform: capitalize;
}
p.unset {
	text-transform: unset;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Page Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="uppercase">text-transform: uppercase;</p>
 <p class="lowercase"> Text-Transform: LowerCase;;</p>
 <p class="capitalize">text-transform: capitalize;</p>
 <p class="unset">text-transform: unset;</p>
</body>
</html>

آموزش CSS – بخش پنجم

Text-indentation

می توان قبل از اولین خط هر پاراگراف فاصله ای قرار داد و آن را با فاصله اندکی جلوتر از خط تراز نوشت که به این کار فاصله گذاری می گوییم. با استفاده از دستور text-indentation  این فاصله را می توان تنظیم کرد:

/*style.css*/
 body { 
	 	/*direction: rtl;*/ 
	 	font-family: "iran sans";
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		min-height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;

	}
	div.d01 {
		text-transform: lowercase;
		direction: ltr;
	}
	div.d02 {
		text-transform: lowercase;
		text-indent: 15px;
	}
	div.d03 {
		text-transform: lowercase;
		text-indent: 10px;
	}
	div.d04 {
		text-transform: lowercase;
		text-decoration: underline;
		background-color: #0066ff;
	}
	p.description {
		direction: rtl;
		color: #00ff00;
		text-decoration: none;
		text-transform: lowercase;
		text-indent: 0px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> این دایو indent ندارد. خط اول و خطوط بعدی در پاراگراف زیر در امتداد هم هستند. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae perferendis temporibus modi ipsa. Soluta nesciunt, iste enim cupiditate nulla quaerat expedita, impedit quidem minima velit eius ipsam molestias, iure aliquid? </p>	
 </div>
 <div class="d02">
 	<p class="description"> این دایود indent دارد. خط اول و خطوط بعدی در امتداد هم نیستند. خط اول کمی  جلوتر است. یعنی padding-left بیشتری نسبت به خطوط بعدی دارد. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum nostrum necessitatibus eveniet omnis animi vero dignissimos nobis, porro rem placeat similique ullam eligendi amet nulla sapiente nam distinctio perferendis neque. </p>
 </div>
 <div class="d03">
 	<p class="description"> در متن زیر پاراگراف اول درون تگ p قرار دارد ولی پاراگراف دوم درون تگ قرار نگرفته است. کل دایود indent با مقدار 8px دارد که این مقدار برای پاراگراف اول اعمال شده است. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate sunt molestias sed consequuntur non tempore quam nostrum quo est, at, quia tenetur eos, harum repellendus adipisci veritatis distinctio reprehenderit expedita. </p>
 	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eligendi sint repellat odit sed quisquam quos impedit eos, vel enim autem molestias ab reiciendis, reprehenderit illo rem incidunt, consectetur quaerat!
 </div>
 <div class="d04">
 	<p class="description"> توجه: ویژگی text-indent برای خط اول متنی که درون تگ p قرار دارد اعمال می شود. </p>
 	
 </div>
</body>
</html>

آموزش CSS – بخش پنجم

letter-spacing

در متن های لاتین (و حتی فارسی) می توان با ویژگی letter-spacing  و یک مقدار عددی دلخواه، هر فاصله دلخواهی را بین حروف هر لغت قرار داد. مقادیر منفی را می توانیم به این ویژگی بدهیم که در این صورت حروف به هم خواهند چسبید.

/*style.css*/
 body { 
	 	/*direction: rtl;*/ 
	 	font-family: "iran sans";
	 	color: blue;
	}
	div {
		color: white;
		background-color: #a0a0a0;
		float: right;
		width: 270px;
		min-height: 240px;
		border: 2px solid red;
		margin: 15px;
		padding: 13px;

	}
	div.d01 {
		text-transform: lowercase;
		direction: ltr;
	}
	div.d02 {
		text-transform: lowercase;
		text-indent: 15px;
		letter-spacing: 2px;
	}
	div.d03 {
		text-transform: lowercase;
		text-indent: 10px;
		letter-spacing: -1px
	}
	div.d04 {
		text-transform: lowercase;
		text-decoration: none;
		text-indent: 5px;
		direction: rtl;
		letter-spacing: 5px;
	}
	p.description {
		direction: rtl;
		color: #00ff00;
		text-decoration: none;
		text-transform: lowercase;
		text-indent: 0px;
		letter-spacing: 0;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	<p class="description"> این دایو letter-spacing ندارد و همه چیز معمولی است. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae perferendis temporibus modi ipsa. Soluta nesciunt, iste enim cupiditate nulla quaerat expedita, impedit quidem minima velit eius ipsam molestias, iure aliquid? </p>	
 </div>
 <div class="d02">
 	<p class="description"> این دایود letter-spacing با مقدار 2px دارد. همانطور که می بینید، با تنظیم ویژگی letter-spacing فونت متن نیز تغییر می کند. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum nostrum necessitatibus eveniet omnis animi vero dignissimos nobis, porro rem placeat similique ullam eligendi amet nulla sapiente nam distinctio perferendis neque. </p>
 </div>
 <div class="d03">
 	<p class="description"> این دایو letter-spacing منفی دارد. همانطور که می بینید، حروف متن زیر به هم چسبیده هستند. </p>
 	<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate sunt molestias sed consequuntur non tempore quam nostrum quo est, at, quia tenetur eos, harum repellendus adipisci veritatis distinctio reprehenderit expedita. </p>
 </div>
 <div class="d04">
 	<p class="description"> توجه: letter-spacing به همه متنهای درون المان ها اعمل می شود. ( بر خلاف text-indent که فقط به متنهای درون تگ p اعمال می شد. ) </p>
 	<p> در متنهای فارسی نیز اگر letter-spacing زیاد در نظر گرفته شود، حروف از هم جدا خواهند شد. </p>
 	
 </div>
</body>
</html>

آموزش CSS – بخش پنجم

line-height

این ویژگی برای تنظیم ارتفاع خطوط استفاده می شود که مقداری عددی با واحد یا بدون واحد (که در اینصورت واحد پیش فرض مرورگرها یعنی em در نظر گرفته می شود.) را می پذیرد.

/*style.css*/
body { 
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 2px solid red;
	color: blue;
}
p.one {
	line-height: 1.8;
}
p.tow {
	line-height: 1.8em;
}
p.three {
	line-height: 45px;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Page Title </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="one">line-height: 1.8;</p>
 <p class="tow">line-height: 1.8em;</p>
 <p class="three">line-height: 35px;</p>
</body>
</html>

آموزش CSS – بخش پنجم

در صورت تنظیم فاصله داخلی، مقدار ویژگی padding  با مقدار ویژگی line-height  جمع خواهد شد.

direction

این ویژگی جهت چینش المان ها و نگارش متن ها در المان ها را با دو مقدار rtl (از راست به چپ) و ltr (از چپ به راست) تعیین می کند:

/*style.css*/
body { 
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 2px solid red;
	color: blue;
}
p.one {
	direction: rtl;
}
p.tow {
	direction: ltr;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="one">direction: rtl;</p>
 <p class="tow">direction: ltr;</p>
</body>
</html>

آموزش CSS – بخش پنجم

word-spacing

علاوه بر فاصله بین حروف، فاصله بین لغات را هم می توان با استفاده از ویژگی word-spacing  تنظیم کرد.

/*style.css*/
body { 
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 2px solid red;
	color: blue;
}
p.tow {
	word-spacing: 15px;
}
p.three {
	word-spacing: -3px;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="one">This is a paragraph.</p>
 <p class="tow">This is another paragraph with </p>
 <p class="three">This is another paragraph with </p>
</body>
</html>

آموزش CSS – بخش پنجم

text-shadow

این ویژگی با دریافت 3 مقدار، سایه های دلخواه را در اطراف متون ایجاد می کند:

  • مقدار اول برای جابجایی سایه در راستای محور افقی
  • مقدار دوم برای جابجایی سایه در راستای محور عمودی
  • مقدار سوم برای تعیین رنگ سایه است.

و اگر بخواهیم سایه را برای متنی براداریم به ویژگی text-shadow  مقدار none  می دهیم.

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

سایه افقی: اعداد مثبت سایه را به سمت راست و اعداد منفی سایه را به سمت چپ جابجا می کنند.

سایه عمودی: اعداد مثبت سایه را به پایین و اعداد منفی سایه را به سمت بالا جابجا می کنند.

در مثال زیر سایه دادن را با هم تمرین می کنیم:

/*style.css*/
body {
  font-family: "iran sans";
}
h1 {
  margin: 10% 30%;
  text-shadow: 3px 2px red;
}

آموزش CSS – بخش پنجم

دوستان عزیز می توانید در مرورگر با کلیک راست بر روی متن Text Shadow از منوی ظاهر شده گزینه inspect را انتخاب کنید. حال در قسمت دستورات CSS مقادیر دستور text-shadow  را تغییر دهید و همزمان تغییرات را مشاهده نمایید.

آموزش CSS – بخش پنجم

white-space

وقتی پاراگراف خیلی طولانی باشد، مرورگر تمایل دارد که کل متن را در صفحه نمایش دهد. از این رو با کوچک کردن اندازه مرورگر همواره با کوتاه کردن طول خطوط، کل متن را نمایش می دهد. مانند مثال زیر:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga eligendi ratione labore voluptates molestiae rem impedit mollitia veniam consequatur, natus laboriosam quos optio, doloribus deserunt ea saepe, aperiam omnis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis sunt, voluptas. Provident, accusantium in maxime soluta, alias non eveniet quod quidem voluptatem repudiandae ut, a molestiae amet eius dolores quo.  </p>	
</body>
</html>

آموزش CSS – بخش پنجم

آموزش CSS – بخش پنجم

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

white-space: nowrap;

آموزش CSS – بخش پنجم

vertical-align

با استفاده از این ویژگی می توان عکس های درون یک خط را به صورت عمودی جابجا و آن را با متن تراز کرد :

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
	}
	p {
		border: 1px solid black;
		padding: 2px;
	}
img.text-top {
	vertical-align: text-top;
}
img.middle {
	vertical-align: middle;
}
img.text-bottom {
	vertical-align: text-bottom;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p>Some text <img src="images/sitesazan01.jpg" alt="sitesazan"></p>
 <p>vertical-align: text-top;<img src="images/sitesazan01.jpg" alt="sitesazan" class="text-top"></p>
 <p>vertical-align: middle;<img src="images/sitesazan01.jpg" alt="sitesazan" class="middle"></p>
 <p>vertical-align: text-bottom;<img src="images/sitesazan01.jpg" alt="sitesazan" class="text-bottom"></p>
</body>
</html>

آموزش CSS – بخش پنجم

text-overflow

اگر متن یک المان طولانی باشد که مجبور باشیم مقداری از آن را پنهان کنیم، با استفاده از این ویژگی می توان نشانه ای (مثلا سه نقطه) در قسمت قابل مشاهده متن قرار داد تا کاربر متوجه ادامه دار بودن متن شود.

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
	}
	div {
		border: 1px solid black;
		padding: 2px;
		width: 35%;
		height:50px;
		margin: 5px;
		overflow: hidden;
		white-space: nowrap;
	}
div.clip {
	text-overflow: clip;
}
div.ellipsis {
	text-overflow: ellipsis;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore illo laudantium fugiat magnam totam suscipit, doloremque reprehenderit sequi autem modi, eius.</div>
 <div class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum .</div>
</body>
</html>

آموزش CSS – بخش پنجم

توجه کنید که دو ویژگی overflow  (برای تعیین وضعیت محتوای اضافه هر المان) و white-space  باید تنظیم شوند تا بتوان از ویژگی text-overflow  استفاده کرد.

حالا بیایید ببینیم چط.ری می توان تنظیمات دلخواهی را بر روی فونت ها اعمال کرد:

تنظیمات فونت با CSS

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

font-family

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

در انتخاب فونت دقت داشته باشید که اگر نام فونت چند قسمتی باشد مانند iran sans، باید در علامت نقل قول قرار بگیرد.

/*style.css*/
body {
	 	font-family: "iran sans", verdana, serif, sans-serif;
	 	color: blue;
	}
	div {
		border: 1px solid black;
		padding: 2px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

 </div>
</body>
</html>

آموزش CSS – بخش پنجم

font-style

این ویژگی معمولا برای کج نویسی متن ها استفاده می شود و سه مقدار normal ، italic  و oblique  را دریافت می کند.

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 1px solid red;
}
p.normal {
	font-style: normal;
}
p.italic {
	font-style: italic;
}
p.oblique {
	font-style: oblique;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="normal">font-style: normal; </p>
 <p class="italic">font-style: italic;</p>
 <p class="oblique">font-style: oblique;</p>
</body>
</html>

آموزش CSS – بخش پنجم

font-size

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

مقادیر ویژگی font-size  به دو دسته تقسیم زیر تقسیم می شوند:

مقادیر مطلق: که مقدار ثابتی را برای فونت تنظیم می کند و به کاربر اجازه تغییر اندازه فونت از طریق تنظیمات مرورگر را نمی دهد.

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

به مثال زیر توجه فرمایید:

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
	}
p {
	border: 1px solid red;
}
p.first {
	font-size: 0.5cm;
}
p.second {
	font-size: 30px;
}
p.third {
	font-size: 50pt;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="first">font-size: 0.5cm;</p>
 <p class="second">font-size: 30px;</p>
 <p class="third">font-size: 50pt;</p>
</body>
</html>

آموزش CSS – بخش پنجم

در این مثال اندازه فونت ها مطلق هستند و کاربر برای تغییر اندازه فونت باید بزرگنمایی را تغییر دهد.

انداز های نسبی با واحد های em و یا درصد تعیین می شوند و همانطور که گفته شد کاربر می تواند از منوی تنظیمات مرورگر اندازه را تغییر دهد. W3C نیز استفاده از این واحد را توصیه کرده است.

  • هر 16px برابر با 1em است.
  • نسخه های قدیمی اینترنت اکسپلورر فونت های با واحد em را به درستی نمایش نمی دهند و ممکن است متن را با اندازه بیشتر و یا کمتر از مقدار تعیین شده نمایش دهند. برای رفع این مشکل اندازه فونت body را 100% و اندازه فونت المان های صفحه را با واحد em تنظیم می کنیم.
/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
		font-size: 100%;
	}
p {
	border: 1px solid red;
}
p.first {
	font-size: 1em;
}
p.second {
	font-size: 2em;
}
p.third {
	font-size: 3em;
}
p.fourth {
	font-size: 200%;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="first">font-size: 1em;</p>
 <p class="second">font-size: 2em;</p>
 <p class="third">font-size: 3em;</p>
 <p class="fourth">font-size: 200%;</p>
</body>
</html>

آموزش CSS – بخش پنجم

font-weight

ویژگی font-weight  میزان برجستگی فونت را تنظیم می کند:

/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
		font-size: 100%;
	}
p {
	border: 1px solid red;
}
p.first {
	font-weight: lighter;
}
p.second {
	font-weight: bold;
}
p.third {
	font-weight: bolder;
}
p.fourth {
	font-weight: 300;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="first">font-weight: lighter;</p>
 <p class="second">font-weight: bold;</p>
 <p class="third">font-weight: bolder;</p>
 <p class="fourth">font-weight: 300;</p>
</body>
</html>

آموزش CSS – بخش پنجم

تنظیمات فونت را نیز می توان در یک خط خلاصه کرد. بدین منظور از ویژگی font استفاده می کنیم و مقادیری که دریافت می کند به ترتیب زیر می باشد:

font: "font-style font-variant font-weight font-size/line-height font-family"
  • اگر دو ویژگی font-size  و font-family  تنظیم نشوند دیگر ویژگی اثر داده نخواهند شد. همچنین در صورت عدم تعیین مقدار برای هر ویژگی، مقدار پیش فرض در نظر گرفته می شود.
  • ویژگی font-variant  تعیین می کند که حروف متون لاتین به صورت بزرگ نوشته شوند یا نه.
/*style.css*/
body {
	 	font-family: "iran sans";
	 	color: blue;
		font-size: 100%;
	}
p {
	border: 1px solid red;
	padding: 3px;
}
p.first {
	font: italic bolder 2em/30px "iran sans";
}
p.second {
	font-variant: normal;
}
p.third {
	font-variant: small-caps;
}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> Page Title </title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="first">font: italic bolder 2em/30px "iran sans";</p>
 <p class="second">font-variant: normal;</p>
 <p class="third">font-variant: small-caps;</p>
</body>
</html>

آموزش CSS – بخش پنجم

با استفاده از ویژگی های توضیح داده شده در این جلسه خواهید توانست محتوای متنی را به دلخواه سبک دهی نمایید.

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

در جلسه ششم آموزش CSS مطالب مهمی را آموزش خواهم داد. همراه من باشید.

برقرار باشید و سبز.

دیدگاه ‏خود را بنویسید