Cascading Style Sheets

Cascading Style Sheets
CSS Cascading Style Sheets

Web-Browser The main purpose of the browser is to display web resources. To do this, a request is sent to the server, and the result is displayed in the browser window. Under the resources are basically meant HTML-documents, but it can also be a PDF-file, picture or other content.

The main components of the web browser
User interface Display module (web browser engine) - responsible for displaying the requested content on the screen Network components - designed to perform network calls such as HTTP requests The executive part of the user interface is used to draw the main widgets (form elements) JavaScript interpreter - used to parse and execute JavaScript code A data warehouse is necessary for the persistence of processes.

Display Modules Trident - proprietary engine Microsoft Internet Explorer; Is used by many programs for Microsoft Windows. Gecko - open engine project Mozilla; It is used in a large number of programs based on Mozilla code (Firefox browser, Thunderbird mail client, SeaMonkey suite of programs). KHTML - developed within the framework of the KDE project, used in the Konqueror browser and served as the basis for WebKit. WebKit - engine for the browser Apple Safari, included in the operating system Mac OS X, and the browser Google Chrome. Built-in Qt library. Presto - proprietary engine, developed by Opera Software; Was the base for Opera browser before the transition to Blink, and also licensed for use by a number of third-party companies. Blink - Google Chrome browser engine with 28 versions and Opera 15. Is a reworked WebKit. Edge is the new engine from Microsoft for its new Edge browser.

Cascading Style Sheets
CSS is a style language that defines the display of HTML documents. CSS allows you to work with: fonts; color; fields; lines; height; width; background images; positioning of elements many other things.

CSS using benefits managing the display of multiple documents using a single style sheet; more precise control over the appearance of the pages; various representations for different media (screen, printing, etc.); sophisticated and well-designed design technique.

CSS Rules CSS rules contain style definitions for an element or group of elements. They use the following syntax: selector { property: value; } Selector defines to which HTML tag (tags) the property is applied

Method 1: Through the style attribute
<html> <head> <title>Example</title> </head> <body> <p style="color: #FF0000;">This is a red text</p> </body> </html>

