Сіздің веб-сайтыңыздың көрінісін жақсартуға үйреніңіз
Пішіндерді CSS арқылы стильдеу әдістерін үйрену - сіздің веб-сайтыңыздың көрінісін жақсартудың тамаша тәсілі. HTML форматы, ең алдымен, көптеген веб-беттердегі ең жарқын нәрселердің арасында. Олар жиі скучно және утилитарлы және стильде көп ұсынбайды.
CSS-мен өзгерте алады. CSS-ді неғұрлым жетілдірілген пішін тегтерімен біріктіру кейбір әдемі көрінетін пішіндерді жеткізе алады.
Түстерді өзгерту
Мәтін сияқты, пішін элементтерінің алдыңғы және өңдік түстерін өзгерте аласыз.
Әрбір пішін элементінің артқы түсінің өңін өзгертудің қарапайым жолы - кіріс тегіндегі өң-түс сипатын пайдалану. Мысалы, бұл код барлық элементтерде көк түс түсін (# 9cf) қолданылады.
кіру {
background-color: # 9cf;
түсі: # 000;
}
Тек кейбір пішін элементтерінің өңдік түсін өзгерту үшін тек мәтіндік кеңістікті қосыңыз және мәнерді таңдаңыз. Мысалға:
енгізу, textarea, select {
background-color: # 9cf;
түсі: # 000;
}
Түс түсіңізді қара етіп жасасаңыз, мәтіннің түсін өзгертіңіз. Контрастты түстер пішін элементтерін түсінікті етіп жасауға көмектеседі. Мысалы, мәтіннің түсі ақ болса, қара-қызыл түс аясында мәтін оңайырақ оқылады. Мысалы, бұл код ақ мәтінді қызыл фонда орналастырады.
енгізу, textarea, select {
background-color: # c00;
Түсі: #fff;
}
Сіз тіпті пішіннің тегіне фондық түсті қоюға болады. Пішін тегі блоктық элемент екенін есіңізде сақтаңыз, сондықтан түс тек элементтердің орналасу орындарына ғана емес, барлық тіктөртбұрышта толтырылады.
Аймақты ерекшелеу үшін блок элементіне сары фон қосуға болады:
нысаны {
background-color: #ffc;
}
Шектерді қосыңыз
Түстер сияқты, әртүрлі пішін элементтерінің шекараларын өзгерте аласыз. Бүкіл пішіннің айналасында бірыңғай шекара қосуға болады. Толтырғышты қосуды ұмытпаңыз немесе пішін элементтері шекараның жанына кептеледі.
Төменде 5 пиксель толтырғыштағы 1-пиксель қара шекараның коды бар:
нысаны {
шекара: 1px қатты # 000;
толтыру: 5px;
}
Сіз шекараларды тек нысанның өзінен көп қоя аласыз. Енгізу элементтерінің шекарасын оларды айырықша етіп өзгертіңіз:
кіру {
border: 2px dashed # c00;
}
Жиектерді кіріс ұяшықтарына қойған кезде абай болыңыз, себебі олар кіріс жәшіктері сияқты аз көрінеді, ал кейбір адамдар пішінді толтыра алатынын түсінбеуі мүмкін.
Стиль сипаттарын біріктіріңіз
Пішін элементтерін ойластырылған және кейбір CSS-лармен бірге орналастыру арқылы сіз сайтымыздың дизайны мен орналасуын толықтыратын жақсы көрінетін пішінді орната аласыз.