Data Loading...
CSS3 & HTML5 Flipbook PDF
CSS3 & HTML5
106 Views
63 Downloads
FLIP PDF 69.3KB
CSS 3 : Display none and Visibility difference 1 : display: none => It will not be available on the page and does not occupy any space. 2 : visibility: hidden => It hides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout. CSS Position : 1 : static => HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. it is always positioned according to the normal flow of the page 2 : relative => An element with position: relative; is positioned relative to its normal position. setting elements are affected by the top, bottom, left, and right properties. 3 : fixed => it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. 4 : absolute => is positioned relative to the nearest positioned ancestor. Note: A "positioned" element is one whose position is anything except static. 5 : sticky => An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Overlapping Elements [ z-index ] : The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). Ex : This is a heading
Because the image has a z-index of -1, it will be placed behind the text.
img { position: absolute; left: 0px; top: 0px; z-index: -1; } Margin vs Padding : The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element. The CSS Box Model : All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content *Different types of CSS ?* *External* – These are written in separate files. *Internal* – These are cited at the top of the web page code document. *Inline* – These are written right next to the text. *How do we make a rounded corner by using CSS?* We can make a rounded corner by using the property “border-radius”.
*What is CSS flexbox?* It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially. *What is a CSS pseudo-class?* It is a class that is used to define a special state of an HTML element. *For example, it can be used to:* Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus *What is a Media Query?* It uses the @media rule to include a block of CSS properties only if a certain condition is true. @media only screen and (max-width: 600px) { body { background-color: lightblue; } } *What is CSS opacity?* It is the property that elaborates on the transparency of an element. *!important declarations in CSS.* Important declarations are defined as that declaration which is having more importance than the normal declaration. New HTML5 Elements The most interesting new HTML5 elements are: New semantic elements like , , , and . New attributes of form elements like number, date, time, calendar, and range. New graphic elements: and . What is HTML Canvas? : The HTML element is used to draw graphics on a web page. The element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. What is HTML Svg? : SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web The HTML element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke();
-
New multimedia elements: and .
New HTML5 APIs : HTML Geolocation : The HTML Geolocation API is used to get the geographical position of a user. HTML Drag and Drop HTML Local Storage HTML Application Cache : HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Application cache gives an application three advantages: Offline browsing - users can use the application when they're offline. Speed - cached resources load faster. HTML Web Workers : A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.( When executing scripts in an HTML page, the page becomes unresponsive until the script is finished. ) ? : Tells the browser that we are using HTML5. It depends upon the web browser version, If is older version then this will not support HTML5 tags (Example: header tag, footer tag, section tag,...) DOCTYPE is such an element, which tells the browser about the html version, DOCTYPE is not a HTML tag, but for the Proper SEO purpose and introducing the version of HTML to the browser the tag is very useful. What is the difference between HTML tags and ? div is a block element span is an inline element.