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

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

Содержание ▲

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

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

Слайд 1

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

Lecture 4 Cascading Style Sheet (CSS) Sarsenova Zh.N.

Слайд 2

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

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. How many ways to insert CSS?

Слайд 3

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

CSS Syntax A CSS rule-set consists of selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces

Слайд 4

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

For several elements First three heading levels have blue letters: h1,h2, h3{color: blue}

Слайд 5

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

Inheritance In HTML document one element can contain other elements. Example: unordered list contained list item elements <p> can contain character formatting elements like: <b>, <i>, and <body> elements contains the whole document. Thanks to inheritance, when you apply formatting instructions to an element that contains other elements, that formatting rule applies to every one of those other elements. For example, if you set a <body> element to the font Verdana (as in the resume style sheet shown earlier), every element inside that <body> element, including all the headings, paragraphs, lists, and so on, gets the Verdana font.

Слайд 6

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

Class Selectors First, you single out specific elements in your page by giving them the same class name. Then, you tell your browser to apply formatting to all the elements that carry that class name. Make sure that the first character is always a letter. You use the class name, precedes by a period (.) h3.FancyTitle{ color: red; font-weight: bolder; } <h3 class = “FancyTitle”> Learning to Embodier </h3>

Слайд 7

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

Id Selector Like a Class selector an ID selector lets you format just the elements you choose. In HTML: <div id = “Menu”>…..</div> In CSS: #Menu{ border-width: 2px; boder-style:solid; }

Слайд 8

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

Color properties Colors in CSS are most often specified by: a valid color name - like "red" an RGB value - like "rgb(255, 0, 0)" a HEX value - like "#ff0000"

Слайд 9

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

CSS Backgrounds The CSS background properties are used to define the background effects for elements. CSS background properties: background-color --- specifies the background color of an element background-image ---sp.an image to use the background of an element(by defaults, the image is repeated so it covers the entire element.) background-repeat –repeat horizontally or vertically background-attachment – to specify the background image should be fixed(will not scroll with the rest of the page) use the background-attachment property background-position --- right, top,

Слайд 10

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

Text Alignment and Spacing

Слайд 11

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

Слайд 12

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

Alignment By default, all text on a web page lines up on the left side of the browser window. Text-align : you can center that text, line it up on the right edge, or justify.

Слайд 13

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

Spacing To adjust the spacing around any element, use the margin property. Set the size of the white space outside the border. p{ margin: 8px; } For each side of an element: margin-top margin-right margin-bottom margin-left

Слайд 14

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

Spacing All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element

Слайд 15

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

Margin-Shortland Property To shorten the code, it is possible to specify all margin properties in one property margin-top margin-right margin-bottom margin-left p { margin: 100px 150px 100px 80px; } auto value The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

Слайд 16

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

CSS Padding Padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of an element. padding-top padding-right padding-bottom padding-left

Слайд 17

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

CSS Border properties The CSS border properties allow you to specify the style, width, and color of an element's border. Border Style – specifies what kind of border to display.

Слайд 18

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

CSS border properties

Слайд 19

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

Basic Fonts Using the CSS font properties, you can choose a font family, font weight (its boldness setting), and font size

Слайд 20

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

Basic Fonts

Слайд 21

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

Examples

Слайд 22

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

Generic Family generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial")

Слайд 23

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

Font Size The font-size property sets the size of the text. Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs. The font-size value can be an absolute, or relative size.

Слайд 24

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

Слайд 25

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

Font Weight The font-weight property specifies the weight of a font:

Слайд 26

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

Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Слайд 27

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

CSS line-height Property The line-height property specifies the line height.

Слайд 28

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

Text-transform Property The text-transform property controls the capitalization of text.

Слайд 29

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

List-style Property The list-style shorthand property sets all the list properties in one declaration. The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image. If one of the values above are missing, e.g. "list-style:circle inside;", the default value for the missing property will be inserted, if any.

Слайд 30

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

Text-decoration Property The text-decoration property specifies the decoration added to text

Слайд 31

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

Width Property The width property sets the width of an element.

Слайд 32

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

CSS height Property The height property sets the height of an element. Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element!

Слайд 33

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

The CSS Box Model The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Слайд 34

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

The CSS Box Model Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

Слайд 35

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

Example

Слайд 36

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

The position Property The position property specifies the type of positioning method used for an element. There are 4 different position values:

Слайд 37

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

Position: Static HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.

Слайд 38

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

position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Слайд 39

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

CSS clear Property The clear property specifies on which sides of an element floating elements are not allowed to float.

Слайд 40

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

Overflow Property The overflow property specifies what happens if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.

Слайд 41

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

Overflow property

Слайд 42

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

z-index Property The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.