Стили CSS можно вводить в документы HTML как отдельные файлы (файлы типа .css ) или писать непосредственно в документах HTML. Их можно условно разделить на следующие четыре метода:
Первый и второй методы записывают стили CSS в текущий документ HTML. Третий и четвертый методы помещают стили CSS во внешние файлы, а затем импортируют их в текущий документ HTML.
Встроенный стиль подразумевает размещение стиля CSS непосредственно в теге внутри строки кода, обычно в атрибуте style тега. Поскольку встроенный стиль вставляется непосредственно в тег, это самый прямой и одновременно лучший способ. наиболее неудобно изменять стиль.
[Пример 1] Примените встроенные стили CSS к абзацам, тегам <h2>, тегам <em>, тегам <strong> и тегам <div> соответственно.
<!тип документа html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Встроенные стили</title>
</голова>
<тело>
<p style="background-color: #999900">Встроенный элемент, управляющий абзац-1</p>
<h2 style="background-color: #FF6633">Встроенный элемент, элемент заголовка h2</h2>
<p style="background-color: #999900">Встроенные элементы, управляющий абзац-2</p>
<strong style="font-size:30px;">Встроенные элементы, Strong более эффективны, чем em</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Встроенные элементы, элементы уровня блока div</div>
<em style="font-size:2em;">Встроенные элементы, em-выделение</em>
</тело>
</html>Эффект демонстрации страницы показан ниже:
В приведенном выше примере встроенный стиль встроен в атрибут style элемента HTML, то есть код CSS может быть помещен в кавычки style="" и несколько значений атрибута CSS разделены точкой с запятой ; Например, тег <div> в примере:
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Встроенные элементы, элементы уровня блока div</div>
Тег абзаца <p> устанавливает коричневый цвет фона (background-color: #999900), а тег title <h2> устанавливает красный цвет фона (background-color: #FF6633).
Тег <strong> устанавливает размер шрифта в 30 пикселей (font-size:30px;), тег <div> устанавливает высоту и высоту строки в 30 пикселей, а также устанавливает цвет и цвет фона (background-color: #66CC99; color : #993300 ; height:30px; line-height:30px;), тег <em> устанавливает размер шрифта в относительных единицах (font-size: 2em;).
Хотя содержимое двух тегов абзаца <p> различается, они используют одну и ту же настройку цвета фона, но дважды добавляют встроенный атрибут CSS, чтобы установить цвет фона: #999900.
Хотя встроенные элементы легко писать, на примерах можно обнаружить следующие дефекты:
Каждому тегу необходимо стилизовать, добавив атрибут style. В отличие от прошлого, когда производители веб-страниц смешивали теги и стили HTML, теперь встроенные стили записываются с помощью CSS, а в прошлом атрибуты тегов HTML использовались для достижения эффектов стиля. Хотя методы разные, последствия одинаковы: высокие затраты на обслуживание в будущем, то есть при изменении страницы вам нужно открывать каждую страницу сайта одну за другой и модифицировать ее одну за другой, и вы не сможете увидеть роль CSS вообще. Добавление такого количества встроенных стилей приведет к увеличению размера страницы. Если портал написан таким образом, это приведет к потере пропускной способности и трафика сервера.На некоторых веб-страницах в Интернете такой способ написания можно увидеть, просмотрев исходные файлы. Хотя таким образом выполнена только часть веб-страницы, ее необходимо дифференцировать в зависимости от ситуации:
Если создатель веб-страницы пишет такой встроенный стиль, текущий стиль можно быстро изменить, не принимая во внимание конфликт ранее написанных стилей. Если такая ситуация существует на веб-странице, это связано с тем, что стиль создается редактором в фоновом режиме. редактирование, или фон не до конца проработан, необходимо разработать в редакторах возможности выбора стилей вместо прямого изменения цвета, толщины, цвета фона, наклона и других эффектов через редактор.Встроенные стили записывают CSS в заголовке исходного файла веб-страницы, то есть между <head> и <head>, и окружают его с помощью тега <style> в теге HTML. Его особенностью является то, что стиль может быть только таким. используется здесь, чтобы решить проблему многократного написания встроенных стилей.
[Пример 2] Установите встроенный метод написания абзацев, чтобы уменьшить объем кода.
<!тип документа html>
<html>
<голова>
<мета-кодировка="utf-8">
<title>Встроенный</title>
<style type="text/css">
р {
text-align: left; /*текст выравнивается по левому краю*/
размер шрифта: 18 пикселей; /*Размер шрифта 18 пикселей*/
line-height: 25px /*Высота строки 25 пикселей*/;
text-indent: 2em; /*Отступ первой строки на 2 пробела*/
ширина: 500 пикселей; /*Ширина абзаца 500 пикселей*/
поле: 0 авто; /*По центру браузера*/
Margin-bottom: 20px; /*нижнее поле абзаца 20 пикселей*/
}
</стиль>
</голова>
<тело>
<p>Название компании «Baidu» происходит от стихотворения династии Сун «Ищу его в тысячах Baidu». (Конференц-зал компании Baidu называется «Цинъюй», что является словесной карточкой этого стихотворения). Идея значка «медвежьей лапы» возникла в результате стимуляции «охотников, патрулирующих медвежьи лапы», что очень похоже на «технологию аналитического поиска» доктора Ли, таким образом формируя концепцию поиска Baidu и в конечном итоге становясь изображением значка Baidu. После этого, поскольку большинство поисковых систем были представлены изображениями животных, таких как лиса SOHU или собака GOOGLE, Baidu, естественно, назвала ее медведем. Baidu Bear стал имиджем компании Baidu. </p>
<p>В плане Baidu по изменению логотипа все три новых дизайна логотипа, предложенные Baidu, были отклонены голосами пользователей сети. Больше пользователей сети проголосовали за оригинальный логотип в виде медвежьей лапы. </p>
<p>Всего было проведено три тура голосования по смене ЛОГОТИПА. До конца второго тура голосования новый ЛОГОТИП с улыбающимся лицом имел абсолютное преимущество. Но в финальном раунде голосования оригинальный логотип в виде медвежьей лапы резко завоевал большинство голосов пользователей сети, тем самым полностью отвергнув три новых плана логотипа. </p>
</тело>
</html>Эффект демонстрации страницы показан ниже:
В приведенном выше примере абзацы настроены следующим образом: текст выравнивается по левому краю, размер шрифта — 14, высота строки — 25 пикселей, ширина — 500 пикселей, нижнее поле — 20 пикселей, браузер центрируется под браузере, а первая строка имеет отступ в два текстовых пробела. Отступ первой строки использует относительные единицы. Цель этого параметра заключается в том, что при изменении размера шрифта (например, font-size: 18px; ) его все равно можно отступить на два пробела размера текста.
Встроенные стили создают неудобства при изменении стиля. Например, в предыдущем примере оба абзаца используют один и тот же стиль, но их нужно писать дважды. С помощью встроенных стилей все стили абзацев можно объединить.
Стиль может определять не только стили CSS, но и сценарии JavaScript, поэтому при использовании стиля нужно быть внимательным. Если значением типа style является text/css , стиль CSS записывается внутри; если значением типа style является text/javascript , сценарий JavaScript записывается внутри.
Атрибут title тега стиля
В стиле есть специальный атрибут title. Вы можете использовать заголовок для установки заголовка для разных стилей. Просмотрщик может выбирать разные стили в зависимости от заголовка, чтобы добиться эффекта переключения в браузере. и браузер Firefox поддерживает этот эффект.
[Пример 3] Установите два стиля размера шрифта для браузера Firefox соответственно и измените их через меню «Вид» Firefox.
<!тип документа html>
<html>
<голова>
<мета-кодировка="utf-8">
<style type="text/css" title="Размер шрифта 14">
р {
text-align: left; /*текст выравнивается по левому краю*/
размер шрифта: 14 пикселей /*Размер шрифта 14 пикселей*/
line-height: 25px /*Высота строки 25 пикселей*/;
text-indent: 2em; /*Отступ первой строки на два пробела*/
ширина: 500 пикселей; /*Ширина абзаца 500 пикселей*/
поле: 0 авто; /*По центру браузера*/
}
</стиль>
<style type="text/css" title="Размер шрифта 18">
р {
text-align: left; /*текст выравнивается по левому краю*/
размер шрифта: 18 пикселей; /*Размер шрифта 18 пикселей*/
line-height: 25px /*Высота строки 25 пикселей*/;
text-indent: 2em; /*Отступ первой строки на два пробела*/
ширина: 500 пикселей; /*Ширина абзаца 500 пикселей*/
поле: 0 авто; /*По центру браузера*/
цвет: #6699FF /*Изменить цвет шрифта*/;
}
</стиль>
</голова>
<тело>
<p>Название компании «Baidu» происходит от стихотворения династии Сун «Ищу его в тысячах Baidu». (Конференц-зал компании Baidu называется «Цинъюй», что является словесной карточкой этого стихотворения). Идея значка «медвежьей лапы» возникла в результате стимуляции «охотников, патрулирующих медвежьи лапы», что очень похоже на «технологию аналитического поиска» доктора Ли, таким образом формируя концепцию поиска Baidu и в конечном итоге становясь изображением значка Baidu. </p>
</тело>
</html>Эффект демонстрации страницы показан на рисунке ниже.
В приведенном выше примере два размера шрифта определяются через <style type="text/css" title="名称"> , а в подменю «Стиль страницы» в меню «Вид» в Firefox есть два параметра: Шрифт. размер 14, размер шрифта 18. По умолчанию отображается первый написанный <style type="text/css" title="名称"> . Стиль страницы можно изменить через меню.
Метод link связывает внешние файлы таблиц стилей с документами HTML через тег <link> HTML. Это наиболее часто используемый метод на веб-сайтах в Интернете, а также наиболее практичный метод. Этот метод полностью разделяет документы HTML и файлы CSS, обеспечивает полное разделение уровня структуры и уровня представления, а также повышает масштабируемость структуры веб-страницы и удобство обслуживания стилей CSS.
[Пример 4] Используйте стиль ссылки, чтобы применять стили к HTML-коду, который легко писать и изменять.
<!тип документа html>
<html>
<голова>
<мета-кодировка="utf-8">
<title></title>
<link href="lianjie.css" type="text/css" rel="таблица стилей" />
<link href="lianjie-2.css" type="text/css" rel="таблица стилей" />
</голова>
<тело>
<p>Мною управляет файл lianjie-2.css. А как насчет вас внизу? ? </p>
<h3>Наверху файл <span>lianjie.css</span> дал мне яркое платье. </h3>
</тело>
</html>Эффект демонстрации страницы показан ниже:
В приведенном выше примере два файла CSS связаны ссылкой, и оба действительны. Именно поэтому создатель веб-сайта помещает общую часть в файл CSS и записывает новый файл стиля для текущего стиля страницы.
Код файла lianjie.css:
ч3{
шрифт-вес: нормальный; /*Отменить полужирный эффект заголовка по умолчанию*/
цвет фона: #66CC99; Установить цвет фона*/;
высота: 50 пикселей /*Установите высоту метки*/;
line-height:50px; /* Устанавливаем высоту строки метки*/
}
охватывать{
цвет: #FFOOOO /* цвет шрифта*/;
шрифт-вес:жирный; /* жирный шрифт*/
}Код файла lianjie-2.css:
р {
цвет: #FF3333; /*Настройка цвета шрифта*/;
шрифт-вес: жирный; /* жирный шрифт*/
border-bottom: пунктир 3 пикселя #009933 /* Установка нижней границы*/;
line-height: 30px /* Установить высоту строки*/;
}Связанные стили полностью разделяют код CSS и код HTML, обеспечивая разделение структуры и стиля, позволяя HTML-коду специально выстраивать структуру страницы, а работу по украшению завершает CSS.
Преимущества связывания импортированных стилей CSS:
Файлы CSS можно размещать в разных файлах HTML, чтобы унифицировать стили всех страниц веб-сайта; кроме того, размещение кода CSS в одном файле CSS упрощает управление и сокращает время кода и обслуживания всех применимых страниц; этот CSS-файл будет обновляться. Все HTML-файлы будут обновляться без необходимости получать все страницы с сервера и затем загружать их после изменения.Импорт стилей Используйте команду @import для импорта внешних таблиц стилей. Существует 6 методов записи импортированных стилей:
@import daoru.css;
@import 'даомкссс';
@import "daoru.css";
@import URL (daoru.css);
@import URL('daoru.css');
@import URL("daoru.css");[Пример 5] Импортируйте таблицы стилей lianjie.css и daoru.css и запишите цвет фона тега <body>. Обратите внимание, что импортированные стили таблицы стилей и тега <body> не могут быть отменены.
<html>
<голова>
<мета-кодировка="utf-8">
<title></title>
<style type="text/css">
@import URL (lianjie.css);
@import URL (daoru.css);
тело {цвет фона: #e4e929;
</стиль>
</голова>
<тело>
<дел>
<p>Мною управляет файл lianjie-2.css. А вы внизу? ? </p>
<h3>На куртке файл <span>lianjie.css</span> дал мне цветочное платье. </h3>
</div>
</тело>
</html>Эффект демонстрации страницы показан на рисунке ниже.
В приведенном выше примере это должен быть @import url("lianjie-2.css"); p{text-indent: 3em;} , но не p{text-indent:3em;} @import url("lianjie-2.css"); в противном случае эффект импорта будет недействительным. В файле CSS @import также необходимо разместить в начале, а стиль CSS добавить в конце, иначе он будет недействителен.
Код файла lianjie.css, такой же, как и в предыдущем примере, то есть тип ссылки.
Код файла daoru.css:
@import url("lianjie-2.css");
п {текстовый отступ: 3em;На этом завершается статья о четырех методах реализации встроенных в HTML стилей CSS. Чтобы узнать больше о встроенных в HTML стилях CSS, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать следующие соответствующие статьи. Надеюсь, вы прочитаете больше в будущем. Поддержите downcodes.com!