CSS
clinical
case
Түстер
Мәтін бөлігін түспен бөлектеу беттегі пайдаланушының назарын аударудың кең таралған тәсілі болып табылады. Түрлі жарнамалық баннерлер бізге керемет жеңілдік туралы немесе ұсыныс бүгін аяқталатынын айтуға тырысады. Сондай-ақ, мұндай таңдау міндетті түрде оқылатын маңызды ақпаратты көрсете алады.
CSS пайдала отырып, текст түсін барлық бетке(парақша) сонымен қатар, кішігірім аймаққада, аймақта да пайдалануға болады. Бұл таңдалған селектормен анықталады. Түс - color қасиетімен сипатын пайдала отырып орнатылады.
Бұл сабақта түс Hex форматында жазылады, бұл түстің он алтылық көрінісі.
Мысалы:
#ffff00 – Сары түс
#0040ff – Көк түс
#ff0000 – Қызыл түс
#ffffff – Ақ түс
HEX кодтары дегеніміз не және олар қалай жасалады?
HEX кодтары түстер мен ауысулар арасындағы кез келген нәзік нюанстарды анықтауға жарамды.Түс мәндері көптеген бағдарламалау тілдерінде қолданылатын он алтылық жүйе арқылы кодталады. HEX кодын құру принципі:
10-15 сандары латын әліпбиінің әріптерімен A,B,C,B,E,F белгіленеді. Белгіленетін әріптер «F»-тен аспайды. Ең атақты болған барлығына белгілі ақ және қара түстер.
#ffffff – Ақ түс
#000000 – Қара түс
Барлық түстер негізгі түстерден жасалған – көк, жасыл, қызыл. Бұл принцип дизайнерлерге жақсы белгілі, RGB реңктері кез келген графикалық стандарттарда «стандартты» болып саналады. RGB негізінде веб-интерфейстердің HEX кодтары бірдей принциптерге сәйкес қалыптасады.
Мәтінді туралау
Мәтіннің бір бөлігін ерекшелеудің ең жақсы бір әдісі - оны мәтіннің қалған бөлігінен басқаша туралау. Көптеген сайттар пайдаланушыға жеңіл әрі оларды ажыратуды жеңілдету үшін ортаға тураланған тақырыптарды пайдаланады.
CSS – те мәтінді барынша қолдануға арналған text-align қасиеті бар 4 мәнді пайдаланамыз.
Center – Ортасында(Орталығында)
Left – Сол жақта
Right – Оң жақта
Justify – Ені бойынша (Ол сирек қолданылады, өйткені ол сөздер арасында біркелкі емес бос орын қалдырады)
Қолданылған мысал
<p class="sol"> Сол жақ бойынша мысал</p>
<p class="orta">Орта(Орталық) бойынша мысал</p>
<p class="on">Оң жақ бойынша мысал</p>
<p class="eni">Ені бойынша арналған мысал</p>
.sol {
text-align: left;
}
.orta {
text-align: center;
}
.on {
text-align: right;
}
.eni {
text-align: justify;
}
Әріп мөлшері
Әріптің мөлшерін өзгертуге арналған HTML курсында font-weight аналогы қасиеті болып табылатын <b> тег қарастырылды.
Font-weight сипатының ең көп таралған екі мәні бар:
Bold – қалың шрифт. Сыртқы бейнесі мен пайдалануы бойынша <b><strong> кездегідей болады.
Normal – әдепкі мән болып табылады(қарапайым қолданыста).
<p class="mysal4">Бұл bold шрифтына арналған мысал</p>
.mysal4{
font-weight: bold;
}
<p class="mysal5">Бұл normal шрифтына арналған мысал</p>
.mysal5{
font-weight: normal;
}
Курсив
Көбінесе дәйексөздерді немесе терминдерді бөлектеу үшін курсив әріптер қолданылады . Қанықтылықты өзгертуден айырмашылығы, курсив мәтіннің бір бөлігіне назар аударуға мүмкіндік береді, бірақ оны бірден көзге түсетіндей етіп ерекшелендірмейді.
Әріп сипатын өзгерту немесе назар аударту үшін font-style төмендегідей мәндердің бірін қабылдай алатындай сипат пайдаланылады.
Normal – Жиі қолданыстағы мәтін шығару үшін
Italic – курсив
Oblique – қиғашынан жазылған стиль(Курсивке ұқсас)
.mysal4{
font-style:italic;
}
.mysal5{
font-style: oblique;
}
<p class="mysal4">Бұл Italic арналған мысал</p>
<p class="mysal5">Бұл Oblique арналған мысал</p>
Italic және oblique мәні бар мәтін бірдей көрінуі мүмкін екенін ескеріңіз. Бұл жерде мәселе неде? Italic мәнін пайдаланған кезде қаріптің арнайы курсивті нұсқасы ізделеді, ал oblique тек қаріптегі таңбаларды бағдарламалық түрде қисайтады. Барлық қаріптердің курсивке арналған жеке нұсқасы жоқ, сондықтан визуалды түрде екі мән де бірдей болады.
Капитель
(Кіші бас әріптер)
Кіші бас әріптер (Капитель) – өлшемі бас әріптердің өлшеміне бірдей (немесе жақын) кіші әріптердің түрі.
Көбінесе бұл стилистикалық құрал ретінде қолданылады. Бірақ бас әріптердің практикалық жағы да бар - онымен аббревиатураларды белгілеу әдетке айналған және ол тақырыптан кейін мәтінді оқырманға «енгізу» оңай болуы үшін шығарманың бірінші жолдарында да қолданылады.
Капительді(Кіші бас әріптер) орнату үшін font-variant құрылымына келесідей мәндердің бірін беру пайдаланылады:
Normal – Қалыпты жазу(қолданыстағы)
Small-caps – Капитель
<p class="mysal6">Бұл Normal арналған мысал</p>
<p class="mysal7">Бұл Капител small-caps-қа арналған мысал</p>
.mysal6{
font-variant: normal;
}
.mysal7{
font-variant: small-caps;
}
Көлденең жолақ
Мәтінді күшейту, назар аудару үшін астын сызу жиі қолданылады. Ол сол сөздің немесе мәтіннің маңыздылығын(оны көбінесе ол құжаттағы сілтемелерді көрсету үшін қолданылады). Мәтінді сәндеудің тағы бір құралы – мәтіннің дұрыс емес бөлігін көрсететін сызып тастау.
Ондай текстті сәндеу үшін text-decoration басты 3 мән қасиетімен қолданылады.
Underline – Мәтіннің астын сызу
Line – through – Сызылған мәтін
Overline – Мәтіннің үстін сызу
Сілтемелерден астын сызуды жою үшін мәнді пайдаланыңыз none. Ол жиі әдепкі сілтемелерден астын сызуды жою үшін қолданылады.
Келтірілген мысал
<p class="mysal6">Бұл Underline арналған мысал</p>
<p class="mysal7">Бұл line-through арналған мысал</p>
<p class="mysal8">Бұл overline арналған мысал</p>
<p class="mysal9">Бұл none арналған мысал</p>
.mysal6{
font-variant: normal;
text-decoration: underline;
}
.mysal7{
font-variant: small-caps;
text-decoration: line-through;
}
.mysal8{
text-decoration: overline;
}
.mysal9{
text-decoration: none;}
Жоларалық интервал
(Межстрочный интервал)
Жоларалық интервал(Межстрочный интервал) – мәтінмен жұмыс жасаудағы ең маңызды пункт. Бұл параметр жолдар арасында қанша бос орын болатынын анықтайды. Бір-біріне жабысып немесе арасы алшақтап тұрған мәтін оқуға қиын.
Жоларалық қашықтықты орнату үшін line-height ережесі қолданылады. Мән ретінде сан мен өлшем бірлігі қолданылады. Қаріп өлшемін орнату сияқты әр түрлі өлшем бірліктерін қолдануға болады.
1
<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>
.zhol3{
font: Montserrat;
background-color: violet;
color: white;
line-height: 15px;
}
2
<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.
</h3>
.zhol3{
font: Montserrat;
background-color: violet;
color: white;
line-height: 40px;
}
Шрифт
Шрифты белгілеу(көрсету) үшін құжатта қолданылатын бір немесе бірнеше қаріптерді таңдауға мүмкіндік беретін font-family ережесі қолданылады.
<p class="sol"> Сол жақ бойынша мысал</p>
.sol {
text-align: left;
font-family: Montserrat;
}
Қаріптер(шрифт) сіздің жүйеңізге орнатылғандардың арасынан қосылады. Осы себепті барлығы қолданатын яғни жалпыға бірдей стандартты шрифтерді таңдаған жөн, себеіі басқа пайдаланушыда олар болмауы мүмкін. Пайдаланушы тарапта болмағандықтан барлығының дизайндық жүйесі өзгереді. Сонымен қатар, қаріптерді Google Fonts сияқты үшінші тарап қызметтерінен қосуға немесе оларды сайт орналасқан серверге тікелей жүктеуге болады.
https://fonts.google.com/?preview.size=37
Ең көп таралған қаріптер(шрифт):
Arial
Roboto
Times New Roman
Montserrat
Стильдерді қосу кезінде font-family ережесіне әотүрлі қаріп(шрифт) тобын қосу жақсы тәжірибе болып табылады. Қазіргі уақытта мұндай 5 қаріп(шрифт) бірлігі бар:
Serif – сериф шрифтері(шрифты с засечками). Мұндай шрифтің көрінісі (жарқын өкілі) Times New Roman
Sans-serif – Серифсіз шрифтер(Шрифты без засечек). Мұндай шрифтердің ең танымалдары Arial және Verdana
Cursive – Курсивті шрифт
Fantasy – Сән келтіру үшін қолданылады(Декоративные шрифты). Тек қызықты шрифт үшін қолданылады. Сол себепті ол аз мөлшерде, аз жерде қолданылады.
Monospace – Моноширинді қаріптер(Моноширинные шрифты). Оларға барлық таңбалардың ені бірдей шрифтер кіреді. Олар мәтіндік редакторда көбірек қолданыста.
Font-family ережесіне әмбебап(универсальды) қаріп тобын қосу арқылы біз пайдаланушының біз көрсеткен қаріп болмайды деп сақтандырамыз. Браузер көрсетілген әмбебап қаріптер тобынан жетіспейтін қаріпті ауыстыруды автоматты түрде таңдайды.
Енді пайдаланушының жүйеде Arial немесе Futura қаріптері болмаса , жүйенің sans-serif қаріпі таңдалады.
<p class="sol"> Сол жақ бойынша мысал</p>
.sol {
text-align: left;
font-family: Arial,Futura,sans-serif;
}
Жалпы қаріп(шрифт) ережесі
Қаріптің қасиеттерін орнатудың ыңғайлы әдісі-font ережесін қолдану, ол сізге мыналарды көрсетуге мүмкіндік береді:
font - style
font - variant
font - weight
Font-size / line-height (бұл екі ереже бөлек CSS файлда болмаса, слэш арқылы жазылады.)
Font-family
Біреуінде алты түрлі ереже! Бұл CSS кодын азайтуға және оның оқылуын жақсартуға көмектеседі. Олардың ішіндегі font-size және font-family міндетті болып табылады. Қалғандары көрсетпеседе болады.
Ереже бойынша бір мысал:
<p class="mysal8899" ;>
Біреуінде алты түрлі ереже! Бұл CSS кодын азайтуға және оның оқылуын жақсартуға көмектеседі. Олардың ішіндегі font-size және font-family міндетті болып табылады. Қалғандары көрсетпеседе болады.
</p>
.mysal8899{
font-style:normal;
font-variant: unset;
font-weight: bold;
font-size: 15px;
line-height: 20px ;
font-family: Montserrat;
}
Font сипатындағы мәндерді пайдалану тәртібіне назар аударыңыз. Алдымен стилистикалық ережелер бар, содан кейін шрифт өлшемі және оның жоларалық интервалы, содан кейін қаріп тобы. Бұл өте маңызды, өйткені басқа ретпен браузер нәтижені дұрыс өңдемеуі мүмкін.
Font-family сипатын көрсету кезінде әмбебап қаріп тобын көрсету ұсынылады. Бұл қаріп болмаған кезде пайдаланушы өз жүйесінде орнатылған қаріптерден дұрыс таңдалуы үшін қажет. Font-family бір қасиетін көрсеткендегідей, барлық қаріптерді үтірмен бөлу керек. Бұл қаріп тобына да қатысты.
.karip {
font: italic bold 25px Arial, sans-serif;
}
Типография және оның негіздері
Типография-бұл қаріптерді талғампаз ұйымдастыру. Типографияның негіздері-қаріптерді дұрыс таңдау, әріптердің арнайы тағайындалған жерде орналасуы немесе қаріптердің өлшемін өзгерту.
Стандартты қаріптерді пайдаланыңыз
Қаріптерді пайдалану кезінде ең жақсы таңдау стандартты қаріптер болып табылады. Мысалы, Arial , Verdana , Tahoma , Times New Roman және т.б. Бұл қаріптердің көпшілігі пайдаланушылардың компьютерлерінде бар, олар таныс және оқуға оңай.
Керемет сәндеуге болатын деген қаріптерден аулақ болыңыз (мысалы, Comic Sans ). Олардың барлық қызықты, әдемілігіне қарамастан, мұндай қаріптермен жазылған үлкен мәтіндерді оқу қиын.
Бір бетте екі қаріптен артық пайдаланбаңыз
Бұл пайдаланушыны бірден ұстап қалады, барлығын бірден шарлап көруге мүмкіндік береді. Бұл үшін контентіңізде максимум тек екі шрифтты ғана қолданыңыз. Стандартты жағдай бір қаріпті тақырыптар үшін, ал екіншісін мәтін үшін пайдалану болып табылады. Үш немесе төрт шрифт қолдансаңыз, пайдаланушыңызды бірден артқа шегіндіресіз.
Қаріптің(шрифт) жеткілікті өлшемін пайдаланыңыз
Негізгі мәтінді 14 пикселден аз қаріптен пайдаланбау керек. Егер қаріп өлшемі кішірек болса, ол мобильді құрылғылардан оқуда қиыншылық тудырады.
Сәйкес жол аралық (межстрочный интервал) интервалын пайдаланыңыз
Ең көп таралған жоларалық интервал-қаріп өлшемінің мәні 150%. Егер мәтін өлшемі 14 пиксель болса, онда жол аралығын кемінде 21 пиксель орнатқан жөн.
Мәтінді сол жаққа туралау
Бүкіл мәтінді ортасында немесе оң жағында туралап жазудың қажеті жоқ. Мұндай мәтіндерді оқығанда көздер тезірек шаршайды, өйткені мәтін басталатын жерден көз жоғалады. Жеке туралауды тек мәтіннің кішкене бөліктері үшін қолданыңыз (мысалы, тақырыптар немесе дәйексөздер).