Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the basic knowledge of Html5+CSS3". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the basics of Html5+CSS3".

CSS selector: use CSS to achieve one-to-one, one-to-many, or many-to-one control of elements in html pages:

1. Attribute selector

Three selectors are appended to CSS3: [att*=val]; [att^ = val]; [att$=val]-> att is represented as an attribute, and val is represented as the attribute value of an attribute.

[att*=val]: if the value of an attribute represented by an element in att contains a character specified by val, the element uses this style.

[att$=val]: if the attribute value of an attribute represented by an element in att ends with the character specified by val, the element uses this style.

[att^ = val]: if the attribute value of an attribute represented by an element in att begins with a character specified in val, the element uses this style.

Note: / if the style does not show success when using numbers only, you need to use\ to connect the symbols closest to the numbers! Only'- 'characters need to be added with'\'/

two。 Structural pseudo-class selector (1) A class selector uses a class selector to define the same element into different styles. Pseudo-class selector is already defined and cannot be named casually.

(2) pseudo-class selector-the most common pseudo-class selector: a (in the order of use: not, already, hover, stop)

(3) pseudo element selector A first-line;first-letter;before;after used for pseudo elements that have been defined in CSS.

I am an old web front-end programmer who has been engaged in development for many years. I am currently resigning to do my own private customized course on web front-end. At the beginning of this year, I spent a month sorting out a list of web front-end learning materials most suitable for 2019. All kinds of frameworks are sorted out and sent to every front-end partner. If you want to get, you can follow my headline number and trust me privately in the background: front-end, you can get it for free.

First-line pseudo-element selector: uses styles for the first line of text in an element.

First-letter pseudo-class selector: uses styles for the first letter or first text of the text in an element.

Before: insert something before an element.

After: insert something after an element.

You can use before and after pseudo elements to insert text, images, project numbers, etc.

Insert text: E:before/after

Exclude some elements that do not need to insert content: E:none:before/after

Insert Ima

Insert project number

a. Number before multiple headings: the counter attribute appends the number to the item

(4) structural pseudo-class selector

First-child: specify the style of the first child element separately.

Last-child: specify the style of the last child element separately.

Nth-child: the selector matches the Nth child element under the positive number, nth-child (odd) is the odd child element, and nth-child (even) is the even child element.

Nth-last-child (n): matches the nth child element from the penultimate.

Nth-of-type: positive number, when the specified element is the title plus content, if you use the above method, the real specified element will not be successfully specified, so you need to use the nth-first-type method to specify.

Nth-last-type: reciprocal, same as nth-first-type.

Recycling styles: nth-child (An+B)-An indicates how many styles are included in each loop, and B indicates the position of the specified style in the loop.

Only-child: works on only one element.

The style specified by the 3.UI element state pseudo-class selector works only if the element is in a certain state, not by default!

First-line pseudo-element selector: uses styles for the first line of text in an element.

First-letter pseudo-class selector: uses styles for the first letter or first text of the text in an element.

Before: insert something before an element.

After: insert something after an element.

You can use before and after pseudo elements to insert text, images, project numbers, etc.

Insert text: E:before/after

Exclude some elements that do not need to insert content: E:none:before/after

Insert Ima

Insert project number

a. Number before multiple headings: the counter attribute appends the number to the item

(4) structural pseudo-class selector

First-child: specify the style of the first child element separately.

Last-child: specify the style of the last child element separately.

Nth-child: the selector matches the Nth child element under the positive number, nth-child (odd) is the odd child element, and nth-child (even) is the even child element.

Nth-last-child (n): matches the nth child element from the penultimate.

Nth-of-type: positive number, when the specified element is the title plus content, if you use the above method, the real specified element will not be successfully specified, so you need to use the nth-first-type method to specify.

Nth-last-type: reciprocal, same as nth-first-type.

Recycling styles: nth-child (An+B)-An indicates how many styles are included in each loop, and B indicates the position of the specified style in the loop.

Only-child: works on only one element.

The style specified by the 3.UI element state pseudo-class selector works only if the element is in a certain state, not by default!

Summary of Html5+CSS3 fundamentals-CSS3

4. The sibling element selector is used to specify the style used by all other kinds of sibling elements that follow an element in the same parent element. It must be the later brother element!

Displacement distance: the horizontal (vertical) distance of the shadow represented by the first two parameters from the text can not be omitted.

The third parameter represents the blur radius and represents the range when the shadow is blurred outward. The larger the value, the more blurred it is.

When no color value is specified, the color of the default text is used.

Specify multiple shadows and can be separated by commas for each shadow.

2.word-break: browser text wraps automatically.

3.word-wrap: long words and URL addresses automatically wrap.

4. Server-side fonts and @ font-face properties

Define italics or bold: when defining fonts, you can define fonts as italics or bold. When using server-side fonts, you need to use different Chinese characters according to italics or bold.

Display client-side fonts: first set font-family to the local font name, and then set the src property to local ('font').

Font-variant: sets whether the text is case or not.

Font-weight: sets the thickness of the text.

Font-stretch: sets whether the text is stretched horizontally.

2.3. Box model

1. Various box models

Inline-block Typ

Use the inline-block type to perform a breakdown display

