🗊Презентация CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) Шестаков Александр Петрович http://comp-science.narod.ru

Вводные замечания CSS (Cascading Style Sheets) – каскадные таблицы стилей – набор правил или свойств, которые описывают, как тот или иной элемент или группа элементов будут отображаться на экране монитора в браузере. Действуют два стандарта CSS – CSS1 и CSS2. В разработке – стандарт CSS3

Возможности CSS 1. Осуществлять выбор элемента или группы элементов, к которым будет применен тот или иной стиль. Это делается с помощью так называемых селекторов. Они позволяют применять стили: ко всем элементам данной группы, например, ко всем элементам <h1>; к элементам с определенным классом или id, которые указываются непосредственно в коде страницы например, к элементам <Н1 class="topHeader">; к элементам, содержащимся внутри другого элемента например, к элементу <ем> в таком контексте <H1>3аголовок с <ЕМ>выделенным</ЕМ> словом</Н1>; к первой букве элемента, например <р>, что позволяет создавать буквицы; к первой строке элемента; к посещенным, непосещенным и активным ссылкам.

Возможности CSS 2. Осуществлять создание блоков; устанавливать размеры самих блоков, отступов, полей и рамок; устанавливать тип и цвет рамок. 3. Осуществлять некоторое позиционирование блоков: выравнивание по горизонтали; обтекание блоков текстом. 4. Управлять шрифтом на странице: устанавливать начертание; устанавливать насыщенность; устанавливать размер и стиль шрифта.

Возможности CSS 5. Управлять фоном на странице: устанавливать цвет фона или фоновое изображение блока; управлять повторением фонового изображения; позиционировать фоновое изображение. 6. Писать стили для текста: устанавливать расстояние между словами и буквами; устанавливать атрибуты оформления, например подчеркивание и перечеркивание текста; выравнивать текст по горизонтали и вертикали; устанавливать высоту строки; устанавливать цвет текста. 7. Управлять списками: устанавливать тип маркера в начале каждого пункта списка; использовать в качестве маркера графические изображения; позиционировать маркеры.

Способы внедрения стиля в HTML-документ Включение непосредственно в тег Описание стиля в заголовке документа Подключение стилевого файла (описание стиля хранится в отдельном файле)

Способы внедрения стиля в HTML-документ Примеры <P style=“text-align: justify”> Этот текст будет выровнен по ширине</P> <style type=“text/css”> P {text-align: justify} </style> 3. Подключение стилевого файла st.css, где содержится полное описание стиля (записывается в заголовке документа): <link rel=“stylesheet” type=“text/css” href=“st.css”>

Свойства текста text-indent Определяет длину отступа в первой строке блока Например P {text-indent: 2cm}

Свойства текста text-align Определяет выравнивание текста в элементе Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине) Например P {text-align: justify}

Свойства текста text-decoration Определяет оформление текста Возможные значения: none (нет оформления), underline (подчеркивание), overline (линия над текстом), line-through (перечеркивание) Например H1 {text-decoration: underline}

Свойства текста letter-spacing Определяет интервал между символами текста Например H1 {letter-spacing: 3mm}

Свойства текста word-spacing Определяет интервалы между словами Например P {word-spacing: 4mm}

Свойства цвета и фона color Определяет цвет текста Примеры P {color: green} TD {color: rgb(22, 255, 22)}

Свойства цвета и фона background-color Определяет цвет фона элемента Примеры P {background-color: green} TD {background-color: rgb(22, 255, 22)}

Свойства цвета и фона background-image Определяет фоновое изображение элемента Пример body {background-image: url(“pic.gif”)}

Свойства цвета и фона background-repeat Определяет направление, по которому экран будет заполняться копиями фонового изображения Значения repeat – фоновое изображение повторяется по горизонтали и по вертикали (по умолчанию) repeat-x – фоновое изображение повторяется только по горизонтали repeat-y – фоновое изображение повторяется только по вертикали Пример body {background-repeat: repeat-x}

Свойства шрифта font-family Определяет семейство шрифта, используемое в тексте элемента. Если перечислено несколько семейств (через запятую), то приоритет определяется порядком их следования в перечислении. Пример BODY { font-family: Baskerville, "Heisi Mincho W3", serif, arial, times}

Свойства шрифта font-style Определяет начертание шрифта Значения italic – курсив oblique – наклонное начертание Пример TD {font-style: italic}

Свойства шрифта font-weight Определяет толщину шрифта Значения normal bold bolder lighter 100-900 (100 – lighter; 900 – bolder; 400 – normal) Пример H1 {font-weight: bolder}

Свойства шрифта font-size Определяет кегль (высоту символов) шрифта Значения Задаются в пунктах (пт), или в процентах от базового значения, или xx-small small medium large x-large xx-large Примеры P {font-size: 14pt}

Свойства блоков margin-top, margin-right, margin-bottom, margin-left Устанавливают ширину поля для определенной стороны элемента Пример P {margin-top: 20px} margin Body {margin: 30px 20px 10px 20px}

Свойства блоков border-top-width, border-right-width, border-bottom-width, border-left-width Устанавливают ширину рамки для определенной стороны. Рамка проходит между полем и остальной частью документа Пример P {border-top-width: 20px} border-width

Свойства блоков border-top-color, border-right-color, border-bottom-color, border-left-color Устанавливают цвет рамки для определенной стороны. Рамка проходит между полем и остальной частью документа Пример P {border-top-color: red} border-color

Свойства блоков border-top-style, border-right-style, border-bottom-style, border-left-style Устанавливают стиль рамки для определенной стороны. Рамка проходит между полем и остальной частью документа Значения none hidden dotted dashed solid double groove rigde inset outset Пример P {border-top-style: dotted} border-style

Свойства списков list-style-type Определяет стиль маркеров или номеров списка Значения disc – маркер в виде диска circle – маркер в виде окружности square – маркер в виде квадрата decimal – списки, пронумерованные с помощью чисел decimal-leading-zero – списки, нумерованные с помощью десятичных чисел с лидирующими нулями lower-roman – с помощью строчных римских цифр

Свойства списков list-style-type Значения (продолжение) upper-roman – списки, нумерованные с помощью заглавные римских цифр lower-latin – строчные латинские ASCII символы upper-latin – заглавные латинские ASCII символы lower-greek – строчные греческие буквы

Свойства списков list-style-image Определяет изображение, которое будет использовано в качестве маркера списка Значение – адрес (URL) изображения Пример UL {list-style-image: url(“1.gif”)}

Псевдоклассы Для управления элементами, не имеющих собственных тегов :link – ещё не посещённые ссылки :visited – посещенные ссылки :lang – определяет текущий язык :first-line – первая строка форматируемого абзаца :first-letter – первая буква абзаца Пример P:first-letter {font-weight: bolder}