Сыртқы мәнер парағын қалай құруға болады

CSS Site Wide пайдалану

Веб-сайттар - стиль мен құрылымның тіркесімі, және бүгінгі веб-торапта сайттың осы екі аспектісін бір-бірінен бөліп алудың ең жақсы тәжірибесі.

HTML әрдайым өз құрылымы бар сайтты қамтамасыз етеді. Вебтегі алғашқы күндерде HTML-да стиль туралы ақпарат болған. тегі сияқты элементтер құрылымдық ақпаратпен қатар ақпаратты қарау мен сезінуді қосып, HTML кодының астында жабылған. Веб стандарттарының қозғалысы бізді осы тәжірибені өзгертуге және орнына барлық мәнер туралы ақпаратты CSS немесе Cascading Style Sheets түріне айналдыруға мәжбүр етті. Бұл қадамды алсақ, қазіргі ұсынымдар веб-сайтыңыздың сәндеу қажеттіліктері үшін «сыртқы стиль парағы» деп аталатын нәрсені қолданасыз.

Сыртқы стиль кестелерінің артықшылығы мен кемшіліктері

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

Сыртқы стиль кестелерінің артықшылықтары

  • Бір уақытта бірнеше құжатты көру мен сезінуіңізге болады.
    • Бұл сіздің веб-сайтыңызды құру үшін адамдар тобымен жұмыс жасасаңыз, әсіресе пайдалы. Көптеген стиль ережелерін есте сақтау қиын болуы мүмкін және баспа стилі нұсқаулығы болуы мүмкін, алайда мысалдың мәтіні 12 нүктеде Arial қаріппен немесе 14 баллдық курьерде жазылатындығын анықтау үшін үнемі олданудың тиімсіз және қажырлы емес екендігі. Барлығының бір жерде болуына және сол жерде орын ауыстыруға болатындығынан, техникалық қызмет көрсетуді әлдеқайда жеңілдетуге болады.
  • Әр түрлі HTML элементтерінде пайдаланыла алатын стильдердің сыныптарын жасай аласыз.
    • Егер сіз бетіңіздегі әр түрлі нәрселерге назар аудару үшін белгілі бір қаріп стилін жиі пайдалансаңыз, сіз бұл көріністі және сезімді алу үшін мәнер парағыңызда орнатылған сынып төлсипатын пайдаланып, әр данаға арналған нақты мәнерді анықтай алмайсыз назар аударыңыз.
  • Стильдерді оңайырақ топтастыруға болады.
    • CSS үшін қол жетімді барлық топтастыру әдістері сыртқы стильдер кестелерінде пайдаланылуы мүмкін, бұл сіздің беттеріңізге көбірек бақылау және икемділік береді.

Сыртқы стиль кестелерінің кемшіліктері

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

Сыртқы мәнер парағын қалай жасау керек

Сыртқы стиль кестелері құжат деңгейінің мәнер кестелері үшін ұқсас синтаксиспен жасалады. Дегенмен, бәрін қосатын селектор мен декларация болып табылады. Құжат деңгейіндегі стиль кестесіндей сияқты, ереже үшін синтаксис:

селектор {property: value;}

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

Мәнер парағының құжаты болғаннан кейін, оны веб-беттерге байланыстыру қажет. Бұл екі жолмен жасалуы мүмкін:

  1. Байланыстыру
    1. Стиль кестесін байланыстыру үшін сіз HTML тегін қолданасыз. Бұл атрибут rel , type және href болады . Rel атрибуты сіз байланыстыратыныңызды (бұл жағдайда стиль кестесін) көрсетеді, түр браузер үшін MIME-түрін анықтайды және href - .css файлы жолы.
  2. Импорттау
    1. Импортталған стиль кестесін құжат деңгейінің стилі парағында пайдаланасыз, сонда сіз сыртқы мәнер кестесінің төлсипаттарын импорттай аласыз, бірақ кез келген құжатты жоғалтпайды. Сіз оны сілтеме стилі парағын шақыруға ұқсас жолмен қоңырау шалсаңыз, оны тек құжат деңгейінің стилі декларациясы арқылы шақыруға болады. Веб-сайтыңызды сақтауға қажетті сыртқы стиль кестелерін импорттай аласыз.

Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 8/8/17 жылы редакцияланған