CSS (Cascading Style Sheets) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему CSS (Cascading Style Sheets). Доклад-сообщение содержит 29 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

CSS (Cascading Style Sheets) Шестаков Александр Петрович

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

Возможности CSS 1. Осуществлять выбор элемента или группы элементов, к которым будет применен тот или иной стиль. Это делается с помощью так называемых селекторов. Они позволяют применять стили: ко всем элементам данной группы, например, ко всем элементам ; к элементам с определенным классом или id, которые указываются непосредственно в коде страницы например, к элементам ; к элементам, содержащимся внутри другого элемента например, к элементу в таком контексте 3аголовок с выделенным словом; к первой букве элемента, например , что позволяет создавать буквицы; к первой строке элемента; к посещенным, непосещенным и активным ссылкам.

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

Способы внедрения стиля в HTML-документ Примеры Этот текст будет выровнен по ширине P {text-align: justify} 3. Подключение стилевого файла st.css, где содержится полное описание стиля (записывается в заголовке документа):

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

Свойства блоков 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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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