Веб-бет орналасуының сол жағына суретті туралау үшін CSS пайдалану
Бүгінгі күні кез-келген веб-бетке қарап, сол беттердің үлкен көлемін құрайтын мәтін мен суреттердің тіркесімін көресіз. Мәтін мен кескіндерді бетке қосу өте оңай. Мәтін параграфтар, тізімдер және тақырыптар сияқты стандартты HTML тегтері арқылы кодталады, ал суреттер элементін қолдана отырып қосылады.
Бұл мәтінді жасау және сол суреттерді бір-бірімен жақсы жұмыс істеу мүмкіндігі тамаша веб-дизайнерлерді ерекшелендіреді! Сіз тек сіздің мәтініңізді және суреттеріңіздің бір-бірімен пайда болуын қаламайсыз, бұл блоктық деңгейдегі элементтер әдепкі бойынша орналасады. Жоқ, сіз мәтіннің және суреттердің веб-сайттың визуалды дизайны болып табылатын нәрсемен бірге қалай ағып жатқанын басқарғыңыз келеді.
Беттің сол жағына тураланған кескінге ие болу үшін, сол беттегі мәтін мәтіннің дизайнына және веб-беттерге арналған жалпы дизайны болып табылады. Веб-көріністе бұл әсер бейнені өзгермейтін деп аталады . Бұл стильге «float» үшін CSS сипаты қол жеткізіледі. Бұл сипат мәтінді сол жаққа тураланған кескіннің оң жағына апаруға мүмкіндік береді. (Немесе сол жақта оң жағымен тураланған кескін айналасында айналады.) Мына көрнекі әсерге қалай жетуге болатынын қарастырайық.
HTML арқылы бастау
Біріншіден, сізге қажет HTML - жұмыс істеу үшін. Біздің мысал үшін біз параграфтың парағын жазып, параграфтың басында суретті қосамыз (мәтінге дейін, бірақ
тегінің ашылғаннан кейін). HTML түзетуі келесідей:
Әдепкі бойынша, біздің веб-бетте мәтіннің үстіндегі суретті көрсететін болады. Бұл суреттер HTML-дегі блоктық деңгейдегі элементтер болып табылады. Бұл шолғыш әдепкі бойынша сурет элементіне дейінгі және кейін жол үзілімдерін көрсетеді. Бұл әдепкі көріністі CSS-ге бұру арқылы өзгертеміз. Алдымен біз сурет элементіне сыныптық мәнді қосамыз. Бұл класс біздің CSS-де кейінірек қолданатын «ілмекпен» әрекет етеді.
Айта кету керек, бұл «сол» класс ештеңе жасамайды! Бізге қажетті стильге жету үшін біз келесі CSS-ні пайдалануымыз керек.
CSS стилі
Біздің «HTML» деген сыныптық атрибутты қоса алғанда, біздің HTML-ді қолданып CSS-ге ауыса аламыз. Біздің стиль кестемізге осы кескінді айналдырып, сонымен бірге, жанында біраз қосымша толтыруға болатындай ереже қосамыз, сайып келгенде, кескін айналасына түсетін мәтін оған тым жақпайды. Міне, сіз жаза алатын CSS:
.left {float: сол; толтыру: 0 20px 20px 0; }Бұл стиль сол кескінді солға айналдырады және суреттің оң және төменгі жағына бірнеше CSS стенограммасын қосады.
Егер сіз осы HTML-ді браузерде қарастырған болсаңыз, суретті сол жаққа тураласаңыз, параграфтың мәтіні екі арасындағы аралықтың тиісті мөлшерімен сәйкес келеді. Назар аударыңыз, біз пайдаланатын «сол» класс құндылығы ерікті. Біз «сол» сөзі өздігінен ештеңе істемейтіндіктен, оны бір нәрсе деп атаған болар едік. Бұл сіз көргіңіз келетін көрнекі өзгерістерді белгілейтін нақты CSS мәнерімен жұмыс істейтін HTML-де сынып төлсипатына ие болу керек.
Бұл стильдерге қол жеткізудің баламалы жолдары
Кескін элементін сынып төлсипатын берудің осы тәсілі, содан кейін элементті өзгерткен жалпы CSS мәнерін пайдалану - бұл «солға тураланған кескін» көрінісін орындаудың бір ғана жолы. Сондай-ақ, суреттің сыныбының мәнін өшіріп, одан нақты селекторды жаза отырып, оны CSS-мен стильдендіре аласыз. Мысалға, бұл суреттің «негізгі мазмұнның» сыныптық мәні бар бөлімнің ішіндегі мысалы қарастырайық.
Бұл суретті стильдеу үшін осы CSS-ні жаза аласыз:
.main-content img {float: сол; толтыру: 0 20px 20px 0; }Бұл scearioде біздің суретті сол жаққа теңестіріп, мәтін бұрынғыдай өзгеріп отырады, бірақ біз түзету үшін қосымша сыныптық құнды қосудың қажеті жоқ. Масштабты жасау, басқаруды жеңілдететін және өнімділікті жақсартуға көмектесетін шағын HTML файлын жасауға көмектесе алады.
Ақыр соңында стильдерді сіздің HTML түзетіңізге тікелей қосуға болады:
Бұл әдіс « кірістірілген стильдер » деп аталады. Ұсынылмайды, себебі ол элементтің стилін өзінің құрылымдық белгілеуімен біріктіреді. Вебның үздік тәжірибелері беттің стилі мен құрылымы бөлек қалуы керектігін көрсетеді. Бұл, әсіресе, сіздің бетіңіздің орналасуын өзгертіп, әртүрлі экран өлшемдері мен жауапты веб-сайты бар құрылғыларын іздеу қажет болған кезде пайдалы. HTML-дағы интерпретацияланған парақтың стиліне ие болу, сіздің сайттың көрінісін түрлі экрандарға қажетінше реттейтін медиа сұрауларын жазуды қиындатады.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard, 4/3/17, редакцияда.