CSS2 және CSS3 арасындағы айырмашылық

CSS3 ішіндегі негізгі өзгерістерді түсіну

CSS2 және CSS3 арасындағы ең үлкен айырмашылық, CSS3 модулдері деп аталатын түрлі бөлімдерге бөлінген. Бұл модульдердің әрқайсысы ұсыныс үдерісінің әртүрлі сатыларында W3C арқылы өз жолын ашады. Бұл процесс браузерде әртүрлі өндірушілер тарапынан CSS3-нің әр түрлі бөліктерін қабылдауды және іске асыруды жеңілдетді.

Егер сіз бұл процесті CSS2-де болған жағдаймен салыстырсаңыз, онда барлық деректер Каскадттық стильдер парақтарындағы мәліметтермен бірге бірыңғай құжат ретінде ұсынылғанда, ұсыныстарды кішірек, жеке бөліктерге дейін бұзудың артықшылықтарын көре бастайсыз. Әрбір модуль жеке түрде жұмыс істеп жатқандықтан, бізде CSS3 модульдері үшін браузерлердің қолдауының кең ауқымы бар.

Кез-келген жаңа және өзгеретін ерекшеліктер сияқты, CSS3 беттеріңізді мүмкіндігінше қанша браузерлер мен операциялық жүйелерде тексеріңіз. Есіңізде болсын, әр браузерде бірдей көрінетін веб-беттерді жасауға болмайды, бірақ CSS3 мәнерлерін қоса алғанда қолданылатын кез келген мәнерлердің оларға қолдау көрсететін браузерлерде жақсы көрінуі және олар ескі браузерлер үшін керемет түрде оралғанына көз жеткізу үшін істемеу.

Жаңа CSS3 селекторлары

CSS3 жаңа CSS селекторларымен, сондай-ақ жаңа комбинатормен және кейбір жаңа жалған элементтермен CSS ережелерін жазуға болатын жаңа жолдар ұсынады.

Үш жаңа атрибут селекторы:

• Түпнұсқалықтың басталуы нақты элементке сәйкес келеді [foo ^ = «bar»] Элемент foo деп атрибуты бар, ол «бар»
• Атрибутты аяқтау дәл элементке сәйкес келеді [foo $ = «bar»] Элемент foo деп аталатын атрибуты бар, ол «бар»
• Атрибуты матч элементін қамтиды [foo * = «bar»] Элемент foo атрибуты бар, ол «бар» жолын қамтиды

16 жаңа псевдократтар:

• : түбірі
  • Құжаттың түбірлік элементі. HTML-да бұл әрқашан.
• : nth-child (n)
  • Мұны баламалы элементтерге сәйкестендіру үшін немесе айнымалы сәйкестіктер алу үшін айнымалы мәндерді пайдалану үшін пайдаланыңыз.
• nth-соңғы-бала (n)
  • Соңынан бастап есептелген нақты бала элементтерін салыстыру.
• : nth-of-type (n)
  • Құжат ағашында бұрынғы атымен бірдей аталатын элементтерді салыңыз.
• : nth-соңғы-түрі (n)
  • Астыңғы жағынан саналатын бірдей атпен біріктірілген элементтерді салыстыру.
• : соңғы бала
  • Ата-анадағы соңғы бала элементін сәйкестендіріңіз.
• : бірінші типті
  • Осы түрдегі бірінші ағайынды элементін салыстыру.
• : соңғы түрі
  • Осы түрдегі соңғы ағайынды элементпен сәйкестендіріңіз.
• : тек-бала
  • Ата-анасының жалғыз баласы болып табылатын элементті сәйкестендіріңіз.
• : тек типті
  • Оның түрінің жалғыз элементі болып табылады.
• :бос
  • Бала жоқ элементті (мәтіндік түйіндерді қоса) сәйкестендіріңіз.
• : мақсат
  • Сәйкес URI идентификаторының мақсаты болып табылатын элементті салыстыру.
• : қосылды
  • Элементті қосылған кезде сәйкестендіріңіз.
• : ажыратылған
  • Элементті ол ажыратылған кезде сәйкестендіріңіз.
• : тексерілді
  • Элементті тексергенде сәйкестендіріңіз (радио түймесі немесе құсбелгі).

• : емес (дар)
  • Электің қарапайым селекторға сәйкес келмегені.

Бір жаңа комбинатор:

• элементА ~ элемент
  • Element элементі elementA элементінен кейін кез келген жерде кездескенде, міндетті емес.

Жаңа сипаттар

