Бұл жазба автоматты түрде орыс тілінен аударылған. Russian
Әр түрлі веб-парақтарды қарап отырып, сіз олардың кейбіреулері керемет көрінетініне назар аудардыңыз, ал басқалары "солай". Егер сіз веб-дамуға қызығушылық танытсаңыз, сіз кодты қолдану арқылы беттің дизайны қалай өзгеретінін білгіңіз келуі мүмкін.
Әзірлеушілер беттердің көрінісін жасайтын және өзгертетін негізгі құрал-CSS (Cascading Style Sheets, ағылшын тілінен. - каскадты стиль кестелері). Бұл мақалада біз CSS жұмысының негізгі принциптерін қарастырамыз және технологияның дамудағы маңыздылығы туралы сөйлесеміз. Мақаланың қажетті бөлігіне өту үшін жылдам сілтемелерді пайдалануға болады:
CSS (Cascading Style Sheets) - бұл сайтты сыртқы жағынан тартымды етуге, күрделі веб-парақ шаблондарын жасауға және оларға жеке тұлға беруге мүмкіндік беретін пішімдеу тілі. CSS HTML мазмұнын жақсы ұйымдастырылған, әдемі және оқылатын етеді.
Негізінде, CSS-бұл браузерге белгілі бір элементті бетте қалай көрсету керектігін айтатын ережелер. CSS параққа көрнекі сұлулық береді және оның эстетикасы үшін жауап береді. Негізгі параметрлерді өзгертуден басқа (мысалы, шегіністер, түстер мен қаріптер), CSS сонымен қатар беттерді оңтайландыру, жетілдірілген визуалды эффектілерді жасау (мысалы, апару эффектілері, әртүрлі анимациялар және т.б.) және жауап беретін веб-дизайн үшін қолданылады.
Веб-бет қалай жасалады?
CSS-пен тереңірек танысуға кіріспес бұрын, веб-беттен бастап негізгі анықтамаларға бірнеше минут бөлейік (егер мұның бәрі сіз үшін "оңай" болса, келесі бөлімге өтіңіз):
Веб - бет-бұл бүкіләлемдік желіге қосылған гипермәтіндік құжат.
Веб - сайт-бұл доменде орналастырылған веб-беттер жиынтығы.
Әр веб-парақ үш компоненттен тұрады:
- Мазмұны
- Презентация
- Мінез-құлық
Мазмұн-бұл веб-беттің құрылымы, яғни оны құрайтын элементтер. Беттің құрылымы мен оның мазмұнын анықтауға HTML тілі жауап береді (тақырыптар, мәтін, Сілтемелер, Суреттер және т.б.).
Презентация-бұл веб-беттегі элементтердің визуалды көрінісі. Мұнда CSS сахнаға шығады.
CSS-ті тікелей HTML құжатына жазу мүмкіндігі бар болса да, мұны жасамаған дұрыс, өйткені CSS - тің негізгі идеясы-мазмұн мен көріністің бөлінуін қамтамасыз ету. Бұл бір HTML құжатын көптеген жолдармен жасауға мүмкіндік береді және ол әр түрлі көрсету әдістеріне (мысалы, экранды оқу құралдары) қол жетімді болады.
Мінез-құлық пайдаланушының веб-бетпен қалай әрекеттесетінін сипаттайды. Әдетте, беттегі мінез-құлық JavaScript көмегімен өңделеді.
Енді біз веб-беттер қандай негізгі элементтерден жасалғанын анықтадық, мазмұнды сәндеу үшін CSS-ті қалай қолдануға болатынын білейік.
CSS-ті қолдана отырып, біз HTML элементімен қоршалған барлық мәтінге әртүрлі стильдерді орната аламыз. Мысалы: қаріп өлшемі-40 пиксель, қаріп-Arial, түс - жасыл. Неғұрлым маңызды параметрлерді орнатуға болады-мысалы, шекараларды қосу, өрістерді өзгерту, элементтің нақты орналасуын бақылау, тіпті әртүрлі эффектілер мен анимацияларды қосу.
Стиль кестесі шолғышқа қаралған құжатты қалай көрсету керектігін айтады. CSS-тің бір маңызды тұжырымдамасы оның атауында жатыр-стиль кестелері каскадты. Бұл әр веб-параққа кем дегенде бір стиль кестесі әсер ететінін білдіреді.
Біз CSS-ті қолданбаған кезде де, HTML элементтерінде белгілі бір" әдепкі " стильдер бар (яғни, оларды браузерлер әдепкі бойынша қосады). Мысалы, мәтін мен тақырып элементтері әдетте бүкіл веб-бетті алады. Бұл жағдайда сілтемелер мәтінді бұзбай жолда орналасады.
Оқуды жеңілдету үшін әр элементке бір әдепкі қаріп және белгілі бір аралық қосылады. Мұның бәрі CSS қосылымын қажет етеді.
Көп жағдайда көптеген кестелерге емес, жеке стильдер кестесіне сілтеме жасаған дұрыс. Бұл жағдайда оны басқару әлдеқайда оңай. Сізде бір кестеге қатысты шексіз құжаттар болуы мүмкін-бұл сансыз HTML құжаттарын өңдеуден гөрі стильдерді тиімдірек өңдеуге мүмкіндік береді.
Сондай-ақ, бұл болашақта құжаттарыңызды өңдеуді қажет етуі мүмкін кез келген адам үшін процесті айтарлықтай жеңілдетеді.
CSS мәнерлерін HTML элементіне қосуға, одан жоюға немесе оның қасиеттерін өзгертуге болады. Сондай-ақ, стиль қасиеттеріне анимация қосуға болады (мысалы, фон түсін қызғылттан сарыға өзгертіңіз). Немесе, мысалы, беттегі элементтің пайда болуы мен жоғалуын реттеуге болады.
Кез-келген элементке қолданылатын Стиль браузерге осы элементті қалай дұрыс жобалау және көрсету керектігі туралы ақпарат береді.
Браузермен стиль "сөйлейтін" тіл синтаксис деп аталады. Мысалы, қаріптің өлшемін және оның түсін барлық абзацтарға қою үшін жазу керек:
p { color: blue; font-size: 2em; } Мұнда стиль "Мәтін 2em биіктігі бар көк түсті болуы керек" (Em бірлігі, қаріп биіктігі стандарты) пәрменін береді.
Көптеген стильдерде көптеген пішімдеу қасиеттері бар, сондықтан оларды оқуды жеңілдету үшін кодты бірнеше жолға бөлуге болады. Мысалы, жоғарыдағы мысалдағы кодты келесідей жазуға болады:
p { color: blue; font-size: 2em; } Сонымен, кодты оқу әлдеқайда ыңғайлы болады, солай емес пе? Жоғарыдағы фрагментті талдап көрейік. Онда бар:
- p селекторы
- ашылатын бұйра жақша {
- түс қасиеті; көк мәні
- font-size қасиеті
- 2em мәні
- жабық бұйра жақша }
Селектор - браузерге стиль тағайындау керек элементті анықтайды. Бұл абзац, тақырып, сілтеме, сурет және т.б. болуы мүмкін.
Сондай-ақ, стильдерді сынып бойынша бірнеше элементтермен бірден тағайындау мүмкіндігі бар. Ол үшін сынып атрибуты қолданылады. Мысал:
.className { color: blue; font-size: 2em; } Сол сияқты, стильдерді олардың идентификаторларына сәйкес элементтерге тағайындауға болады. Бұл жағдайда біз id төлсипатын қолданамыз:
#idName { color: blue; font-size: 2em; } Бірақ идентификаторларды теріс пайдаланбауға тырысыңыз, өйткені id атрибутын қолдану элементке қол жеткізудің басқа нұсқаларымен салыстырғанда ең жоғары басымдыққа ие.
Жарнама блогы-селектордан кейінгі код. Ол селекторға қолданылатын өзгерістер шарттарын қамтиды. Ол { белгісімен басталып,} белгісімен аяқталады.
Декларация-бұл элементтің қасиеті мен мәнін сипаттайтын код. Әр жарнаманың соңында нүктелі үтір бар. Қасиет пен мәннің арасында қос нүкте бар.
Сондай-ақ, қос нүкте мен сипат мәні арасында бос орын қоюға болады. Бұл міндетті емес, бірақ кодты оқуды жеңілдетеді. Элементтер арасында кез-келген ені бос орын қалдыруға рұқсат етіледі (түс: көк; немесе түс: көк;)
Қасиет. CSS-те қасиеттер деп аталатын өзгерістердің көптеген нұсқалары бар. Олар белгілі бір стиль әсерін білдіреді. Көптеген қасиеттерде атау олардың мақсатын тікелей көрсетеді, мысалы:
font-size (қаріп өлшемі);margin-top (жоғарғы шетінен шегініс);background-color (фон түсі).
Мән-браузер мүлікті қалай өңдейтінін дәл сипаттайды. Әрбір қасиетте рұқсат етілген мәндер жиынтығы бар, мысалы: фонды жасыл, қызғылт сары немесе күлгін етіп жасаңыз. Әр түрлі CSS қасиеттері үшін оларға сәйкес мәндер түрлері қажет, мысалы түс (Red немесе #FF0000), ұзындығы (30px, 8in немесе 2em), орналасуы (top, center немесе bottom) және т. б.
CSS-веб-беттің дизайнын басқарудың негізгі құралдарының бірі. Оны пайдалану арқылы сіз өзіңіздің қалауыңыз бойынша сыртқы түріңізді өзгерте аласыз және веб-сайттардың ыңғайлылығын жасай аласыз, сонымен бірге қажетті кодтың аздығына байланысты көп уақытты үнемдей аласыз.
Қорытындылай келе, CSS-тің негізгі артықшылықтары:
- Икемділік-CSS HTML белгілеуін ұйымдастырылған және таза ұстай отырып, беттің кез келген жерінде HTML элементтерін орналастыру еркіндігін береді.
- Кросс-шолғыш және Кросс-девайс үйлесімділігі-сіз веб-беттің әр түрлі браузерлерде және әр түрлі құрылғыларда олардың айырмашылықтары мен ерекшеліктерін ескере отырып көрсетілуін реттей аласыз. Басқаша айтқанда, бұл әр нұсқаны қажетті параметрлерге бейімдей отырып, бірдей HTML құжатын пайдаланып веб-беттер мен сайттардың әртүрлі нұсқаларын жасау мүмкіндігі.
- Үлкен теңшеу опциялары-CSS бет мәнерлеріне шексіз дерлік өзгерістер енгізуге мүмкіндік береді: түстер, сілтемелер, шекаралар, бағыттау және өту әсерлері, қаріптер және т. б.
- Қарапайымдылық пен тиімділік-көптеген веб-беттер үшін стильдерді бір уақытта оңай жасау және теңшеу мүмкіндігі.
- Уақытты үнемдеу-стиль кестелерін бір рет жазуға болады, содан кейін оларды шексіз беттер үшін қайта пайдалануға болады.
- Беттерді жүктеудің жоғары жылдамдығы-CSS арқасында HTML кодының ұзындығы айтарлықтай қысқарады, бұл өз кезегінде веб-беттерді жылдам жүктеуге әкеледі.
#Tech Orda 2024, #Astana Hub, #IT-incubator
Просматривая различные веб-страницы, вы наверняка обращали внимание, что некоторые из них выглядят потрясающе, в то время как другие - “так себе”. И если вам интересна веб-разработка, возможно вы также задавались вопросом, как с использованием кода изменяется дизайн страниц.
Основным инструментом, с помощью которого разработчики создают и меняют облик страниц, является CSS (Cascading Style Sheets, с англ. - каскадные таблицы стилей). В данной статье рассмотрим базовые принципы работы CSS и поговорим о важности технологии в разработке. Можете воспользоваться быстрыми ссылками, чтобы перейти к нужной вам части статьи:
CSS (Cascading Style Sheets) - это язык форматирования, который позволяет сделать сайт внешне привлекательным, создать сложные шаблоны веб-страниц и придать им индивидуальность. CSS делает HTML-контент хорошо организованным, более красивым и удобочитаемым.
По сути, CSS - это правила, сообщающие браузеру, как следует отображать определённый элемент на странице. CSS придаёт визуальную красоту странице и отвечает за её за эстетику. Помимо изменения основных параметров (например, отступы, цвета и шрифты), CSS также применяется для оптимизации страниц, создания продвинутых визуальных эффектов (например, эффекты при наведении курсора, различные анимации и т.д.) и адаптивного веб-дизайна.
Как создается веб-страница?
Перед тем как мы перейдем к более углублённому знакомству с CSS, давайте уделим несколько минут базовым определениям, начиная с веб-страницы (если для вас всё это “легче лёгкого”, то сразу переходите к следующему разделу):
Веб-страница - это гипертекстовый документ, подключенный к Всемирной паутине.
Веб-сайт - это набор веб-страниц, размещённых в домене.
Каждая веб-страница состоит из трех компонентов:
- Содержание
- Презентация
- Поведение
Содержание - это структура веб-страницы, т.е. элементы из которых она состоит. За структуру страницы и определение её содержимого отвечает язык HTML (заголовки, текст, ссылки, изображения и т.д.).
Презентация - это визуальное представление элементов на веб-странице. Здесь на сцену и выходит CSS.
Несмотря на то что есть возможность написать CSS непосредственно в HTML-документе, лучше этого не делать, т.к. основная идея CSS - обеспечить разделение содержания и представления. Это позволяет оформить один и тот же HTML-документ многими различными способами, и при этом он будет оставаться доступным для разных методов рендеринга (например, программ чтения с экрана).
Поведение описывает то, как пользователь взаимодействует с веб-страницей. Как правило, поведение на странице обрабатывается с помощью JavaScript.
Теперь, когда мы разобрались из каких ключевых элементов строятся веб-страницы, давайте выясним, как применять CSS для стилизации контента.
Используя CSS мы можем задать для всего текста, заключенного в какой-то HTML-элемент, различные стили. К примеру: размер шрифта - 40 пикселей, шрифт - Arial, цвет - зелёный. Можно задавать и более серьёзные параметры - например, добавлять границы, изменять поля, контролировать точное позиционирование элемента и даже добавить различные эффекты и анимацию.
Таблица стилей сообщает браузеру, как отображать просматриваемый документ. Одна важная концепция CSS заложена в самом её названии - таблицы стилей являются каскадными. Это значит, что как минимум одна таблица стилей влияет на каждую веб-страницу.
Даже когда мы не применяем CSS, HTML-элементы обладают определенными "дефолтными" стилями (т.е. которые по умолчанию добавляются браузерами). Например, элементы текста и заголовков обычно занимают всю веб-страницу. При этом ссылки располагаются в строке, не разбивая текст.
Существует один шрифт по умолчанию и некоторый интервал, добавленный к каждому элементу для удобства чтения. Всё, что больше этого, уже требует подключения CSS.
В большинстве случаев лучше всего ссылаться не на множество таблиц, а на отдельную таблицу стилей. В этом случае управлять ей значительно проще. У вас может быть неограниченное количество документов, связанных с одной таблицей - это позволяет редактировать стили более эффективно в отличие от редактирования бесчисленных HTML-документов.
Также это значительно упрощает процесс для тех, кому в будущем может потребоваться редактирование ваших документов.
Стили CSS можно добавлять в HTML-элемент, удалять из него или изменять его свойства. Возможно также в свойства стиля добавлять анимацию (допустим, изменять цвет фона с розового на желтый). Или, например, можно настроить появление и исчезание элемента на странице.
Стиль, применяемый к какому-либо элементу, передаёт браузеру информацию о том, как этот элемент необходимо правильно оформить и отобразить.
Язык, на котором стиль "говорит" с браузером, называется синтаксисом. Например, чтобы задать размер шрифта и его цвет для всех абзацев, необходимо написать:
p { color: blue; font-size: 2em; } Здесь стиль даёт команду: “Текст должен быть голубого цвета с высотой 2em” (em-единица измерения, стандарт высоты шрифта).
Большинство стилей имеет множество свойств форматирования, поэтому чтобы облегчить их чтение, можно разбить код на несколько строк. Например, код из примера выше мы можем написать следующим образом:
p { color: blue; font-size: 2em; } Так читать код становится гораздо удобнее, не правда ли? Давайте разберём вышеуказанный фрагмент. В нём присутствуют:
- селектор p
- открывающая фигурная скобка {
- свойство color; значение blue
- cвойство font-size
- значение 2em
- закрывающая фигурная скобка }
Селектор - определяет элемент, к которому браузер должен присвоить стиль. Это может быть абзац, заголовок, ссылка, изображение и т.д. Соответственно, селектор р изменяет все элементы р на странице, используя указанный стиль.
Также есть возможность присваивать стили сразу нескольким элементами по классу. Для этого используется атрибут class. Пример:
.className { color: blue; font-size: 2em; } Аналогичным образом можно присваивать стили элементам согласно их идентификаторам. В этом случае используем атрибут id:
#idName { color: blue; font-size: 2em; } Но старайтесь не злоупотреблять использованием идентификаторов, т.к. применение атрибута id имеет наивысший приоритет по сравнению с другими вариантами обращения к элементу.
Блок объявления - код после селектора. Он включает условия изменений, применяемых к селектору. Начинается знаком { и заканчивается знаком }.
Объявление - это код, описывающий свойство и значение элемента. В конце каждого объявления стоит точка с запятой. Между свойством и значением - двоеточие.
Вы также можете ставить пробел между двоеточием и значением свойства. Это необязательно, но позволяет легче читать код. Допустимо оставлять между элементами пробел любой ширины (color: blue; или color: blue;)
Свойство. В CSS есть множество вариантов изменений, называемых свойствами. Они обозначают определённый эффект стиля. У большинства свойств название напрямую отображает их назначение, например:
font-size (размер шрифта);margin-top (отступ от верхнего края);background-color (цвет фона).
Значение - описывает, как именно свойство будет обработано браузером. Каждое свойство имеет набор допустимых значений, например: сделать фон зелёным, оранжевым или фиолетовым. Для разных свойств CSS необходимы соответствующие им типы значений, например цвет (red или #FF0000), длина (30px, 8in или 2em), расположение (top, center или bottom) и т.п.
CSS - один из основных инструментов для управления дизайном веб-страниц. С его использованием можно как угодно изменять внешний вид и создавать удобство использования веб-сайтов, экономя при этом огромное количество времени благодаря меньшему объёму требуемого кода.
Подводя итог, вот ключевые преимущества CSS:
- Гибкость - CSS даёт свободу размещения элементов HTML в любом месте страницы, сохраняя при этом HTML-разметку организованной и чистой.
- Кроссбраузерная и кроссдевайсная совместимость - вы можете настраивать отображение веб-страницы различными браузерами и на разных устройствах с учётом их отличий и особенностей. Иначе говоря, это возможность создавать различные версии веб-страниц и сайтов с использованием одного и того же HTML-документа, адаптируя каждую версию под необходимые параметры.
- Огромные возможности настройки - CSS позволяет вносить практически неограниченные изменения в стили страниц: цвета, ссылки, границы, эффекты наведения и перехода, шрифты и т.д.
- Простота и эффективность - возможность легко создавать и настраивать стили одновременно для множества веб-страниц.
- Экономия времени - вы можете один раз написать таблицы стилей и затем многократно использовать их для неограниченного количества страниц.
- Высокая скорость загрузки страниц - благодаря CSS существенно сокращается длина кода HTML, что, в свою очередь, приводит к более быстрой загрузке веб-страниц.
#Tech Orda 2024, #Astana Hub, #IT-incubator
Автордың басқа жазбалары
Share
