سبک متن
سبک متن شامل 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>
برچسب های
مثال 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٪}” موقعیت نسبی را بر اساس وضوح یا اندازه پنجره مرورگر مشخص می کند.