سبک متن

سبک متن شامل font-family، font-size، font-style، font-weight، font-variant است.

قلم ارزش
font-family Arial ، Times New Roman ، Courier New ، Georgia ، Verdana
اندازه فونت 9px ، 10px ……………. بزرگ
نوع قلم عادی ، مورب ، مایل
وزن قلم عادی ، پررنگ ، تعداد
نوع قلم عادی ، کلاه کوچک

مثال 1

<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >#f{font-family:Times New Roman;font-size:28px;font-style:italic;font-weight:bold;font-variant:normal</style>
<div id ="f">Hello Friend's Welcome to PHPGurukul</div>
</body>
</html>

خروجی

سبک محتوا

سلام دوست به PHPGurukul خوش آمدید

توضیح

“font-family، font-size، font-style، font-weight، font-variant” سبک متن را برای قلم مشخص می کند.

فاصله

وزن خط می تواند فاصله خط را مشخص کند.

فاصله کلمات می تواند فاصله کلمات را مشخص کند.

فاصله بین حروف می تواند فاصله حروف را مشخص کند.

مثال 2

<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >
	#lineSpacing{line-height: 500%}
	#wordSpacing{word-spacing: 10px}
	#letterSpacing{letter-spacing: 5px}
</style>
<p id ="lineSpacing">Line Spacing Sample.</p>
<p id ="wordSpacing">Word Spacing Sample.</p>
<p id ="letterSpacing">Letter Spacing Sample.</p>
</body>
</html>

خروجی

سبک محتوا

نمونه خط فاصله.

نمونه فاصله کلمات.

نمونه نامه نامه.

توضیح

ارتفاع خط: 500٪}ارتفاع خط را 500٪ تعیین می کند.

“word-spacing: 10px” کلمه فاصله را به عنوان 10px مشخص می کند.

“name-spacing: 5px” فاصله حروف را 5px مشخص می کند.

سبک تقسیم شده

برچسب های تقسیم

برای گروه بندی عناصر محتوای آنها به عنوان بلوک استفاده می شود. برچسب

برای اهداف یک ظاهر طراحی شده مفید است.

<div class = “xxx”></div>
<div id = “xxx”></div>

برچسب های

می توانند شناسه و کلاس به سبک CSS داشته باشند.

مثال 3

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >
	.d1{font-style: italic;color: red;}
	#d2{font-family:arial black; color: blue;}
</style>
<div class="d1"><p>AAAAA</p>
<p>BBBBB</p>
<p>CCCCC</p></div>
<div id="d2">
<p>EEEEEE</p>
<p>FFFFFF</p>
<p>GGGGGG</p></div>
</body>
</html>

خروجی

سبک محتوا

توضیح

به عنوان گروه دوم تقسیم می شود که شامل سه جفت برچسب

دیگر است که آنها از سبک” # d2 “استفاده می کنند.

سبک اسپان

از می توان برای گروه بندی عناصر برای اهداف یک ظاهر طراحی شده (با استفاده از ویژگی کلاس یا id) استفاده کرد.

<span class =”xxx ”></span>
<span id =”xxx ”></span>

برچسب می تواند دارای ویژگی id و class به سبک CSS باشد.

مثال 4

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
	div{background-color: yellow;}
	.d1{font-style: italic;color: red;}
	#d2{font-family:italic; color: blue;}
</style>
<body>
<div><p>This is AAAAA text,<span class="d1">This is BBBBB text,</span>This is CCCCC text,<span id="d2"> This is DDDD text,</span>This is EEEEE text</p></div>
</body>
</html>

خروجی

سبک محتوا

این متن AAAAA است ،این متن BBBBB است ،این متن CCCCC است ، این متن DDDD است ،این متن EEEEE است

توضیح

موارد فوق با استفاده از برچسب سبک css دو قطعه متن را در یک پاراگراف که در یک بلوک قرار دارد تنظیم می کند.

شباهت زیادی به عنصر

دارد ، اما

یک عنصر در سطح بلوک است در حالی که یک عنصر درون خطی است.

سبک حاشیه

border-style: value

“border-style: value” می تواند با تعیین مقدار متفاوت ، سبک حاشیه را تنظیم کند. “مقدار” ممکن است “جامد ، دوتایی ، تکه تکه ، نقطه ، شیار ، خط الراس ، قرار دادن ، شروع” باشد.

مثال 5

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
	