Method 2: Internal style
<html> <head> <title>Example</title> <style type=“text/css”> p { color: #FF0000; } </style> </head> <body> <p>This is a red text</p> </body> </html>

Method 3: @Import @import url("имя файла") [types];
<html> <head> <title>Example</title> <style type=“text/css”> @import url(styles.css) all; </style> </head> <body> <p>This is a red page</p> </body> </html> Not supported by all browsers; Slows down the download page.

Method 4: External (Link to the stylesheet)
<html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <p>This is a red text</p> </body> </html>

Absolute dimensions in (inches) - inches (1 inch = 2.54 cm) cm (centimeters) - centimeters mm (millimeters) - millimeters pt (points) - point (1 point = 1/72 of an inch) pc (picas) - peak (1 peak = 12 counts) px (pixel units) - pixels (1 pixel = 1/96 inch = 0.26 mm)

Relative dimensions % - percentage of the sizes specified for the parent element Em - the measured value depends on the font size of the current element (it is set through the font-size attribute). When it is not explicitly specified, the size of the text that is embedded in the browser is used. Therefore, 1em is initially equal to the font size set in the browser by default. Ex - this argument is defined as the height of the character "x" in lowercase. Ex is bound to the size of the font specified in the browser by default, if the parent element has the attribute "font-size", then it is bound to it.

Hierarchical Selectors (1)
E1 E2 {...} - for the element / class / identifier E2 located in the element / class / identifier E1 (any level of nesting); E1>E2 {...} - for the element / class / identifier E2 located in the element / class / identifier E1 (the first level of nesting);

Hierarchical Selectors (2)
E1~E2 {...} - for the element / class / identifier E2 following the element / class / identifier E1; E1+E2 {...} - for the element / class / identifier E2 immediately following the element / class / identifier E1;

Priorities of the rules (in decreasing order)
span { color: yellow !important; } #news div p .news div .news span.news .news div .header span div p span .header span div span span *

Pseudo-classes div: hover {...} - the appearance of the element when the mouse pointer is over; input: focus {...} - the type of the element when it receives focus; img: first-child {...} - the kind of picture that is the first child of its parent element img: last-child {...} - the kind of picture that is the last child of its parent element

Pseudo-elements p:fist-letter {...}, p::fist-letter {...} - form of the first letter of the paragraph; p:first-line {...}, p::first-line {...} - the form of the first line of the paragraph; div:before {content: "..."; ...}, div::before {content: "..."; ...} - adds a pseudo-element as the first child of the div element; div:after {content: "..."; ...}, div::after {content: "..."; ...} - adds a pseudo-element as the last child of the div element;

Properties specifying color and background
color - describes the foreground color of the element; background-color - describes the background color of the element; background-image - used to insert a background image; background-repeat - repeating the background image; background-attachment - fixes the background image; background-position - position the background image; background background-color: #FF0000 [rgb(255,000,000)]; background-image: url(“image.png"); background-repeat: no-repeat [repeat-x | repeat-y]; background-attachment: fixed [scroll]; background-position: right bottom [top | left]; background: #FF0000 url(“image.png") no-repeat fixed right bottom;

Color in CSS By name. English-language color names are used, for example blue or red; In hexadecimal RGB (for example, # 71C354 or # 3C9). This method is widely used in HTML; In the decimal RGB format (for example, rgb (126, 6, 9)), where the value of each color component can vary from 0 to 255; In RGB format with percentages, for example, rgb (30%, 40%, 70%)), where the value of each color component can vary from 0 to 100. p {color: lime} p {color: rgb(0,255,0)} p {color: #0f0} p {color: #00ff00} p {color: rgb(0%, 100%, 0%)}

Font Families Serif Times New Roman Garamond Georgia Sans-serif
Trebuchet Arial Verdana Monospace Courier Courier New

Fonts font-family - indicates the priority font list
font-style - font style [normal | Italic | oblique]; font-variant - used to select between normal and small-caps options. The small-caps font uses small caps instead of lower case letters. font-weight - describes how fat the font should be displayed. The font can be normal or bold. Some browsers support numeric values of to describe the weight of the font. font-size - font size. Different units of measure are used (for example, pixels and percentages) to describe the font size. font - shortcut p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } p { font: italic bold 30px arial, sans-serif; }

Text text-indent - sets the indent for the first line of the paragraph; text-align - align text [left | right | center | justify]; text-decoration - allows you to add various "decorative effects" [underline | overline | line-through;] letter-spacing - interval between letters in pixels, points, in relative units em - relative unit of length equal to the size of the current font; text-transform - text transformation [capitalize | uppercase | lowercase | none]

Links A pseudo-class allows you to take into account various conditions or events when defining the properties of an HTM tag. The syntax of the selector is: selector: pseudo-class (Example: a: link) Pseudo-classes for references: :link - used for links to pages that the user has not yet visited; :visited - used for links to pages that the user visited; :hover - used for links above the mouse pointer; :active - used for active links.

Identifying and grouping elements (class and id)
class - specifies a style class that allows you to associate a specific tag with a style design. In the meaning it is allowed to specify several classes at the same time, separating them among themselves by a space. id - specifies the style identifier, the unique name of the element, which is used to change its style and access to it through scripts. The identifier in the document code must be in a single instance, in other words, only occur once. .class1 { color: red; } .class2 { color: yellow; #id1 { color: blue; <ul> <li class="class1">CLASS1</li> <li class="class2">CLASS2</li> <li id="id1" class="class2">CLASS3 + ID</li> </ul>

Frames border-width - The thickness of the border, the property can have values of thin, medium and thick, or a numeric value in pixels. border-color - specifies the color of the border. Values are normal color values, for example: "# FF0000", "rgb (255,000,000)" or "red"; border-style - types of frames; border – abbreviated entry p { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; }

Block model The block model in CSS describes the blocks generated for HTML elements. The block model also has detailed options for defining the fields, frames, fill and content of each element.

Fields and filling (width and height)
#block_id { height: 150px; width: 150px; margin: 20px 15px 10px 5px; }  150px 150px #block_id { height: 150px; width: 150px; padding: 20px 15px 10px 5px; }  180px 170px

CSS: box-sizing content-box - by default, the content inside the block will be displayed in the old way; As in the example above: instead of 150x150 will be 180x170 border-box allows the padding and border values to be subtracted from the width and length of the block, i.e. In our example, the block will remain with fixed parameters, but for the content there will be 120x130 px. div { width: 150px; height: 150px; padding: 20px 15px 10px 5px; box-sizing: border-box; -moz-box-sizing: border-box; /*Firefox 1-3*/ -webkit-box-sizing: border-box; /* Safari */ } 120px 130px

Float elements An element can float to the right or left using the float property. That is, a block with its contents can pop up to the right or left in the document window (or containing a block) [left | Right | None] <style> #any_text { float: left; } </style> <div id="any_text"> <img src="220px-Jan_van_Eyck_061.jpg“> </div> <p>Text</p> The clear property - controls the behavior of a sequence of document popups. [left | right | both | none] The principle is that if clear, for example, has a value of both for the box, then the upper edge of the frame of this box will always be under the bottom edge of the field of possible pop-up boxes.

Positioning Sets the way the element is positioned relative to the browser window or other objects on the web page. Position: [absolute | fixed | relative | static | inherit] Absolute positioning (absolute) Indicates that the element is absolutely positioned, with other elements displayed on the web page as if absolutely positioned element and not. The position of the element is set by the properties left, top, right, and bottom, and the value of the position property of the parent element also affects the position. So, if the parent has the position value set to static or there is no parent, the coordinates are read from the edge of the browser window. If the parent position is specified as fixed, relative, or absolute, then the coordinate is counted from the edge of the parent element.

Positioning Fixed positioning (fixed) By its action this value is close to absolute, but unlike absolute positioning it is bound to the specified properties left, top, right and bottom point on the screen and does not change its position when scrolling the web page. Relative positioning (relative) The position of the element being placed relatively is calculated relative to its original position in the document. This means that you move the element to the right, left, up or down. Thus, the element still occupies the space in the document after positioning. Static positioning (static) Elements are displayed as usual. Using the properties left, top, right, and bottom does not result in any results. Inherited positioning (inherit) Inherits the value of the parent.

Layering with z-index Any positioned elements on a web page can overlap each other in a certain order, thereby simulating a third dimension perpendicular to the screen. Each element can be located below and above other objects of the web page, their placement on the z-axis and is controlled by the z-index. This property only works for elements whose position is set to absolute, fixed, or relative. The values are integers (positive, negative, and zero). The higher the value, the higher the element is compared to those in which it is smaller. With an equal value of z-index, in the foreground is the element that is described in the HTML code below. z-index: number | auto | inherit

!important If to the property-value pair, assign the !important declaration, then this CSS property value will get the highest priority in the cascade of styles. Simply put, this declaration will work for the item, regardless of the existence of other CSS rules for the same element. p {font-size: 0.625em !important;}

CSS3: border radius border-radius: Sets the radius of the curvature of the corners of the frame. If the frame is not specified, the rounding also occurs with the background. border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; Value Result 1 The radius is indicated for all four corners. 2 The first value specifies the radius of the upper left and lower right corner, the second value of the upper right and lower left corner. 3 The first value specifies the radius for the upper left corner, the second for the upper right and lower left, and the third for the lower right corner. 4 In turn, sets the radius for the upper left, upper right, lower right and lower left corner.

CSS3 - Transparency In web design, the translucency is also applied and is achieved due to the opacity or RGBA color format, which is set for the background. opacity: [0..1] - The main feature of this property is that the transparency value acts on all the child elements inside, not just the background. rgba - Usually the design is semi-transparent only the background of the element, and the text is opaque to preserve its readability. It is best to use the RGBA format, of which the alpha channel is a part or in other words the transparency value. red green blue transparency background: rgba(237, 28, 36, 0.5)

CSS3 - Gradient A gradient is a smooth transition from one color to another, and the colors themselves and the transitions between them can be several. 1. Linear gradient position initial color final color background: linear-gradient(top, #000, #fff); To record a position, the keywords top, bottom and left, right, and their combinations are used. The order of words is not important, you can write left top or top left. Instead of a keyword, it is allowed to use the slope angle, which indicates the direction of the gradient. First, a positive or negative angle is written, then deg is added to it. angle initial color final color background: linear-gradient(-45deg, #000, #fff); To create complex gradients of two colors will already be insufficient, the syntax allows you to add their unlimited number, listing the colors through a comma.

CSS3 - Gradient Position Angle Description Appearance top 270deg
From top to bottom left 0deg From left to right. bottom 90deg From bottom to top. right 180deg From right to left. top left -45deg From the upper left corner to the right bottom corner top right 225deg From the upper right corner to the bottom left. bottom left 45deg From the bottom left to the right upper bottom right -225deg From the bottom right to the top left

CSS3 - Gradient Firefox 3.6+ Chrome 1-9, Safari 4-5
background: -moz-linear-gradient(top, #fefcea, #f1da36); Chrome 1-9, Safari 4-5 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); Chrome 10+, Safari 5.1+ background: -webkit-linear-gradient(top, #fefcea, #f1da36); Opera background: -o-linear-gradient(top, #fefcea, #f1da36); IE10 background: -ms-linear-gradient(top, #fefcea, #f1da36); CSS3 background: linear-gradient(top, #fefcea, #f1da36);

CSS3 - Gradient 2. The radial ones are similar in principle to linear gradients, but one color goes to the other not along a straight line, but like circles on water around a point. The radial gradient is created using the background or background-image property with the radial-gradient parameter, which, like the linear gradient, has its own variations for each browser, they differ only in prefixes. In the simplest case, only two parameters are required to specify a radial gradient: the initial and final colors. By default, the starting point is located in the center. position initial color final color background: radial-gradient(top right, #000, #fff); The position of the point is written by keywords or available units of measure such as pixels or percentages.

CSS3 - Gradient top left = left top = 0% 0% (in the upper left corner); top = top center = center top = 50% 0% (centered above); right top = top right = 100% 0% (in the upper right corner); left = left center = center left = 0% 50% (left and center); center = center center = 50% 50% (center, default value); right = right center = center right = 100% 50% (right and center); bottom left = left bottom = 0% 100% (in the lower left corner); bottom = bottom center = center bottom = 50% 100% (centered below); bottom right = right bottom = 100% 100% (in the lower right corner). There are two forms of a radial gradient - a circle and an ellipse, which differ in their appearance. The default is an elliptical gradient. gradient type initial color final color background: radial-gradient(circle, #000, #fff) Circular gradient Elliptic gradient

CSS3 - Gradient The size of the gradient, which depends on the keywords used. The size is written after a space after the gradient type (circle or ellipse). Value Code Description View contain background: radial-gradient(30px 20px, circle contain, #fff, #000); Form gradient coincides with the nearest thereto unit side (for a circle) or simultaneously coincide with the nearest horizontal and vertical sides (the ellipse). closest-corner background: radial-gradient(30px 20px, circle closest-corner, #fff, #000); The shape of the gradient is calculated from the distance information to the nearest corner of the block. farthest-side background: radial-gradient(30px 20px, circle farthest-side, #fff, #000); Similar to its effect on contain, but the gradient spreads to the far side of the block. cover background: radial-gradient(30px 20px, circle cover, #fff, #000); The shape of the gradient is calculated from the distance information to the far corner of the block.

CSS3: Shadows box-shadow - used to add a shadow that has six values, of which only two are required. The figure shows the box-shadow property with all possible values, they are numbered for their identification. box-shadow: inset 5px 5px 10px 3px #ccc The inset keyword sets the shadow inside the element; Shadow shift horizontally (5px - to the right, -5px - to the left); Vertical shift (5px - down, -5px - up); Radius of the blur of the shadow (0 - sharp shadow); Stretching of the shadow (5px - stretching, -5px - compression); Color of the shadow.

CSS3: Text Effects in CSS3
text-shadow - adds a shadow to the text, and also sets its parameters: the color of the shadow, the offset relative to the label and the radius of the blur. The text-shadow property can work in conjunction with the pseudo-elements :first-letter and :first-line. text-shadow: none | <color> <x shift> <y shift> <blur radius> None - Cancels the addition of a shadow. Color - The color of the shadow in any available CSS format. By default, the color of the shadow matches the color of the text. Optional parameter. Shift by x - Shadow shifts horizontally relative to the text. A positive value of this parameter sets the shift of the shadow to the right, the negative value to the left. Required. Shift by y - Shadow shifts vertically relative to the text. It is also permissible to use a negative value that raises the shadow above the text. Required. Radius - Specifies the radius of the shadow blur. The more this value, the stronger the shadow smoothes, becomes wider and lighter. If this parameter is not set, the default is set to 0.

CSS3: Transformation Scaling, tilting and rotating any element is possible using the CSS3 transform property. It is supported by all modern browsers (with prefixes) transform: <function> [<function>]* | none Transformation functions Rotate-rotates an element by a given angle relative to the transformation point specified by the transform-origin property. transform: rotate (<angle>) Scale - The scale of the element horizontally and vertically. transform: scale (sx [, sy]) A value greater than 1 increases the scale of the element, less than 1 reduces the scale. skewX - Tilts the element by a specified angle vertically. transform: skewX (<angle>) skewY - Tilts the element by a specified angle horizontally. transform: skewY (<angle>)

CSS3: Transformation Functions
Translate - moves the element to the specified value horizontally and vertically. transform: translate (tx [, ty]) TranslateX - shifts the element horizontally by the specified value. A positive value shifts to the right, a negative value to the left. transform: translateX (tx) TranslateY - shifts the element vertically by the specified value. Positive value shifts down, negative up. transform: translateY (ty)

CSS3: Animation A generic property that allows you to set the values to create a transition effect between two element states at the same time, they can be defined using the pseudo class: hover or: active, and dynamically via JavaScript.

CSS3: Animation functions
ease - The animation starts slowly, then accelerates and slows down again towards the end of the movement.

ease-in - Анимация медленно начинается, к концу ускоряется

ease-out - Animation starts quickly, slowing down towards the end.

ease-in-out - Animation starts and ends slowly.

Linear - The same speed from beginning to end.

Step-start - As such, no animation. The style properties immediately assume the final value

Step-end - As such, no animation. The style properties are in the initial value for a given time, then they immediately take the final value.

Steps - A step function that has a specified number of steps. Here: <number> - an integer greater than zero; Start - specifies a lower semicontinuous function; End - specifies the upper semicontinuous function. transition-timing-function: steps(<number>, start | end)

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback