Fără aplicarea foilor de stil cascadă, elementele de formă vor fi afișate în conformitate cu browserul utilizat și sistem de operare setări implicite. dar folosind CSS. Vă permite să creați formulare corespunzătoare designului site-ului dvs.
Decizie
Formați stilul elementului, ca orice alt element HTML, poate fi setat folosind CSS.
Smochin. 6.1. Formularul implicit în Browserul Firefoxi
Imaginat de către smochin. 6.1 Formularul este decorat în conformitate cu setările implicite utilizate de browserul Firefox sub Windows XP. Speciile sale se vor schimba la vizualizarea în diferite browsere sub diferite platforme. Mai jos este o formă tipică:
"http://www.w3.org/1999/xhtml"lang \u003d "en-US"\u003e
Aspectul acestei forme poate fi schimbat prin scrierea stilurilor pentru elemente:
formularul (granița: 1px punctat #aaaaaa; padding: 0 .5em;) Form Div (margine-fund: 1em;) Intrare (culoare: # 00008b; fundal-culoare: # add8e6; margine: 1px solid # 00008b;) Selectați ( Lățime: 100px; Culoare: # 00008b; Culoare de fundal: # add8e6; graniță: 1px solid # 00008b;) Textarea (lățime: 200px; înălțime: 40px; Culoare: # 00008b; fundal-culoare: # add8e6; frontieră: 1px solid # 00008b;)
Acum forma arată în fig. 6.2.
Discuţie
După cum probabil ați ghicit, referințele de stiluri pentru elementele HTML formă, intrare, textarea și selectați Acestea vor fi aplicate fiecărei rezultate situate pe pagina cu care este asociată fișierul de tabel de stil. Pentru a schimba formularul câmpurilor de câmp, putem folosi multe proprietăți diferite. Folosind CSS, puteți gestiona aproape toate aspectele câmpului
:
Consiliu
Forme și culori de fundal. O parte din vizitatorii site-ului dvs. pot discerne culorile prost, iar o parte poate utiliza un browser vocal. Prin urmare, culorile nu ar trebui să efectueze niciodată funcții importante - de exemplu, instrucțiunile precum "câmpurile galbene sunt necesare pentru umplere" ar trebui să fie sub interdicția completă.
Luați în considerare valoarea proprietăților în detaliu:
Numărul de muncă de laborator 4
Tabele de stil cascading (CSS)
scopul de a lucra
Faceți cunoștință cu conceptul de tabele de cascadă stiluri css., precum și obținerea de competențe practice ale utilizării lor.
Informații teoretice.
Internet Explorer. Vă oferă stilul dvs., numit implicit. Acest stil implică un fundal alb pur, culoare neagră a fontului, toate referințele sunt subliniate și albastre etc., dacă nu vă place toate astea? Știți deja cum să modificați direct diferitele atribute. Chiar dacă aceleași obiecte sunt aceleași, deja știți cum să aplicați clase. Dar există o altă ocazie. Pentru a specifica întregul stil al documentului, se utilizează așa-numitele mese de stil ierarhic (foi de stil cascadă - CSS), care sunt un set de proprietăți ale diferitelor obiecte. Ceva asemănător cu clasele, dar dacă clasa este creată în interiorul documentului și poate fi aplicată și poate că nu, CSS, dacă este conectată, instalațiile din acesta afectează toate obiectele din document.
Introducere în CSS.
CSS este foarte asemănătoare cu clasele, numai cu diferența că stilul este descris în ele pentru obiectul deja cunoscut. Pentru un exemplu vizual, inspectați camera dvs. acum (birou, hol ...) în care sunteți. Desigur, veți vedea multe articole diferite (masă, scaun, fereastră, computer). Fiecare dintre aceste obiecte obiecte are caracteristici și trebuie să faceți o listă a acestor elemente și caracteristicile acestora. Poate că veți avea ceva după cum urmează:
masa:
culoarea maro
Material - lemn
un calculator:
culoare alba
Materiale - Materiale plastice
Scop - pentru muncă
Desigur, puteți merge la un alt mod, dar numai CSS este compilat exact în cazul în care, în loc de obiecte, obiecte proeminente, iar caracteristicile lor sunt puțin diferite. De exemplu, aici este un extras al unui astfel de document:
corp.
{
Culoare de fundal: RGB (255,255,153);
Culoare: RGB (51,51,153);
}
H3.
{
Culoare: RGB (255,0,0);
Font-Family: Arial, Helvetica;
}
Aici se întreabă ce stilul corpului și a elementului H3 va fi. Acele opțiuni care nu sunt specificate în mod implicit.
Crearea CSS nu necesită eforturi speciale și poate fi efectuată într-un notebook simplu, deși în aceste scopuri și există programe specialeFacilitarea muncii și arătând în mod clar modul în care acesta va arăta documentul viitor folosind acest stil. Căutați astfel de programe pe disc sau de la cunoscuți.
2.2.Crearea unei mese de stil în document
Există două moduri de a conecta CSS. Primul este să îl setați în elementul de stil la începutul documentului, ca o clasă. Acest lucru se face ca acesta (Exemplul 1):
Acest document
utilizează mese de stil
În acest exemplu, pe ecran veți vedea două linii constând din două obiecte: H3 și H3. Uite, în care stilul implicit al Internet Explorer sa întors. Dar nu am făcut nicio instrucțiune în obiectul în sine despre stilul său. Astfel, indiferent cât de mult ați înzestrat obiecte H3 și H3, stilul lor va fi întotdeauna așa cum ați specificat în tabelul stilist.
2. 3. Masa de stil în fișier separat.
Dacă vă place stilul pe care l-ați creat și doriți să îl utilizați în toate documentele dvs. Sau documentul dvs. constă dintr-un set Pagini HTML. Și toți trebuie să aibă același stil, nu trebuie să introduceți șirurile de mese de stil de fiecare dată la începutul documentului.
A doua modalitate de a conecta CSS la pagina web este crearea CSS. Într-un fișier separat, iar pagina însăși se referă la acest fișier. Apoi, puteți scrie în pagină doar o singură linie și stilul încă va fi așa cum este definit în tabelul stilistului din fișier extern.. Cred că nu este necesar să vorbim despre beneficiile unei astfel de moduri.
Deci, la început creați o masă, urmând regulile de mai sus. Apoi, adăugați la element
Pentru a activa foaia de stil de șir similar cu următoarele:Link înseamnă că pagina curenta Elementul, Rel și tipul sunt conectate pentru a descrie elementul ca masă stilizată, dar HREF conține adresa la care fișierul este cu CSS.
Schimbare dinamică Css.
Puteți schimba dinamic numele plug-in cu o masă stilistului, în consecință, schimbarea stilului în sine. Iată o funcție, în limba JScript, care, atunci când o sună, dacă orice stil este deja aplicat, elimină-l și conectează unul nou.
funcție schimbare_style ()
(dacă (document.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "Newstyle.css";
}
Dacă tabelul de stil este definit în interiorul paginii HTML, puteți adăuga noi definiții utilizând funcția AddRule (obiect, stil). Unde obiectul este un obiect și, respectiv, stilul stilistic. Aici este un exemplu în care, după ce faceți clic pe buton, se modifică o masă stilizată (Exemplul 2):
Acest document utilizează foi de stil
Acesta este paragraful. Faceți clic pe buton pentru a-și schimba stilul
După examinarea paginii cu un astfel de cod, veți vedea cum apar modificările stilului prin adăugarea instalării în foaia de stil.
Clase
Clasa este o altă modalitate de a instala modul în care textul ar trebui să privească pe pagină. În esență, definiți un set de stiluri, cum ar fi culoarea, grosimea fontului, dimensiunea acestuia și așa mai departe, dar nu o atribuie o etichetă specifică. Clasa arată astfel:
Acest exemplu creează trei clase: regulat, superbil, drepturi de autor. Mai jos este afișat cum să aplicați aceste clase în stratul de navigare text.
Clasa SuperBig.
Clasa regulată
Clasa Drepturi de autor
De asemenea, puteți lega în mod specific eticheta de clasă. De exemplu:
P.
{
Font-dimensiune: 16pt;
Greutate font: Bold;
}
P.small.
(Dimensiune font: 9pt;
Marja-stânga: 5EM;
Marginea-dreapta: 5EM;
}
Mai jos este afișat cum să aplicați clasa
{ font-size:16pt;
font-weight:bold;
font-family:verdana, sans-serif;
{ font-size:9pt;
margin-left:5em;
margin-right:5em;
cool{ color: blue; font-style; italic;}
Этот документ использует стилевые таблицы
Жесткий контроль с помощью тега
Тег - это удобный универсальный инструмент для применения стиля в любом месте, где он необходим.
Этот документ использует стилевые таблицы
Этот документ
использует стилевые таблицы
Тег SPAN применяет класс coll к фразе " использует стилевые таблицы ".
Селекторы ID
Селекторы ID (сокращение от "identifier" - идентификатор) аналогичен классу, но гораздо более ограничен по своим возможностям. Каждый селектор ID может применятся в документе только один раз.
#specialOffer {font-family:gadget,
serif; font-size:40;}
селектор ID можно вызвать следующим образом:
Задание на работу
Ввести в разрабатываемый документ таблицы стилей. Изменить содержание статического HTML-документа с помощью свойств, событий и методов объектов window, событий пользовательского интерфейса, мыши, клавиатуры и т.д.
4. Контрольные вопросы
1. Что такое CSS?
2. Какие способы подключения CSS Вы знаете?
3. Каким образом происходит подключение таблицы стилей внутри документа?
4. Каким образом происходит подключение таблицы стилей из отдельного файла?
5. Как можно изменять стилевые установки, когда CSS находится внутри html - документа?
6. Для чего используются классы в CSS?
7. Преимущества использования классов?
8. Механизм действия тега .
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой - использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
Вёрстку загоняют в горизонтальный габарит 960-980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко - тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.«Резиновая» макетная сетка по ширине окна
Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.Ещё одна распространённая проблема этого решения - боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.
Хочу предложить нехитрый вариант решения - ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже - это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.
Создаём контейнер макета:
...
Оформляем его незатейливым кодом стиля:
div.page-container { min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0; }
Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400-1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.
Дополняем HTML:
И немного меняем CSS:
div.page-container { max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; } div.page-container-inner { min-width: 960px; max-width: 1600px; margin: 0 auto; padding: 0; }
Как видите - решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.
Перевод: Влад Мержевич
В CSS 2.1 фоновая картинка, применяемая к контейнеру, сохраняет свои фиксированные размеры. К счастью, в CSS3 введено свойство background-size , с помощью которого фон может быть растянут или сжат. Оно идеально подходит, если вы создаёте шаблон для адаптивного веб-дизайна.
Есть несколько способов определения размеров - взгляните на демонстрационную страницу background-size .
Абсолютное изменение размера
Могут применяться единицы измерения.
Background-size: ширина высота;
По умолчанию ширина и высота установлена как auto , что оставляет исходные размеры изображения.
Вы можете задать новый размер изображения с помощью абсолютных единиц измерения, таких как px, em, cm и др. Пропорции изменятся, если это необходимо. Например, если наша фоновая картинка имеет размеры 200×200 пикселов, то следующий код оставит эту высоту, но сделает ширину в два раза меньше:
Background-size: 100px 200px;
Если указано только одно значение, оно считается шириной. Высота устанавливается как auto и сохраняются пропорции:
Background-size: 100px; /* аналогично */ background-size: 100px auto;
Данный код масштабирует изображение с 200×200 до 100×100 пикселов.
Относительное изменение размера через проценты
Если применяются проценты, размеры основываются на элементе, а НЕ изображении:
Background-size: 50% auto;
Ширина фонового изображения, таким образом, зависит от размеров контейнера. Если у контейнера ширина 500px, то размер нашего изображения уменьшится до 250×250.
Использование процентов может быть полезно для адаптивного дизайна. Поменяйте ширину демонстрационной страницы чтобы понять, как изменяются размеры.
Масштабирование до максимального размера
Свойство background-size также понимает ключевое слово contain . Оно масштабирует изображение таким образом, чтобы оно заполняло контейнер. Другими словами, изображение будет увеличиваться или уменьшаться пропорционально, но ширина и высота не будут превышать размеры контейнера:
Background-size: contain;
Заполнение фоном
Свойство background-size также понимает ключевое слово cover . Изображение будет масштабироваться так, чтобы заполнить весь контейнер, но если различаются соотношения сторон, то картинка будет обрезана.
Background-size: cover;
Масштабирование нескольких фонов
Несколько фонов могут быть масштабированы с помощью списка значений, разделенных запятыми, идущих в том же порядке.
Background: url("sheep.png") 60% 90% no-repeat, url("sheep.png") 40% 50% no-repeat, url("sheep.png") 10% 20% no-repeat #393; background-size: 240px 210px, auto, 150px;
Работа в браузерах
Последние версии всех браузеров поддерживают background-size без префиксов.
IE8 и ниже не поддерживают это свойство. Вы можете использовать фильтр IE для эмуляции значений content и cover , но невозможно изменить размер фоновой картинки без помощи уловок, вроде добавления настоящей картинки позади других элементов. Это грязно, так что я рекомендую изящную деградацию.
» стала поводом для написания сегодняшнего поста. Суть очень схожа и речь здесь пойдет про размер шрифта.
Задача — реализовать динамическое изменение размера шрифта сайта в зависимости от разрешения экрана, т.е. размера окна браузера.
Прежде чем приступить к описанию решения, хочу обозначить два момента :
- Лично для меня полезность данной штуки весьма сомнительна , и я скорее бы рассматривал такую возможность просто в качестве ознакомления. А вот Сергей, например, эту технику давно хотел применить на практике и видит в ней смысл. Поэтому, возможно, кому-нибудь еще эта информация также пригодится.
- Решение довольно простое, работает на моем любимом jQuery, но использование этого фреймворка только ради осуществления данной задачи — не очень разумно , поскольку один лишь фреймворк «весит» под 60 Кб, а сам скрипт при этом состоит из всего лишь 10 строк. Я полагаю, что на нативном JavaScript скрипт, реализующий то же самое, будет значительно меньшего размера.
Итак, приступим.
Сначала я подробно опишу работу jQuery-скрипта, а затем объясню, как его применить к той или иной части веб-сайта.
jQuery
За точку отсчета я взял ширину в 1000 пикселей. Как правило, это минимальная ширина, под которую верстаются сайты. Заносим этот показатель в переменную:
Var width = 1000;
Теперь устанавливаем минимальный размер шрифта в пикселях, ниже которого он не будет уменьшаться:
Var bodyWidth = $("html").width();
Определяем коэффициент, на который будет умножаться базовый (минимальный) размер шрифта в зависимости от размера окна браузера. Цифру получаем путем деления ширины хтмл-документа на базовую (минимальную) ширину. Т.е., к примеру, если ширина окна браузера составляет 1600 пикселей, то получим коэффициент 1,6.
Var multiplier = bodyWidth / width;
Выполняем условие: если ширина хтмл-документа больше базовой ширины, тогда размер шрифта умножаем на коэффициент, округляя полученный результат до целого числа:
If ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier);
Теперь полученный скорректированный размер шрифта применяем к тегу
:$("body").css({fontSize: fontSize+"px"});
Все вышеописанные строки помещаем в функцию function fontSize() {} , затем запускаем эту функцию после загрузки хтмл-документа, а также после изменения размера окна браузера:
$(function() { fontSize(); }); $(window).resize(function() { fontSize(); });
Вот целиком код jQuery-скрипта, который получился у нас в итоге:
Function fontSize() { var width = 1000; // ширина, от которой идет отсчет var fontSize = 12; // минимальный размер шрифта var bodyWidth = $("html").width(); var multiplier = bodyWidth / width; if ($("html").width() >= width) fontSize = Math.floor(fontSize * multiplier); $("body").css({fontSize: fontSize+"px"}); } $(function() { fontSize(); }); $(window).resize(function() { fontSize(); });
HTML
Рассмотрим применение вышеуказанного скрипта на примере 3-колоночного макета страницы, имеющего следующую структуру HTML-кода:
CSS
Теперь осталось только использовать динамический размер шрифта для тех блоков, к которым мы хотим его применить. Давайте, для примера, сделаем так, чтобы он менялся у всей страницы, за исключение правой колонки, а у левой колонки сделаем его чуть меньше основного.
Все очень просто.
Во-первых , правой колонке мы просто-напросто устанавливаем свой фиксированный размер шрифта и высоту строки, и скрипт его не затронет:
#right { font-size: 12px; line-height: 18px; }
Во-вторых , левой колонке ставим чуть меньший размер шрифта:
#left { font-size: 0.9em; }
В-третьих , нужно либо у тега
, либо у соответствующего блока указать высоту строки в em, чтобы она тоже изменялась динамически.Если вы хотите менять размер шрифта только у конкретного блока, допустим, у #content , тогда будет логичнее в скрипте поменять body (в строке $("body").css({fontSize: fontSize+"px"});) на нужный идентификатор или класс.