CSS is a computer language used to express file styles such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language).
CSS can not only statically modify web pages, but can also cooperate with various scripting languages to dynamically format various elements of web pages.
CSS can perform pixel-level precise control over the layout of element positions in web pages, supports almost all font sizes and styles, and has the ability to edit web page objects and model styles. For in-depth study, please search "php Chinese website CSS video tutorial" on Baidu and learn online for free.
1. Common attributes
name: name, can be repeated, can be the same; class: class name, can be repeated, or can have multiple, used for CSS; such as <p class="one two"></p>; id: unique identifier, cannot Repetition is generally used in JavaScript; the naming rules are the same as the label naming rules in other languages;
title: title, which can be added in the tag; such as <img src="1.jpg" /title="This is a picture">;/
2. Tag relationship
Descendant relationship: parent-child relationship (including relationship);
Brotherly relationship: same-sire relationship;
3.CSS-Cascading Style Sheets
CSS comments: /The comment content is written here for the programmer to see, and will not be displayed on the page/;
CSS grammar rules: All symbols must be entered using the English input method, in lowercase, and attributes must be written in curly brackets. Each attribute statement must end with a semicolon, and the attribute value must have a pixel unit (px); format: attribute: attribute value ;
4. How to introduce CSS
Inline introduction: The introduction method of adding styles in tags; Format: <tag style="background:red; font-size:20px;">Content</tag>; Note: The maintainability of the code is extremely poor, CSS code and html The structure is not separated; the scope of influence is only in the current tag; inline introduction: add <style type="text/css">CSS style</style> in the head of the web page; Note: the code maintainability is relatively poor, no Realize the separation of CSS code and HTML structure, and the scope of influence is only on the current page;
External link introduction: Create an xx.css file outside the web page, and use <link rel="stylesheet" type="text/css" href="xx.css"> in the header of the web page; Note: The code is highly maintainable. CSS code is completely separated from HTML structure, affecting all web pages that introduce CSS files on the entire website;
5.CSS core syntax:
Structural format: selector {attribute: attribute value; attribute: attribute value;...}; Example: p{background:red;color:gray;size:20px;};Selector: a tool for selecting page elements;
Braces: Style content is written inside the braces;
6. Selector
Basic selector:
Universal selector: used to initialize the default style of the web page, written at the beginning of the style sheet; format: *{padding:0;margin:0;}; label selector: add style to the specified label; format: p{color:green; }; Class selector: Choose to specify the class selector style; Format: .class name {background: pink;}; Note: The class name is defined in the tag, such as class="one"; If the content styles of several blocks are the same, then Just give them the same style;
id selector: unique identifier, cannot be repeated; format: #id name{backgound-image:url(1.jpg);} Note: id name is defined in the tag id="one"; id cannot be added with the table, how many times When the content style of each block is the same, the ID names of several blocks must be different;;
The difference between id and class: Pay attention to the previous point - ID must be able to uniquely determine the DOM node. If you use the ID selector throughout the article, even if the two DOM node styles are exactly the same, you must write the node style twice. If you want to maintain it later, you must maintain the code in both places! ! ! Greatly increases maintenance costs;
Pseudo-class selector: Sequential LoVe HAte principle, you can jump over, but the order cannot be changed; they are link status (link), visited status (visited), active status (hover) and click status (active);
Point drawing class: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} style when getting focus a:focus{}; Note: Text attributes, background colors and pictures can be added to the attributes; a{} and a:link{} achieve the same effect; list class: li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};Note: Text series attributes, background color and pictures can be added to the attributes;
Compound selector:
Group selector (union selector, multiple selector): used to add the same style to multiple elements; for example: .one, #one, a, span{color:red;font-size:14px;} means Class one, #one, a tag, and span tag have common attributes; descendant selector: add attributes to subclass elements; example: .one a{text-decoration:none;} means the content modified by the a tag of the descendant of class one No underline; child element selector (specified selector): add attributes to the specified child element; for example: #one>p{color:red;}; means to add the content resting on the p tag of the son of the id selector one property;
Adjacent element selector:
1. Two adjacent sibling selectors add attributes. They do not add attributes to themselves, but only add attributes to the following sibling; .one+p{background:red;}; 2.one~p{background:green} means It is to add attributes to all p tag elements after the one selector, provided that they have a parent class;
Attribute selector:
1. Add attributes to elements with attributes; img[id]{background:red;} Add attributes to elements with id;
Add attributes to elements with specified attribute values: img[src="b.jpg"]{background:red;}Add attributes to elements with b.jpg;
3. Add attributes to elements starting with the specified character: img[src^="b"]{background:red;} Add attributes to all elements starting with b; 4. The selector has the specified attribute value. Elements at the end: img[src$="b"]{background:red;}Add attributes to all elements ending with b; 5. The selector has elements containing the specified attribute value: img[src*="b" ]{background:red;}Add attributes to all elements containing b;
7. Element inclusion (classification of display methods)
Block elements: used for typesetting. Typical structures include: p, p, li, h1, dt;
The element displays on its own line (independent of width); the width and height can be set;
When a block-level element is nested, if the width of the child element is not set, the width of the child element will be the width of the parent element;
Inline elements: used to add styles; span, a, font, strong; Note: Do not give upper and lower margins and padding to inline elements. The upper and lower will be ignored, and the left and right will work (generally not used);
Elements are displayed on one line;
Width and height cannot be set directly;
Inline block elements: image, input;
Elements are displayed on one line;
Width and height can be set;
Conversion relationship: inline contains inline; block elements contain block elements, and block elements can contain inline elements;
Display: inline converts elements into inline elements Display: inline-block converts elements into inline block elements
Display: block Convert the element to a block element
8.CSS properties
Font related properties:
font-size: font size, how many pixels, px; font-weight: font thickness, bold (700-900), normal, you can write 100-900; font-style: font tilt, italic, normal; font-family: font , Microsoft YaHei, HeiTi;
Attribute concatenation: font: font-style font-weight font-size/line-height font-family; Note: The font attribute concatenation must include font-size and font-family (other attributes can be omitted); font-size and font -The order of family cannot be changed;
text:
color: color; text-indent: indent [unit is em]; text-decoration: text line [underline, overline, line-through strikethrough, none cancel line]; word-spacing: distance between words ;letter-spacing: letter key distance; text-align: horizontal alignment [default left, center, right];
line-height: line height, the height of the line where the text is located [when the line height is equal to the height of the element, the text is vertically centered];
Size: It is the size of the block element. The width and height cannot be set for inline elements. If you want to set it, you must convert it;
width: width;
height: height;
Attributes of list ul and li: list-style-type can be added to ul but does not need to be added to li;
list-style-type:none; Remove symbols, squares, circles, disc solid circles. You don’t need to write them after adding pictures list-style-type:none;list-style-image:url(1.jpg) Image border: 1px solid red; set a border for ul as a whole
list-style-position:outside; style image positioning: inside, outside
background:
Background color background-color; background image background-image Note: When setting the background image, be sure to set the width and height; background tile background-repeat: repeat (default value) | no-repeat (not tile) | repeat-x | (horizontal tiling) repeat-y (vertical tiling) background position background-position: Set the specific value: left| right| top| bottom| cneter; when setting the specific value, the order is not distinguished; when setting the specific number, the first One value represents the horizontal direction, the second value represents the vertical direction, set the front background image setting format to background-image; set whether the background is fixed background-attachment: Scroll (default value) scrolling; fixed (picture fixed);
Attribute joint writing: no limit on quantity or order: background:url("") red no-peat 30px 40px;
line-height: box model: used for web page layout, the width must be set
Box border properties: components:
Border width and height: border-width: 1px; Border color: border-color: red; Border style: border-style: solid solid line/dotted dotted line/dashed dotted line/none; attribute joint writing: border: 1px solid red; Note: There is no order restriction when writing attributes together. The border color does not need to be written, and the border width does not need to be written. Separate writing methods: border border: padding inner margin: set the distance between the content and the box border
Margin: Set the distance between boxes
p{width:300px;height:200px;border-top:1px solid red;border-left:1px solid red;border-right:1px solid red;border-bottom:1px solid red;}
To set properties individually:
border-top-color:red;border-top-style:solid;border-top-width:1px;
Box size:
Where the box size affects: The inherited box is within the width range of the parent box, and the padding value will not affect the box size. Box size calculation: width = content width + left and right borders + left and right padding
The border can affect the box size and the padding can affect the box size.
In the future, when implementing the page box layout, if inner margins are set for the box, the corresponding value must be subtracted from the content width or height.
Margin: Set the distance between boxes
Center the box: Attribute joint writing:
The box under the standard flow is centered: margin: 0px auto; the positioned box is centered: first take half of the parent box, and then go back half of its own width. Margin: 10px, top, right, bottom, left, 10pxMargin: 10px, 20px, top, bottom, 10px, left and right, 20pxMargin: 10px 20px 30px 10px top, 20px left and right, 30px bottom
Margin: 10px 20px 30px 40px top right bottom left
Notice:
Attribute joint writing:
Padding: 10px; the distance between top, right, bottom and left is 10pxPadding: 10px 20px; top and bottom 10px left and right 20pxPadding: 10px 20px 30px; top 10px left and right 20px bottom 30px
Padding: 10px 20px 30px 40px; top, right, bottom, left
When two boxes are displayed vertically, the margins are subject to the set maximum value (the first case of merging margins). When two boxes are displayed horizontally, the margins overlap and the margins collapse (a difficult problem) to solve step:
padding: set the distance between the content and the box border
Set a border for the parent box
Set overflow:hidden for the parent box;
Clear margins:
Method 1: *{padding: 0; margin: 0;}
Method 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.Three major characteristics of CSS
Inheritance:
Inheritable: color, text-align, text-indent, font-size, font-weight, font-family Non-inheritable: text-decoration, border, display, margin, float, padding The premise for inheritance to occur is between tags Belonging to a nested relationship, text color can be inherited; text size can be inherited; font can be inherited; text-related attributes can be inherited; line height can be inherited
Special features:
The text color in the parent element cannot be inherited (cascading)
<h1></h1> Title tags cannot inherit the text size from the parent element
Overlap: Overlap refers to the coverage of styles
The cascading nature of styles has nothing to do with the order in which the styles are called, but is related to the order in which the styles are defined.
The premise for cascading to occur: style conflict
Priority:
Weight: Inline introduction (1000) > id (100) > class (10) > label (1) > general (0). Add the weights. The larger the value, the higher the priority.
The weights are the same, and the following styles will work
10. Supplementary knowledge notes
Form optimization writing: <lable for="one">User name:</lable><input type="text" id="one">Format list icon: list-style: noneForm merge: border-collapse:collapse (Set table border merging, applicable to tables) Bfc "Formatting context" overflow:
visible:Default value. The content will not be trimmed and will be presented outside the element box. hidden: The content will be trimmed and the remaining content will be invisible. When the picture changes position, the parent element will also change its position. Adding this attribute value to the parent element can make the parent element change its position. The element position remains unchanged scroll: The content will be trimmed, but the browser will display scroll bars to view the remaining content
auto: If content is trimmed, the browser displays scroll bars to view the rest of the content
11. Standard flow: block-level elements are displayed in one line; standard flow display mode: the default display mode of elements
12. Floating: Floating is used to solve the problem of text and picture wrapping; used to make navigation bars and web page layouts
Usage: Float:left| right Features: Float whatever you want
Elements set to be floated do not occupy their original position (off-script), allowing block-level elements to be displayed as floats on one line. Inline elements can be converted into inline block elements.
During the mode conversion process, use display if you can.
Clear float:
Definition: Clearing float does not mean deleting float; clearing float refers to the impact of clearing float. Pay attention to the timing of use: when the child element is set to float and the parent element has no height, the page layout will be confused; in this case, clear the float.
Clear floating method: [x] Note: Add an empty block element (<p></p>, tag) after the element to be cleared, and add clear:both | left |right to the added empty element
13. Positioning: Orientation: left, right, top, bottom (please go to the css tutorial channel of php Chinese website for details)
Static positioning: Static positioning is the display method of the standard flow of elements. position:static; is the default positioning.
Absolute positioning: Positioning relative to the parent element or ancestor element of the positioned element. If the parent element and ancestor element do not exist, the original containing layer will be found; it does not occupy the previous position; position: absolute;
When setting absolute positioning for a single element, the positioning is set based on the upper left corner of the browser (body). When boxes are nested, if the parent box does not set positioning, the child box sets positioning based on the upper left corner of the browser. When boxes are nested, if the parent box is positioned, the child box is positioned based on the upper left corner of the parent box. Absolute positioning is set for the box, and the box does not occupy any position (off-script). After absolute positioning is set for the inline element, the element is converted into an inline block element.
Note: After the element is set to absolute positioning, the position of the element can be set arbitrarily through the specific orientation name.
Relative positioning: relative to the original position of the element, it will occupy the previous position; position: relative;
After the element is set to relative positioning, it occupies the original position. Set relative positioning with its own position as a reference. Set position. Relative positioning cannot perform mode conversion of the element.
The child must be in the same position as the parent (the child element is set to absolute positioning, and the parent element is set to relative positioning)
Fixed positioning: relative to the entire stable position; fixed positioning does not occupy position (off-label); convert inline elements into inline block elements position:fixed
Hierarchy issues:
There will be hierarchical problems only when positioning is set. There are relative, absolute and other positioning among brother elements. Whose HTML document structure is at the back and which is at the outermost layer (higher level)
Z-index: Set the level. The value is a number. As long as there is positioning, the positioning setting will be used.
14. CSS Elf Rabbit: Select transparent documents
The coordinate system point in the browser has the right direction as the positive direction, and the direction below the dot is positive. CSS sprite is a way to process the background image of the web page; the sprite is also a kind of background image.
Use of sprites
When using fw, you must open the sprite map in the open mode. When using the sprite map as a background image, it is often used in conjunction with background-position to measure the coordinates of the elements in the sprite map. Use the rectangular selector.
Or use the shortcut letter: k
15. CSS Visibility
overflow: hidden Hide the excess part display: none Hide the element directly display: block Display the element (better matched with js) visibility: hidden Hide the element display: none; Hide the element and do not occupy the position
visibility: hidden; hide the element and occupy its original position
16. Center images and text
Every inlne-block element has a default vertical-align:baseline
vertical-align:middle vertical alignment; vertical-align and inline-block are better matched;
17. Avoid the off-standard flow
In the process of web page layout, use standard flow if you can. Standard flow cannot solve floating. Floating cannot solve positioning.
Use margin-left/margin-right and set the value to auto to automatically push the box to the two outer sides.
18. Label inclusion specifications
p can contain any tag under the standard stream p tag cannot contain p and title tag and list tag title note can contain other tags
Inline elements should not contain other tags
19. Summary of setting width and height
After floating, the element can set the width and height. After absolute positioning, the element can set the width and height.
After fixed positioning, the element can set the width and height
20. Upgrade to CSS3
CSS3 and CSS2: CSS is powerful and the code is concise
Pseudo class selector:
The first child element: first-child The best element: last-child The nth child element: nth-child (n); n is an odd number for the child element: nth-child (odd); or (nth-child( 2n+1))
Even-numbered element: nth-child(even); or (nth-child(2n))
text-shadow: text-shadow: horizontal, vertical, shadow box-shadow: box-shaadow: horizontal, vertical, shadow
background: background