CSS3 learning notes, css3 Learning
CSS3 Study Notes for the past two days:
MOOC Network Address: http://www.imooc.com/learn/33
Notes:
The offset between the X axis and the Y axis can be set to a negative number:
Y:
Apply the image border-image to the border:
Color:
Gradient color:
Text and Font:
Word-wrap: determines whether to disconnect a line when the current line exceeds the boundary of the specified container;
Embedded font @ font-face: load the font file on the server, so that the browser can display fonts that are not installed on your computer.
Text shadow text-shadow:
Abbreviation: text-shadow: 0 1px 1px # fff
Style related to the background:
Background-clip: used to make the background image as appropriateCropTo meet actual needs;
Background-size: set the size of the background image, which is displayed in length or percentage. You can also use cover and contain to scale the image;
Multiple background: multiple backgrounds, that is, the attributes of background in CSS2 plus multiple overlays of the new background consisting of origin, clip, and size. Each group of values is separated by commas; if there are multiple background images and only one other attribute (for example, there is only one background-repeat), this attribute is applied to all background images.
Make a navigation menu comprehensive exercise:
CSS3 selector:
Structural pseudo-class selector:
Demo result:
Subclass selector:
Last-child:
Nth-child (n): used to locate one or more specific child elements of a parent element. Where "n" is its parameter, and it can be an integer (1, 2, 3, 4), or an expression (2n + 1,-n + 5) and keywords (odd-odd and even-even),The starting value is always 1 rather than 0.. That is, when the value of parameter n is 0, the selector cannot select any matching element.
Nth-last-child (n): calculates the last child element of a parent element to select a specific element;
Type selector:
Nth-of-type (n): similar to the ": first-child" selector, it is not very similar to the ": nth-child (n)" selector, the difference is that it only calculates a type of child element specified in the parent element. When a child element in an element is not just a child element of the same type, use ": nth-of-type (n) it is very convenient and useful to locate a type of child element in the parent element. The "n" parameter in the ": nth-of-type (n)" selector is the same as the "n" parameter in the ": nth-child (n)" selector. It can be specific.Integer, Or yesExpressionCan also beKeywords.
Last-of-type:
Nth-last-of-type (n ):
Only-child selector: select the parent ElementThere is only one child element and only one child element.. That is, in the parent element of the matched elementIt has only one child element and is a unique child element..
Only-of-type selector: indicates that an element has many child elements, and only one type of child element is unique. the only-of-type selector can select the only type child element in this element.
Pseudo class selector:
: Read-only: used to specifyRead-Only statusElement style. Simply put, "readonly = 'readonly'" is set in the element '"
: Read-write: The opposite of the ": read-only" selector. It is mainly used to specify that when an element is inNon-read-only status.
: Before AND: after are mainly used to insert content to the front or back of an element. These two parameters are often used with "content, the most widely used scenario isClear floating;
Deformation and animation in CSS3:
Distorted skew (): displays elements in a skewed manner. It can tilt an object around the X axis and Y axis at a certain angle. This is different from the rotation of the rotate () function. The rotate () function only rotates without changing the element shape. Skew () functionIt does not rotate, but only changes the element shape..
Scale (): enables the element to scale the object based on the central origin.
ScaleX (x) only scales horizontally (x axis ):
The scaleY (y) element only scales vertically (y axis ):
Displacement translate (): You can move an element in the specified direction, similar to relative in position. In a simple way, you can use the translate () function to move elements from the original position without affecting any Web components on the X and Y axes.
Matrix (): a (a, B, c, d, e, f) transformation matrix containing six values, used to specify a 2D transformation, it is equivalent to directly applying a [a B c d e f] transformation matrix. It is to reposition the element based on the horizontal (X axis) and vertical (Y axis). This attribute value uses the matrix involved in mathematics, here I just want to explain that the transform in CSS3 has such an attribute value;
Origin (Central Point) transform-origin (): changes the origin position of an element so that the element origin is not in the center of the element to reach the desired origin location.
Animation (transition): simple CSS events can be used to trigger the appearance changes of elements, making the effect more delicate. Simply put, the mouseClick,Focus,Clicked or changed to any elementAndSmoothAnimation EffectChange the CSS Attribute Value.
The excessive transition attribute of CSS3 is a composite attribute, which mainly includes the following subattributes:
Transition property transition-property: Specifies the name of the CSS attribute of the transition animation.Only attributes with one midpoint Value(The attributes of the animation must be generated) to achieve the transition effect. The CSS attributes with transition mainly include:
Transition time transition-duration: it is mainly used to set the time required for an attribute to transition to another attribute, that is, the duration of transition from the old attribute to the new attribute, commonly knownDuration
Transition function transition-timing-function: refers to the transitional "Slow function ". It is mainly used to specify the transition speed of the browser and the operation progress during the transition period. It should include the following functions:
Transition delay time transition-delay: used to specify the start time of an animation, that is, how long it will take to start execution after the element attribute value is changed.
Summary: when we want to change the transition effect of two or more css attributes, we only need to concatenate several transition statements and separate them with commas, then they can have their own different continuation time and their time rate conversion methods. But worth itNote:One point: the value of the first time is transition-duration, and the second is transition-delay.
Keyfranmes:Key FrameIt is similar to the Key Frame in Flash. In CSS3, it mainly starts with "@ keyframes", followed by an animated name with a pair of curly braces "{…}", There are some style rules in brackets for different time periods. Eg:@keyframes changecolor{ 0%{ background: red; } 100%{ background: green; }}
A style rule in "@ keyframes" can consist of multiple percentages, such as creating a style rule between "0%" and "100% ".More percentagesAdd different styles to the elements that require animation effects to each percentage to achieve a constantly changing effect.
Experience and skills: when defining an animation name in @ keyframes, 0% and 100% can also be represented by the keywords from and to, where 0% corresponds to from and 100% corresponds.
Note: Chrome and Safari require the prefix-webkit-; Foxfire requires the prefix-moz -.
Set the animation playback time animation-duration: it is mainly used to set the playback time of the CSS3 animation. Its usage is similar to transition-duration, and it is used to specify the duration of the element playing the animation, that is, the time required to complete an animation from 0% to 100%. Unit: seconds
Set the animation playback mode, which is mainly used to set the animation playback mode. It mainly allows elements to change the conversion rate of attribute values based on time advances. Simply put, it is the playing mode of the animation.
Set the animation start time to animation-delay: used to define the animation start time, used to trigger the animation playback time point. Like the transition-delay attribute, it is used to define the waiting time before the browser starts executing the animation.
Set the number of animation playback times. animation-iteration-count: used to define the number of animation playback times.
Set the animation playback direction to animation-direction. It is mainly used to set the animation playback direction;
Set the animation playback status, which is animation-play-state. It is mainly used to control the playback status of element animations.
Set the animation time attribute animation-fill-mode: defines the operations that occur before and after the animation starts. It has four attributes: none, forwards, backwords, and both.
By default, an animation does not affect attributes other than its key frames. You can use the animation-fill-mode attribute to modify the default animation behavior. Simply put, the animation is told to wait for the animation to start on the first key frame, or stop at the end of the animation on the last key frame without returning to the first frame of the animation. Or both.
Layout style:
Column-width: The same as the width attribute in CSS, but the difference is that the column-width attribute can be used independently when defining the width of an element column, it can also be used with other attributes in multiple columns.
Column-count: Specifies the expected number of columns and the maximum allowed number of columns for the element.
Column-gap: used to set the spacing between columns and columns,
Column-rule: defines the Border width, border style, and border color between columns. To put it simplySimilar to common border attributes. But column-rule isNo space occupied, Changing the width of a column does not change the position of any column.
For example: To effectively differentiate the relationship between columns, you can set a column border for it. Code: column-rule: 2px dotted green;
Column-span: used to define the number of sub-elements in a column. Attributes such as column-width and column-count allow an element to be divided into multiple columns. No matter how the elements in the column are sorted, they place content from left to right, however, sometimes we need to separate a piece of content or a title, that is, to span all columns, column-span can be easily implemented,
Box Model: added the box-sizing attribute in CSS3, allowing you to define the dimensional resolution mode of the box Model in advance.
In box-sizing, the difference between content-box and border-box is displayed, and its different analysis of the box model is as follows:
Scaling layout (Flexbox Layout-size is unknown or dynamic ):
Eg:
Flex project display:
Flex project column display:
Move the Flex project to the top:
Move the Flex project to the left:
Move the Flex project to the right:
Center horizontally and vertically:
Auto scaling of the Flex project:
Media Queries and Responsive design:
Media type reference:
Usage:
Usage:
Min-width:
Use of multiple media features:
Device screen output Width:
Not keywords:
Only keywords:
Note: up to now, CSS3 Media Queries has been supported by many browsers, in addition to the IE6-8 browser does not support, in all modern browsers can be perfectly supported. In addition, Media Queries does not add prefixes in different browsers like other CSS3 properties.
Responsive design (responsive design ):
Note: This is only a solution to adaptive response images, but this solution only supports fewer breakpoints. It is not very practical. Here it is just an idea.
Media query: Media query has been greatly expanded in CSS3. This attribute allows your design to adapt to the corresponding style based on the user terminal device. This is also the most critical aspect of responsive design. It can be said that the Responsive design leaves Medial Queries and loses the meaning of his survival. Simply put, you can query the appropriate style based on the device size. Responsive design focuses on the following: according to the current width of the device used by the user, your Web page will load a backup style to implement a specific page style.
Screen Resolution: In simple terms, screen resolution refers to the resolution of the user's display. In deeper terms, screen resolution refers to the resolution of the display screen when the user's device browses your Web page, for example, the resolution of a smartphone browser, a mobile browser, a tablet browser, and a desktop browser. The Responsive design uses the Media Queries attribute to adapt the resolution used by the browser to the corresponding CSS style. Therefore, screen resolution is a very important thing in the Responsive design, because the corresponding style can be called only when you know the resolution under which the Web page will display the effect.
Main breakpoint:
Layout skills:
Try to use:
Summary: using these skills is nothing more than to keep your HTML simple and clean, and do not rely too much on modern skills in the key parts (elements) of your page layout, for example, CSS3 special effects or JS scripts. After talking about this, how is the layout or HTML structure simple and clean? Here is a quick test method. First, you can disable all styles (and style-related information) on your page. Open the styles in your browser, then your structure will not be worse.
Meta tag (meta tag in the visible area ):
Resolution settings for different devices:1024px display@media screen and (max-width : 1024px) { /* Write the style here */} 800px display@media screen and (max-width : 800px) { /* Write the style here */} 640px Display Screen@media screen and (max-width : 640px) { /* Write the style here */} IPad horizontal screen display@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* Write the style here */} IPad portrait display@media screen and (max-device-width: 768px) and (orientation: portrait) { /* Write the style here */} IPhone and Smartphones@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* Write the style here */}
User Interface and other important attributes:
Outline:
Generated Content:
Eg: h1: before {
Content: "I was inserted ";
Color: red;
} Insert "I was inserted" in front of the h1 tag and mark it as red
Effect:
