در این جلسه از آموزش CSS میخوایم به بررسی متن ها و قابلیت های CSS در ویرایش کردن استایل و قیافه متن ها بپردازیم . از جمله کارهایی که میتونیم انجام بدیم قسمت های ویرایش رنگ و رنگ پیش زمینه – استایل دکور متن ها – محل قرار گیری در صفحه از نظر افقی بودن به اصطلاح align – فاصله ها و سایه ها و … خیلی کارهای دیگه !
رنگ متن ها در CSS
مثل تمامی قسمت های قبلی که در دوره آموزش CSS یاد گرفتیم میشه اومد و از کد رنگ های مختلف برای رنگ کردن متن ها و رنگ پیش زمینه شون استفاده کرد . برای رنگ کردن متن میشه از خصوصیت color استفاده کرد .
body {
color: blue;
}
h1 {
color: green;
}
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
وضوح در طراحی UI بسیار مهم هستش . یعنی اینکه نیاید یه رنگ بک گراند سفید بدید بعد به متن یه رنگ بدید که اصلا معلوم نشه و یا خوندنش سخت بشه . همیشه دقت کنید که طرح تون نهایت زیبایی و خوانایی رو داشته باشه .
align کردن متن ها در CSS
برای align کردن متن ها در CSS روش های مختلفی برای متدهای مختلف وجود داره ! یعنی چی ! ما یه موقع میخوایم یه متن رو بصورت افقی align کنیم و یه موقع میخوایم عمودی و یا جهت نوشتار از راست به چپ یا از چپ به راست باشه و …
اولین حالت text-align هستش که میاد در جهت افقی متن رو align میکنه . یعنی متن راست چین باشه وسط چین چپ چین یا justify شده قرار بگیره .
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
یه خصوصیت دیگه داریم text-align-last که میاد آخرین خط متن رو حالت جهت دهی میده ! به هیچ دردی نمیخوره تقریبا و زیاد ازش استفاده نمیشه ولی خوبه که بدونین این قابلیت رو هم داره CSS
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
قابلیت دیگه هم direction هست که میاد جهت نوشتن متن رو از سمت راست یا چپ مشخص میکنه. مثلا توی زبان فارسی متون از سمت راست نوشته میشه و باید مقدار rtl داد به این ویژگی و برای زبان انگلیسی از سمت چپ شروع میشه و باید مقدار ltr داد به این ویژگی . این دو تا مقدار کوتاه شده عبارت left to right و right to left هستش که به صورت اختصار اون شکلی مینویسن.
p {
direction: rtl;
}
برای align کردن متن هم در حالت عمودی از ویژگی vertical-align استفاده میکنیم . مثال های زیر رو ببینین تا بیشتر متوجه بشین :
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
decoration متن ها در CSS
برای کشیدن خط بر روی متن (محل قرارگیری مهم است زیر بالا یا روی خط و … ) از این قابلیت استفاده میکنیم . چند تا خصوصیت هم داره این ویژگی که نوع خط رو مشخص میکنه و رنگش و استایل و ضخامت رو . مثل بقیه قسمت ها که تا الان یاد گرفتیم هم میشه کدهای کوتاه شده هم توش استفاده کرد .
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p {
text-decoration-line: overline underline;
}
برای اینکه رنگ بدیم به المان هم از text-decoration-color استفاده میکنیم . مثال های زیر رو ببینین :
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
حالت های مختلف کشیدن این خط هم بجز محل قرارگیری هم با style مشخص میشه . مثال های زیر رو ببینین :
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h2 {
text-decoration-line: underline;
text-decoration-style: double;
}
h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}
p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}
p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}
p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
برای مشخص کردن ضخامت هم از thickness استفاده میکنیم. مثال های زیر رو ببینین :
h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}
h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}
کدهای کوتاه شده text-decoration در CSS
همونطوری که تا حالا یاد گرفتین برای اینکه بیایم کدهای کوتاه استفاده کنیم میایم چندتا خصوصیت رو داخل یه سلکتور مینویسیم . حالا برای کوتاه کردن این کدهای text-decoration باید نوع خط رو فقط مشخص کنیم و بقیه رو میتونیم بنویسیم و میتونیم هم ننویسیم .
h1 {
text-decoration: underline;
}
h2 {
text-decoration: underline red;
}
h3 {
text-decoration: underline red double;
}
p {
text-decoration: underline red double 5px;
}
نکته کاربردی : توجه داشته باشین توی مرورگرها و HTML بصورت پیش فرض تمام لینک ها زیرشون خط داره . حالا برای اینکه بتونیم تمامی این لینک ها رو خط زیرشون رو برداریم میایم از یک سلکتور و ویژگی استفاده میکنیم و کد زیر توی فایل CSS میذاریم :
a {
text-decoration: none;
}
خب الان میتونین تصور کنین که میشه اون المان هایی که توی دوره آموزش HTML خوندیم که میومد روی المان خط میکشید و قیمت بود ! و قیمت جدید رو نشون میداد رو با این ویژگی CSS هم بزنیم برای تمام المان ها !
قابلیت text-transform در CSS
این قابلیت بدرد سایت های فارسی و زبان فارسی نمیخوره . این قابلیت میاد تمامی کاراکترهای انگلیسی رو حروف بزرگ میکنه یا کوچیک ! یا یه کار دیگه که میکنه میاد اولین حرف رو بزرگ میکنه ! همین !
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
فاصله دهی ها در متن با استفاده از CSS
کلا فاصله ها با CSS تعریف میشن . حالا متن ها رو میتونیم بیاریم جلوتر یکم مثلا توی پاراگراف که تموم میشه خط بعدی یکم جلوتر شروع میشه ! یا اینکه بیایم فاصله خط ها رو یکم بیشتر کنیم از هم یا کمتر کنیم – یا فاصله حروف رو از هم و …
برای اینکه بیایم فاصله رو از اول ستون که داریم مینویسیم در جهت افقی زیاد کنیم و به اصطلاح انگاری یه تب بزنیم (این همه توضیح دادیم که بگیم indent میدیم بهش ! ) از مثال زیر تبعیت میکنیم :
p {
text-indent: 50px;
}
برای اینکه بیایم به حروف فاصله بدیم از کد letter-spacing استفاده میکنیم و فاصله رو بین حروف تعیین میکنیم . فقط دقت کنید در زبان فارسی حروف به همدیگه چسبیده و اگه از هم فاصله بگیره شاید بد بشه !
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
ارتفاع خط ها رو هم با خصوصیت line-height مشخص میکنیم :
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
فاصله بین کلمه ها رو هم با word-spacing مشخص میکنیم :
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}e-height: 1.8;
}
سایه دهی به متن ها در CSS
برای اینکه بتونیم تو CSS و طراحی سایتمون به متن ها سایه اختصاص بدیم از ویژگی text-shadow استفاده میکنیم . مثال زیر رو ببینین :
قابلیت سایه زدن متن در CSS!
<h3 style="text-shadow: 2px 2px;">قابلیت سایه زدن متن در CSS!</h3>
رنگ هم میتونیم بدیم به این قابلیت ! مثال زیر رو ببینین :
قابلیت سایه زدن متن در CSS!
<h3 style="text-shadow: 2px 2px red;">قابلیت سایه زدن متن در CSS!</h3>
قابلیت سایه زدن متن در CSS!
<h3 style="text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;">قابلیت سایه زدن متن در CSS!</h3>
قابلیت سایه زدن متن در CSS!
<h3 style="color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;">قابلیت سایه زدن متن در CSS!</h3>
