css3 new features
- Selector
- Background and border
- Text effect
- 2D/3D conversion-transformation, transition, animation
Selector
Regular selector
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的dom元素 */
:checked /* 选择每个被选中的dom元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
Pseudo-classes and pseudo-elements:
- The fundamental difference is whether they create new elements (abstraction)
Pseudo class: used to add special effects to certain selectors (no new elements are created)
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {
color: #FF0000} /* 未访问的链接 */
a:visited {
color: #00FF00} /* 已访问的链接 */
a:hover {
color: #FF00FF} /* 鼠标移动到链接上 */
a:active {
color: #0000FF} /* 选定的链接 */
Pseudo-elements: created elements that do not exist in html, used to add special effects to certain selectors
::before {
} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {
} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */
2. Background and border
background:
background-size: specifies the size of the background image (cover: fill; 100% 100%: stretch)
background-origin: specifies the positioning area of the background image. For the background-origin property, the background image can be placed in the
content-box, padding-box or border-box area
frame:
border-radius: rounded corner
box-shadow / text-shadow: shadow
border-image: border image
3. Text effects
| Attributes | description |
|---|---|
| text-shadow | Add shadow to text |
| text-justify | Specifies the alignment method used when text-align is set to "justify" |
| text-emphasis | Apply the emphasis mark and the foreground color of the emphasis mark to the text of the element |
| text-outline | Specifies the outline of the text |
| text-overflow | Specifies what happens when the text overflows the containing element |
| text-wrap | Specifies the wrapping rules of text |
| word-break | Specify line break rules for non-Chinese, Japanese, and Korean texts |
| word-wrap | Allow long indivisible words to be split and wrap to the next line |
| text-decoration | Text modifiers: overline, line-through, underline are overline, midline, and underline respectively |
| @ font-face | Custom font |
- Gradient, CSS3 adds gradient effects, including linear-gradient (linear gradient) and radial-gradient (radial gradient)
4. 2D/3D conversion
Transform
变形有rotate旋转、scale缩放、translate位移、skew倾斜
Transition
Transition transition is a composite property, which can define the sub-property values of transition-property, transition-duration, transition-timing-function, and transition-delay at the same time
Generally written together:
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
Animation
To use animation, first define the animation name and animation behavior through @(-webkit-)keyframes, and then set the animation feature related values through the animation property to call
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-moz-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-o-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
@-ms-keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% {
opacity: 0; } 100% {
opacity: 0; }
}
Most of these new properties are supported in newer browsers, and some need to add browser prefixes (-webkit-, -moz-, -ms-, -o-)
H5 new features
1. New features of h5:
Semantic tags: header, footer, section, nav, aside, article
Enhanced form: multiple input types
added form attributes: placehoder, required, min and max
Audio video: audio, video
canvas canvas
geolocation
drag and drop
local storage :
LocalStorage has no time limit data storage;
sessionStorage, session data storage, when the user closes the browser window, the data will be deleted.
New events: onresize, ondrag, onscroll, onmousewheel, onerror, onplay, onpause
WebSocket: establish a persistent communication protocol
2. Semantic tags
| label | description |
|---|---|
| header | Defines the head area of the document |
| footer | Defines the end area of the document |
| are not | Define the navigation of the document |
| section | Define sections (sections, sections) in the document |
| article | Define a separate content area of the page |
| aside | Define the sidebar content of the page |
| dialog | Define dialog boxes, such as prompt boxes |
3. Form type enhancement
HTML5 has several new form Input input types. These new features provide better input control and verification
| input 的 type | description |
|---|---|
| color | Mainly used to select colors |
| date | Choose a date from a date picker |
| datetime | Choose a date (UTC time) |
| Input field containing e-mail address | |
| month | Choose a month |
| number | Numerical input field |
| range | Input field of numeric value within a certain range |
| search | For search domain |
| tel | Define the input phone number field |
| time | Choose a time |
| url | Input field of URL address |
week select week and year
4. html5 new form attributes
| Form attributes | description |
|---|---|
| placehoder | A short prompt will be displayed on the input field before the user enters the value. That is, our common input box default prompts, which disappear after the user enters |
| required | Is a boolean attribute. The required input field cannot be empty |
| pattern | Describes a regular expression used to validate the value of the input element |
| min and max | Set element minimum and maximum |
| step | Specify a legal number interval for the input field |
| height 和 width | Image height and width for input tags of image type |
| autofocus | Is a boolean attribute. Specifies that when the page loads, the domain automatically gets the focus |
| multiple | Is a boolean attribute. Specifies that multiple values can be selected in the input element |
5. html5 new events
| event | description |
|---|---|
| onresize | Triggered when the window is resized |
| ondrag | Triggered when the element is dragged |
| onscroll | Triggered when the scroll element scrolls the scroll bar of the element |
| onmousewheel | Triggered when the mouse wheel is turned |
| onerror | Triggered when an error occurs |
| onplay | Triggered when media data is about to start playing |
| onpause | Triggered when media data is paused |