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

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

Содержание ▲

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

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

Слайд 1

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

CSS

Слайд 2

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

CSS Style sheet - a collection of rules about how to present an HTML document In HTML it is possible to add colors, fonts and other styles to the web pages that you build, however this is not recommended and HTML should be used for structure only. To add colors, fonts, etc. we will use Cascading Style Sheets, also known as CSS.

Слайд 3

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

Style rules A style sheet is made up of Style Rules. Each Style Rule has three parts, a selector, a property and a value: selector {property : value} For multiple properties you separate them using a semicolon; selector {property1 : value1; property2 : value2} selectors - "select" the elements on an HTML page that are affected by the style rule(s) type, selects all elements of a certain type on the page e.g. h1 { color : green} selects all the heading 1s and turns them green class, selects all elements of the class you have specified and applies the style to only those elements .classname { color : red}

Слайд 4

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

How to link CSS file in your HTML code <link rel="stylesheet" type="text/css" href="style.css"> (conceptual.css) Новый текстовый документ -> Сохранить как -> Все файлы -> style.css

Слайд 5

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

Псевдоэлементы и псевдоклассы (не успели в классе) first-letter - задает стиль первой букве слова. Пусть на нашей html-странице есть какой-нибудь абзац: p:first-letter{ color:red; }

Слайд 6

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

Подобные вещи просто перечислю для красоты, вдруг кому понадобится first-line - задает стиль первой строке абзаца. Выделим первую строку нашего абзаца синим цветом. Для этого в таблице стилей напишем: p:first-line{ color:blue; }

Слайд 7

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

Background background-color - задает цвет фона. body{ background-color:#243CED; } background-image - задает фоновое изображение. body{ background-image:url(https://i.ytimg.com/vi/yTwRGr6c-xg/maxresdefault.jpg); }

Слайд 8

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

Background background-repeat - задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. repeat - повторять изображение по горизонтали и вертикали. repeat-x - повторять изображение только по горизонтали. repeat-y - повторять изображение только по вертикали. no-repeat - не повторять изображение.

Слайд 9

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

Background background-attachment - указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения: scroll - фон прокручивается вместе с текстом. Это значение используется по умолчанию. fixed - фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.

Слайд 10

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

Background background-position - задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. body{ background-image:url(picture.gif); background-repeat:no-repeat; background-color:#243CED; background-position:10% 30%; color:yellow; }

Слайд 11

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

Сокращенная запись свойства background body{ background:url(https://i.ytimg.com/vi/yTwRGr6c-xg/maxresdefault.jpg) no-repeat #33CCFF center top; color:yellow; }

Слайд 12

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

Text and font Text color: body{ color:green; } h1{ color:#FF0000; } h2{ color:rgb(255,0,0); }

Слайд 13

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

Font-family body{ font-family: Verdana, sans-serif; } Serif - шрифты с засечками, например, Times New Roman. Sans-serif - шрифты рубленные, без засечек, например, Arial. Monospace - моноширинные шрифты, например, Courier New. Cursive - курсивные шрифты, например, Calisto MT. Fantasy - декоративные шрифты, например, Torhok.

Слайд 14

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

Font-style Это свойство css задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). HTML-code Текст в параграфе с идентификатором sn. Текст в параграфе с идентификатором so. Текст в параграфе с идентификатором si. CSS-code p#sn { font-style:normal; } p#so { font-style:oblique; } p#si { font-style:italic; }

Слайд 15

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

Font-weight Это свойство css задает толщину букв шрифта. В качестве значений выступают числа: 100, 200, 300, 400, 500, 600, 700, 800 и 900. А также ключевые слова: normal (нормальный), bold (полужирный), bolder (более жирный по отношению к базовому, унаследованному от предка) и lighter (менее жирный по отношению к базовому, унаследованному от предка). Нужно просто посмотреть разные толщины но в принципе вряд ли пригодится

Слайд 16

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

Text-decoration none - у текста нет оформления. underline - текст подчеркивается. overline - текст надчеркивается линией, расположенной над текстом. line-through - текст отображается зачеркнутым. blink - текст становится мигающим

Слайд 17

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

Text-align left - выравнивание по левому краю. center - выравнивание по центру. right - выравнивание по правому краю. justify - выравнивание по ширине.

Слайд 18

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

Text-indent Это свойство отвечает за отступы в абзацах. Отступы задаются в единицах измерения и %, могут быть как положительными (красная строка), так и отрицательными (висячая строка). p{ text-indent:1.2em; }

Слайд 19

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

Text-transform Это свойство отвечает за видоизменение текста, точнее за смену регистра. Используются следующие значения: capitalize - меняет первую букву каждого слова на заглавную. uppercase - меняет все буквы на заглавные. lowercase - меняет все буквы на строчные. none - изменений не происходит.