HTML 5 new elements and CSS

Source: Internet
Author: User
Tags tag name

HTML5 new elements

Multimedia elements

Video/audio:

format Examples :

Properties :

Canvas Elements

Canvas label definition graphic for drawing, using JS to draw

Drag and Drop drag and drop

  Drag-and-drop is a common feature that grabs an object and then drags it to another location.

in the HTML5 , drag and drop are part of the standard, and any element can be dragged and dropped.

Semantic Elements :

  A semantic element can clearly describe its meaning to the browser and the developer.

No semantics Element Instances : <div> and <span>- No need to consider content .

Examples of semantic elements : <form>, <table>, and - clearly define its contents .

New semantic elements in HTML5

<footer> Define the footer of a section or document

<header> defines the header area of the document

<nav> defines the part of the navigation link

<section > Define sections in a document

css: Cascading Style Sheets beautify the page to modify the style of the label

Classification of the wording:

1. inline : A property name style that is written in a tag as a property

Format example: <span style= "" > </span>

<p style= "Font-size:20pt;color:red;text-align:center" > Typesetting style </p>

Typography Special Tags:<div> <span>

Both tags are used to set up a block that covers a chunk. The chunk is the data that represents more than one row. If not, <span> and </span> the data is not skip before and after it is displayed.

2. Embedded : Write tag name in the head tag style

All style definitions in the inline layout must be in <style> </style> between, and <style> </style> must be in

selector : Find elements in various ways such as: Tag name id attribute value

Selector format

selector {

Style attributes: Style values;

Style attributes: Style values;

}

Selector type

1. Universal selector: *{} selector selects all elements

Example: Selector selects all elements

*{     padding:0px;     margin:0px;}

  

The selector can also select all elements within another element :

For example:

Div *{           background-color:yellow;  }

  

2. Tag Selector: Tag name {} find tags by tag name

3. ID selector: #id属性值 {} find element key symbol by id attribute value

<! DOCTYPE html>

  

The result is:

4.class selector: The. Class Property value {} to find the element key symbol through the class attribute value

Example:

<! DOCTYPE html>

  

The result is:

5. Descendant Selector selector 1 selector 2{}

Example:

#div div{             width:50px;            height:50px;            background:red;    }

  

6. Subclass Selector Selector 1 > Selector 2{}

For example:

#div > div{                width:50px;                height:50px;                  background:red;    }

  

7. Parallel selector 1, selector 2.. {}

For example:

#dd, #ddd {                  background:red;    }

  

8. Pseudo-Class selector selector: Pseudo-class hover

For example:

#d: hover a{                  background:red;    }

  

9. Additional selectors:

Contrast selector:

Example:

Select all <a> elements with the target property

a[target]{                background-color:yellow;  }

  

: Last-child

Example: specifies the last of the parent element P the background color of the element:

p:last-child{                  background: #ff0000}

  

Priority of "inline" and "in-line" typographic definitions:

CSS rules, the smaller the scope, the higher the priority.

Priority is arranged from small to large:

    1. In-line
    2. Class and ID definition type
    3. Tag definition Line

ID priority is higher than class class

Weight value:

in-line: Weighted value + !

ID : Weight Value - !

class : Weight Value Ten !

tag: Weight value 1 !

     * : Weight Value 0 !

Weights are stackable, for example:

#div. Class priority is greater than . Class

3. External references : Introducing external Files

In the head tag, label tag name link

Format:

  

Advantages of external references:

Better to write CSS style;

Avoid repeating style problems on different pages with the same elements

HTML 5 new elements and CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.