Идентификатор селекторы

Жұмыс түрі: Реферат
Тегін: Антиплагиат
Көлемі: 18 бет
Таңдаулыға:

ЕСЕП БЕРУ
Тақырыбы: CSS дегеніміз не және оның артықшылықтары

Алматы 2020

Мазмұны
Кіріспе ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..3
CSS дегеніміз не және оның артықшылықтары ... ... ... ... ... . ..4
1.1. CSS-ті пайдалану ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... 4
1.2. CSS құру ережелері ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... 6
1.3 Элемент кластары және идентификаторлар ... ... ... ... ... ... ... ... ... .7
1.4 Каскадтау. CSS стилінің басымдықтары ... ... ... ... ... ... ... ... ... ... ..9
1.5 CSS-беттеу (вёрстка) ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... 12
1.6 CSS-тің құрылу және даму тарихы ... ... ... ... ... ... ... . ... ... ... ... .14
Қорытынды ... ... ... ... ... ... .. ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..19
Пайдаланылған әдебиеттер ... ... ... ... ... ... . ... ... ... ... ... ... ... ... ... ... ... ...20

Кіріспе
CSS ( siːɛsɛs ағыл. Cascading Style Sheets) - белгілеу тілі.
CSS (Cascading Style Sheets) -- стильдерді (мысалы, қаріптер мен түс) құрылымдық құжаттарға (мысалы, HTML құжаттары мен XML қосымшалары) бекітуге мүмкіндік беретін стиль кестелерінің тілі. Әдетте CSS стильдері HTML және XHTML тілдерінде жазылған веб-беттер мен пайдаланушы интерфейстерінің элементтерін жасау және өзгерту үшін қолданылады, бірақ оларды XML, SVG және XUL сияқты кез-келген XML құжатына да қолдануға болады. Құжаттарды ұсыну стилін құжаттардың мазмұнынан бөлу арқылы CSS веб-беттерді құруды және сайттарды ұстауды жеңілдетеді.
CSS веб-парақ жасаушылар түстерді, қаріптерді, стильдерді, блокты орналастыруды және осы веб-беттердің пайда болуының басқа аспектілерін көрсету үшін қолданылады. CSS әзірлеудің басты мақсаты - веб-парақтың логикалық құрылымының сипаттамасын (HTML немесе басқа белгілеу тілдерінің көмегімен жасалады) сол веб-парақтың сыртқы түрінің сипаттамасынан бөлу болды (ол қазір CSS формальды тілі арқылы шығарылады). Бұл бөлу құжаттың қол жетімділігін арттыра алады, оның ұсынылуына икемділік пен бақылауды қамтамасыз етеді, құрылымдық мазмұндағы күрделілік пен қайталануды азайтады.

