HTML может предоставлять только некоторую информацию и имеет очень ограниченные возможности по производительности. Его необходимо использовать в сочетании с CSS, чтобы сделать страницу более красивой. На веб-странице весь код стилей можно переместить из HTML-документа в отдельную таблицу стилей.
Стили CSS можно вводить в документы HTML как отдельные файлы (файлы типа .css) или писать непосредственно в документах HTML. Их можно условно разделить на следующие четыре метода:
1. Встроенная таблица стилей
Встроенное: сосредоточьте стили CSS в паре тегов <style></style> пары тегов <head></head> веб-страницы;
Добавьте стили CSS в тег <style> в теге <head> HTML. Стили CSS, определенные с помощью встроенных таблиц стилей, можно использовать только на текущей веб-странице.
<!DOCTYPEhtml><html><head><title>Встроенный стиль</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;</style>< / head><body><h1>Стиль</h1></body></html>Поскольку встроенная таблица стилей должна определять стиль CSS внутри документа HTML, это приведет к увеличению размера документа, а когда другие документы также должны использовать тот же стиль во встроенной таблице стилей, его нельзя будет ввести в другие документы и должно быть переопределено в других документах, что приведет к избыточности кода и не способствует дальнейшему обслуживанию.
2. Встроенные стили
Встроенный: также называемый встроенным, стиль CSS задается в атрибуте стиля тега. Этот подход не отражает преимуществ CSS;
Встроенный стиль определяет информацию о стиле непосредственно в атрибуте стиля тега HTML. Поскольку встроенный стиль определяется внутри тега, он действителен только для того тега, в котором он расположен.
<!DOCTYPEhtml><html><head><title>Встроенный</title></head><body><h1style=color:maroon;margin-left:40px>Встроенный</h1></body ></html >Хотя встроенный стиль легко может придать HTML-тегам стили CSS, его недостатки также весьма очевидны, и не рекомендуется использовать его слишком часто.
(1) Определение встроенных стилей требует определения атрибута стиля в каждом теге HTML, что очень неудобно;
(2) Будьте особенно осторожны при использовании двойных или одинарных кавычек во встроенных стилях, поскольку атрибуты тегов HTML обычно используют двойные кавычки для переноса значения атрибута, например <input type=text>;
(3) Стили, определенные во встроенных стилях, нельзя повторно использовать где-либо еще;
(4) Встроенные стили очень неудобны при дальнейшем обслуживании, поскольку веб-сайт обычно состоит из множества страниц, и при изменении стиля страницы страницы необходимо изменять одну за другой;
(5) Добавление слишком большого количества встроенных стилей приведет к увеличению размера HTML-документа.
3. Внешние таблицы стилей
Тип ссылки: Как и четвертый тип импорта, они оба называются внешним типом или типом внешней ссылки. Используйте ссылку для ссылки на внешние файлы CSS;
Внешние таблицы стилей — наиболее распространенный и рекомендуемый способ ссылки на CSS. Вам нужно всего лишь определить стиль CSS в файле формата .css, а затем использовать тег HTML <link>, чтобы применить файл стиля формата .css к HTML. документ.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Внешняя таблица стилей</h1></body>< / html>
Поскольку стиль CSS определен в отдельном файле формата .css, на него можно ссылаться на нескольких страницах. Если вы хотите изменить стиль веб-страницы, вам нужно изменить только этот файл стиля CSS, что очень удобно.
4. Импортируйте таблицу стилей.
Импортировано: используйте @import для ссылки на внешние файлы CSS;
Вы также можете использовать @import для ссылки на внешние таблицы стилей, что аналогично использованию тега <link>. Сначала создайте общий файл style.css и сначала импортируйте все стили в style.css.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Внешняя таблица стилей</h1></body></html >
стиль.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (css от 1 до 4 одинаковые, все они добавляют стили)
.top1{тип списка-стиля: нет; поле: 0; дополнение: 0;}