CSS3 сондай-ақ жаңа CSS қасиеттерін енгізді. Бұл қасиеттердің көбісі Photoshop сияқты графикалық бағдарламамен көбірек байланыстыратын көрнекі стильдер жасау болды. Олардың кейбіреулері шекара радиусы немесе қорапшаның көлеңке сияқты CSS3 кіріспесінен кейін болған. Басқа адамдар, мысалы, flexbox немесе тіпті CSS Grid - CSS3 толықтырулары деп саналатын жаңа стильдер.

CSS3-де қорап үлгісі өзгерген жоқ. Бірақ, қораптардың шекараларын және шекараларын стильдеуге көмектесетін жаңа стиль сипаттары бар.

Бірнеше фон

Background-image, background-position және background-repeat стильдерін пайдалану арқылы қорапта бір-бірінің үстіңгі жағында орналасатын бірнеше фондық кескінді көрсетуге болады. Алғашқы сурет пайдаланушыға ең жақын қабат, оның артында бояулар жасалды. Егер өң түсі болса, ол барлық кескін қабаттарының астына боялады.

Жаңа фон мәнерінің сипаттары

CSS3-де кейбір жаңа фон сипаттары бар.

• фон-клип
  • Бұл сипат фондық суреттің қалай кесілуі керектігін анықтайды. Әдепкі мән - шекара жәшігі, бірақ оны толтыру жолағына немесе мазмұн ұясына өзгертуге болады.
• фон-шыққан
  • Бұл сипат фонды толтыру жолағына, шекара өрісіне немесе мазмұн ұясына орын болатынын анықтайды.
• фон-өлшемі
  • Бұл мүмкіндік фондық суреттің өлшемін көрсетуге мүмкіндік береді. Бұл бетке сәйкес келу үшін кішірек кескіндерді созуға мүмкіндік береді.

Қолданыстағы фон стилінің сипаттарына өзгертулер

Фон стилінің сипаттарына бірнеше өзгерістер бар:

• фон-қайталау
  • Бұл сипат үшін екі жаңа мән бар: бос орын және дөңгелек. Ғарыш кеңістігі кесілген суретті қораптың ішіне біркелкі қиылмайды. Дөңгелек фондық суретті қорапта бірнеше рет қоятын етіп өңдейді.
• background-attachment
  • «Элементтің» жаңа мәні элементтің мазмұнын жылжыту жолағы болған кезде өңдейтін етіп қосылады.
• фон
  • Фон шаршы сипаты мөлшері мен түпнұсқа сипаттарына қосылады.

CSS3 шекара сипаттары

CSS3 шекараларында біз қолданылатын стильдер (қатты, қосарланған, сызылған, т.б.) болуы мүмкін немесе олар сурет болуы мүмкін. Сонымен қатар, CSS3 дөңгелек бұрыштарды жасау мүмкіндігін береді. Шекаралық суреттер қызықты, өйткені сіз барлық төрт шекараның кескінін жасайсыз, содан кейін CSS-ге бұл кескінді өз шекараларына қалай қолдануға болатынын айтыңыз.

Жаңа шекаралық стиль сипаттары

CSS3-де жаңа шекара сипаттары бар:

• шекара радиусы
  • шекара-оң жақ-оң-радиус , шекара-төменгі-оң жақ радиус , шекара-төменгі-сол жақ радиус , шекара-жоғарғы-сол жақ радиус
  • Бұл сипаттар сіздің шекараларыңыздағы дөңгелек бұрыштарды жасауға мүмкіндік береді.
• шекара-сурет-көзі
  • Анықталған шекара мәнерлерінің орнына пайдалануға болатын сурет көзінің файлын анықтайды.
• border-image-slice
  • Шекаралық кескін жиектерінен ішкі жиектерді білдіреді
• шекара-сурет-ені
  • Шекаралық кескіннің енін анықтайды.
• border-image-басы
  • Шекаралық кескіннің шекара жиегінен асатын соманы анықтайды.
• шекара-сурет-созылу
  • Шекаралық кескіннің бүйірлері мен ортаңғы бөліктерінің қыстырылған немесе масштабталатындығын анықтайды.
• шекаралық сурет
  • Барлық шекаралық кескін сипаттарының стендік сипаты.

Шекара мен тектерге қатысты қосымша CSS3 сипаттары

Беттің үзілімінде қоршау сынған кезде, жолдың үзілімі үшін бағанның үзілімі (кірістірілген элементтер үшін) қорапты безендіру-үзіліс сипаты жаңа жолақтардың шекара мен толтыруға оралғанын анықтайды. Фондар осы сипатты пайдаланып бірнеше сынған ұяшықтар арасында бөлінуі мүмкін.

Сондай-ақ, қорап элементтеріне көлеңкелерді қосу үшін пайдалануға болатын қораптың көлеңкелі қасиеті бар.