1. 1. CSS-ті пайдалану
CSS веб-парақ жасаушылар түстерді, қаріптерді, стильдерді, блокты орналастыруды және осы веб-беттердің пайда болуының басқа аспектілерін көрсету үшін қолданылады. CSS әзірлеудің басты мақсаты - веб-парақтың логикалық құрылымының сипаттамасын (HTML немесе басқа белгілеу тілдерінің көмегімен жасалады) сол веб-парақтың сыртқы түрінің сипаттамасынан бөлу болды (ол қазір CSS формальды тілі арқылы шығарылады). Бұл бөлу құжаттың қол жетімділігін арттыра алады, оның ұсынылуына икемділік пен бақылауды қамтамасыз етеді, құрылымдық мазмұндағы күрделілік пен қайталануды азайтады.
Сонымен қатар, CSS бір құжатты дисплей, басып шығару, дауыспен оқу (арнайы дауыстық браузермен немесе экрандық оқырманмен) немесе брайль қолданатын құрылғылардан шығару сияқты әр түрлі стильде немесе шығару әдістерінде беруге мүмкіндік береді.
CSS-ті құжатқа қосу тәсілдері
CSS ережелері олар сипаттайтын веб-құжаттың өзінде де, .css кеңейтімі бар сыртқы файлдарда да орналасуы мүмкін. CSS форматы - бұл CSS ережелерінің тізімін және оларға түсініктемелерді қамтитын мәтіндік файл.
CSS стильдері төрт жолмен сипатталатын веб-құжатқа енгізілуі немесе ендірілуі мүмкін:
стильдің сипаттамасы бөлек файлда болған кезде, оны head элементіне кіретін link элементі арқылы құжатпен байланыстыруға болады:
----------------------------------- ----------------------------------- ----------
!DOCTYPE html
----------------------------------- ----------------------------------- ----------
html
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
link rel="stylesheet" type="textcss" href="style.css"
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
html
стиль файлы өзінің негізгі құжатынан бөлек орналастырылған кезде, оны style элементіндегі @import операторымен байланыстыруға болады:
----------------------------------- ----------------------------------- ----------
!DOCTYPE html
----------------------------------- ----------------------------------- ----------
html
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
style media="all"
----------------------------------- ----------------------------------- ----------
@import url(style.css);
----------------------------------- ----------------------------------- ----------
style
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
html
стильдер құжат ішінде сипатталған кезде, оларды head элементіне кіретін style элементіне қосуға болады:
----------------------------------- ----------------------------------- ----------
!DOCTYPE html
----------------------------------- ----------------------------------- ----------
html
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
style
----------------------------------- ----------------------------------- ----------
body {
----------------------------------- ----------------------------------- ----------
color: red;
----------------------------------- ----------------------------------- ----------
}
----------------------------------- ----------------------------------- ----------
style
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
html
стильдер құжаттың негізгі бөлігінде сипатталған кезде, олар жеке элементтің атрибуттарында орналасуы мүмкін
----------------------------------- ----------------------------------- ----------
!DOCTYPE
----------------------------------- ----------------------------------- ----------
html
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif"
----------------------------------- ----------------------------------- ----------
... .
----------------------------------- ----------------------------------- ----------
p
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
html
Алғашқы екі жағдайда құжатқа сыртқы стильдер, ал екінші жағдайда ішкі стильдер қолданылады.
CSS-ті XML құжатына қосу үшін стиль кестесіне арнайы сілтеме болуы керек:
----------------------------------- ----------------------------------- ----------
?xml-stylesheet type="textcss" href="style.css"?

1.2. CSS құру ережелері
CSS стильдерін құжатқа қосудың алғашқы үш жағдайында (жоғарыдан қараңыз), файлдан алынған әрбір CSS ережесі екі негізгі бөлімнен тұрады - селектор және декларация блогы. { Белгісінің алдында ереженің сол жағында орналасқан селектор құжаттың қандай бөліктеріне қолданылатындығын анықтайды (мүмкін арнайы тағайындалған). Жарнама блогы ереженің оң жағында орналасқан. Ол бұйра жақшалармен қоршалған және өз кезегінде ; белгілерімен бөлінген бір немесе бірнеше декларациядан тұрады. Әрбір декларация CSS қасиеті мен мәнінің тіркесімі болып табылады, оларды : бөледі. Таңдаушыларды бір жолға үтірлермен бөлуге болады. Мұндай жағдайда мүлік олардың әрқайсысына қолданылады.
----------------------------------- ----------------------------------- ----------
селектор, селектор {
----------------------------------- ----------------------------------- ----------
свойство: значение;
----------------------------------- ----------------------------------- ----------
свойство: значение;
----------------------------------- ----------------------------------- ----------
свойство: значение;
----------------------------------- ----------------------------------- ----------
}
CSS-ті құжатқа қосудың төртінші жағдайында (тізімді қараңыз), ол қолданылатын элементтің стиль атрибутының мәні болып табылатын CSS ережесі - декларациялар тізімі (CSS қасиеті: мәні), ; белгісімен бөлінген.
Селекторлардың түрлері
Әмбебап селектор
----------------------------------- ----------------------------------- ----------
* {
----------------------------------- ----------------------------------- ----------
margin: 0;
----------------------------------- ----------------------------------- ----------
padding: 0;
----------------------------------- ----------------------------------- ----------
}
Тег селекторы
----------------------------------- ----------------------------------- ----------
p {
----------------------------------- ----------------------------------- ----------
font-family: arial, helvetica, sans-serif;
----------------------------------- ----------------------------------- ----------
}
Класс селекторы
----------------------------------- ----------------------------------- ----------
.note {
----------------------------------- ----------------------------------- ----------
color: red;
----------------------------------- ----------------------------------- ----------
background-color: yellow;
----------------------------------- ----------------------------------- ----------
font-weight: bold;
----------------------------------- ----------------------------------- ----------
}
Идентификатор селекторы
----------------------------------- ----------------------------------- ----------
#paragraph1 {
----------------------------------- ----------------------------------- ----------
margin: 0;
----------------------------------- ----------------------------------- ----------
}
Атрибуттар селекторы
----------------------------------- ----------------------------------- ----------
a[href="http:www.somesite.com"] {
----------------------------------- ----------------------------------- ----------
font-weight: bold;
----------------------------------- ----------------------------------- ----------
}
Контекстті селектор
----------------------------------- ----------------------------------- ----------
div#paragraph1 p.note {
----------------------------------- ----------------------------------- ----------
color: green;
----------------------------------- ----------------------------------- ----------
}
Селектор еншілес элементтері
----------------------------------- ----------------------------------- ----------
p.note b {
----------------------------------- ----------------------------------- ----------
color: blue;
----------------------------------- ----------------------------------- ----------
}
Селектор элементтерін бір деңгейі
----------------------------------- ----------------------------------- ----------
h1 + p {
----------------------------------- ----------------------------------- ----------
font-size:24px;
----------------------------------- ----------------------------------- ----------
}
1.3. Элемент кластары және идентификаторлар
Сынып немесе идентификатор кез-келген HTML элементіне сол элементтің классы немесе id атрибуттары арқылы берілуі мүмкін:
----------------------------------- ----------------------------------- ----------
!DOCTYPE html
----------------------------------- ----------------------------------- ----------
html
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
meta http-equiv="Content-Type" content="texthtml; charset=utf-8"
----------------------------------- ----------------------------------- ----------
title
----------------------------------- ----------------------------------- ----------
Селекторы сынып және идентификаторларды
----------------------------------- ----------------------------------- ----------
title
----------------------------------- ----------------------------------- ----------
style
----------------------------------- ----------------------------------- ----------
p.big {
----------------------------------- ----------------------------------- ----------
font-family: arial, helvetica, sans-serif;
----------------------------------- ----------------------------------- ----------
color: red;
----------------------------------- ----------------------------------- ----------
}
----------------------------------- ----------------------------------- ----------

