Home > Developer > Web Develop
CSS is a computer language used to express HTML and other file styles, it is to add a variety of styles and expressions to the various tags set in the HTML file, so that the page is more vivid and beautiful.
2, import CSS Three ways 1, inline style sheet: directly in the <body> body of the HTML tag, using the style "" to reference;For example, set the size of a div:
<div style= "height:100px width:100px" ></div> Advantages: Flexible use, highest priority weight disadvantage: does not conform to the "content and performance of the separation" requirements; not conducive to style reuse 2, internal style sheet: inIn the HTML file, all CSS code needs to be written to the <stlye></stlye> tag. The Type property of the Stlye label selects Text/css, but the Type property can be omitted.
Features: A certain degree of implementation of HTML and CSS separation, but separation is not thorough enough, there is no way to multi-page common style.
3. External style sheet: writes CSS separately to the CSS file and is associated with the HTML file.Advantages: Completely realize the separation of HTML and CSS, in line with the specifications of the web, in favor of multi-page reuse unified style;
[Two ways to import CSS files]
① in the
Introducing an external CSS style sheet: rel: Select Stylesheet,type: Select text/css,href: Select the CSS file path for example:
② in the <style> tab, use @import to import
[The difference between the two ways of importing]
①link is a standard HTML tag, while @import is not a standard label
②link can be compatible with all low-version browsers, and @import can only be used after CSS2.
③link is a bridge that connects two files, while @import is the equivalent of copying a CSS file into an HTML file.
④link will connect the CSS file while the HTML file is loading, and @import will import the CSS file after all the HTML files have been loaded.
In summary, we use the link connection method to load the CSS file.
notation:*{}
Function: You can select all the tabs in the page
Priority: Lowest!
Syntax:HTML tag name {}
Function: You can select all HTML tags that have the same name as the selector in the page
Syntax:. Class Name {}
Call: Use the class= "class name" to invoke the selector on the label that needs to invoke the selector style.
notation:#ID名 {}
Call: A tag that needs to call a style, starting with a id= "ID name"
Note that the same ID name cannot appear in a page
5. Set Selectornotation: selector 1, selector 2, ...., selector n,{}
Effective rule: Multiple selectors take the set, as long as the label satisfies any one of the selectors, the style takes effect immediately.
notation: Selector 1 selector 2 .... Selector n{} All selectors are next to each other, no separation
Effective rule: Multiple selectors intersect, you must meet the requirements of all selectors in order to take effect.
notation: Selector 1 selector 2 .... Selector n{} Selectors are separated by a space
Effective rule: As long as the latter selector is a descendant of the previous selector, it will take effect (descendants include descendants, grandchildren, great-grandchild)
Popular speaking: As long as the latter a selector, in the previous selector can be
notation: selector 1> selector 2>....> selector n{} selector with > delimited
Effective rules: must be satisfied, the latter selector is a direct descendant of the previous selector, in order to take effect, (in the middle can not be separated from any label)
1. Can only have letters, numbers, underscores, minus the composition
2. The beginning cannot be a number, nor can it be a minus sign
The first principle of the 1.css comes into force is "near priority"! Whichever selector acts on the innermost label, the tag takes effect;
2. When the selector is acting on the same layer, it can be calculated according to the priority weight:
ID Selector =100>class=10> Tag Selector =1
Note: The set selector, equivalent to multiple selectors, is disassembled, so the precedence of the set selector does not accumulate,
3. When the selector is acting on the same layer, and the priority weight wants to wait, then the last selector is written in effect.
①font-weigh: Font weight bold-bold normal-normal lighter-fine body
You can also use a value of 100-900, 400 means that normal,700 represents bold
②font-style: Font style. italic-Tilt normal-Normal
③font-size: Font size. Can write PX units, can also write%
200% = twice times the default size of the browser (16px) =32px
④font-family: Font family (font family). You can write the font name directly, or you can specify the writing system.
Common Font Series: serif-liner Body, sans-serif-non-liner body;
Font-family can receive multiple values, separated by commas, to give precedence to the first one, and, if not, to use backwards. Usually, the last one is the font family name;
For example: font-family: "Black", "Microsoft Ya Black", sans-serif;
⑤font abbreviated form:
The order must be:font-weight font-size/line-height font-family
Between different attributes, separated by a space;
Font-size/line-height must be a set of/delimited
font-family multiple fonts, separated by commas
Font:bold Italic 30px/2 "Blackbody", "Microsoft Jas Black", Sans-serif
①color: Font color can be word, 16 binary, RGB, etc.
②opacity: Transparency selectable value 0-1
[opacity and Rgba differences ]
The RGBA itself can set the color, while the opacity must be used with other color attributes;
Rgba only makes the color of the current element transparent, and opacity makes the current element transparent when all text, background, and child elements are present.
①line-height: line height, can write PX units can write numbers directly (indicating the default number of leading times), can write% (the default line spacing percentage)
Row high important role: let the single-line text below the div vertical Center, set the line higher than the div height, you can let single-line text vertically center.
②text-align: Set the horizontal alignment of row-level elements within a range: Left/center/right
③letter-spacing: Character spacing, distance between words and words
④text-decoration: Text Decoration
underline-underline, overline-underline, line-through-Strikethrough, none-remove hyperlink underline
⑤overflow: Sets how the text is displayed beyond the region.
Overflow:hidden; The text hiding beyond the area is not displayed;
Overflow:scroll: Horizontal vertical scroll bar, no matter how much text is displayed
Overflow:auto; automatic, default effect. Text displays more scroll bars, less text, and does not display scroll bars.
Scroll bars in two directions can be modified individually using overflow-x and overflow-y
Overflow-x:scroll;overflow-y:hidden
⑥text-overflow: Set extra text display at the end of the line
clip-redundant text cut out ellipsis-superfluous text ellipsis is now displayed
Display ellipsis, need to cooperate with white-space:nowrap;
"Focus" Set the end of the line display ellipsis (three lines of code, indispensable)
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
⑦white-space:nowrap; Set the end of Chinese line, keep the line display
⑧text-indent: First line indent, Unit px
⑨-webkit-text-stroke:0.5px Blue; text stroke
-webkit-indicates that only the browser of the WebKit kernel is in effect, common with chrome, safari
⑩text-shadow: Text shadow, with four attribute values, space-delimited
Horizontal shadow distance, positive shadow right shift, negative shadow left shift
Vertical shadow distance, positive shadow down, negative shadow move up
Shadow blur distance, 0 means shadow is not blurred at all
The color of the shadow.
text-shadow:2px 2px 2px Blue;
1.background-color: Background color
2.background-image: Background map. Use the URL ("") to select the background image, background and back color are present, background map covers the background color
3.background-repeat: The repeating mode of the background map, no-repeat uneven, repeat tile, repeat-x extension x-axis tile, repeat-y y-axis tile.
4.background-size: The size of the background map
[Specify width height]
Width height designation, can write PX, can also write% (percentage of parent container width high)
When writing two attributes, the width and height are indicated respectively.
When the party writes a property, it represents the width, height, etc. than the scale.
[Use other properties]
Contain: Picture is scaled until wide or high school is scaled to 100% (may result in shorter side less than 100%, the picture cannot cover all areas.)
Cover: Picture is scaled until wide or high school smaller side is scaled to 100% (may result in longer side greater than 100%, picture out of range display is not complete.)
Background-position: Background Image offset
① specified location: Left/center/right top/center/bottom
When there is only one value, the other is centered by default
② Specify coordinates: Two attributes: horizontal and vertical, coordinate values can be PX units or percentages
When writing pixel units: The horizontal direction is right negative left, the vertical direction is negative (left negative right positive, negative positive)
When writing percentages: generally positive, indicating that the width of the picture is removed, the distribution of the remaining white space is proportional
background-position:30% the width of the image horizontally, the remaining area is 3:7 points.
1. writing : Pseudo-class selectors , after selectors, by: delimited, immediately after the pseudo-class state
Eg:.a:link
2. pseudo-Class status of hyperlinks:
: link-No Access status: visited-visited status
: hover-mouse pointing State, commonly used: active-Activate selected state (mouse click Not loose)
Note: When multiple pseudo-class states of hyperlinks exist at the same time, they must be in order according to Link-isited-hover-active , otherwise the partial selectors will be invalidated.
3.pseudo-class state of input:
: hover:focus-Get focus Status: Active
Note: When multiple states of input exist at the same time, you must follow the order above.
4.: Not (s) match does not contain S selector
Suppose there is a list, each list item font is color, but there is one item that does not need a color, it can be a class for this Li, to exclude
Li:not (. ABC) {
Color: #f00;
}
5. other tags, basic only: hover event
7. CSS Box model 1, margin outside margin: 1. Write a value that indicates that the margin around is the specified value; 2. Write two values: The first value is the upper and lower margin, the second value is the left and right margin, 3. Write three values: respectively, the upper and lower three directions, the left default equals to the right; 4. Write four values: Indicates top, right, bottom, left, Four side clockwise direction. 5.margin:0 Auto: "Important"Set block-level elements to center horizontally in the parent container! Note: Setting the margin will cause the div area to be large, and it is important to note how much of the div's actual width is margin-top:200px;2, padding padding: set in the same way as margin 3, Border border: 1. Setting a border requires three properties: Width style color in principle, three attributes are indispensable, the order can be arbitrarily modified; 2. You can use top, right, bottom, and left to set four sides 4, when the parent box wraps the child box, When adding margin-top to a child box, the upper line of the child box and the parent box cannot be separated, but will cause two boxes to come down at the same time. [Solution] 1, add a little padding-top to the parent box, it will cause the parent box structure will be more than 1px,padding 2, add 1pxborder-top to the parent box, will also cause 1px of extra space, not recommended; 3. Adding a float to a parent box or a child box may affect the layout of the page to a certain extent due to the float. 4. Add the Overflow:hidden property to the parent box, recommended for use. 5. Border-radius Fillet1, Border-radius can receive 8 attribute values, respectively:
X-axis (top-left, top-right, bottom-right, lower-left)/y axis (top left, top right, bottom right, bottom left)
Eg:border-radius:
2, abbreviated form:
Write only the x axis, the y axis is equal to the x axis by default;
Four Corners do not write full, the default diagonal equal;
Write only one value, default 8 number is equal;
Eg:border-radius:50px 20px
border-radius:50px 20px 50px 20px
border-radius:50px 20px 50px 20px/50px 20px 50px 20px
The square side is half as long as the circle will appear
1, Border-image: Altogether can put 10 attribute values:
① picture path: url ();
② the slice width of the picture: 4 values, representing the upper, right, bottom, and left four edges;
With 4 line cuts, you can divide the picture into 9 Gongge. 9 Gongge Four Corners corresponding to four corners of the border (no stretching is done), 9 Gongge four edges corresponding to four borders (stretching/flattening/repeating according to Settings)
Note: When writing, you must not take PX units!!
③ width of the border: 4 values, which are the width of the top, right, bottom, and left four borders.
Note: When writing, it must be in PX units, with/separated from the width of the slices
④ the way the border is repeated: stretch (stretched). Round (covered), repeat (repeat)
[The difference between round and repeat]
The round will compress the four edges appropriately, ensuring that four edges can repeat the whole number of times.
Repeat will keep the width of each edge in proportion to the length of the line, which may cause the full edge to be displayed at the corners.
2, the attribute value writing: Border-image:①②/③px④
3, Border-imagr in the WebKit kernel browser, must be prefixed with-webkit-.
7. box-shadow-box Shadow, commonly used 1, 6 attribute values, space separated ①x axis shadow distance (required): Can be positive negative, positive-right, negative-left ②y axis shadow distance (required): can be negative, positive-lower, negative-upper ③ shadow blur radius (optional): Only positive, default is 0, the greater the value, The more blurred the shadow. ④ Shadow expansion radius (optional): Can be negative, the default is 0, the value increases, the shadow expands, the value decreases, the shadow smaller. ⑤ shadow Color (optional): default is black ⑥ inner and Outer shadow (optional): The default is an outer shadow. inset = Inner Shadow */ 8, outline: Peripheral LineAppears outside the border, and does not occupy space. The surrounding content may be overwritten.
9, Box model type 1, the Standard box (the box): We set the width and height, only contains the Content section, and then add padding or border, will cause the box to become larger; 2, IE box (strange box): We set the width and height, including Content+padding+border, and then add padding or border, will compress the content area, but the total size of the box is unchanged;3. Manually set the box type
Box-sizing:border-box; Weird box;
Box-sizing:content-box; Standard box; default effect.
1, the standard flow in the block-level box, the width will automatically extend to 100%;
and the Block-level box of floating flow, the width does not extend automatically, but the content is open;
2. When a box floats, other boxes that are not floated in the standard flow will occupy the original position of the floating box as if the floating box does not exist. (floating box, will cover above the box)
However, the text content in the floating box will be affected by the width of the floating box. (The contents of the non-floating box will not be covered by the floating box)
3, remove the impact of floating box. Common
You can add the clear property to the affected box to remove the effect of the floating box on itself.
Clear option value: left-Remove left float effect, right-remove right floating effect
both-simultaneously remove left and right floating effects, often selected
4, the parent box does not specify the height, if the child box does not float, the height of the parent box can be opened by the quilt box.
If all the child boxes in the parent box are floating, the parent box height becomes 0.
[Resolve all sub-boxes floating, parent box height collapse problem]
① adds a float to the parent box;
② Add Overflow:hidden property to Parent box : recommended.
③ at the end of the parent box, add an empty div with a height of 0. Add Clear:both to this div
1, use position:relative; set element as relative anchor element.
2. Use top, left, bottom, right to adjust element position. When left and right exist simultaneously, left is in effect, top and bottom exist simultaneously, top takes effect.
3, positioning mechanism:
The ① is positioned relative to its original position. The position of the element does not change when the top property is not specified.
② relative positioning does not release the position of the element in the original document stream, and does not affect the location of other document flow elements.
4, about the element Z axis overlap:
① anchor element: The default z-axis is higher than the normal document flow element.
② the same as the positioning element "later on the house", behind the cover of the front.
③ can use Z-index to manually adjust the upper and lower z-axis order of positioned elements.
Z-index defaults to 0, and can only be used for locating elements.
1, use Position:absolute; set element to absolute position
2, positioning mechanism:
① is positioned relative to the ancestor element of the first non-static location.
(both are positioned relative to the ancestor elements using flow relative, absolute, fixed positioning)
② If all ancestor elements are not positioned, they are positioned relative to the upper-left corner of the browser.
③ when using the absolute element, it is completely removed from the document stream and the original space is deleted.
1, the use of position:fixed, refers to fixed positioning;
Fixed positioning, is a special absolute positioning!! Only ancestor elements cannot be locked using positioning.
2, positioning mechanism:
is always positioned relative to the top-left corner of the browser and does not scroll with the scroll bar scrolling.
1, function: According to the value set by the Z-index property, determines the stacking order of the element in the z-axis direction.
2. Requirements for use
①z-index can only adjust the stacking order for positioned elements.
Relative, Absolute, fixed
The z-index of the ② element should consider the constraints of the parent container z-index;
If the parent container sets the Z-inedx property value, all the elements of the child container will not be separated from the parent container's constraints. (both, if the parent container is set to Z-index, the child container can only be based on the parent container value.) Set the Z-index for the sub-container and only adjust the cascade order of the sub-containers within the parent container hierarchy.
If the parent container is not set Z-index, or Z-index:auto is set, the child container adjustment z-index will not be constrained by the parent container hierarchy.
3, Z-index:auto; and z-index:0; similarities and differences
①z-index:auto; is the default value, with z-index:0; on the same layer.
②z-index:0 a constraint child element must be in the same plane as the parent container.
1. Function: Clip property is used to crop the picture label and display the specified area of the picture.
2. Use requirements: Clip properties can only be used for absolute or fixed positioning of the picture label.
3, Clip properties: Accept a rect () function, the function passed four values, respectively, the position of the upper, right, bottom and left four tangents;
Note: Unlike other properties, the distance between the top and bottom two values of the four values in the RECT is taken from the top, and the left and right two values are taken from the left margin.
① set sub-containers as anchored elements:
②left:50%; margin-left:-50px;
top:50%; margin-top:-50px;
① the width of the child container is unspecified, only the height is specified, or the height is stretched by the content
②margin:0px-50px; can make left and right sides, all outside the parent container 50px;
You can set the state in which the element is displayed, with optional values:
None: Hide Elements
Blocks: block-level elements
Inline: Row-level elements
Inline-block: Displayed as an inline block-level element. itself will be a row-level element, but with all the attributes of a block-level element: such as width, height, margin, padding, etc...
Example: Change a tag to block level label
[How to hide an element]
1, height or width set to 0px; with Overflow:hidden; properties
2, Display:none; Display Display:block;
3, opacity:0; set to transparent, but element space occupies.
4, Visibility:hidden, hidden elements, but the element space will still occupy, similar to opacity.
Show visibility hidden elements, visibility:visible;
1,-webkit-:chrone/safari Browser;
2,-moz-: Firefox browser;
3,-ms-:ie Browser;
3.-o-:opera Browser
1, px: pixels, fixed length, representing the resolution of a few pixels;
2,%: relative to the default value of the percentage;
3, EM: Length and the size of the element hook;
4. REM: Hooks the font size of the root element. That is, with the
[Em and REM differences]
EM is hooked up to the current font-size, and if the current element is not set, the nearest ancestor element font size is found until the root font size;
REM is independent of the current element font size and is directly linked to the root element font size.
1. Background-clip: Sets the clipping display area of the background or back color,
Border-box starting from the edge of the border
Padding-box starting from the inner edge of the border
Content-box starting from the text content area
If you are not in the display area, the background or back color will be cropped and not displayed.
2, Background-origin: Set the background map from where to start positioning
Border-box the top left corner of the background image starts at the edge of the border
Padding-box the top left corner of the background image starts at the border edge
Content-box the upper left corner of the background image starts from the text content area
3, Background-origin will not change the size of the background map, just decide where to start the upper left corner of the background map;
Background-clip is only responsible for cutting out the display area, but does not care where the background map is located.
4, Background-attachment: The background map attachment way:
Scroll: Background graph follows area scrolling. Default effect
Fixed: The background map fills the entire area, and the background map is fixed and does not scroll with the scroll bar.
5, background abbreviation form:
background:background-color background-imger background-repeat background-attachment background-position
① set which CSS property, participate in the transition, you can specify All/none
② transition completion time, usually. 3s or. 5s
③ transition Style effects: typically select ease
④ transition delay after a few seconds to start, you can omit to write.
Transition: Attributes can define multiple transitions at the same time, separated by commas.
Eg:transition:width. 3s linear,height 1.5s ease;
1. Common transformation functions
Translate (10px,10px) translation, the second one does not write by default is 0
Scale (1.1) scaling, second not written, default equals first
Rotate (90deg) rotation, the default around the z-axis, you can use Rotatex (), etc.
Skew (20deg,30deg) twist, horizontal, vertical twist how many degrees
2, transform can implement a variety of transformations at the same time, separated by a space
Eg:transfom:skew (20DEG) scale (1.3) transform (100px)
3, Transfom-crigin: Define the transformation starting point, commonly used and rotation transformation.
Optional value: Left/center/right bottom/center/top
You can also specify X, y coordinate points, and the first number is the x-axis
Example: Transform:rotate (90DEG);
Transform-origin:right Bottom;
means: Rotate 90 degrees around the lower left corner.
1. Declaring a keyframe (animation)
@keyframes name{
form{}
to{}
}
Stage notation:
① can directly use the form-to;
② can set the 0%-100% notation, but the beginning and end must be 0% and 100%;
2, in the CSS selector using animation call declaration good animation;
[abbreviated form of animation]
Animation-name: Animated name, declared Keyframe name;
Animation-duration: Duration of animation
Animation-timing-function: Animation speed curve, often selected ease;
Animation-delay: The time that the animation starts, delay a few seconds;
Animation-iteration-count: The number of times the animation plays, by default, 1.,infinite means unlimited playback
Animation-direction: Whether the animation in the next reverse play, the default is normal means no retrograde playback, alternate for retrograde playback (100%-0%);
Animation-fill-mode: Indicates the end of the animation, in what state, to use this property, the number of executions of the animation must be limited, forwards: Indicates that the animation stays in the end state, backwards: Indicates that the animation stays in the start state.
Animation-name and Animation-duration must be set, other optional;
Animation can set multiple animations at the same time, separating multiple animations with commas
animation:frame1 1s,frame2 1s,...... framen 5s;
HTML5--CSS Basic Syntax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
