Полное название CSS — Каскадная таблица стилей. Каскадные таблицы стилей.
1. Четыре метода реализации CSS:
1. Встроенный тип:
2. Тип внешней ссылки:
3. Импортированный тип
4. Тип атрибута:
2. Определение CSS:
Выберите объект {атрибут 1: значение 1; атрибут 2: значение 2; атрибут 3: значение 3; атрибут n: значение n...}
нравиться:
тд {размер шрифта: 12 пикселей; цвет: # FFFF00}
.myname{размер шрифта:12px;цвет:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: подчеркивание;}
Три объекта выделения.
1. Селектор HTML (имя тега)
2.селектор классов (.NAME)
3. Селектор идентификатора (#IDname)
4. Специальные объекты (a:hover a:link a:visited a:active)
1.HTML-селектор
Селектор HTML — это символ разметки HTML, например: DIV, TD, H1. Областью действия селектора HTML являются все теги на всех страницах, к которым применяется стиль.
пример:
ТД
{
цвет: #FF0000;
}
-->
Примечание. Функция кода — автоматически превращать текст в ячейках таблицы в красный цвет.
2.селектор классов
Чтобы определить селектор класса, вам нужно добавить к его имени точку "." Например, «.classname». Областью действия селектора классов являются все теги, содержащие «class="classname"».
пример:
.fontRed
{
цвет: #FF0000;
}
-->
Примечание. Во втором нет «class="fontRed"», поэтому текст не становится красным.
3. Селектор идентификатора
Чтобы определить селектор идентификатора, вам нужно добавить к его имени точку «#». Например, «#IDимя». Областью действия селектора идентификаторов являются все теги, содержащие "ID="имя класса"".
Пример:
#fontRed
{
цвет: #FF0000;
}
-->
Примечание. Во втором нет «ID="fontRed"», поэтому текст не становится красным.
4. Специальные объекты. Для связанных объектов задаются четыре типа специальных объектов:
a:наведите гиперссылку при наведении указателя мыши
a:link обычная, недоступная гиперссылка
a:посещенная посещенная гиперссылка
Областью действия специального объекта a:active гиперссылка при щелчке мыши являются все маркеры (это предложение подлежит обсуждению, поскольку скоро появится метод отмены слова «все»).
пример:
а: наведите курсор
{
цвет: #0000FF;
оформление текста: подчеркивание;
}
-->
Обратите внимание на следующее, это очень полезно! ! !
a.classname:наведите указатель мыши
a#IDname:наведите указатель мыши
Эти два метода записи используются с .classname и #IDname соответственно. Его областью действия становятся все теги, содержащие "class="classname"" или "ID="IDname"". Этот метод написания может помочь вам добиться нескольких эффектов a:hover на одной и той же странице. Вы можете увидеть разницу между текстом панели навигации на домашней странице Yiwang и обычным заголовком статьи, когда наводите на него курсор мыши.
4. Применение:
1. Автоматически применять маркеры
2. Специальный класс class="NAME"
3.ID ID="IDимя"
4. Специальные объекты применяются автоматически. 5. Свойства CSS.
Существует множество свойств CSS, таких как цвет, который наиболее часто используется выше и указывает цвет текста. background-color представляет цвет фона. Это самое важное, но так как это не сложно, достаточно обратиться к соответствующему мануалу.
Свойства тегов CSS/Справочник по свойствам Ниже приведен список поддерживаемых в настоящее время свойств тегов таблиц стилей (CSS).
Атрибуты/атрибуты тегов CSS,
атрибуты поведения,
направление шрифта и текстового атрибута.
направление [di?rek??n] руководство
шрифт
семейство шрифтов
размер шрифта
стиль шрифта
вариант шрифта [?v??ri?nt] вариант
вес шрифта [вес] вес
режим ime-mode [m?ud]
макетная сетка [?leiaut] набор текста [ɡrid] сетка
макет-сетка-символ [t?ɑ:](сжечь..)
линия сетки макета
режим макета-сетки
тип сетки макета
межбуквенный интервал [?let?] буквенный [?speisi?] интервал
разрыв строки [брейк] разрыв
line-height [хаит] высота
минимальная высота
Ruby-align [?ru:bi] рубин
рубиновый свес [??uv??hæ?] торчит
рубиновая позиция [p??zi??n] позиционирование
выравнивание текста
text-autospace [speis] автоматический интервал
text-decoration [?dek??rei??n] украшение
text-indent [in?dent] наборный отступ
выравнивание текста по выравниванию [?d??stifai]
текст-кашида-пространство
text-overflow [??uv??fl?u] переполнение
text-transform [træns?f?:m] изменить
позиция подчеркивания текста
юникод-биди [?би:ди]
вертикальное выравнивание
пробел
разрыв слова
перенос слов
режима письма
и прикрепление фона
цвет фона
фоновое изображение
фоновая позиция
фон-позиция-x
фоновая позиция-y
фоновое повторение
Граница атрибута
цветового
макета
граница-дно
цвет нижней границы
стиль границы внизу
ширина нижней границы
граница-коллапс*
цвет границы
левая граница
цвет левой границы
левая граница
ширина левой границы
правая граница
граница правого цвета
стиль границы справа
ширина границы справа
бордюрный стиль
граница-верх
граница-верхний цвет
стиль границы-топа
ширина верхней границы
ширина границы
прозрачный
плавать
поток макета
допуск
поле-дно
поле слева
маржа справа
маржа-верх
прокладка
отступ-дно
отступ слева
отступ справа
обивка-топ
полоса прокрутки-3dlight-цвет
цвет полосы прокрутки
полоса прокрутки-базовый цвет
полоса прокрутки-темная тень-цвет
цвет полосы прокрутки
цвет полосы прокрутки
цвет тени полосы прокрутки
раскладка таблицы
Стиль
отображения атрибута классификации
масштабирования
изображение в стиле списка
позиция в стиле списка
нижний
клип
атрибута позиционированияlist-style-type
высота
левый
переполнение
переполнение-х
переполнение-y
позиция
верно
вершина
видимость
ширина
Страница атрибутов печати
z-index
pageBreakAfter
Атрибут фильтра
pageBreakBefore
, псевдокласс фильтра и другие атрибуты: active
@charset
курсор
: первая буква
: первая линия
@font-face
:наведите курсор
@импорт
!важный
:связь
@медиа
@страница
:посетил
способа достижения эффектов границы изображения CSS
. Более простой метод — напрямую определить границу (рамку) для img в файле CSS. Например, я определил ее в CSS:
img.framed {
отступ: 6 пикселей;
граница: сплошная #CCCCCC толщиной 1 пиксель;
цвет фона: #FFFFFF }
Затем в файле HTML или при обновлении веб-страницы использование class="framed" для определения встроенного изображения будет иметь соответствующий эффект границы.
Преимущество описанного выше метода в том, что он относительно прост, но достигаемый эффект относительно монотонен и не обязательно позволяет достичь удовлетворительных результатов и некоторых специальных эффектов, таких как тени, изменение цвета и т. д. Это можно очень хорошо сделать, используя замену изображений и преобразование позиционирования. Я не буду здесь вдаваться в подробности. Я считаю, что как только вы изучите основы CSS, вам не составит труда бросить вызов более продвинутым эффектам CSS.
Разбираемся в синтаксисе CSS для границ таблиц.
Мы знаем, что Dreamweaver отлично справляется с созданием таблиц, но в какой-то момент его все равно приходится комбинировать с CSS для достижения некоторых конкретных эффектов. Давайте сначала разберемся в синтаксисе CSS для границ таблиц. а затем представим его отдельно. Как украсить границу таблицы с помощью CSS.
Специальныйсинтаксис CSS для границ таблицы
включает в себя: ширину верхней границы, ширину правой границы, ширину нижней границы, ширину левой границы, ширину границы, цвет границы, стиль границы, верхнюю границу, нижнюю границу, левую границу, правую границу, границу, ширину, высота, соответствующие метки и т. д.
1. Синтаксис ширины верхней границы
: border-top-width: <значение>
Допустимые значения: тонкий | средний | толстый | <длина>
Начальное значение: средний.
Применимо к: всем объектам.
Обратная совместимость: Нет.
Атрибут ширины верхней границы используется для указания. a Ширина верхней границы элемента. Значением может быть одно из трех ключевых слов, ни на одно из которых не влияет размер или длина шрифта, и его можно использовать для реализации пропорциональной ширины. Отрицательные значения не допускаются. Его также можно использовать для сокращения верхней границы, ширины границы или свойств границы.
2. Синтаксис ширины правой границы
: border-right-width: <значение>
Допустимые значения: тонкий | средний | толстый | <длина>
Начальное значение: средний.
Применимо к: всем объектам.
Обратная совместимость: нет.
Атрибут ширины правой границы используется для указания. элемент Ширина правой границы. Значением может быть одно из трех ключевых слов, ни на одно из которых не влияет размер или длина шрифта, и его можно использовать для реализации пропорциональной ширины. Отрицательные значения не допускаются. Также может использоваться для сокращения правой границы, ширины границы или свойств границы.
3. Синтаксис ширины нижней границы
: border-bottom-width: <значение>
Допустимые значения: тонкий | средний | толстый | <длина>
Начальное значение: средний.
Применимо к: всем объектам.
Обратная совместимость: Нет.
Атрибут ширины нижней границы используется для указания. элемент Ширина нижней границы. Значением может быть одно из трех ключевых слов, ни на одно из которых не влияет размер или длина шрифта, и его можно использовать для реализации пропорциональной ширины. Отрицательные значения не допускаются. Его также можно использовать для сокращения нижней границы, ширины границы или свойств границы.
4. Синтаксис ширины левой границы
: border-left-width: <значение>
Допустимые значения: тонкая | средняя | толстая | <длина>
Начальное значение: средняя
Применимо к: всем объектам
Обратная совместимость: Нет
Атрибут ширины левой границы используется для указания. элемент Ширина левой границы. Значением может быть одно из трех ключевых слов, ни на одно из которых не влияет размер или длина шрифта, и его можно использовать для реализации пропорциональной ширины. Отрицательные значения не допускаются. Его также можно использовать для сокращения левой границы, ширины границы или свойств границы.
5. Синтаксис ширины границы
: border-width: <значение>
Допустимые значения: [ тонкий | средний | <длина> ]{1,4}
Начальное значение: Не определено
Применимо к: Всем объектам
Обратная совместимость: Нет
Атрибут ширины границы Устанавливает границы элемента с одним-четырьмя значениями, где значением является ключевое слово или длина. Отрицательные длины не допускаются. Если заданы все четыре значения, они применяются к стилям верхней, правой, нижней и левой границы соответственно. Если задано значение, оно будет применено к каждому ребру. Если даны два или три значения, пропущенное значение равно противоположной стороне. Это свойство является сокращением свойств верхнего, правого, нижнего и левого. Вы также можете использовать сокращенный атрибут границы.
6. Синтаксис цвета границы
: border-color: <value>
Допустимые значения: <color>{1,4}
Начальное значение: Значение атрибута цвета
применимо к: Всем объектам.
Обратная совместимость: Нет.
Атрибут цвета границы устанавливает границу. цвет элемента. Вы можете использовать от одного до четырех ключевых слов. Если заданы все четыре значения, они применяются к стилям верхней, правой, нижней и левой границы соответственно. Если задано значение, оно будет применено к каждому ребру. Если даны два или три значения, пропущенное значение равно противоположной стороне. Вы также можете использовать сокращенный атрибут границы.
7. Синтаксис стиля границы
: <значение>
Допустимые значения: [нет | пунктир | гребень | вставка | начало]{1,4}
Начальное значение: нет
Применимок
: Все объекты
Совместимо с: НетСвойство border-style используется для установки стиля границы элемента. Это свойство необходимо использовать для указания видимой границы. Вы можете использовать от одного до четырех ключевых слов. Если заданы все четыре значения, они применяются к стилям верхней, правой, нижней и левой границы соответственно. Если задано значение, оно будет применено к каждому ребру. Если даны два или три значения, пропущенное значение равно противоположной стороне. Вы также можете использовать сокращенный атрибут границы.
нет: нет стиля;
пунктир: пунктирная линия;
пунктир: пунктирная линия;
сплошная: сплошная линия;
двойной: двойная линия;
канавка: линия канавки;
хребет: хребет;
вставка: вогнутая;
Начало: выпуклое.
8. Синтаксис верхней границы
: border-top: <значение>
Допустимые значения: <ширина верхней границы> || <стиль границы> || <цвет>
Начальное значение: Не определено
Применимо к: Всем объектам
Обратная совместимость: Нет
Атрибут верхней границы сокращение для установки ширины, стиля и цвета границы элемента. Обратите внимание, что можно указать только один стиль границы. Вы также можете использовать сокращенный атрибут границы.
9. Синтаксис правой границы
: border-right: <значение>
Допустимые значения: <ширина правой границы> || <стиль границы> || <цвет>
Начальное значение: Не определено
Применимо к: Все объекты
Обратная совместимость: Нет
Атрибут правой границы сокращение для установки ширины, стиля и цвета правой границы элемента. Обратите внимание, что можно указать только один стиль границы. Вы также можете использовать сокращенный атрибут границы.
10. Синтаксис нижней границы
: border-bottom: <значение>
Допустимые значения: <Ширина нижней границы> || <Стиль границы> || <Цвет>
Начальное значение: Не определено
Применимо к: Всем объектам
Обратная совместимость: Нет
Атрибут нижней границы сокращение для установки ширины, стиля и цвета нижней границы элемента. Обратите внимание, что можно указать только один стиль границы. Вы также можете использовать сокращенный атрибут границы.
11. Синтаксис левой границы
: border-left: <значение>
Допустимые значения: <ширина левой границы> || <стиль границы> || <цвет>
Начальное значение: Не определено
Применимо к: Всем объектам
Обратная совместимость: Нет
Свойство левой границы сокращение для установки ширины, стиля и цвета левой границы элемента. Обратите внимание, что можно указать только один стиль границы. Вы также можете использовать сокращенный атрибут границы.
12.
Синтаксис границы: граница: <значение>
Допустимые значения: <ширина границы> || <стиль границы> || <цвет>
Начальное значение: Не определено
Применимо к: Всем объектам
Обратная совместимость: Нет
Свойство границы — это параметр. ширина, стиль и цвет границы элемента.
Примеры объявлений границ:
H2 { border: Groove 3em }
A: ссылка { граница: сплошная синяя }
A: посещено { граница: тонкая пунктирная # 800080 }
A:active { border: Thick Double Red }
Атрибут border может устанавливать только четыре типа границ; он может задавать ширину и стиль только одного набора границ; Чтобы задать разные значения для четырех границ элемента, создатели веб-страницы должны использовать один или несколько атрибутов, таких как: верхняя граница, правая граница, нижняя граница, левая граница, цвет границы, ширина границы, стиль границы, Ширина верхней границы, ширина правой границы, ширина нижней границы или ширина левой границы.
13. Синтаксис ширины
: ширина: <значение>
Допустимые значения: <длина> | <процент> | auto
Начальное значение: auto
Применимо к: уровню блока и элементам замены.
Обратная совместимость: нет.
Начальное значение атрибута ширины — «auto», то есть — это исходная ширина элемента (есть ширина самого элемента). Процент относится к ширине родительского элемента. Отрицательные значения длины не допускаются.
14.
Синтаксис высоты: высота: <значение>
Допустимые значения: <длина> auto
Начальное значение: auto
Применимо к: уровню блока и элементам замены.
Обратная совместимость: нет.
Начальное значение атрибута высоты — «auto», что соответствует значению элемента. Исходная высота (есть высота самого элемента). Процент относится к ширине родительского элемента. Отрицательные значения длины не допускаются.
15. Что касается метки таблицы меток
, определение всего стиля таблицы должно быть помещено в таблицу;
метка ячейки td, определение стиля ячейки должно быть помещено в td.
BODY — основной элемент веб-документа. Все видимые диапазоны находятся внутри элемента <BODY>.
КНОПКА Кнопка поля формы может иметь вид «отправить», «сбросить» и т.п.
DIV определяет область на веб-странице. Высота, ширина или абсолютное положение этой области известны.
Элемент изображения IMG, укажите источник изображения, указав атрибут «src».
Поле формы ввода INPUT
Эффект перемещения субтитров MARQUEE
SPAN определяет область на веб-странице. Высота, ширина или абсолютное положение этой области известны.
Текстовая область TEXTAREA
Текстовое поле многострочного ввода TFOOT
Ячейка заголовка таблицы TH
Название таблицы THEAD
Строка таблицы TR