----------------------------------- ----------------------------------- ----------
div#first {
----------------------------------- ----------------------------------- ----------
background-color: silver;
----------------------------------- ----------------------------------- ----------
}
----------------------------------- ----------------------------------- ----------
style
----------------------------------- ----------------------------------- ----------
head
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
div id="first"
----------------------------------- ----------------------------------- ----------
!-- Бұл div c фоны сұр түспен белгіленген, айшықты бойынша id --
----------------------------------- ----------------------------------- ----------
div
----------------------------------- ----------------------------------- ----------
p class="big"
----------------------------------- ----------------------------------- ----------
!-- Бұл мәтін қызыл түсті --
----------------------------------- ----------------------------------- ----------
p
----------------------------------- ----------------------------------- ----------
body
----------------------------------- ----------------------------------- ----------
html
Элемент кластары мен элемент идентификаторларының басты айырмашылығы - бұл идентификатор бір элементке арналған, ал класс әдетте бірнеше адамға бірден тағайындалады. Алайда қазіргі браузерлер бірдей идентификаторы бар бірнеше элементтерді дұрыс көрсетуге бейім. Сонымен қатар айырмашылық бірнеше кластардың болуы мүмкін (элемент класы бос орындармен бөлінген бірнеше сөзден тұрғанда). Бұл идентификаторлар үшін мүмкін емес.
Идентификатор мен класс арасындағы келесі айырмашылықты атап өту маңызды: идентификаторлар құжаттағы ерекше элементті табу үшін JavaScript-те кеңінен қолданылады.
Сынып атаулары мен идентификаторлар, тег атаулары мен олардың атрибуттарынан айырмашылығы регистрге тәуелді.
Класстар мен идентификаторлардың қасиеттері тиісті селекторлар көмегімен орнатылады. Оның үстіне оны тұтастай алғанда сыныптың қасиеті ретінде қоюға болады (бұл жағдайда селектор ., Мысалы, .big -тен басталады) немесе идентификатордың өзінің қасиеті (бұл жағдайда селектор # -дан басталады, мысалы, # бірінші ), және осы сыныптың кейбір элементтерінің немесе осы идентификатордың қасиеті.
CSS-те парақ авторы анықтаған кластардан басқа, құжаттағы белгілі бір күйдегі гипер сілтемелердің пайда болуын, енгізу фокусы орналасқан элементтің түрін және басқа элементтердің алғашқы перзенттері болып табылатын элементтер типін сипаттайтын псевдо-класстар деп аталатын шектеулі жиынтығы бар. CSS-те псевдоэлементтер деп аталатын төрт нәрсе бар: бірінші әріп, бірінші жол, элементтің алдында және кейін арнайы стильдер қолдану.

1.4. Каскадтау. CSS стилінің басымдықтары.
CSS-ті HTML құжаттарына қолдану мұрагерлік және каскадтық принциптерге негізделген. Тұқымқуалаушылық принципі - ата-баба элементтері үшін жарияланған CSS қасиеттері әрдайым дербес ұрпақ элементтері арқылы мұрагерлік болып табылады.
Каскадтау принципі бір уақытта бірнеше CSS ережелері HTML элементімен байланысты болғанда, яғни осы ережелердің мәндеріне қайшы келген кезде қолданылады. Мұндай жанжалдарды шешу үшін бірінші кезектегі ережелер енгізіледі.
Браузер стилі ең төменгі басымдыққа ие;
Келесі маңызды - браузер қолданушысы өз параметрлерінде орнатқан стиль;
Парақ авторы тікелей белгілеген стильде ең жоғары басымдыққа ие. Сонымен, осы авторлық стильде басымдықтар келесідей белгіленді:
Құжатта ата-бабаларынан мұраға қалған стильдердің басымдығы ең төмен;
Құжатқа бекітілген сыртқы стильдер кестесінде көрсетілген стильдер басым болады;
Осы құжаттың стиль контейнерлерінде қамтылған барлық он түрдегі таңдаушылар тікелей көрсететін стильдер (селекторлар түрлері бөлімін қараңыз), одан да жоғары басымдылыққа ие. Элементке байланысты жағдайлар, оның түрі орнатылған, бірнеше осындай таңдағыштар сирек емес. Олардың арасындағы осындай қақтығыстар әрбір осындай селектордың ерекшелігін есептеу арқылы және осы селекторларды берілген элементтерге олардың ерекшеліктерінің кему ретімен қолдану арқылы шешіледі. Ерекшелікті есептеу төменде сипатталады.
Селекторлардың ерекшелігі 4 топқа бөлінеді - a, b, c, d:
егер стиль кірістірілген болса (style = ... деп анықталған болса, онда a = 1, әйтпесе a = 0);
b мәні идентификаторлар санына тең (әйтпесе - id = , олар # -дан басталады) селекторда;
с мәні сыныптардың санына тең (class = , олар. басталады.), жалған кластар (олар келесіден басталады, мысалы: а), атрибуттық селекторлар (кіріс [type = text);
d мәні элемент типін таңдаушылар санына тең (h1 {түс: көк;}) және жалған код-элементтер (p :: бірінші жол {түс: көк;}). Осыдан кейін алынған мән санға дейін азаяды (әдетте ондық санау жүйесінде). Ерекшелік мәні жоғары селектордың да басымдығы жоғары.
Ерекшеліктерді есептеу кестесі (1-кесте)
Селектор
a, b, c, d
Число
span
0, 0, 0, 1
1
div.class
0, 0, 1, 1
11
#id.class
0, 1, 1, 0
110
div span
0, 0, 0, 2
2
.class
0, 0, 1, 0
10
#id span
0, 1, 0, 0
101
1-кесте
Бірақ, ең жоғары басымдық парақтың авторы немесе қолданушы !important ережесімен бірге жариялаған стильдерге беріледі. Егер мұндай қасиеттер бірнеше болса, онда бірінші кезекте автор немесе пайдаланушы көрсеткен стильдерге басымдық беріледі, ал парақтың авторы қоятын қалған қасиеттер үшін олардың ерекшелігін жоғарыда сипатталған принциптерге сәйкес анықтап, осы қасиеттерді осы ерекшеліктердің кему ретімен қолдану қажет болады.
Стильдер кестесінің мысалы
Стильдер кестесінің мысалы (бұл формада оны бөлек .css файлына орналастыруға болады, немесе style тегтерімен қоршалып, өзі әрекет ететін веб-парақтың тақырыбына орналастыруға ... жалғасы

Сіз бұл жұмысты біздің қосымшамыз арқылы толығымен тегін көре аласыз.