Common html5 tag css3 styles, html5 tag css3

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>