CSS3-те енді кестелерсіз немесе күрделі div тег құрылымдары жоқ бірнеше бағандармен веб-бетті оңай орнатуға болады. Браузерге тек дене элементінің қаншалықты бағандар болуы және олардың қаншалықты кең болуы керектігін айтуға болады. Сонымен қатар, бағанның биіктігін қамтитын шекаралар (ережелер), өңдік түстерді қосуға болады және мәтін барлық бағандар арқылы автоматты түрде ағып кетеді.

CSS3 бағандары - бағандардың санын және енін анықтаңыз

Сіздің бағандарыңыздың санын және енін анықтауға мүмкіндік беретін үш жаңа қасиет бар:

• баған ені
  • Сіздің бағандарыңыздың енін анықтайды. Браузер кеңістікті толтыратын бағандармен толтыру үшін мәтінді ағызады.
• бағандар саны
  • Беттегі бағандардың санын анықтайды. Браузер кейін кеңістікте орналасу үшін жеткілікті кең бағандар жасайды, бірақ сіз көрсеткен нөмір ғана.
• бағандар
  • Ені мен санын (немесе екеуін де анықтауға болатын, бірақ сирек түсінікті) анықтауға болатын қасиет.

CSS3 бағанының бос орындар мен ережелері

Бос орындар мен ережелер бірдей мультиконалды сценарийдегі бағандар арасында орналасады. Бос орындар бағандарды итереді, бірақ ереже ешқандай орын алмайды. Егер баған ережесі бос орынға қарағанда кең болса, ол іргелес бағандарды қиып алады. баған ережелеріне және бос орындарға арналған бес жаңа қасиет бар:

• column-gap
  • Бағандар арасындағы бос орындардың енін анықтайды.
• баған-ереже-түс
  • Ереженің түсін анықтайды.
• баған-ереже-стилі
  • Ереженің стилін анықтайды (қатты, нүктелі, қосарланған және т.б.).
• баған-ереже-ені
  • Ереженің енін анықтайды.
• баған-ереже
  • Барлық үш бағанның ереже сипаттарын бірден анықтайтын стиль сипаты.

CSS3 Column Breaks, Spanning Columns және толтыру бағандары

Бағандардың үзілістері бектілген мазмұндағы үзілістерді анықтау үшін пайдаланылатын CSS2 опцияларын қолданады, бірақ үш жаңа сипаттармен: үзіліс , үзіліс және үзіліс .

Кестелер сияқты, элементтерді баған-спан сипаты бар бағандарға бөлу үшін орнатуға болады. Бұл бірнеше бағандарды газетке ұқсас тақырыптармен жасауға мүмкіндік береді.

Толтырылған бағандар әрбір бағанда қанша мазмұн болады деп шешеді. Теңгерімді бағандар бағанды ​​толтырмайынша, автоматты түрде тек мазмұнды ағызып, кейін келесіге қарай өтетін болса, әр бағандағы мазмұнның бірдей мөлшерін қоюға тырысады.

CSS3 ішіндегі қосымша мүмкіндіктер CSS2 ішіне қосылды

CSS2-де жоқ CSS3 ішіндегі қосымша мүмкіндіктер көп, соның ішінде:

• CSS үлгісінің орналасу модулі және CSS3 Grid орналасу модулі : CSS көмегімен торларды жасау.
• CSS3 мәтіндік модулі : мәтіннің құрылымы және тіпті CSS-мен ашық түсті көлеңкелер жасау.
• CSS3 Түс модулі : Қазір ашықтықпен.
• Бокс үлгісіне өзгертулер : IE тегі сияқты әрекет ететін маркси сипатын қосыңыз.
• CSS3 пайдаланушы интерфейсі модулі : сізге жаңа курсорларды, әрекеттерге жауаптарды, қажетті өрістерді және тіпті өлшемді элементтерді беру .
• Медиа сұраулары : Медиа сұраулары мәнер парағының қалай қолданылатындығын анықтағанда көбірек икемділікті береді. Мысалға, 20-дан асатын үлкен терезе бар портативті құрылғыларға арналған стиль кестесін анықтай аласыз.
• CSS3 Ruby модулі : Құжаттарға түсініктеме беру үшін мәтіндік рубюді қолданатын тілдерге қолдау көрсетеді.
• CSS3 Paged Media модулі : Бағытталған баспа құралдарын (қағаз, мөлдір үлдірлер және т.б.) одан да көп қолдау үшін.
• Жасалған мазмұн : L тақырыпты және төменгі колонтитулдарды, сілтемелерді және бағдарламаланған түрде жасалған, әсіресе бүркемеленген медиаға арналған басқа мазмұнды қамтиды.
• CSS3 сөйлеу модулі : CSS-дегі өзгерістер.