CSS (Cascading Styel Sheet) — это серия правил форматирования, которые управляют внешним видом веб-страниц. Это один из важнейших инструментов веб-дизайна. Далее мы начнем изучать основной синтаксический формат CSS.
1. Правила определения CSS
Таблица каскадных стилей представляет собой полный текстовый файл, обычно используемый как отдельный файл с расширением «css». Его содержимое содержит набор правил, которые сообщают браузеру, как упорядочивать и отображать содержимое в определенных правилах определения CSS HTML. состоят из трех частей: селекторов, атрибутов и значений атрибутов. Синтаксис следующий:
Синтаксис: селектор {свойство: значение}
↑ ↑ ↑
селектор {свойство: значение}
Стили CSS состоят из ряда правил, которые анализируются веб-браузерами и затем применяются к соответствующим элементам HTML-документа. Правила стиля CSS состоят из трех частей: селекторов, атрибутов и значений:
1. Селектор: Селектор — это тег html, определяющий стиль. После того, как тег html определен как селектор, содержимое под тегом на странице html будет изменено в соответствии с правилами, определенными CSS.
2. Атрибут. Имя стиля, которое вы хотите установить для элемента HTML, относится к содержимому, которое будет изменено в селекторе. К общим атрибутам относятся атрибуты шрифта, атрибуты цвета, атрибуты текста и т. д. Ниже представлена таблица стилей, которую мы определили.
3. Значение. Значение атрибута, состоящее из числового значения и единицы измерения или ключевого слова, используется для управления эффектом отображения определенного атрибута.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}В этой таблице стилей:
1. @charsetgb2312 означает использование стандартного китайского набора символов.
2. body и p — это два тега в html, и для этих двух тегов задано три стиля, а именно:
семейство шрифтов: указывает тип шрифта.
"> 2. Встроить таблицу стилей
Таблица стилей CSS, определенная внутри страницы Html, называется встроенной таблицей стилей CSS, то есть в головной части HTML-документа используется тег стиля, и в теге определяется ряд правил CSS.
Синтаксис: <head><styletype=text/css><!--......--></style></head>
проиллюстрировать:
<style> указывает начало таблицы стилей CSS, а конечный знак — </style>. В начальный знак <style> вы можете добавить некоторые атрибуты по мере необходимости, например атрибут type=text/css в приведенном выше примере. столбец, который указывает, что таблица стилей CSS принимает тип MIME, особенностью этого типа является то, что, когда браузер не поддерживает код CSS, код CSS фильтруется, чтобы браузер не отображал код CSS в виде. исходный код. Чтобы обеспечить большую надежность, снова добавьте идентификатор комментария <!--...--> в таблицу стилей. В этом идентификаторе комментария определены правила CSS.
Пример 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Встроенная таблица стилей CSS</title><styletype=text/css><!--@charsetgb2312 body; {шрифт-фа mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> Птицы с тысяч гор летят по тысячам троп, и человеческие следы стираются<p>Птицы с тысяч гор летают по тысячам троп, и человеческие следы стираются</p></body></html>3. Ссылка на внешние таблицы стилей.
Внешняя таблица стилей CSS — это внешний файл с суффиксом .css. Определение внешней таблицы стилей может применяться к нескольким страницам. Используя тег ссылки на странице HTML, вы можете подключить внешнюю таблицу стилей CSS. Синтаксис следующий:
грамматика:
<linkrel=stylesheethref=*.css» type=text/css>
параметр:
1. Атрибут rel указывает, как таблица стилей будет сочетаться с документом HTML. Значение rel: Таблица стилей, указывающая на указание внешней таблицы стилей.
2. *.css — это файл таблицы стилей, сохраняемый отдельно.
Пример 2. Определите внешний CSS-файл p2.css, а затем подключите его к файлу t2.htm.
Пример 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Ссылка на внешнюю таблицу стилей</title><styletype=text/css><!--@charsetgb2312; тело {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Дорогой, ты летаешь медленно, остерегайся колючей розы впереди<p>Дорогая, открой рот, аромат цветов на ветру опьянит тебя</p></body></html>4. Встроенные таблицы стилей
Встроенные стили относятся к таблицам стилей CSS, определенным в тегах HTML. Обычно используемые теги HTML — это в основном некоторые элементы BODY, такие как: <p>, <h2>, <ul>, <div> и т. д. Ниже приведены примеры встроенных стилей.
Пример 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Документ без названия</title></head><body><divstyle=color:blue;font-size :30px;>Аромат цветов на ветру опьянит</div><pstyle=color:#ff0000;font-style:italic;>Аромат цветов на ветру опьянит</p>< /body></html>
5. Импортируйте внешние таблицы стилей.
Импорт внешней таблицы стилей означает, что в html-файле установлена встроенная таблица стилей, но необходимо использовать некоторые настройки внешней таблицы стилей. В этом случае вы можете импортировать внешнюю таблицу стилей в <style> и использовать @. импортировать, как показано в примере ниже.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Объявление других таблиц стилей--></style></head></body>..... .</body></html>
Среди них @import url(mystyle.css); означает импорт таблицы стилей mystyle.css. Импортированная внешняя таблица стилей должна находиться в начале таблицы стилей, над внутренней таблицей стилей.
Пример 4
Определите внешний файл CSS p4.css, а затем импортируйте его в файл t4.htm.
Пример 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Импортировать внешнюю таблицу стилей</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Тысячи птиц летают через тысячи гор, и не видно никаких следов людей.<p>Тысячи птиц летают через тысячи гор, и не видно никаких следов людей.</p></body></html>6. Наследование таблиц стилей CSS
В таблице стилей CSS некоторые атрибуты дочернего тега наследуют атрибуты родительского тега. Например, тег p является дочерним элементом тела тега. Если тег p не устанавливает атрибут цвета шрифта, содержимое. in p будет использовать цвет в теле значения, следующий пример иллюстрирует эту ситуацию.
Пример 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Встроенная таблица стилей CSS</title><styletype=text/css><!--@charsetgb2312 body; { семейство шрифтов:宋体;размер шрифта:20px;цвет:#FF0000;}p{семейство шрифтов:宋体;размер шрифта:30px;}--></style></head><body>千山鸟Пролетая тысячи троп, стираются следы человеческие<p>Тысячи гор, тысячи троп летают птицы, стираются человеческие следы</p></body></html>7. Установите несколько элементов
CSS позволяет применять один и тот же формат к нескольким тегам. При использовании в качестве селектора каждый тег разделяется запятой, как показано в следующем примере.
Пример 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Встроенная таблица стилей CSS</title><styletype=text/css><!--@charsetgb2312; ,х2,х3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Тысячи птиц летают через тысячи гор, и тысячи людей исчезают</h1> <h2>Птицы с тысяч гор перелетают тысячи троп, исчезая без следов людей</h2><h3>Птицы с тысяч гор перелетают тысячи троп, исчезая без следов людей</h3><p>Птицы с тысяч гор летят тысячи троп, бесследно исчезая с людьми</p></body></html>