EdCodeСелектор түрлері [ҰБТ информатика]
HTML және веб-жобалау
15 сабақ
- 1 Web-жобалау [Информатика ҰБТ] ✓
- 2 HTML-ге кіріспе [Информатика ҰБТ] ✓
- 3 HTML тізімдер OL, UL, DL [ҰБТ информатика] ✓
- 4 HTML Мәтінді форматтау [ҰБТ информатика] ✓
- 5 HTML кестелер құру [ҰБТ информатика] ✓
- 6 HTML сурет қою [ҰБТ информатика] ✓
- 7 HTML гиперсілтеме қою [ҰБТ информатика] ✓
- 8 HTML мультимедиа [ҰБТ информатика] ✓
- 9 CSS-ті қолдану артықшылықтары [ҰБТ информатика] ✓
- 10 Стиль кестелерін қолдану [ҰБТ информатика] ✓
- ▶ Селектор түрлері [ҰБТ информатика] ✓
- 12 CSS қасиеттері: фон, шегара [ҰБТ информатика] ✓
- 13 CSS қасиеттері: қаріп, абзац [ҰБТ информатика] ✓
- 14 Скрипт қолдану (JavaScript) [ҰБТ информатика] ✓
- 15 Скрипт қолдану (JavaScript) [ҰБТ информатика] ✓
#html #css #csshtml
Селектор (ағылшынша selector) сұрыптау, іріктеу деген мағынаны білдіреді. CSS әлемі – HTML нысан мен элементінің қасиеттерінің және
көрінісінің (стильдерінің) сиқырлы әлемі.
Элемент бойынша селектор:
Стильдер кестелерінің тілінде селектор ретінде HTML тіліндегі атауларды пайдалануға болады. Мысалы, HTML құжатта азатжолдағы (абзац) барлық мәтін 14 өлшемдегі Аrial қарпімен жазылуы керек болса, ол төмендегідей жазылады:
Р{
font: normal 14pt Arial;
}
бұл жерде селектор ретінде HTML тілінде жеке жолды көрсететін Р элементі таңдалды.
Сынып (Класс) бойынша селектор:
Егер азатжол екеу болса және екеуін де бірдей түске бояу керек болса,
«Не істеу керек?» деген сұрақ туындайды. Р style="color:blue"/. Тек осы азатжолдың түсі көк болады, /Р коды тек осы азатжолды ғана көк түске бояйды. Егер осындай бірнеше азатжол болса, онда НТМL-де оның бәрін бірдей түске бояу үшін, сlаss (сынып) атрибутын пайдаланамыз. Р сlаss="bluе" Осы азатжолдың және басқа да азатжолдардың бәрінің түсі көк түске ауысады /Р.
HTML-де элементтің идентификаторы id параметрі арқылы беріліп, оның мәні ретінде бірегей (қайталанбас) атау беріледі. Мысалы: p id="pink" Идентификаторлық мәтіннің азатжолы (id)./p Атауға HTML және CSS-тегі тег, параметр және элемент аттарынан басқа кез келген сөзді қоюға болады. Мысалы, идентификаторға body атауын қоюға болмайды.
Контекстік селектор
Web-бетті жасаған кезде бір тегтің ішіне басқасын орналастыруға тура келеді. Тегтердің мәнерлері (стиль) браузерде дұрыс көрінуін қамтамасыз ету үшін контексте жұмыс істейтін селекторлар көмектеседі.
Селектор (ағылшынша selector) сұрыптау, іріктеу деген мағынаны білдіреді. CSS әлемі – HTML нысан мен элементінің қасиеттерінің және
көрінісінің (стильдерінің) сиқырлы әлемі.
Элемент бойынша селектор:
Стильдер кестелерінің тілінде селектор ретінде HTML тіліндегі атауларды пайдалануға болады. Мысалы, HTML құжатта азатжолдағы (абзац) барлық мәтін 14 өлшемдегі Аrial қарпімен жазылуы керек болса, ол төмендегідей жазылады:
Р{
font: normal 14pt Arial;
}
бұл жерде селектор ретінде HTML тілінде жеке жолды көрсететін Р элементі таңдалды.
Сынып (Класс) бойынша селектор:
Егер азатжол екеу болса және екеуін де бірдей түске бояу керек болса,
«Не істеу керек?» деген сұрақ туындайды. Р style="color:blue"/. Тек осы азатжолдың түсі көк болады, /Р коды тек осы азатжолды ғана көк түске бояйды. Егер осындай бірнеше азатжол болса, онда НТМL-де оның бәрін бірдей түске бояу үшін, сlаss (сынып) атрибутын пайдаланамыз. Р сlаss="bluе" Осы азатжолдың және басқа да азатжолдардың бәрінің түсі көк түске ауысады /Р.
HTML-де элементтің идентификаторы id параметрі арқылы беріліп, оның мәні ретінде бірегей (қайталанбас) атау беріледі. Мысалы: p id="pink" Идентификаторлық мәтіннің азатжолы (id)./p Атауға HTML және CSS-тегі тег, параметр және элемент аттарынан басқа кез келген сөзді қоюға болады. Мысалы, идентификаторға body атауын қоюға болмайды.
Контекстік селектор
Web-бетті жасаған кезде бір тегтің ішіне басқасын орналастыруға тура келеді. Тегтердің мәнерлері (стиль) браузерде дұрыс көрінуін қамтамасыз ету үшін контексте жұмыс істейтін селекторлар көмектеседі.