Common html5 tag css3 styles, html5 tag css3

Source: Internet
Author: User

Common html5 tag css3 styles, html5 tag css3

<Meta name = ''>

Name: has the following six values:
Application-name: Document name or application name. The entire document can contain only one value.
Author: author
Description: Document description
Generator: The program that generates the document.
Keywords: webpage keywords separated by commas.

 

<A href = "http://www.baidu.com"> Baidu </a>

Href: Path

Src: Image path

<Table> label attributes
Border
Cellspacing table margin
Cellpadding table padding
Align location
Bgcolor: Background Color
Background: Background Image
Bordercolor: border color

<Tr> </tr>

<Td colspan = "2"> </td> colspan spans two columns

Rowspan cross-row

<Input type = "">

Type Value

Text

Password

Radio single choice

Multiple checkbox options

Reset

File Upload

Submit submission form

Image submission

Button common button

Group drop-down

<Select name = "city" id = "city">
<Optgroup label = "Shandong">
<Option value = "yt"> Yantai </option>
<Option value = "qd"> Qingdao </option>
<Option value = "wh"> Weihai </option>
</Optgroup>
<Optgroup label = "Beijing">
<Option value = "bj"> bj </option>
<Option value = "tam"> tam </option>
<Option value = "zong"> zong </option>
</Optgroup>
</Select>

Text area textarea
<Textarea name = "textarea" id = "textarea" cols = "30" rows = "10" readonly = "readonly"
Disabled = "disabled">
1 </textarea>
Cols width rows height readonly read-only

Css style

Font and font size:
Font (abbreviated form)
Font-weight (width) normal (normal) bold (bold) italic)
Font-size (size)
Font-family (font family)
Font-style (font style)

 

Font color:
Color
Opacity (Transparency css3)

 

Line spacing and alignment:
Line-height (Row height)
Text-align (align)
Letter-spacing (Character spacing)
Text-decoration)
Overflow hidden
Text-overflow

When cropping text in text-overflow, clip is not added when cropping text... ellipsis is added when cropping... note: no line breaks and over-flow Control

Text-shadow
Text-indent

Background attributes:
Background (abbreviated form)
Background-color (background color)
Background-image (background image)
Background-repeat (repeated background image)
Background-position (Location Coordinate and offset)

List frequently used

List-style: none no style disc solid circle hollow circle square solid square decimal number

 

Box properties:
Margin (outer margin/Boundary) and above can write 1, 2, and 4 values.
Border (border)
Padding (padding/padding)

Addend-top and other directions

Border-radius border rounded corner

Box-shadow

 

Deformation: transform

Transform-origin specifies the start point of the Transformation

None

Translate (length value or percentage) translateX translateY translates horizontally and vertically

Scale (numeric) scaleX scaleY scales horizontally, vertically, or in two directions

Rotate (angle) rotation element

Skew (angle) skewX skewY skews the element to a certain angle in the horizontal, vertical, or two directions

Matrix Customization

 

Transition effect: transition

Transition-property specifies the default value of the transition css property, which is all.

Transition-duration completion time

Transition-timing-function specifies that the default value of the easing effect of the transition function is equivalent to (0.25, 0.1, 0.25, 1.0)

Transition-delay specifies the delay time when the transition starts to appear

 

@ Keyframes: defines an animation.

Animation

<Style>. t5 {transition: 5S timed-out all;/* transition Timed in acceleration out deceleration */}/* transition-delay */. t5: hover {transform: skew (45deg, 45deg)} @ keyframes key {0% {background-color: red; width: 200px; height: 200px;} 25% {background-color: orange; width: 100px; height: 100px; transform: rotate (-90deg) ;}50% {background-color: yellow; width: 60px; height: 60px; transform: none ;} 75% {background-color: green; width: 120px; height: 120px; transform: none;} 100% {background-color: blue; width: 200px; height: 200px; transform: rotate (360deg );}}. kt {animation: key 1 s;/* animation-iteration-count: infinite; * // * infinite loop */background-color: yellow; width: 200px; height: 200px ;}

</Style> <div class = "kt t5"> </div>

 





 

Related Article

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.