����CSS�
CSS
CSS (Cascading Style Sheets - Каскадты стиль кестелері)
CSS - HTML элементтерінің браузерде қалай көрінетінін анықтайтын тіл арқылы жасауға болады.
HTML белгілеу тілі әдепкі бойынша стильделген әртүрлі элементтерді қарастырды: абзацтар шегініс болды, сілтемелер түсі бойынша әр түрлі болды, тақырыптар мәтін өлшемімен ерекшеленеді және т.б. Әзірлеуші ретінде сіз бұл дизайнды өзгертіп, мүлдем жаңасын қоса аласыз.
HTML тілінде CSS пайдалану
CSS стилінің тілі HTML-ге тікелей қатысты емес. Браузерге стильдерді қайдан жүктеп, интерпретациялау керектігін айту керек.
Интерпретация – қандай да бір теорияның кейбір элементтеріне (формулаларға, белгілерге) берілген мағыналардың жиынтығы.
Мұны істеудің екі жолы бар:
<head>
<title> CSS туралы сабак</title>
<link rel="stylesheet" href="5858(1).css">
</head>
Inline
Inline дегеніміз не?
Css құрылымында inline-size сипаты жазу режиміне байланысты, блоктың көлденең немесе тік өлшемдерін анықтайды. Ол width және height қасиеттеріне сәйкес келеді және жазу режимінің қасиетіне байланысты.
.mysal2 {
writing-mode: horizontal-tb;
background-color: brown;
inline-size: 500px;
}
<p class="mysal2"> Бұл CSS үшін қолданылған екінші мысал </p>
Стильдерді "сынап көрудің" негізгі әдістерінің бірі — мәтінмен жұмыс жасау. CSS мәтінді көптеген жолдармен жасауға мүмкіндік береді: қаріп өлшемін ұлғайту, стильді, қанықтылықты және т.б. анықтау.
Қаріп өлшемін Өзгертуді үйрену. Өлшемді font-size қасиетімен өзгертуге болады, оның мәні сан және өлшем бірлігі болып табылады. Өлшем бірлігі пиксель px аббревиатурасы арқылы белгіленеді. Әр түрлі өлшем бірліктері және олардың қалай жұмыс істейтіні туралы толығырақ келесі сабақтарда айтылады
<p style="font-size: 55px;"> Сөз өлшемін пайдаланып көрудегі алғашқы мысал</p>
<p style="font-size: 20px;"> Сөз өлшемін пайдаланып көрудегі алғашқы мысал</p>
<p style="font-size: 8px;"> Сөз өлшемін пайдаланып көрудегі алғашқы мысал</p>
Мысал
Стиль
CSS-те стильдерді қолданған кезде көбінесе стильдер көрсетілген элемент қана емес, сонымен қатар оған енгізілген тегтер де әсер етеді. Мұндай стильдер мұрагерлік деп аталады. Өткен сабақтан алынған font-size стилі мұрагерлік болып табылады, ол барлық кірістірілген тегтерге қолданылады.
<div style="font-size: 20px;">
Размер шрифта, которым написан этот текст — 20 пикселей.
� <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей.</p>
</div>
Барлық кірістірілген тегтерге мұра болатын стильдерден басқа, CSS-те көптеген стильдер бар, олар қолданылатын элементке ғана тән. Осындай қасиеттердің бірі - border, элементтің айналасында шекара орнатуға мүмкіндік береді. Бірақ бұл жақтау ішкі әр бір элементке көшірілмейді.
<p style = "border:10px solid red;">
Жақтаушы үшін алғашқы мысал
</p>
<p style = "border:5px dotted yellow;">
Жақтаушы үшін алғашқы мысал
</p>
<p style = "border:10px dashed blue;">
Жақтаушы үшін алғашқы мысал
</p>
Жақтауша түрлері
Style тегіндегі
стильдерді пайдалану әдістері
Стильдерді анықтау үшін атрибуттарды қолданудың негізгі мәселесі-олардың шамадан тыс жүктелуі. HTML белгілеуінде көптеген элементтер бар және код стильдерін қосқанда, ол әлдеқайда үлкен болады да, бұл түзетуді оқуға нашар әсер етеді.
Екінші мәселе – стильдерді түзету. Мұны істеу үшін алдымен кодтан қажетті элементті тауып, содан кейін оның стильдерін өңдеу керек. Беттегі мұндай элементтер 10, 20, 100 болуы мүмкін. Бірдей есіммен белгіленген тегтерге, әр элемент үшін стильдерді бөлек жазу керек.
<Style> тегі барлық стильдік құрылымды бір жерге жинақтауға арналған ең оңтайлы шешім болып табылады.
<head>
<title> CSS туралы сабак</title>
<link rel="stylesheet" href="5858(1).css">
<style>
.mysal3{
color: E1F0C4;
background-color: goldenrod;
font-family: monospace;
font-size: 15px;
font-style: italic;
}
</style>
</head>
Стиль орнатудың бірінші жолы
Class
Беттің белгілі бір бөлігін сәндеудің негізгі шешімі-класстарды пайдалану. Олар бізге қажетті стильді беттегі барлық элементтер үшін бірден емес, тек қажетті класы бар элементтер үшін орнатуға көмектеседі.
CSS-те стильді орнату үшін .class-атауы селекторы қолданылады.Нүктеге назар аударатын болсақ, нүктенің бұл жерде маңызы үлкен, себебі – браузер бұл стиль class үшін көрсетілгенін түсінеді.
Келесі беттегі мысалға назар аударамыз:
<h3 class="zhol3"></h3>
.zhol3{
}
Стиль орнатудың екінші жолы
Стиль орнатудың бұл 2-жолы жұмысыңызды өте жақсы оңтайландырады. Себебі стиліне арналған басқа css жүктемесімен өте оңай. Классқа мән беріп, сол мән арқылы стиль жүйесін жүйелі түрде өзгерте аласыз.
<!DOCTYPE html>
<html>
<head>
<title> CSS туралы сабак</title>
<link rel="stylesheet" href="5858(1).css"> Сілтемесіндегі код келесі бетте
</head>
<body>
<h3 class="zhol3">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</h3>
</body>
</html>
.zhol3{
font: Montserrat;
background-color: violet;
color: white;
}
Бұл жерге қалаған стиль мәндерін беріп, стиль форматыңызды арттыра аласыз.Мысалы:
Селекторлар
Алдыңғы сабақтардан сіздер тег және класс селекторларын кездестірдіңіздер.
Селектор - бұл белгілі бір CSS стильдері не үшін немесе қалай қолданылуы керек сипаттамасы.
Олар белгілі бір элементті ғана емес, сонымен қатар оның орналасқан жерін немесе қандай тегтің ішінде екенін көрсететін жеткілікті күрделі болады.Класс селекторын есіңізге қайта бір түсіріңіз. Ол,біз классын көрсеткен әрбір элементке қолданылады.
Мысалдың код нұсқасын келесі беттен көре аласыз:
<p class="mysalselector"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
<h3 class="mysalselector"> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</h3>
<div class="mysalselector"> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </div>
HTML
CSS
.mysalselector{
font: TT Travels;
background-color: deeppink;
color: white;
font-style: Medium Italic;
border: silver;
}
Топтау селекторы бірдей стиль анықтамалары бар барлық HTML элементтерін таңдайды.Келесі CSS кодын қараңыз (h1, h2 және p элементтері бірдей стиль анықтамаларына ие).:
<p>
Menin kalam Almaty
</p>
<h1>
Menin kalam Almaty
</h1>
<h4>
Menin kalam Almaty
</h4>
h1 {
text-align: center;
color: red;
}
h4 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h4, p {
text-align: left;
color: green;
}
Қысқартылған
нұсқасы
Қалың мәтін стилін орнату үшін font-weight қасиетіне bold қалың мәтін стилін мәнін пайдаланамыз. Бұл қасиетпен сіз мәтін дизайнын орналастыру барысында танысасыз. Қазір ең бастысы – бұл стиль параграфқа да, <div> блоктық элементінеде қолданылады,себебі олардың классы бірдей.
.mysalselector{
font: TT Travels;
font-weight: bold;
}
Font – Шрифт түрі. Мысалы: Біздің мысалымызда тұрған TT Travels шрифті
Стильдерді көрсетудің тағы бір тәсілі-идентификатор бойынша селекторды пайдалану. Id атрибутын пайдалану отырып, беттегі кез-келген элементке арнайы бірегей атауын көрсетуге болады.Егер берілген атау көрсетілсе, онда элементке онда идентификатор бойынша селекторды пайдаланып элементке жүгінуге болады. Ол үшін #идентификаторатауы түріндегі селектор қолданылады.
Мысал:
<p id="identifikator"> Идентификаторға арналған мысал жазу орны </p>
CSS: #identifikator{
text-align: center;
color: gold;
background-color: white;
font: Montserrat;
font-weight: bold;
}