#b1{border-style: solid;border-width: 10px;}
    #b2{border-style: double;border-width: 10px;}
	#b3{border-style: dashed;border-width: 10px;}
	#b4{border-style: dotted;border-width: 10px;}
	#b5{border-style: groove;border-width: 10px;}
	#b6{border-style: ridge;border-width: 10px;}
	#b7{border-style: inset;border-width: 10px;}
	#b8{border-style: outset;border-width: 10px;}
</style>
<body>
<p id="b1">This is solid border</p><br>
<p id="b3">This is dashed border</p><br>
<p id="b4">This is dotted border</p><br>
<p id="b5">This is groove border</p><br>
<p id="b6">This is ridge border</p><br>
<p id="b7">This is inset border</p><br>
<p id="b8">This is outset border</p><br>
</body>
</html>

خروجی

سبک محتوا

این مرز جامد است

این مرز شکسته است

این مرز چین است

این مرز شیار است

این مرز پشته است

این مرز قرار دارد

این مرز آغازین است

توضیح

“سبک حاشیه: مقدار” ممکن است “جامد ، دوتایی ، تکه تکه ، نقطه چین ، شیار ، خط الراس ، داخل حفره ، شروع” باشد.

“عرض عرض: 10 پیکسل” عرض حاشیه را 10 پیکسل مشخص می کند.

رنگ لبه

border-color: value

“border-color: value” می تواند ویژگی های حاشیه را برای رنگ تنظیم کند.

مثال 6

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b5{border-style: groove;border-width: 20px;border-color: blue}
#b6{border-style: ridge;border-width: 20px;border-color: red}
</style>
<body>
<p id="b5">This is groove border</p><br>
<p id="b6">This is ridge border</p><br>
</body>
</html>

خروجی

سبک محتوا

این مرز شیار است

این مرز پشته است

توضیح

“border-color: value” می تواند رنگ حاشیه را تنظیم کند.

سبک پدینگ

Padding اطراف محتویات متن در یک جعبه محتوا است. عرض بالشتک را می توان با یک ویژگی padding مشخص کرد.

padding:value

مثال 7

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{border-style: solid;border-width: 10px;padding: 10px}
    #b2{border-style: dotted;border-width: 10px;padding: 20pxs}	
</style>
<body>
<p id="b1">This is solid border</p><br>
<p id="b2">This is double border</p><br>
</body>
</html>

خروجی

سبک محتوا

این مرز جامد است

توضیح

“padding-value” می تواند عرض بالشتک را تنظیم کند.

سبک مارجین

حاشیه محدوده لبه های مرز است.

عرض حاشیه را می توان با یک ویژگی margin مشخص کرد.

margin:value

مثال 8

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{border-style: solid;border-width: 10px;margin: 30px}
   #b2{border-style: dotted;border-width: 10px;margin:0px}	
</style>
<body>
<p id="b1">This is solid border</p><br>
</body>
</html>

خروجی

سبک محتوا

این مرز جامد است

توضیح

“margin: value” می تواند عرض حاشیه را تنظیم کند.

موقعیت یابی مطلق

موقعیت محتوا را می توان با ویژگی موقعیت تعیین کرد.

position: absolute ; top: value; left: value;

“position: absolute” مکان دقیق مطالب را تنظیم می کند.

“top: value” فاصله را از لبه بالایی پنجره تنظیم کنید.

“left: value” فاصله را از لبه سمت چپ پنجره تنظیم کنید.

مثال 9

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{position: absolute;top: 0px;left: 30px}
   #b2{position: absolute;top: 30px;left: 60px}
</style>
<body>
<p id="b1">This is position 1</p><br>
<p id="b2">This is position 2</p><br>
</body>
</html>

خروجی

سبک محتوا

این موقعیت 1 است

توضیح

“موقعیت: مطلق؛ بالا: مقدار؛ سمت چپ: مقدار؛ ” فاصله مطلق از لبه پنجره مرورگر را مشخص می کند.

موقعیت یابی نسبی

position:relative;top:percentage;left:percentage

“Position: relative” مکان نسبی محتویات را براساس وضوح مرورگر یا اندازه پنجره تنظیم می کند.

“top: درصد” فاصله از لبه بالایی پنجره را تنظیم می کند. “چپ: درصد” فاصله از لبه سمت چپ پنجره را تعیین می کند.

مثال 10

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >	
#b1{position: relative;top:3%;left: 5%}
   </style>
<body>
<p id="b1">This is relatived position</p><br>
</body>
</html>

خروجی

سبک محتوا

این موقعیت نسبی است

توضیح

“Position: relative؛ top: 3٪؛ left: 5٪}” موقعیت نسبی را بر اساس وضوح یا اندازه پنجره مرورگر مشخص می کند.