1. What is CSS?
CSS( Cascading Style Sheet )Cascading style sheets define how HTML tags are displayed.
CSSStyle consists of two components: selector and declaration. The declaration also includes the corresponding values of attributes and attributes, and each declaration ends with a semicolon.
CSSNotes: / * notes * /
Two. Introduction mode of CSS.
1. In-line styles: lt; P style = “color: red” & gt; Hello word & lt; / P & gt; where style attributes are tags for setting CSS styles
2. Internal Embedded: Simplified CSS Style Several Written on the Web page & lt; head & gt; & lt; / head & gt; Tag pair & lt; style & gt; & lt; / style & gt; Tag pair
3. External import: write the CSS style in a separate file, and then introduce it in the page.
Import statement: < link href= “CSS file name” rel= “stylesheet” type= “text/css” />
Three. CSS selector.
Basic selector:
1. Element selector: P {attribute: attribute value}
2. IDSelector: TAGGING TAG ID {attribute: attribute value}
3. Class selector:. Class name {attribute: attribute value}Style class names can’t start with numbers (some browsers can’t recognize them); if there are multiple class attributes in the tag, split them with spaces.
Universal selector:
1. * { Attribute: attribute value}
Combiner selector:
1. Progeny selector:/* Select all of the tags inside a parent tag (as long as the tags in the parent tag can be found)*/
Parent tag to search for descendant tag {attribute: attribute value}
2. Child element selector:/* Select all secondary first labels within a parent label (only one level down from the parent label) * /
Parent label > child tag, {attribute: attribute value} to find.
3. Adjacent selectors:/* Select all tags that are next to one label (look down only) * /
A tag + tag to search for: {attribute: attribute value}.
4. Brother selector:/* Find all tags that are at the same level as a tag (can only be searched down) * /
A tag ~ to find the label {attribute: attribute value}.
Attribute selector:
1. /* Used to find the frontal element with specified attributes * /
Tag name [attribute name] {attribute: attribute value}
2. /* Used to search with specified attributes and worthwhile elements * /
Tag name [attribute name] {attribute: attribute value}
Not commonly used attribute selectors:
1. /* Find all elements that start with XXX * /
[ An attribute = ^ = XXX] {attribute: attribute value}.
2. /* Find all elements with an attribute ending with XXX * /
[ An attribute = = “XXX”] {attribute: attribute value}.
3. /* Find all elements that contain (string contains) XXX.
[ An attribute = = “XXX”] {attribute: attribute value}.
4. /* Find all the elements that have multiple values or values separated by spaces, and there is an element whose value is XXX * /
[ An attribute = = “XXX”] {attribute: attribute value}.
Pseudo class selector:
1. /* No access connection * /
a:link { Attribute: attribute value}
2. /* Visited connections * /
a:visited { Attribute: attribute value}
3. /* Mouse to link display font * /
a:hover { Attribute: attribute value}
4. /* Selected links (left mouse button does not let go) * /
a:active { Attribute: attribute value}
5. /* The input box gets the cursor when the style is * /
input:focus { Attribute: attribute value}
Pseudo element selector: beforeAnd after are mostly used to remove floating.
1. /* Commonly used initials are set in special format * /
A tag: first-letter {attribute: attribute value}.
2. /* Insert content before any element content.
A tag element: before {attribute: attribute value}.
3. /* After all elements are added, insert content * /
A tag element: after {attribute: attribute value}.
Four. Grouping and nesting.
Grouping:
1. When multiple tags need the same style, you can unify the tag style by using comma-separated grouping selectors between multiple selectors
①Tab 1, tag 2, {attribute: attribute value}
②The label 1,
②Tag 2 {attribute: attribute value}
Nesting:
1. Multiple selectors can be mixed.
Class selector element selector… {attribute: attribute value}
Five. Priority of selectors
1. cssinherit
Inheritance is a major feature of css, and it is dependent on ancestor-descendant relationships. Inheritance is a mechanism that allows styles to be applied not only to a particular element, but also to its descendants. For example, a body defines other characters that apply the color of a font to a paragraph as well.However, CSS inheritance is limited and some attributes can not be inherited.
2. Priority of selectors
Because of the variety of selectors, which selector style the browser adopts depends on the weight priority of the selector
In addition, you can force a style to take effect by! Import. But if you use too much, it will make the style file chaotic and difficult to maintain.
Six. CSS attribute
1. Width and height
widthProperty can set width for elements.
heightProperty can set height for elements.
The width of the inner label is determined by the label content.
2. Font properties
①. Font:
font-familyYou can try multiple font names one by one, and the browser will use the first font that it recognizes
font-family : ” Font 1 “,” font 2 “
②. Font size:
If set to inherit, it represents the font size value that inherits the parent element.
font-size : 20px;
③. Word weight (thickness):
font-weightThe word weight (thickness) used to set fonts.
| value | describe |
| mormal | Default value, standard thickness |
| bold | bold |
| bolder | Thicker |
| lighter | Finer |
| 100~900 | Set the specific thickness, 400 equals normal, and 700 equals bold. |
| inherit | Inherit the thickness of the font font of the parent element. |
④. text color
The color property is used to set the color of the text.
Color is most frequently specified through CSS:
Sixteen hexadecimal: #FF0000
A RGB value such as RGB (255,0,0).
The name of the color is: Red
3. Literal attribute
①. Word alignment: the text-align attribute specifies the horizontal alignment of the text in the element.
| value | describe |
| left | Align left side (default value) |
| right | Right alignment |
| center | Middle alignment |
| justify | Alignment at both ends |
②. Character decoration: the text-decoration attribute is used to add special effects to the text.
| value | describe |
| none | No decoration, standard text. (default value) |
| underline | Defining the underline of text |
| overline | Define the top line of the text. |
| line-through | Define lines in the middle of text.delete |
| inherit | Inherit the value of the text-decoration attribute of the parent element. |
③. Indentation of the first row: the text-indent attribute can indent the first row.
4. Background attributes
①. /* Background color * /
background-color : Color;
②. /* Background picture * /
background-image : url( “Picture path or name “”;
③. /* Background repetition * /
background-repeat : repeat( Default): background images automatically cover the entire set of wide height.
background-repeat : repeat-x : The background image is only covered in the horizontal direction.
background-repeat : repeat-y : The background image is only perpendicular to the height set.
background-repeat : no-repeat : Background images are not paved.
④. /* Background location * /
background-position : reght top; The picture is on the right upper side of the background.
background-position : x px y px; Set the pixel location of the background of the image (x, y).
background-position : center center; The background of the picture is in the middle.
⑤. /* Shorthand * /
background : url( “Picture path or name “” no-repeat center center;
5. Border
①. border-width : Border width
②. border-style : Frame style
| Frame style | Meaning |
| none | no border |
| dotted | Dot dotted border |
| dashed | Rectangle dotted border |
| solid | solid border |
③. border-color : Border color
④. border-radius : 50%; Set the rounded border, 50% is the round border, and the rectangle is the default.
⑤. Abbreviation: Border: 2px solid red;
⑥. In addition to uniformly setting borders, you can also set styles on one side of the border individually.
border-top-style : The upper border of the overall border.
border-right-color : The whole frame has a border.
border-bottom-style : The lower border of the overall border.
border-left-color : The left border of the overall border.
6. Display attribute Used to control the display effect of HTML elements.
| displayattribute | Meaning |
| display : ” none “ | HTMLThe elements in the document exist, but are not realistic in the browser. One is used to match the JS code. |
| display : ” block “ | By default, the width of the entire page is covered. If the width is set, the remaining part will be filled with margin. |
| display : ” inline “ | As shown by the in-line elements, setting the width, height, margin-top. margin-box, and float attributes of the elements at this point has little effect |
| display : ” inline-block “ | It is an element with the characteristics of intra row and block level elements. |
display : “none”Unlike visibility: hidden:
display : none An element can be hidden and hidden elements will not occupy the space occupied by the original.
visibility : hidden You can hide an attribute, but the hidden attribute still takes up the space that was used for hiding. That is, the calcium element is hidden and affects the layout.
Seven. CSS box model
1. margin : Used to control the distance between elements; the most basic use of margin is to control the space around the elements to achieve visual separation from each other.
①. margin-top : 5px The top outer margin (from the top element) is 5 pixels.
②. margin-right : 5px The right outer margin (from the right element) is 5 pixels.
③. margin-bottom : 5px The bottom outer margin (the element from the bottom) is 5 pixels.
④. margin-left : 5px The left outer margin (from the left side element) is 5 pixels.
⑤. Abbreviation: Margin: 5px 5px 5px 5px; order: upper right bottom left.
⑥. Center: Margin: 0 Auto
2. padding : It is used to control the distance between content and border.
①. padding-top : 5px Top inner margin (from internal element) 5 pixels
②. padding-right : 5px The right inner margin (from the internal element) is 5 pixels.
③. padding-bottom : 5px Bottom inner margin (from internal element) 5 pixels
④. padding-left : 5px Left inner margin (from internal element) 5 pixels
⑤. Abbreviation: padding: 5px 5px 5px 5px; order: upper right bottom left.
paddingShorthand supplement:
i : Provides a distance parameter for four directions.
ii : Two distance parameters are provided. The first parameter is used for the upper and lower sides, and the second is for the left and right sides.
iii : Provides three distance parameters, the first for the upper side, the second for the left and right sides, and the third for the lower side.
iiii : It provides four distance parameters, which are applicable to four directions in the upper right lower left sequence.
3. border(Border): around the margins and contents of the border.
4. content(Content): the contents of the box, displaying text and images.
Eight. Float floating
In CSS, any element can float.
Floating elements generate a block level box, no matter what element it is.
Floating characteristics:
1. A floating box can move left or right until its outer edge touches a frame containing the box or another floating frame.
2. Because floating boxes are not in the normal flow of a document, blocks in the normal flow of a document behave like floating boxes do not exist.
Floating optional three parameters:
1. left : Floating to the left
2. right : Float to the right
3. none : Default value, not floating
Nine. Clear
clearProperty specifies that other floating elements are not allowed on that side of the element.
clearAttribute values work on themselves and do not affect other elements.
| clearattribute parameter | Meaning |
| left | Floating elements are not allowed on the left side of the element. |
| right | Floating elements are not allowed on the right side of the element. |
| both | Floating elements are not allowed on the left and right sides. |
| none | Default values. Allow floating elements to appear on both sides. |
| inherit | Specifies that the value of the clear attribute should be inherited from the parent element. |
Ten. Overflow spillover
overflow (Horizontal and vertical settings)
overflow-x (Set horizontal direction
overflow-y (Set vertical direction
| Spillover parameters | Meaning |
| visible | Default value. Content will not be pruned and will appear outside the element box. |
| hidden | The contents will be pruned, and the rest of the contents will not be visible. |
| scroll | The content will be pruned, but the browser will display the scroll bar to see the rest. |
| auto | If the content is pruned, the browser will not display the scroll bar, but you can scroll to see the rest. |
| inherit | The rule should inherit the value of the overflow attribute from the parent element. |
Eleven. Positioning (position)
1. static : Default values, no positioning, can not be used as a reference for absolute positioning, and setting the left, top equivalents of the label object does not work.
2. relative(Relative positioning: Relative positioning is relative to the original position of the element in the document, i.e. its original position as a reference. Even if the relative positioning and offset values of the element are set, the element will still occupy the original position, but according to top, left, right, bottom and so on.Property is normally offset in the document.
3. abssolute(Absolute positioning) The initial element of the element set to absolute positioning is deleted from the document and positioned relative to the nearest positioned element. If no element has been positioned, its position is positioned relative to the body element.If the parent element sets the position attribute, then the child element will be positioned at the upper left corner of the parent element. This can solve the problem of tag deviation in adaptive websites.
4. fixed(Fixed: Objects are detached from the document and are positioned with the window as a reference point using top, bottom, right, left attributes. Objects do not scroll with the scroll bar. The stacking order is defined by the Z-index attribute.If an element has absolute positioning or fixed positioning, the element cannot set float. But relative does because it still occupies space.
Twelve. Z-index (stacked)
Set the stacking sequence of objects, and the numeric objects will be overlaid on smaller tags.z-indexIt can only take effect on location elements.
| z-indexparameter | Meaning |
| anto | By default, stack order is equal to parent element. |
| number | Setting stack order of elements |
| inherit | Specifies that the value of the Z-index attribute is inherited from the parent element. |
Thirteen. Opacity (transparent)
Set the transparency effect. The range of values is 0~1,0 is completely transparent, and 1 is completely opaque.