List-item Typ

You can display multiple elements as a list and add a tag to the list at the beginning of the element.

Run-in type and compact type

None Typ

When an element is specified with none, the element will not be displayed

two。 What can't be displayed?

Overflow property: specifies how to display content that cannot be contained in the box

Summary of Html5+CSS3 fundamentals-CSS3

Overflow-x attribute and overflow-y attribute

Textoverflow: displays the '...' that represents the ellipsis symbol at the end of the box. But this property is displayed only when the content is exceeded horizontally

3. Box shadow

Box-shadow: let the box produce a shadow effect when it is displayed

Set shadows on child elements in the box

Shadow a text or first line: through first-line or first-letter

Use shadows on tables and cells

4.box-sizing width and height calculation

Specifies the calculation method for the width and height of the element

2.4. Border and background styl

1. New background properties

Background-clip: specify the display range of the background

Border-box: starting with the border

Padding-box: start with the inner border

Content-box: start with the content

Background-orgin: specify the starting point for drawing the background image

You can specify the starting position when drawing. The default is padding, and you can start drawing for border or the upper left corner of content.

Background-size: specify the size of the image in the background

Auto

Length

Percentage: sets the width and height of the background image as a percentage of the parent element.

Cover: full coverage.

Contain: in contrast to cover, it mainly reduces the background image to fit the entire container.

two。 Display multiple background attributes: the first image is on top

3. Fillet border: border-radius

Specify two radii: upper left, lower right + lower left and upper right

When the frame is not displayed, the browser will round the four corners

Modify the border type.

Draw four borders with different radii

4. Image frame: border-image

When the length or width of the element changes at any time, the border of the changing state can be drawn using an image file.

2.5.CSS3 deformation function

1. Using transform to achieve text or image rotation, scaling, tilt movement of these four types of deformation processing.

Rotation: totate (angle)

Zoom: scale (value): 0.5 means scaling to 50%

Tilt: skew (value), value is angle

Moving: translate (value)

Use multiple methods for an element

Transform: method 1, method 2, method 3, method 4

Change the base point of the element

Transform-origin:

The dynamic function of 2.6.CSS3

1.transition function: supports smoothing from one attribute value to another

Allows the CSS attribute value to be smooth and excessive for a certain period of time, this effect can be triggered by clicking, gaining focus, being clicked, or any change to the element, and smoothly animate the CSS property value.

(1) attribute to perform the transformation: transition-property: the transition is about to begin

None: no attributes will get a transition effect

All: so attributes get a transition effect

Property: defines a comma-separated list of CSS attribute names to which the transition effect is applied

(2) Transformation duration: transition-duration: specify the time it takes to complete the transition. The default value of zero has no effect.

(3) in the continuous period, the change of transformation rate: transition-timing-function.

(4) transform delay time: transition-delay: specify the time when the animation starts to execute, that is, how long it takes to start the transition effect after changing the element attribute value.

2.Animations function: support through the assignment of keyframes to generate more complex animation phenomena on the page.

Paging of 2.7.CSS3

1. Click and mouse over paging style

two。 Mouse over transition effect: transition: background-color .9s

3. Fillet style: border-radius

4. Border: border:2px solid darkviolet

2.8. Layout related styl

1. Multi-column layout

Column-count attribute: divide the content of an element into multiple columns for display. Set the width of the element to the total width of multiple columns.

Column-width property: specify the width of the column to generate columns

Column-gap attribute: specifies the distance between columns

Column-rule: add separator lines between columns

two。 Box layout: the column width of the multi-column layout must be equal, and the width of the column can only be specified uniformly, but the width of the column can not all be the same, so the multi-column layout is more suitable for display on the text content page, such as news. It is not suitable for the whole web page layout. The box layout is relatively casual and can be defined as different pages.

3. Elastic box layout

(1) box-flex: make the box layout flexible: can adapt to the window

(2) box-ordinal-group: change the display order of elements

(3) box-orient: change the direction of element arrangement

Horizontal: arranges child elements from left to right in a horizontal row

Vertical: vertically arranges child elements from top to bottom

Summary of Html5+CSS3 fundamentals-CSS3

Summary of Html5+CSS3 fundamentals-CSS3

(4) the height and width of the element is adaptive: the height and width of the element can be changed according to the direction of the arrangement. (5) use flexible layouts to eliminate whitespace: add a box-flex attribute to the child div.

Summary of Html5+CSS3 fundamentals-CSS3

(6) use the box-flex attribute on multiple elements so that the total width or height of the elements in the browser or container is equal to the height of the browser or container.

(7) box-pack attribute and box-align attribute: specify the horizontal and vertical alignment (horizontal or vertical alignment of text, images, and child elements)

2.9. Different browsers load different CSS styles

Media Queries module is an important module related to all kinds of media in CSS3.

Summary of Html5+CSS3 fundamentals-CSS3

Summary of Html5+CSS3 fundamentals-CSS3

Summary of Html5+CSS3 fundamentals-CSS3

Thank you for your reading, the above is the content of "what are the basic knowledge of Html5+CSS3". After the study of this article, I believe you have a deeper understanding of what the basic knowledge of Html5+CSS3 has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.